@jescon-technologies/react-native-ui-kit 0.0.1 → 0.0.2

package/src/StaticComponents/SDropDownGenerate.js

@@ -0,0 +1,450 @@
+import React, { useState, useEffect } from 'react';
+import { TouchableOpacity, StyleSheet, View, TouchableHighlight, Text, Image, TextInput, ScrollView, FlatList } from 'react-native';
+import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
+import ComponentStyles, { height, normalize } from '../CommonStyle/componentStyle';
+import popupStyles, {
+    getListviewItem,
+    getListviewItemText,
+} from '../CommonStyle/PopupStyle';
+import { APIURL } from '../Common/apiConstants';
+import { Dimensions } from 'react-native';
+import SearchLoader from '../Custom/SearchLoader';
+import AntDesign from 'react-native-vector-icons/AntDesign';
+import SAlphabet from './SAlphabet';
+import Icons from '../Common/Icons';
+import { Global } from '../Common/Global';
+import { ValueCheck, isNU, notifyMessage } from '../CommonStyle/ComponentFunctions';
+import HOCIcons from '../HOC/HOCIcons';
+import CModalOverlay from '../CustomComponents/CModalOverlay';
+
+var searchResult = [];
+var tempvalue = [];
+var ValueString = null;
+const SDropDownGenerate = (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 PropStyles = {
+        'overlayheight': ValueCheck(props.height) ? props.height : 0.2,
+        'overlayborderRadius': ValueCheck(props.height) ? 0 : 20,
+    };
+    function getOverlayScreenContainer() {
+        return ({
+            flexDirection: 'row',
+            margin: normalize(5),
+        });
+    }
+
+    useEffect(() => {
+        setAlphaFilter(false);
+    });
+
+
+    function FetchDropdownList(key) {
+        setSearchData('');
+        setIsLoading(true);
+        setDropdownShow(true);
+        console.log('JJJJJJJMMMMMMMMMHHHHHHHHHHHHHHHHH1', APIURL + props.dropdownapi);
+        NetworkServiceCall('get', APIURL + props.dropdownapi, '')
+            .then(function (response) {
+                if (response.data.data != null && response.data.data != undefined) {
+                    searchResult = response;
+                    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) {
+        let dataset = {
+            ...item,
+            // "datavalue": item.datavalue,
+            // "displayvalue": item.displayvalue,
+            // "key": keycode
+        };
+        setDropDownData(item.displayvalue);
+        props.stewardship != undefined && props.stewardship ? props.onChangeData(item) : props.onChangeData(dataset);
+        props.refreshCount(1);
+        // props.editStatus(1)
+        setDropdownShow(false);
+    }
+
+    function getFooterFunctions() {
+        // Prepare data for saving
+        var groups = {
+            option: 'insustbatch1',
+            // userdata: Global.userData,
+            insuproduct: props?.productcode,
+            hrenemp: Global.userData.hrenemp,
+        };
+        var dataset = { groups };
+
+        console.log('savedataaaaaaaaaaa', JSON.stringify(dataset));
+
+        if (groups.insuproduct != undefined) {
+            let buttonapi = `${APIURL}invsave/FlCommonSave`;
+            console.log('buttonapi>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>', buttonapi);
+            NetworkServiceCall('post', buttonapi, dataset).then(function (response) {
+                if (response.httpstatus == 200) {
+                    if (response.data.code == 101) {
+                        notifyMessage('Batch already exists');
+                    } else {
+                        notifyMessage('Batch Created');
+                        // props.editable ? FetchDropdownList() : FetchList()
+                        if (props.refreshCount) {props.refreshCount();} // <-- Call parent refresh
+                        setDropdownShow(false);
+                    }
+                }
+            });
+        } else {
+            notifyMessage('Product not selected');
+        }
+    }
+
+    function DropdownLayout() {
+        return (
+            <View style={layoutstyles.overlay_screen_container}>
+                <View style={{ alignItems: 'center' }}>
+                    <Text style={{ fontSize: normalize(12), fontWeight: 'normal', color: Global.AppTheme.primary_color }}> SELECT OPTION </Text>
+                </View>
+
+                <View style={getOverlayScreenContainer()}>
+                    <View
+                        style={[ComponentStyles.searchTextbox_View,
+                        layoutstyles.overlay_searchTextbox_View,
+                        ]}
+                    >
+                        <Image style={[ComponentStyles.searchIcon]}
+                            source={{ uri: 'https://i.ibb.co/j8ywYpJ/search.png' }}
+                        />
+                        <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>
+
+                    </View>
+                </View>
+
+                <View style={getOverlayScreenChildcontainer()}>
+                    {GetDropdown(alphaFilter ? filterPurpose : displayData)}
+                </View>
+
+                {props.multiselect != undefined && props.multiselect
+                    && displayData != undefined && displayData.length > 2 ?
+                    <TouchableOpacity style={{ justifyContent: 'center', borderRadius: 10, alignItems: 'flex-start', 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={Global.AppTheme.primary_color} size={normalize(20)} />
+
+                            <Text
+                                style={{
+                                    fontSize: normalize(11),
+                                    color: '#094485',
+                                    fontWeight: 'bold',
+                                }}>
+                                {' '}
+                                Select
+                            </Text>
+                        </View>
+                    </TouchableOpacity> : null}
+                {/* Generate button */}
+                <TouchableOpacity style={{ justifyContent: 'center', borderRadius: 10, alignItems: 'flex-start', paddingHorizontal: normalize(10) }}
+                    onPress={() => getFooterFunctions()}
+                >
+                    <View style={{
+                        flexDirection: 'column',
+                        backgroundColor: '#f7f4f4', borderRadius: 10,
+                        paddingHorizontal: normalize(15),
+                        paddingVertical: normalize(5),
+                        alignItems: 'center',
+                    }}>
+                        <AntDesign name="addfile"
+                            color={Global.AppTheme.primary_color} size={normalize(20)} />
+
+                        <Text
+                            style={{
+                                fontSize: normalize(11),
+                                color: '#094485',
+                                fontWeight: 'bold',
+                            }}>
+                            {' '}
+                            Generate
+                        </Text>
+                    </View>
+                </TouchableOpacity>
+            </View>
+        );
+    }
+
+    function getMultiSelect(params) {
+        var filterArray = displayData.filter((element) => element.selected == true);
+        var display = filterArray != undefined &&
+            filterArray.length > 0 ? filterArray.map((item) => item.displayvalue) : null;
+
+        setDropDownData(display.join());
+        props.onChangeData(filterArray);
+        setDropdownShow(false);
+    }
+
+    function getOverlayChildrenWrapperStyle() {
+        return ({
+            position: 'absolute',
+            bottom: 0,
+            // top: Dimensions.get('screen').height * 0.055,
+            top: Dimensions.get('screen').height * (PropStyles.overlayheight),
+            width: Dimensions.get('window').width,
+            // height:Dimensions.get('window').height * 0.8,
+            borderRadius: PropStyles.overlayborderRadius,
+            borderWidth: 2,
+            borderColor: Global.AppTheme.primary_color,
+            paddingHorizontal: normalize(5),
+        });
+    }
+
+    function getAlphabetData(alpha, index) {
+        var filter = displayData.filter(value => (value.displayvalue != undefined ? value.displayvalue : '').charAt(0) == alpha);
+        setFilterPurpose(filter);
+        index == 0 ? setSearchData('') : setSearchData(alpha);
+        index == 0 ? setAlphaFilter(false) : setAlphaFilter(true);
+    }
+
+    return (
+        <TouchableOpacity
+            onPress={() => props.editable ? FetchDropdownList() : FetchList()}
+            style={
+                props.buttonstyle ? props.buttonstyle
+                    :
+                    {
+                        borderWidth: 1,
+                        borderColor: 'lightgrey',
+                        paddingLeft: 2,
+                        width: props.widthArr,
+                        alignItems: 'center',
+                        paddingRight: 15,
+                        backgroundColor: props.cornerKey % 2 ? '#fff' : 'white',
+                        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',
+                        elevation: 3,
+                    }
+            }
+        >
+
+            {props.icon ?
+                <HOCIcons.Icons
+                    icongroup={isNU(props.icon.icongroup) ? props.icon.icongroup : 5}
+                    name={props.icon.name}
+                    size={props.icon.size}
+                    style={props.iconstyle}
+                />
+                : null}
+
+            {!props.icon && props.iconName ?
+                <View style={{ width: normalize(22), paddingLeft: normalize(5) }}>
+                    <HOCIcons.Icons
+                        icongroup={5}
+                        name={props.iconName}
+                        color={Global.AppTheme.primary_color}
+                        size={normalize(15)}
+                    />
+                </View>
+                : null}
+
+            {props.cornerKey != null && props.cornerKey != undefined && typeof props.cornerKey === 'string' ?
+                <View style={{ position: 'absolute', bottom: 0, right: 3 }}>
+                    <Text style={{ fontSize: normalize(9), alignSelf: 'flex-start', fontWeight: 'bold' }} >
+                        {props.cornerKey != null && props.cornerKey != undefined && typeof props.cornerKey === 'string' ? props.cornerKey : ''}</Text>
+                </View>
+                : null}
+
+            {isNU(props.textstyle) ?
+                <Text adjustsFontSizeToFit style={props.textstyle}>
+                    {isNU(dropdowndata) ? dropdowndata : null}
+                </Text>
+                : null}
+
+            {!isNU(props.textstyle) ?
+                <View>
+                    <Text style={{ fontSize: props.fontSize ? props.fontSize : normalize(12), alignSelf: 'flex-start', fontWeight: props.fontWeight ? props.fontWeight : 'bold' }} >
+                        {dropdowndata != null && dropdowndata != undefined ? dropdowndata : ''}
+                        {/* {getDropDownData(dropdowndata)} */}
+                    </Text>
+                </View>
+                : null}
+
+
+            {isdropdownshow ?
+                <CModalOverlay visible={true}
+                    onClose={() => setDropdownShow(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)}
+                    >
+                        <FontAwesome5
+                            name={'angle-double-down'}
+                            color={Global.AppTheme.primary_color}
+                            size={normalize(20)}
+                            style={{
+                                marginRight: normalize(7),
+                            }}
+                        />
+                    </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.displayvalue, setStage(false)))}
+                    value={props.cornerKey}
+                // onselect={val => (val == undefined ? null : onSelect(val))}
+                // data={searchResult != null && searchResult != undefined && searchResult.length > 0 ? searchResult : null}
+                /> : null}
+        </TouchableOpacity>
+
+    );
+
+    function GetDropdown(data) {
+
+        const newDropDownData = data.filter(function (item) {
+            const dataItem = item.displayvalue ? item.displayvalue.toUpperCase() : ''.toUpperCase();
+            const textData = searchData.toUpperCase();
+            return dataItem.indexOf(textData) > -1;
+        });
+
+        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>
+        );
+    }
+
+    function multiselect(item, keycode) {
+        item.selected = !item.selected;
+        setRefresh(refresh + 1);
+    }
+
+    function renderItem(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={Global.AppTheme.primary_color} size={normalize(12)}
+                    style={{ paddingHorizontal: normalize(2), paddingLeft: normalize(4) }} />
+                <Text style={selectedValue != null && selectedValue != undefined ? selectedValue == item.datavalue ? getListviewItemText(true) : getListviewItemText(false) : getListviewItemText(false)}>
+                    {data.item.displayvalue}
+                </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 SDropDownGenerate;