@jescon-technologies/react-native-ui-kit 0.0.4 → 0.0.5

package/src/Components/FilterInput.Copy.js

@@ -0,0 +1,723 @@
+import { View, Text, TextInput, StyleSheet, TouchableOpacity } from 'react-native';
+import React, { useContext, useRef, useState } from 'react';
+import { Icons } from '@jescon-technologies/react-native-ui-kit';;
+import DateTimePicker from '@react-native-community/datetimepicker';
+import { Menu, MenuTrigger, MenuOptions, MenuOption } from 'react-native-popup-menu';
+import moment from 'moment';
+import { normalize } from '../CommonStyle/componentStyle';
+import CDropDownList from '../CustomComponents/CDropDownList';
+import ContextBio from '../ContextAPI/ContextBio';
+
+const FilterInput = ({
+    label,
+    inputValue,
+    onChangeText,
+    btnBackgroundColor,
+    iconName,
+    iconSize,
+    iconColor,
+    btnBorderColor,
+    type,
+    selected,
+    onSelect,
+    addTextOperators,
+    addOptionsUpdate,
+    addOperatorsUpdate }) => {
+
+        const { invoiceData, setInvoiceData } = useContext(ContextBio);
+
+    const [isEditable, setIsEditable] = useState(false);
+    const [numberOperator, setNumberOperator] = useState(0);
+    const [dateOperator, setDateOperator] = useState(0);
+    const [textOperator, setTextOperator] = useState(0);
+    const [textInput, setTextInput] = useState('');
+    const [firstNumber, setFirstNumber] = useState(0);
+    const [secondNumber, setSecondNumber] = useState(0);
+    const [date, setDate] = useState(new Date());
+    const [secondDate, setSecondDate] = useState(new Date());
+    const [dateVisibility, setDateVisibility] = useState(false);
+    const [secondDateVisibility, setSecondDateVisibility] = useState(false);
+    const [option, setOption] = useState('');
+    const inputRef = useRef(null);
+    const secondNumberRef = useRef(null);
+    const menuRef = useRef(null);
+    const menuInputRef = useRef(null);
+
+    // const textOperators = {
+    //     data: {
+    //         data: [
+    //             { "datavalue": 1, "icon": '', "displayvalue": "Exact", "value": 1, "selected": false },
+    //             { "datavalue": 2, "icon": '', "displayvalue": "Like", "value": 2, "selected": false },
+    //             { "datavalue": 3, "icon": '', "displayvalue": "Middle", "value": 3, "selected": false },
+    //             { "datavalue": 4, "icon": '', "displayvalue": "Last", "value": 4, "selected": false },
+    //         ]
+    //     }
+    // };
+
+    const textOperators = [
+        { 'datavalue': 1, 'icon': '', 'displayvalue': 'Exact', 'value': 1, 'selected': false },
+        { 'datavalue': 2, 'icon': '', 'displayvalue': 'Like', 'value': 2, 'selected': false },
+        { 'datavalue': 3, 'icon': '', 'displayvalue': 'Middle', 'value': 3, 'selected': false },
+        { 'datavalue': 4, 'icon': '', 'displayvalue': 'Last', 'value': 4, 'selected': false },
+    ];
+
+    // const genderLabels = {
+    //     data: {
+    //         data: [
+    //             { "datavalue": 1, "icon": '', "displayvalue": "Male", "value": 1, "selected": false },
+    //             { "datavalue": 2, "icon": '', "displayvalue": "Female", "value": 2, "selected": false }
+    //         ]
+    //     }
+    // };
+
+    const genderLabels = [
+        { 'datavalue': 'M', 'icon': '', 'displayvalue': 'Male', 'value': 'M', 'selected': false },
+        { 'datavalue': 'F', 'icon': '', 'displayvalue': 'Female', 'value': 'F', 'selected': false },
+    ];
+
+    // const checkingOperators = {
+    //     data: {
+    //         data: [
+    //             { "datavalue": 1, "icon": '', "displayvalue": "Exact", "value": 1, "selected": false },
+    //             { "datavalue": 2, "icon": '', "displayvalue": "Less Than", "value": 2, "selected": false },
+    //             { "datavalue": 3, "icon": '', "displayvalue": "Greater Than", "value": 3, "selected": false },
+    //             { "datavalue": 4, "icon": '', "displayvalue": "Less Than or Equal to", "value": 4, "selected": false },
+    //             { "datavalue": 5, "icon": '', "displayvalue": "Greater Than or Equal to", "value": 5, "selected": false },
+    //             { "datavalue": 6, "icon": '', "displayvalue": "Between", "value": 6, "selected": false },
+    //         ]
+    //     }
+    // };
+
+    const checkingOperators = [
+        { 'datavalue': 1, 'icon': '', 'displayvalue': 'Exact', 'value': 1, 'selected': false },
+        { 'datavalue': 5, 'icon': '', 'displayvalue': 'Less Than', 'value': 5, 'selected': false },
+        { 'datavalue': 7, 'icon': '', 'displayvalue': 'Greater Than', 'value': 7, 'selected': false },
+        { 'datavalue': 8, 'icon': '', 'displayvalue': 'Less Than or Equal to', 'value': 8, 'selected': false },
+        { 'datavalue': 9, 'icon': '', 'displayvalue': 'Greater Than or Equal to', 'value': 9, 'selected': false },
+        { 'datavalue': 6, 'icon': '', 'displayvalue': 'Between', 'value': 6, 'selected': false },
+    ];
+
+    const menuOpen = () => {
+        menuRef.current.open();
+    };
+
+    const menuClose = () => {
+        menuRef.current.close();
+    };
+
+    const handleOpenMenu = () => {
+        onSelect();
+        setTimeout(() => {
+            menuInputRef.current?.focus();
+        }, 300);
+    };
+
+    const handleButtonClick = () => {
+        if (type === 'date') {
+            setDateVisibility(true);
+        } else if (type === 'number') {
+            // setIsEditable(true);
+            inputRef.current?.focus();
+        } else if (type !== 'select') {
+            // setIsEditable(true);
+            inputRef.current?.focus();
+            menuOpen();
+        } else if (type === 'select') {
+            menuOpen();
+        }
+        onSelect();
+    };
+
+    const handleNumberOperatorClick = (value) => {
+        setNumberOperator(value);
+        handleInputChange(firstNumber, secondNumber, value);
+        if (value === 6) {
+            setTimeout(() => {
+                secondNumberRef.current?.focus();
+            }, 300);
+        }
+    };
+
+    const handleTextInputChange = (text, operator) => {
+        const textInput = {
+            firstValue: text,
+            operator: operator,
+        };
+        onChangeText(textInput);
+        setTextOperator(0);
+    };
+
+    const handleDateChange = (event, selectedDate) => {
+        const currentDate = selectedDate || date;
+        setDateVisibility(false);
+        setDate(currentDate);
+        handleDateInputChange(currentDate, secondDate, dateOperator);
+    };
+
+    const handleSecondDateChange = (event, selectedDate) => {
+        const currentDate = selectedDate || secondDate;
+        setSecondDateVisibility(false);
+        setSecondDate(currentDate);
+        handleDateInputChange(date, currentDate, dateOperator);
+    };
+
+    const handleDateOperatorClick = (value) => {
+        setDateOperator(value);
+        handleDateInputChange(date, secondDate, value);
+        if (value === 6) {
+            setSecondDateVisibility(true);
+        }
+    };
+
+    const getValues = (firstValue, secondValue, operator) => {
+        if (operator === 6) {
+            return { firstValue, operator, secondValue };
+        }
+        return { firstValue, operator, secondValue };
+    };
+
+    const handleInputChange = (firstValue, secondValue, operator) => {
+        const numberArray = getValues(firstValue, secondValue, operator);
+        onChangeText(numberArray);
+    };
+
+    const handleDateInputChange = (firstValue, secondValue, operator) => {
+        const dateArray = getValues(firstValue, secondValue, operator);
+        onChangeText(dateArray);
+    };
+
+    // const handleOpenDropdown = async () => {
+    //     if (options.length === 0) {
+    //         await selectOptionsApi();
+    //     }
+    // };
+
+    // const handleOperatorsDropdown = async () => {
+    //     if (operators.length === 0) {
+    //         await operatorsApi();
+    //     }
+    // };
+
+    // const handleTextOperatorsDropDown = async () => {
+    //     if (operators.length === 0) {
+    //         await textOperatorsApi();
+    //     }
+    // }
+
+    const handleSelectChange = (value) => {
+        const data = {
+            firstValue: value,
+        };
+        onChangeText(data);
+    };
+
+    const renderInputField = () => {
+        switch (type) {
+            case 'text':
+                return (
+                    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                        <Menu ref={menuRef} onOpen={handleOpenMenu}>
+                            <MenuTrigger>
+                                <View style={styles.input}>
+                                    <Text style={{ paddingVertical: 10, color: 'gray' }}>{inputValue.firstValue || label}</Text>
+                                </View>
+                            </MenuTrigger>
+                            <MenuOptions>
+                                <View style={{ width: '100%', padding: 10 }}>
+                                    <TextInput
+                                        ref={menuInputRef}
+                                        style={[styles.menuInput]}
+                                        placeholder={label}
+                                        placeholderTextColor="gray"
+                                        onChangeText={(value) => {
+                                            setTextInput(value);
+                                            handleTextInputChange(value, textOperator);
+                                            setInvoiceData(prevState => ({
+                                                ...prevState,
+                                                EditStatus: true,
+                                            }));
+
+                                        }}
+                                        value={inputValue.firstValue}
+                                        onSubmitEditing={menuClose}
+                                    />
+                                </View>
+                            </MenuOptions>
+                        </Menu>
+                        {/* <TouchableOpacity
+                            onPress={handleTextOperatorsDropDown}>
+                            <Picker
+                                selectedValue={textOperator}
+                                onValueChange={(value) => {
+                                    setTextOperator(value);
+                                    handleTextInputChange(textInput, value);
+                                }}
+                                style={styles.operatorPicker}
+                            >
+                                {operators.map((operator, index) => (
+                                    <Picker.Item key={operator?.label + index} label={operator?.label} value={operator?.value} />
+                                ))}
+                            </Picker>
+                        </TouchableOpacity> */}
+                        <Menu>
+                            <MenuTrigger
+                                customStyles={{
+                                    triggerWrapper: {
+                                        borderWidth: 0,
+                                        width: normalize(25),
+                                        justifyContent: 'center',
+                                        alignItems: 'center',
+                                        // height: '100%'
+                                    },
+                                }}
+                            >
+                                <Icons.FontAwesome5 name="chevron-down" size={14} color="gray" />
+                            </MenuTrigger>
+                            <MenuOptions>
+                                <CDropDownList
+                                    dropdownarray={textOperators}
+                                    callback={(val) => {
+                                        addTextOperators(val);
+                                        setTextOperator(val.datavalue);
+                                        handleTextInputChange(textInput, val.datavalue);
+                                        setInvoiceData(prevState => ({
+                                            ...prevState,
+                                            EditStatus: true,
+                                        }));
+                                    }}
+                                />
+                            </MenuOptions>
+                        </Menu>
+                    </View>
+                );
+            case 'mobile':
+                return (
+                    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                        <Menu ref={menuRef} onOpen={handleOpenMenu}>
+                            <MenuTrigger>
+                                <View style={styles.input}>
+                                    <Text style={{ paddingVertical: 10, color: 'gray' }}>{inputValue.firstValue || label}</Text>
+                                </View>
+                            </MenuTrigger>
+                            <MenuOptions>
+                                <View style={{ width: '100%', padding: 10 }}>
+                                    <TextInput
+                                        ref={menuInputRef}
+                                        style={styles.menuInput}
+                                        placeholder={label}
+                                        placeholderTextColor="gray"
+                                        onChangeText={(value) => {
+                                            setTextInput(value);
+                                            handleTextInputChange(value, textOperator);
+                                            setInvoiceData(prevState => ({
+                                                ...prevState,
+                                                EditStatus: true,
+                                            }));
+                                        }}
+                                        value={inputValue.firstValue}
+                                        keyboardType={type === 'mobile' ? 'phone-pad' : 'default'}
+                                        onSubmitEditing={menuClose}
+                                    />
+                                </View>
+                            </MenuOptions>
+                        </Menu>
+                        {/* <TouchableOpacity
+                            onPress={handleTextOperatorsDropDown}>
+                            <Picker
+                                selectedValue={textOperator}
+                                onValueChange={(value) => {
+                                    setTextOperator(value);
+                                    handleTextInputChange(textInput, value);
+                                }}
+                                style={styles.operatorPicker}
+                            >
+                                {operators.map((operator, index) => (
+                                    <Picker.Item key={operator?.label + index} label={operator?.label} value={operator?.value} />
+                                ))}
+                            </Picker>
+                        </TouchableOpacity> */}
+                        <Menu>
+                            <MenuTrigger
+                                customStyles={{
+                                    triggerWrapper: {
+                                        borderWidth: 0,
+                                        width: normalize(25),
+                                        justifyContent: 'center',
+                                        alignItems: 'center',
+                                        // height: '100%'
+                                    },
+                                }}
+                            >
+                                <Icons.FontAwesome5 name="chevron-down" size={14} color="gray" />
+                            </MenuTrigger>
+                            <MenuOptions>
+                                {/* {operators.map((operator, index) => (
+                                    <MenuOption
+                                        key={operators?.label + index}
+                                        onSelect={() => {
+                                            setTextOperator(operator?.value);
+                                            handleTextInputChange('', operator?.value);
+                                        }}
+                                    >
+                                        <Text>{operator?.label}</Text>
+                                    </MenuOption>
+                                ))} */}
+                                <CDropDownList
+                                    dropdownarray={textOperators}
+                                    // callback={val => val == undefined ? null : (fnFilesFunction(val))}
+                                    callback={(val) => {
+                                        addTextOperators(val);
+                                        setTextOperator(val.datavalue);
+                                        handleTextInputChange(textInput, val.datavalue);
+                                        setInvoiceData(prevState => ({
+                                            ...prevState,
+                                            EditStatus: true,
+                                        }));
+                                    }}
+                                />
+                            </MenuOptions>
+                        </Menu>
+                    </View>
+                );
+            case 'number':
+                return (
+                    <View style={[styles.inputContainer, { marginTop: 0 }]}>
+                        {/* First age */}
+                        <View>
+                            <TextInput
+                                ref={inputRef}
+                                style={styles.ageInput}
+                                placeholder={label}
+                                keyboardType="numeric"
+                                value={firstNumber}
+                                placeholderTextColor="gray"
+                                onChangeText={(value) => {
+                                    setFirstNumber(value);
+                                    handleInputChange(value, secondNumber, numberOperator);
+                                    onSelect();
+                                    setInvoiceData(prevState => ({
+                                        ...prevState,
+                                        EditStatus: true,
+                                    }));
+                                }}
+                            />
+                        </View>
+                        {/* Operator */}
+                        {/* <TouchableOpacity onPress={handleOperatorsDropdown}>
+                            <Picker
+                                selectedValue={numberOperator}
+                                onValueChange={(value) => handleNumberOperatorClick(value)}
+                                style={styles.operatorPicker}
+                            >
+                                {operators.map((operator, index) => (
+                                    <Picker.Item key={operator?.label + index} label={operator?.label} value={operator?.value} />
+                                ))}
+                            </Picker>
+                        </TouchableOpacity> */}
+                        <Menu>
+                            <MenuTrigger
+                                customStyles={{
+                                    triggerWrapper: {
+                                        borderWidth: 0,
+                                        width: normalize(25),
+                                        justifyContent: 'center',
+                                        alignItems: 'center',
+                                        // height: '100%'
+                                    },
+                                }}
+                            >
+                                <Icons.FontAwesome5 name="chevron-down" size={14} color="gray" />
+                            </MenuTrigger>
+                            <MenuOptions>
+                                <CDropDownList
+                                    dropdownarray={checkingOperators}
+                                    callback={(val) => {
+                                        addOperatorsUpdate(val);
+                                        handleNumberOperatorClick(val.datavalue);
+                                        setInvoiceData(prevState => ({
+                                            ...prevState,
+                                            EditStatus: true,
+                                        }));
+                                    }}
+                                />
+                            </MenuOptions>
+                        </Menu>
+                        {/* Second age */}
+                        {
+                            numberOperator === 6 && <View>
+                                <TextInput
+                                    ref={secondNumberRef}
+                                    style={styles.ageInput}
+                                    placeholder={label}
+                                    keyboardType="numeric"
+                                    value={secondNumber}
+                                    placeholderTextColor="gray"
+                                    onChangeText={(value) => {
+                                        setSecondNumber(value);
+                                        handleInputChange(firstNumber, value, numberOperator);
+                                    }}
+                                />
+                            </View>
+                        }
+                    </View>
+                );
+            case 'select':
+                return (
+                    // <TouchableOpacity style={[styles.input, { justifyContent: 'center', paddingHorizontal: 0, width: 115 }]}
+                    //     onPress={handleOpenDropdown}>
+                    //     <Picker
+                    //         selectedValue={inputValue}
+                    //         onValueChange={onChangeText}
+                    //         style={{ width: '100%' }}
+                    //     >
+                    //         {options.map((option, index) => (
+                    //             <Picker.Item key={option?.label + index} label={option?.label} value={option?.value} />
+                    //         ))}
+                    //     </Picker>
+                    // </TouchableOpacity>
+                    <View style={[styles.input, { alignItems: 'center', width: 115, flexDirection: 'row', justifyContent: 'space-between' }]}>
+                        <Text style={{ color: 'gray' }}>{option ? option : 'Select'}</Text>
+                        <Menu ref={menuRef}>
+                            <MenuTrigger
+                                customStyles={{
+                                    triggerWrapper: {
+                                        borderWidth: 0,
+                                        width: normalize(25),
+                                        justifyContent: 'center',
+                                        alignItems: 'center',
+                                        // height: '100%'
+                                    },
+                                }}
+                            >
+                                <Icons.FontAwesome5 name="chevron-down" size={14} color="gray" />
+                            </MenuTrigger>
+                            <MenuOptions>
+                                <CDropDownList
+                                    dropdownarray={genderLabels}
+                                    callback={(val) => {
+                                        handleSelectChange(val.value);
+                                        addOptionsUpdate(val);
+                                        setOption(val.displayvalue);
+                                        onSelect();
+                                        setInvoiceData(prevState => ({
+                                            ...prevState,
+                                            EditStatus: true,
+                                        }));
+                                    }}
+                                />
+                            </MenuOptions>
+                        </Menu>
+                    </View>
+                );
+            case 'date':
+                return (
+                    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                        {/* Date Input */}
+                        <TouchableOpacity onPress={() => {
+                            setDateVisibility(true);
+                            onSelect();
+                            setInvoiceData(prevState => ({
+                                ...prevState,
+                                EditStatus: true,
+                            }));
+                        }}>
+                            <TextInput
+                                style={styles.dateInput}
+                                placeholder={label}
+                                placeholderTextColor="gray"
+                                value={moment(date).format('DD-MM-YYYY')}
+                                editable={false}
+                            />
+                        </TouchableOpacity>
+                        {/* Date Picker */}
+                        {dateVisibility && (
+                            <DateTimePicker
+                                value={date}
+                                mode="date"
+                                display="default"
+                                onChange={handleDateChange}
+                            />
+                        )}
+                        {/* <TouchableOpacity
+                            onPress={handleOperatorsDropdown}>
+                            <Picker
+                                selectedValue={dateOperator}
+                                onValueChange={handleDateOperatorClick}
+                                style={styles.operatorPicker}
+                            >
+                                {operators.map((operator, index) => (
+                                    <Picker.Item key={operator?.label + index} label={operator?.label} value={operator?.value} />
+                                ))}
+                            </Picker>
+                        </TouchableOpacity> */}
+
+                        <Menu>
+                            <MenuTrigger
+                                customStyles={{
+                                    triggerWrapper: {
+                                        borderWidth: 0,
+                                        width: normalize(25),
+                                        justifyContent: 'center',
+                                        alignItems: 'center',
+                                        // height: '100%'
+                                    },
+                                }}
+                            >
+                                <Icons.FontAwesome5 name="chevron-down" size={14} color="gray" />
+                            </MenuTrigger>
+                            <MenuOptions>
+                                <CDropDownList
+                                    dropdownarray={checkingOperators}
+                                    // callback={val => val == undefined ? null : (fnFilesFunction(val))}
+                                    callback={(val) => {
+                                        addOperatorsUpdate(val);
+                                        handleDateOperatorClick(val.datavalue);
+                                        // handleTextInputChange(textInput, val.datavalue);
+                                        setInvoiceData(prevState => ({
+                                            ...prevState,
+                                            EditStatus: true,
+                                        }));
+                                    }}
+                                />
+                            </MenuOptions>
+                        </Menu>
+
+
+                        {/* Second Date Input for non-equal operators */}
+                        {/* {dateOperator !== '=' && (
+                            <TouchableOpacity onPress={() => setSecondDateVisibility(true)}>
+                                <TextInput
+                                    style={styles.dateInput}
+                                    placeholder="Select second date"
+                                    value={secondDate.toISOString().split('T')[0]}
+                                    editable={false}
+                                />
+                            </TouchableOpacity>
+                        )} */}
+                        {/* Second Date Picker */}
+                        {secondDateVisibility && (
+                            <DateTimePicker
+                                value={secondDate}
+                                mode="date"
+                                display="default"
+                                onChange={handleSecondDateChange}
+                            />
+                        )}
+                    </View>
+                );
+            default:
+                return null;
+        }
+    };
+
+    return (
+        <View style={styles.container}>
+            {/* Custom button */}
+            <TouchableOpacity onPress={handleButtonClick} style={[styles.button,
+            { backgroundColor: btnBackgroundColor ? btnBackgroundColor : '', borderColor: selected ? '#0288d1' : (btnBorderColor ? btnBorderColor : '#094485') }]}>
+                {/* Custom icon */}
+                <Icons.FontAwesome5
+                    name={iconName != undefined ? iconName : 'file'}
+                    size={iconSize != undefined ? iconSize : 14}
+                    color={selected ? '#0288d1' : (iconColor != undefined ? iconColor : '#094485')}
+                />
+
+                <Text numberOfLines={1} style={[styles.buttonText, { color: selected ? '#0288d1' : '#094485' }]}>{label}</Text>
+            </TouchableOpacity>
+            {/* Input Box */}
+            <View style={styles.inputContainer}>
+                {renderInputField()}
+            </View>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        marginVertical: normalize(5),
+        width: 115,
+        alignSelf: 'center',
+        height: 95,
+        marginHorizontal: 5,
+    },
+    button: {
+        // backgroundColor: '#0317ab',
+        paddingVertical: 5,
+        paddingHorizontal: 15,
+        borderRadius: 8,
+        alignItems: 'center',
+        borderWidth: 1,
+        borderColor: '#094485',
+        height: 50,
+        // shadowColor: '#000',
+        // shadowOffset: { width: 0, height: 2 },
+        // shadowOpacity: 0.2,
+        // shadowRadius: 4,
+        // elevation: 3,
+    },
+    buttonText: {
+        color: '#094485',
+        fontSize: 12,
+        fontWeight: '400',
+    },
+    inputContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginTop: normalize(5),
+    },
+    input: {
+        height: 40,
+        borderColor: '#ccc',
+        borderWidth: 1,
+        borderRadius: 8,
+        paddingHorizontal: 10,
+        width: 85,
+        // width: '100%',
+        backgroundColor: 'white',
+        // flex: 1,
+        justifyContent: 'center',
+        overflow: 'hidden',
+    },
+    menuInput: {
+        height: 40,
+        borderColor: '#ccc',
+        borderWidth: 1,
+        borderRadius: 8,
+        paddingHorizontal: 10,
+        // width: 85,
+        // width: '100%',
+        backgroundColor: 'white',
+        color: 'gray',
+        // flex: 1,
+    },
+    ageInput: {
+        height: 40,
+        borderColor: '#ccc',
+        borderWidth: 1,
+        borderRadius: 8,
+        paddingHorizontal: 8,
+        width: 40,
+        backgroundColor: 'white',
+        color: 'gray',
+    },
+    operatorPicker: {
+        height: 40,
+        width: 40,
+    },
+    dateInput: {
+        height: 40,
+        borderColor: '#ccc',
+        borderWidth: 1,
+        borderRadius: 8,
+        paddingHorizontal: 5,
+        width: 82,
+        color: 'gray',
+        // marginTop: 10,
+        // flex: 1,
+    },
+    selectedInput: {
+        borderColor: '#0288d1',
+    },
+});
+
+export default FilterInput;