aretherecookies-mobile/js/modals/FoodItemNameModal.js

// @flow
import React, { Component } from 'react';
import { TouchableOpacity, View, ScrollView } from 'react-native';
import { TextButton } from './Modal';
import FoodItemList from '../components/FoodItemList';
import FoodItemRecord from '../records/FoodItemRecord';
import { StrongText } from '../components/ItemTile';
import { Toolbar } from 'react-native-material-ui';

class NameModal extends Component {
	static displayName = 'NameModal';

	props: {
		onClose: () => void,
		onUpdate: (name: string) => void,
	};

	state: {
		text: string,
	};

	state = {
		text: '',
	};

	save = () => {
		this.props.onUpdate(this.state.text);
		this.props.onClose();
	};

	setText = (text: string) => {
		this.setState({ text });
	};

	updateAndClose = (text: string) => {
		this.props.onUpdate(text);
		this.props.onClose();
	};

	renderFoodItem = (foodItem: typeof FoodItemRecord) => (
		<TouchableOpacity key={foodItem.id} onPress={() => this.updateAndClose(foodItem.name)}>
			<StrongText style={{ paddingTop: 20, paddingBottom: 20 }}>{foodItem.name}</StrongText>
		</TouchableOpacity>
	);

	render() {
		const { onClose } = this.props;
		const { text } = this.state;
		return (
			<View
				style={{
					position: 'absolute',
					top: 0,
					bottom: 0,
					left: 0,
					right: 0,
				}}>
				<Toolbar
					leftElement="arrow-back"
					onLeftElementPress={onClose}
					searchable={{
						autoFocus: false,
						placeholder: 'Search',
						onChangeText: this.setText,
						onSearchClosed: onClose,
					}}
					isSearchActive={true}
					style={{
						container: {
							elevation: 3,
						},
					}}
				/>
				{!!text && (
					<TextButton
						text="Not here, it's a new product"
						onPress={this.save}
						style={{ marginLeft: 66 }}
					/>
				)}
				<ScrollView style={{ paddingLeft: 78 }}>
					<FoodItemList filter={text} limit={10} renderFoodItem={this.renderFoodItem} />
				</ScrollView>
			</View>
		);
	}
}

export default NameModal;