@jescon-technologies/react-native-ui-kit 0.0.6 → 0.0.8

package/src/Components/FilterInput.Copy.js

@@ -1,723 +0,0 @@
-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;