rifqiardian/Filter.js

component that always needed when create project

import React, { useState } from 'react'
import { Text, View, TouchableWithoutFeedback, FlatList, StyleSheet, Platform, TouchableHighlight } from 'react-native'
import Icon from 'react-native-vector-icons/Ionicons'
import { color, style } from '_styles'
import Modal from 'react-native-modal';
import { isIphoneX } from 'react-native-iphone-x-helper';
import { Button, Divider, Input } from '_atoms'

const Filter = (props) => {

    const [modalVisible, setModalVisible] = useState(false)
    const [key, setKey] = useState('')
    const [selected, setSelected] = useState(props.value)
    const { iconSize, itemColor, borderColor } = props

    const handleOnSelect = () => {
        setModalVisible(false)
        props.onSelect(selected)
    }

    const renderData = ({ item, index }) => {
        const curent = selected.etalase_name
        const value = item.etalase_name
        const isSelected = value == curent
        return (
            <TouchableHighlight underlayColor='transparent' onPress={() => setSelected(item)}>
                <View style={styles.renderFilter}>
                    <Text style={{ marginLeft: 10, color: isSelected ? color.primary : color.g700, fontWeight: isSelected ? 'bold' : 'normal' }}>{item.label ?? item.etalase_name}</Text>
                    {
                        isSelected && <Icon name='checkmark' color={color.primary} size={18} />
                    }
                </View>
            </TouchableHighlight>
        )
    }

    return (
        <View style={{ padding: 16, paddingVertical: 10, flexDirection: 'row' }}>
            <TouchableWithoutFeedback onPress={() => setModalVisible(true)}>
                <View style={{ padding: 8, borderWidth: 1, borderColor:props.value.etalase_name ? color.primary : borderColor ?? color.g300, flexDirection: 'row', borderRadius: 10, alignItems: 'center' }}>
                    {
                        props.iconLeft && <Icon name={props.iconLeft} size={iconSize ?? 18} color={props.value.etalase_name ? color.primary : itemColor ?? color.g700} style={{ paddingRight: 4 }} />
                    }
                    <Text style={{ color: props.value.etalase_name ? color.primary : itemColor ?? color.g700 }}>{props.value.etalase_name ?? props.title}</Text>
                    {
                        props.iconRight && <Icon name={props.iconRight} size={iconSize ?? 18} color={props.value.etalase_name ? color.primary : itemColor ?? color.g700} style={{ paddingLeft: 4 }} />
                    }
                </View>
            </TouchableWithoutFeedback>

            <Modal
                isVisible={modalVisible}
                style={{ margin: 0 }}
                animationIn='slideInRight'
                animationOut='slideOutRight'
                animationInTiming={500}
                animationOutTiming={400}
                onBackdropPress={() => setModalVisible(false)}
                onBackButtonPress={() => setModalVisible(false)}
            >

                <View style={styles.wraperModal}>
                    <View style={[styles.header, style.shadow]}>
                        <Icon name='close-outline' size={32} onPress={() => setModalVisible(false)} />
                        <Text style={styles.textHeader}>{props.title}</Text>
                    </View>
                    <View style={{ padding: 10 }}>
                        <Input placeholder='Cari...' onChangeText={(v) => setKey(v)} iconLeft='search' />
                    </View>
                    <FlatList
                        data={props.data}
                        keyExtractor={(item, index) => index.toString()}
                        renderItem={renderData}
                        // ListEmptyComponent={handleEmpty}
                        onRefresh={props.onRefresh}
                        refreshing={props.refreshing}
                    />
                    <Button title='Pilih' onPress={handleOnSelect} style={{ margin: 10, marginBottom: 10 }} />
                </View>
            </Modal>
        </View>
    )
}

const styles = StyleSheet.create({
    wraperModal: {
        flex: 1,
        backgroundColor: '#fff',
    },
    header: {
        height: Platform.OS == 'ios' ? isIphoneX() ? 93 : 73 : 58,
        backgroundColor: '#fff',
        borderBottomWidth: 1,
        borderColor: color.g300,
        padding: 10,
        paddingTop: Platform.OS == 'ios' ? isIphoneX() ? 30 : 25 : 5,
        alignItems: 'center',
        flexDirection: 'row'
    },
    textHeader: {
        marginLeft: 20,
        fontSize: 16,
        fontWeight: 'bold',
    },
    renderFilter: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: 10,
        borderBottomWidth: 1,
        borderColor: color.g300,
        backgroundColor: '#fff'
    }
})

export {
    Filter
}