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

package/src/Components/SDropDownEdited.js

@@ -0,0 +1,549 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { TouchableOpacity, StyleSheet, View, Dimensions, Text, Image, TextInput, ScrollView, FlatList } from 'react-native';
+import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
+import ComponentStyles, { normalize } from '../CommonStyle/componentStyle';
+import popupStyles, {
+    getListviewItem,
+    getListviewItemText,
+} from '../CommonStyle/PopupStyle';
+import { APIURL } from '../../../../../src/Common/apiConstants';
+import AntDesign from 'react-native-vector-icons/AntDesign';
+import SAlphabet from '../StaticComponents/SAlphabet';
+import Icons, { MaterialCommunityIcons } from '../Common/Icons';
+import { NetworkServiceCall } from '@jescon-technologies/react-native-ui-kit';
+import SearchLoader from '../Custom/SearchLoader';
+import { isBNU, isBNUL, isNU, isNUL } from '../CommonStyle/ComponentFunctions';
+import { Global } from '../../../../../src/Common/Global';
+import { Menu, MenuOptions, MenuTrigger } from 'react-native-popup-menu';
+import HOCIcons from '../HOC/HOCIcons';
+import CText from '../CustomComponents/CText';
+import SHelpDescription from './SHelpDescription';
+import CModalOverlay from '../CustomComponents/CModalOverlay';
+
+var searchResult = [];
+var tempvalue = [];
+var ValueString = null;
+const SDropDownEdited = (props) => {
+    const [isdropdownshow, setDropdownShow] = useState(false);
+    const [searchData, setSearchData] = useState('');
+    const [isLoading, setIsLoading] = useState(true);
+    const [selectedValue, setSelectedValue] = useState(props.value);
+    const [displayData, setDisplayData] = useState([]);
+    const [stage, setStage] = useState(false);
+    const [refresh, setRefresh] = useState(0);
+    const [filterPurpose, setFilterPurpose] = useState([]);
+    const [alphaFilter, setAlphaFilter] = useState(false);
+    const [dropdowndata, setDropDownData] = useState(props.dropdowndata);
+    const dynamicMenuRef = useRef(null);
+    const [data, setData] = useState(props.data ? props.data : null);
+
+    useEffect(() => {
+        isBNU(props.overlay) && props.overlay == true ? FetchDropdownList() : null;
+    }, [props.overlay]);
+
+    function getOverlayScreenContainer() {
+        return ({
+            flexDirection: 'row',
+            margin: 10,
+        });
+    }
+
+
+    useEffect(() => {
+        setAlphaFilter(false);
+    });
+
+    // console.log("DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD",dropdowndata)
+    function FetchDropdownList(key) {
+        const updatedApiUrl = props.dropdownPort ? '' : APIURL;
+        setSearchData('');
+        setIsLoading(true);
+        setDropdownShow(true);
+        // console.log("SDROPDOWNLINK___________________", "get", APIURL + props.dropdownapi, "")
+        NetworkServiceCall('get', updatedApiUrl + props.dropdownapi, '')
+            .then(function (response) {
+                console.log('updatedUrl', updatedApiUrl + props.dropdownapi);
+                // console.log('Responseeeeeeeeeeeeeeeeeeeeeeeeee', JSON.stringify(response.data.data))
+                // console.log("SDROPDOWN_________________DATA___________", response)
+                searchResult = response;
+                if (response.data.data != null && response.data.data != undefined) {
+
+                    // console.log('arrayyyyyyyyyyyyyyy', JSON.stringify(props.multidropdownarray))
+                    if (props.iconOnly && props.multiselect) {
+                        if (isBNUL(props.multidropdownarray) && isBNUL(response.data.data)) {
+
+                            var results = response.data.data.map((item) => {
+                                // Find the matching `xxx` object from `props.multidropdownarray`
+                                const matchingXxx = props.multidropdownarray.find((xxx) => item.sudynamiccriteriadatavalue === xxx.sudynamiccriteriadatavalue);
+
+                                // If a match is found, update `item` with all properties from `matchingXxx`
+                                if (matchingXxx) {
+                                    return { ...item, ...matchingXxx };  // Merge properties of `item` and `matchingXxx`
+                                }
+
+                                // If no match is found, return the original `item`
+                                return item;
+                            });
+
+
+
+
+
+
+                            // var results = response.data.data.map((item) => {
+                            //     props.multidropdownarray.map((xxx) => {
+                            //         if (item.sudynamiccriteriadatavalue == xxx.sudynamiccriteriadatavalue) {
+
+                            //             item.selected = xxx.selected,
+
+
+                            //         }
+                            //     })
+                            // })
+                        }
+                        else {
+                            var results = response.data.data;
+                        }
+
+
+
+                        console.log('response.data.data #################', JSON.stringify(results));
+                        setDisplayData(results);
+                        setIsLoading(false);
+
+
+
+                    }
+                    else {
+                        if (props.selectedval != undefined && props.selectedval != null && props.selectedval.length > 0) {
+
+
+                            var results = response.data.data.map((item) => {
+
+
+
+                                props.selectedval.map((xxx) => {
+                                    if (item.sudynamiccriteriadatavalue == xxx) {
+                                        item.selected = true;
+                                    }
+                                });
+                            });
+                        }
+
+                        console.log('response.data.data #################', JSON.stringify(results));
+                        setDisplayData(response.data.data);
+                        setIsLoading(false);
+
+
+                    }
+
+
+
+
+
+                }
+                else {
+                    searchResult = [];
+                    setDisplayData([]);
+                    setIsLoading(false);
+                }
+            });
+    }
+
+    function FetchList() {
+        setSearchData('');
+        setIsLoading(true);
+        setDropdownShow(true);
+        searchResult = { 'httpstatus': 200 };
+        setDisplayData(props.dropdownarray);
+        setIsLoading(false);
+    }
+
+    function selection(item, changevalue, keycode) {
+        console.log('DROP DOWN DETAILCODE-----------------------', item);
+        let dataset = {
+            ...item,
+            // "sudynamiccriteriadatavalue": item.sudynamiccriteriadatavalue,
+            // "columnname": item.columnname,
+            // "detailcode": item.detailcode,
+            // "color": item.color,
+            // "searchparam": item.searchparam,
+            // "jasperfilename":item.jasperfilename,
+            // "reporttype":item.reporttype,
+            // "key": keycode,
+            // "item": item
+        };
+        setDropDownData(item.columnname);
+        props.onChangeData(dataset);
+        props.refreshCount(1);
+        // props.editStatus(1)
+        setDropdownShow(false);
+        if (props.setOverlay) {
+            props.setOverlay(false);
+        }
+    }
+
+    function DropdownLayout() {
+        return (
+            <View style={layoutstyles.overlay_screen_container}>
+                <View style={{ alignItems: 'center' }}>
+                    <Text style={{ fontSize: normalize(12), fontWeight: 'bold', color: 'darkblue' }}>{isNU(data) && data.displaytext != undefined ? data.displaytext.toUpperCase() : ' SELECT OPTION '}</Text>
+                </View>
+
+                <View style={getOverlayScreenContainer()}>
+                    <View
+                        style={[ComponentStyles.searchTextbox_View,
+                        layoutstyles.overlay_searchTextbox_View,
+                        ]}
+                    >
+                        <View style={layoutstyles.textinput_view}>
+                            <TextInput
+                                style={[ComponentStyles.searchTextbox]}
+                                editable={true}
+                                autoCapitalize={'characters'}
+                                value={searchData}
+                                onChangeText={text => setSearchData(text)}
+                                secureTextEntry={false}
+                                keyboardType={'default'}
+                                placeholder="Search"
+                            />
+
+                        </View>
+                        <Image style={[ComponentStyles.searchIcon]}
+                            source={{ uri: 'https://i.ibb.co/j8ywYpJ/search.png' }}
+                        />
+
+                    </View>
+                </View>
+
+                <View style={getOverlayScreenChildcontainer()}>
+                    {GetDropdown(alphaFilter ? filterPurpose : displayData)}
+                </View>
+
+                {props.multiselect != undefined && props.multiselect
+                    ?
+                    <TouchableOpacity style={{ justifyContent: 'center', borderRadius: 10, alignItems: 'center', paddingHorizontal: normalize(10) }}
+                        onPress={() => getMultiSelect()}
+                    >
+                        <View style={{
+                            flexDirection: 'column',
+                            backgroundColor: '#f7f4f4', borderRadius: 10,
+                            paddingHorizontal: normalize(15),
+                            paddingVertical: normalize(5),
+                            alignItems: 'center',
+                        }}>
+                            <AntDesign name="select1"
+                                color={'#094485'} size={normalize(20)} />
+
+                            <Text
+                                style={{
+                                    fontSize: normalize(11),
+                                    color: '#094485',
+                                    fontWeight: 'bold',
+                                }}>
+                                {' '}
+                                Select
+                            </Text>
+                        </View>
+                    </TouchableOpacity> : null}
+            </View>
+        );
+    }
+
+    function getMultiSelect(params) {
+        // console.log('DISPLAYDATA @@@@@@@@@@@@@@@@', displayData)
+        var filterArray = displayData.filter((element) => element.selected == true);
+        var display = filterArray != undefined &&
+            filterArray.length > 0 ? filterArray.map((item) => item.columnname) : null;
+
+        setDropDownData(display.join());
+        props.onChangeData(filterArray);
+        setDropdownShow(false);
+        if (props.setOverlay) {
+            props.setOverlay(false);
+        }
+    }
+
+    function getOverlayChildrenWrapperStyle() {
+        return ({
+            position: 'absolute',
+            bottom: 0,
+            top: Dimensions.get('screen').height * 0.17,
+            width: Dimensions.get('screen').width,
+            borderRadius: 20,
+            borderWidth: 2,
+            borderColor: '#e0e0e0',
+            paddingHorizontal: normalize(5),
+        });
+    }
+
+
+    function getAlphabetData(alpha, index) {
+        var filter = isBNUL(displayData) ? displayData.filter(value => (value.columnname != undefined ? value.columnname : '').charAt(0) == alpha) : [];
+        setFilterPurpose(filter);
+        index == 0 ? setSearchData('') : setSearchData(alpha);
+        index == 0 ? setAlphaFilter(false) : setAlphaFilter(true);
+    }
+
+    // console.log("TEXT-------------------------",data)
+
+    return (
+        <View style={{ width: props.widthArr ? props.widthArr : '100%', borderWidth: 0 }}>
+            {isNU(data) && data.displaytext != undefined && props.iconOnly == undefined ?
+                <Text style={{ fontSize: normalize(11), color: 'black', paddingHorizontal: normalize(5), height: normalize(15) }}>
+                    {data.required == true ?
+                        <Text style={{ color: 'red', fontSize: normalize(13), fontWeight: 'bold' }}>* </Text> : null}
+                    {data.displaytext}
+                </Text> : null}
+            {/* <Text>DDDDDDDDDDDDDD</Text> */}
+
+            <TouchableOpacity
+                onPress={() => (Global.HelpId = props.columnid, props.editable ? FetchDropdownList() : FetchList())}
+                disabled={props.disabled ? props.disabled : false}
+                // onLongPress={() => props.LongPress ? setStage(true) : null}
+                style={{
+                    borderWidth: props.borderWidth ? 0 : 1, borderColor: 'lightgrey'
+                    , paddingLeft: 2, alignItems: 'center', paddingRight: 15, elevation: 0,
+                    backgroundColor: props.backgroundColor != undefined ? props.backgroundColor : '#fff',
+                    height: props.heightArr ? props.heightArr : Dimensions.get('screen').height * 0.040,
+                    flexDirection: 'row', borderRadius: props.borderRadiusArr ? props.borderRadiusArr : 5,
+                    borderColor: props.borderArr ? props.borderArr : 'lightgrey',
+                }}
+
+            >
+
+
+                {props.iconOnly == undefined && props.iconName != undefined || props.icon != undefined ?
+
+                    <Menu ref={dynamicMenuRef}>
+                        <MenuTrigger
+                            disabled={false}
+                            customStyles={{ triggerWrapper: { borderWidth: 0, borderRadius: 10, elevation: 0 } }}
+                        >
+                            <TouchableOpacity disabled={true} style={{ width: normalize(22), paddingLeft: normalize(3) }}>
+                                {props.iconName != undefined ? <FontAwesome5 name={props.iconName} color=
+                                    {props.flagData == 1 ? 'darkblue' : '#094485'}
+                                    size={props.iconSize != undefined ? normalize(props.iconSize) : normalize(15)} /> : null}
+                                {props.icon != undefined ?
+                                    <MaterialCommunityIcons name={props.icon} color=
+                                        {props.flagData == 1 ? 'darkblue' : '#094485'}
+                                        size={normalize(20)} /> : null}
+
+                            </TouchableOpacity>
+                        </MenuTrigger>
+                        <MenuOptions optionsContainerStyle={{ marginTop: normalize(25), marginLeft: 0, width: props.widthArr }}>
+                            {props.columnid != undefined ? <SHelpDescription column={props.columnid != undefined ? props.columnid : 0} /> : null}
+                        </MenuOptions>
+                    </Menu>
+                    : null}
+                {props.iconOnly != true ?
+                    <View style={{ position: 'absolute', bottom: 0, right: 3 }}>
+                        <Text adjustsFontSizeToFit numberOfLines={3}
+                            style={{ fontSize: props.fontSize ? props.fontSize : normalize(11), alignSelf: 'flex-start', fontWeight: 'bold', width: parseFloat(props.widthArr) - normalize(10) + '%' }} >
+                            {props.cornerKey != null && props.cornerKey != undefined && typeof props.cornerKey === 'string' ? props.cornerKey : ''}</Text>
+                    </View>
+                    : null}
+                {props.iconOnly != true ?
+                    <View style={{ alignItems: 'center', paddingRight: normalize(5.2), width: props.iconclose ? '88%' : '100%' }}>
+                        <Text adjustsFontSizeToFit numberOfLines={3} style={{ fontSize: props.fontSize ? props.fontSize : normalize(11), alignSelf: 'flex-start', fontWeight: 'bold', marginHorizontal: normalize(4), color: props.fontcolor ? props.fontcolor : 'black', width: '95%', borderWidth: 0 }} >
+                            {dropdowndata != null && dropdowndata != undefined ? dropdowndata : props.value}
+                            {/* {getDropDownData(dropdowndata)} */}
+                        </Text>
+                    </View>
+                    : null}
+                {isBNU(dropdowndata) && props.iconclose ?
+                    <TouchableOpacity
+                        disabled={props.disabled != null && props.disabled != undefined && props.disabled == true ? true : false}
+                        onPress={() => {
+                            setDropDownData(''),
+                                props.iconclosecallback(true);
+                        }}
+                    >
+                        <HOCIcons.Icons
+                            icongroup={3}
+                            name={'close-circle'}
+                            size={normalize(25)}
+                            color={'darkblue'}
+                            style={{ color: 'darkblue' }}
+                        />
+                    </TouchableOpacity>
+                    : null}
+                {props.iconName != undefined && props.iconOnly == true ?
+                    <FontAwesome5 name={props.iconName} color=
+                        {props.flagData == 1 ? 'darkblue' : '#094485'}
+                        size={props.iconsize} /> : null}
+                {props.icon != undefined && props.iconOnly == true ?
+                    <MaterialCommunityIcons name={props.icon} color=
+                        {props.flagData == 1 ? 'darkblue' : '#094485'}
+                        size={props.iconsize} /> : null}
+
+                {isdropdownshow ?
+                    <CModalOverlay visible={true}
+                        onClose={() => {
+                            setDropdownShow(false);
+                            if (props.setOverlay) {
+                                props.setOverlay(false);
+                            }
+                        }}
+                        closeOnTouchOutside
+                        animationType="zoomIn"
+                        containerStyle={{ backgroundColor: 'transparent' }}
+                        childrenWrapperStyle={getOverlayChildrenWrapperStyle()}
+                        animationDuration={500}
+                    >
+
+                        <TouchableOpacity style={{ position: 'absolute', right: 0, zIndex: 1, marginTop: normalize(5) }}
+                            onPress={() => {
+                                setDropdownShow(false);
+                                if (props.setOverlay) {
+                                    props.setOverlay(false);
+                                }
+                            }}
+                        >
+                            <FontAwesome5 name={'angle-double-down'}
+                                color={'#094485'} size={normalize(20)} />
+                        </TouchableOpacity>
+
+                        {!isLoading ?
+                            searchResult.httpstatus == 200 ?
+                                DropdownLayout()
+                                :
+                                <View>
+                                    <Text style={[ComponentStyles.no_data_found_text]}>No Result Found</Text>
+                                </View>
+                            :
+                            <View style={{
+                                flex: 1, width: '100%', justifyContent: 'center',
+                                backgroundColor: 'transparent', borderRadius: 10,
+                            }}>
+                                <SearchLoader />
+                            </View>}
+                    </CModalOverlay>
+                    : null}
+
+                {stage ?
+                    <OverlayHOCComponent
+                        visibility={val => (val == undefined ? null : setStage(val))}
+                        xyz={val => (val == undefined ? null : setDropDownData(val.columnname, setStage(false)))}
+                        value={props.cornerKey}
+                    // onselect={val => (val == undefined ? null : onSelect(val))}
+                    // data={searchResult != null && searchResult != undefined && searchResult.length > 0 ? searchResult : null}
+                    /> : null}
+
+            </TouchableOpacity>
+        </View>
+
+    );
+    function getDropDownCode(details, droparry) {
+        console.log(details);
+        let dropdownvaluenew;
+        droparry != null
+            ? droparry.map(val => {
+                if (val.sudynamiccriteriadatavalue == details) {
+                    dropdownvaluenew = val.columnname;
+                }
+            })
+            : null;
+
+        console.log('DROP----------------------', dropdownvaluenew);
+        return dropdownvaluenew;
+
+    }
+    function GetDropdown(data) {
+
+        const newDropDownData = data != null && data != undefined ? data.filter(function (item) {
+            const dataItem = item.columnname ? item.columnname.toUpperCase() : ''.toUpperCase();
+            const textData = searchData.toUpperCase();
+            return dataItem.indexOf(textData) > -1;
+        }) : null;
+
+        return (
+            <View style={{ flexDirection: 'row' }}>
+                <FlatList
+                    data={newDropDownData}
+                    renderItem={renderItem}
+                    initialNumToRender={10}
+                    maxToRenderPerBatch={20}
+                    keyExtractor={(item, index) => 'key' + index}
+                />
+
+                <SAlphabet
+                    callBack={val =>
+                        val == undefined ? null : getAlphabetData(val.alpha, val.index)
+                    } />
+
+                {/* <View style={{
+                    height: Dimensions.get('window').height * 0.37,
+                    marginBottom: Dimensions.get('window').height * 0.01,
+                }}>
+                    <FlatList
+                        data={["#", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]}
+                        renderItem={renderAlphabet}
+                        style={{ paddingBottom: 20 }}
+                        contentContainerStyle={{ alignItems: 'center' }}
+                        keyExtractor={(item, index) => 'key' + index}
+                    />
+                </View> */}
+            </View>
+        );
+    }
+
+    function multiselect(item, keycode) {
+        item.selected = !item.selected;
+        setRefresh(refresh + 1);
+    }
+    function renderItem(data) {
+        // console.log("________________________________________",data)
+        return (
+            <TouchableOpacity
+                style={[getListviewItem(data.item.selected), { flexDirection: 'row', alignItems: 'center' }]}
+                onPress={() => props.multiselect != undefined ? multiselect(data.item, props.keycode) : selection(data.item, data.item.selected, props.keycode)}
+                activeOpacity={0.5}
+            >
+                <Icons.FontAwesome name="dot-circle-o" color="darkblue" size={normalize(12)}
+                    style={{ paddingHorizontal: normalize(2), paddingLeft: normalize(4) }} />
+                <Text style={selectedValue != null && selectedValue != undefined ? selectedValue == item.sudynamiccriteriadatavalue ? getListviewItemText(true) : getListviewItemText(false) : getListviewItemText(false)}>
+                    {data.item.columnname}
+                </Text>
+            </TouchableOpacity>
+        );
+    }
+
+    function getOverlayScreenChildcontainer() {
+        return (
+            {
+                flex: 1,
+                marginBottom: Dimensions.get('window').height * 0.01,
+                marginTop: Dimensions.get('window').height * 0.01,
+            }
+        );
+    }
+};
+
+const layoutstyles = StyleSheet.create({
+    lefticon_container: {
+        marginLeft: '2%',
+    },
+    textinput_view: {
+        flex: 1,
+        paddingLeft: '1%',
+    },
+    overlay_screen_listview_container: {
+        justifyContent: 'center',
+        marginBottom: 10,
+    },
+    overlay_searchTextbox_View: {
+        width: '96%',
+
+    },
+    overlay_screen_heading_text: {
+        ...ComponentStyles.popup_heading,
+        width: '100%',
+    },
+    overlay_screen_container: {
+        width: '100%',
+        flex: 1,
+    },
+});
+
+export default SDropDownEdited;