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

package/src/Components/SDropDownEdited.js

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