rifqiardian/InputModal.js

component that always needed when create project

import React, { useState, useEffect } from 'react';
import { TextInput, StyleSheet, View, Text, TouchableOpacity, Platform, FlatList } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome'
import Ionicons from 'react-native-vector-icons/Ionicons'
import Modal from 'react-native-modal';
import { color, style } from '_styles';
import Input from './Input';
import { Button } from './Button';
import { useHeaderHeight } from '@react-navigation/stack';

Icon.loadFont()

const InputModal = (props) => {

    const [modalVisible, setModalVisible] = useState(false)
    const headerHeight = useHeaderHeight();

    const handleOnSelect = () => {
        setModalVisible(false)
        setTimeout(() => {
            props.onPress()
        }, 500)
    }

    const renderHistory = ({ item }) => {
        return (
            <TouchableOpacity onPress={() => props.onChangeText(item)}>
                <Text style={styles.historyText}>{item}</Text>
            </TouchableOpacity>
        )
    }
    return (
        <>
            {
                props.label ? <Text style={styles.label}>{props.label}</Text> : null
            }
            <View style={{ flexDirection: 'row' }}>
                <TouchableOpacity style={styles.wraper} onPress={() => setModalVisible(true)}>
                    <Text style={[styles.input, { color: color.g700 }]}>{props.value}</Text>
                    <Icon name={props.icon} onPress={props.onIconPress} color={color.g400} size={18} style={styles.icon} />
                </TouchableOpacity>
            </View>
            {
                props.subtitle ? <Text style={styles.subtitle}>{props.subtitle}</Text> : null
            }
            <Modal
                isVisible={modalVisible}
                style={{ margin: 0 }}
                animationInTiming={500}
                animationOutTiming={400}
                onBackdropPress={() => setModalVisible(false)}
                onBackButtonPress={() => setModalVisible(false)}
            >
                <View style={styles.wraperModal}>
                    <View style={[styles.header, style.shadow, { height: headerHeight }]}>
                        <Ionicons name='ios-close' style={{ marginLeft: 10 }} size={38} onPress={() => setModalVisible(false)} />
                        <Text style={styles.textHeader}>{props.title}</Text>
                    </View>
                    <View style={styles.body}>
                        <Input placeholder='Masukan...' value={props.value} onChangeText={(v) => props.onChangeText(v)} keyboardType='numeric' />
                    </View>
                    <View style={styles.history}>
                        <FlatList
                            data={props.history}
                            keyExtractor={(item, index) => index.toString()}
                            renderItem={renderHistory} />
                    </View>
                    <Button title='OK' onPress={handleOnSelect} style={{ margin: 10, marginBottom: 10 }} />
                </View>
            </Modal>
        </>
    )
}

const isAndroid = Platform.OS == 'android';

const styles = StyleSheet.create({
    wraper: {
        flexDirection: 'row',
        alignItems: 'center',
        borderColor: color.g300,
        borderWidth: 1,
        borderRadius: 10,
        marginVertical: 5,
        backgroundColor: '#fff',
        flex: 1
    },
    input: {
        flex: 1,
        borderRadius: 10,
        height: 40,
        padding: 10,
    },
    icon: {
        padding: 10,
    },
    label: {
        fontSize: 12,
        fontWeight: 'bold',
        color: color.g800,
        marginTop: 5,
        marginLeft: 5
    },
    subtitle: {
        fontSize: 10,
        color: color.g500,
        marginLeft: 5
    },
    wraperModal: {
        flex: 1,
        backgroundColor: '#fff',
    },
    header: {
        backgroundColor: '#fff',
        borderBottomWidth: 1,
        borderColor: color.g300,
        padding: 10,
        paddingTop: isAndroid ? 10 : 18,
        alignItems: 'center',
        flexDirection: 'row'
    },
    body: {
        height: 58,
        backgroundColor: '#fff',
        borderBottomWidth: 1,
        borderColor: color.g300,
        padding: 10,
        alignItems: 'center',
        flexDirection: 'row'
    },
    textHeader: {
        marginLeft: 20,
        fontSize: 16,
        fontWeight: 'bold',
    },
    renderBank: {
        flexDirection: 'row',
        alignItems: 'center',
        padding: 10,
        borderBottomWidth: 1,
        borderColor: color.g300,
        backgroundColor: '#fff'
    },
    history: {
        flex: 1,
        padding: 20
    },
    historyText: {
        color: color.g800,
        fontWeight: 'bold',
        paddingVertical: 10,
        borderBottomWidth: 1,
        borderColor: color.g300
    }
})

export default InputModal