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

package/src/StaticComponents/SDropDownHoc.js

@@ -0,0 +1,636 @@
+import React, { useState, useEffect } from 'react';
+import { TouchableOpacity, StyleSheet, View, Text, Image, TextInput, FlatList, ActivityIndicator, Dimensions, Platform } from 'react-native';
+import { notifyMessage, normalize, Loader, isBNU, isBNUL, dlog, ValueCheck } from '../CommonStyle/ComponentFunctions';
+import NetworkServiceCall from '../Common/NetworkServiceCall';
+import ComponentStyles, { height } from '../CommonStyle/componentStyle';
+import Overlay from 'react-native-modal-overlay';
+import Icons from '../Common/Icons';
+import { FlashList } from '@shopify/flash-list';
+import CFooterView from '../CustomComponents/CFooterView';
+import HOCIcons from '../HOC/HOCIcons';
+import CAwesomeButton from '../CustomComponents/CAwesomeButtonLab';
+import themes from '../Common/CommonTheme';
+import HView from '../HOC/HView';
+import { Global } from '../Common/Global';
+var searchResult = [];
+
+const SDropDownHoc = props => {
+
+    useEffect(() => { isBNU(props.overlay) && props.overlay == true ? FetchDropdownList() : null; }, []);
+
+    const [dataold, setData] = useState(props.data ? props.data : null);
+    const data = props.data ? props.data : null;
+    const [overlay, setOverlay] = useState(false);
+    const [searchData, setSearchData] = useState('');
+    const [loading, setLoading] = useState(false);
+    const [alphaFilter, setAlphaFilter] = useState(false);
+    const [displayData, setDisplayData] = useState([]);
+    const [filterPurpose, setFilterPurpose] = useState([]);
+    const [alphaindex, setAlphaIndex] = useState(0);
+    const [refresh, setRefresh] = useState(0);
+    const [editmode, setEditMode] = useState(false);
+    const [stage, setStage] = useState(1);
+    const buttonarray = [
+        { 'code': 2, 'name': 'Select', 'icon': 'select1', 'icongroup': 1, 'color': 'white', 'visible': !props.disableselectbutton && fnButton() ? true : false },
+        { 'code': 5, 'name': 'Sort', 'icon': 'sort-alphabetical-ascending', 'icongroup': 3, 'color': 'white', 'visible': props.sortbutton ? true : false },
+        { 'code': 4, 'name': 'Edit', 'icon': 'edit', 'icongroup': 5, 'color': 'white', 'visible': props.editbutton && fnButton() ? true : false },
+    ];
+    const selectarray = props.stage ? props.selectarray : [];
+    const PropStyles = {
+        'overlayheight': ValueCheck(props.height) ? props.height : 0.17,
+        'overlayborderRadius': ValueCheck(props.height) ? 0 : 20,
+    };
+
+
+    function onPressFunction(i) {
+        switch (i) {
+            case 1:
+                (setOverlay(false), props.setoverlay(false));
+                break;
+            case 2:
+                (props.multiselect == true ? getMultiSelect() : getSingleSelect());
+                break;
+            case 3:
+                getClearAll();
+                break;
+            case 4:
+                setEditMode(true);
+                setStage(2);
+                break;
+            case 5:
+                break;
+            default:
+                break;
+        }
+    }
+
+    function FetchDropdownList() {
+
+        setDisplayData([]);
+        setAlphaFilter(false);
+        setFilterPurpose([]);
+        setAlphaIndex(0);
+        setSearchData('');
+        setLoading(true);
+        setOverlay(true);
+        isBNU(props.dropdownapi) ? (
+            dlog('props.dropdownapi ' + props.dropdownapi),
+            NetworkServiceCall('get', props.dropdownapi, '').then(
+                function (response) {
+                    if (isBNU(response.httpstatus) && response.httpstatus == 200) {
+                        searchResult = response;
+                        setDisplayData(response.data.data);
+                        setLoading(false);
+                    } else {
+                        notifyMessage('Data Not Found', 2);
+                        setLoading(false);
+                    }
+                })
+        ) : isBNU(props.dropdownarray) ? (
+            searchResult = props.dropdownarray,
+            setDisplayData(props.dropdownarray.data.data),
+            setLoading(false)
+        ) : null;
+    }
+
+    function fnButton() {
+        let marray = isBNUL(displayData) ? displayData.filter((i) => i.selected == true) : null;
+        let item = isBNUL(marray) ? true : false;
+        return item;
+    }
+
+    function fnstring(i) {
+        return isBNUL(i) ? i.toString() : null;
+    }
+
+    function fnarray(i) {
+        let array = [];
+        isBNUL(i) ? i.map(data => { array.push(data.displayvalue); }) : null;
+        return array;
+    }
+
+    function MapSelection(i) {
+        displayData && displayData != null && displayData != undefined && displayData.length > 0 ?
+            displayData.filter((val, k) => {
+                val.selected != null && val.selected != undefined && i != k ? val.selected = false : null;
+            }) : null;
+    }
+
+    function singleselection(item) {
+
+        MapSelection(item.index);
+        item.item.selected = !item.item.selected;
+        setRefresh(refresh + 1);
+    }
+
+    function fastsingleselection(item) {
+
+        setData(item.item.displayvalue);
+        (props.arraycallback ? props.arraycallback(item.item) : props.callback(item.item.displayvalue));
+        setOverlay(false);
+        props.setoverlay(false);
+    }
+
+    function getSingleSelect() {
+        let marray = isBNUL(displayData) ? displayData.filter((i) => i.selected == true) : null;
+        let mstring = fnstring(fnarray(marray));
+        setData(mstring);
+        (props.arraycallback ? props.arraycallback(marray[0]) : props.callback(mstring));
+        setOverlay(false);
+        props.setoverlay(false);
+    }
+
+    function multiselection(item) {
+        item.selected = !item.selected;
+        setRefresh(refresh + 1);
+    }
+
+    function getMultiSelect() {
+
+        let marray = isBNUL(displayData) ? displayData.filter((i) => i.selected == true) : null;
+        let mstring = fnstring(fnarray(marray));
+        setData(mstring);
+        (props.arraycallback ? props.arraycallback(marray) : props.callback(mstring));
+        setOverlay(false);
+        props.setoverlay(false);
+    }
+
+    function getClearAll() {
+
+        isBNUL(displayData) ?
+            displayData.filter((val) => {
+                val.selected != null && val.selected != undefined ? val.selected = false : null;
+            }) : null;
+        setRefresh(refresh + 1);
+    }
+
+    function DropdownLayout() {
+        return (
+            <View style={{ width: '100%', flex: 1, borderWidth: 0 }}>
+                <View style={{ flexDirection: 'row', marginHorizontal: 10, marginVertical: normalize(5) }}>
+                    <View
+                        style={{
+                            flexDirection: 'row',
+                            borderWidth: 0,
+                            borderColor: 'grey',
+                            justifyContent: 'flex-start',
+                            alignItems: 'center',
+                            borderRadius: 5,
+                            marginBottom: Dimensions.get('window').height * 0.003,
+                            height: 35,
+                            backgroundColor: '#f0f0f0',
+                            marginTop: 0,
+                            width: '100%',
+                        }}>
+                        <HOCIcons.Icons
+                            component={5}
+                            name={'filter'}
+                            color={Global.AppTheme.primary_color}
+                            size={normalize(13)}
+                            style={{ marginHorizontal: normalize(5) }}
+                        />
+                        <View style={{ flex: 1, paddingLeft: '1%' }}>
+                            <TextInput
+                                style={{
+                                    color: '#000000',
+                                    width: '100%', marginLeft: '1%', marginRight: '1%',
+                                    fontSize: normalize(16),
+                                    textAlign: 'justify',
+                                    // backgroundColor:'#f0f0f0',
+                                    fontWeight: 'bold',
+                                    padding: 0, height: '100%', marginBottom: -(Dimensions.get('window').height * 0.003),
+                                }}
+                                autoCapitalize={'characters'}
+                                value={searchData}
+                                onChangeText={text => setSearchData(text)}
+                                secureTextEntry={false}
+                                keyboardType={'default'}
+                                placeholder="Search"
+                            />
+                        </View>
+                        {isBNUL(searchData) ?
+                            <TouchableOpacity onPress={() => { setSearchData(''), setAlphaFilter(false), setAlphaIndex(0); }} >
+                                <HOCIcons.MaterialCommunityIcons
+                                    name={'close-circle'}
+                                    color={Global.AppTheme.primary_color}
+                                    size={normalize(20)}
+                                    style={{ marginHorizontal: normalize(5) }}
+                                />
+                            </TouchableOpacity>
+                            : null}
+                    </View>
+                </View>
+                <View style={{ borderWidth: 0, flex: 1 }}>
+                    {GetDropdown(alphaFilter ? filterPurpose : displayData)}
+                </View>
+            </View>
+        );
+    }
+
+    function getListviewItem(selected) {
+        return ({ backgroundColor: selected ? '#766fff42' : '#ffffffc7' });
+    }
+
+    function getListviewItemText(selected) {
+        return (
+            {
+                alignContent: 'center',
+                margin: Dimensions.get('window').height * 0.004,
+                alignItems: 'center',
+                textAlign: 'left',
+                fontSize: normalize(14),
+                fontWeight: selected ? 'bold' : 'normal',
+                color: selected ? Global.AppTheme.primary_color : 'black',
+            }
+        );
+    }
+
+    function GetDropdown(data) {
+
+        const newDropDownData = data != undefined ? data.filter(function (item) {
+            const dataItem = item.displayvalue ? item.displayvalue.toUpperCase() : ''.toUpperCase();
+            const textData = searchData.toUpperCase();
+            return dataItem.indexOf(textData) > -1;
+        }) : null;
+
+        return (
+            <View style={{ flexDirection: 'row', justifyContent: 'space-between', flex: 1 }}>
+                <View style={{ borderWidth: 0, width: '90%', flex: 1 }}>
+                    <FlashList
+                        data={newDropDownData}
+                        keyboardShouldPersistTaps={'handled'}
+                        renderItem={renderItem}
+                        estimatedItemSize={normalize(25)}
+                    />
+                </View>
+                <View style={{ height: Dimensions.get('window').height * 0.75, 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']}
+                        keyboardShouldPersistTaps={'handled'}
+                        renderItem={renderAlphabet}
+                        style={{ paddingBottom: 0 }}
+                        contentContainerStyle={{ alignItems: 'center' }}
+                        keyExtractor={item => item}
+                    />
+                </View>
+            </View>
+        );
+    }
+
+    function renderAlphabet({ index, item }) {
+
+        return (
+            <TouchableOpacity
+                style={{
+                    width: normalize(30),
+                    alignItems: 'center',
+                    borderRadius: normalize(40) / 2,
+                    backgroundColor: index == alphaindex ? '#8162fc' : 'transparent',
+                }}
+                onPress={() => getAlphabetData(item, index)}>
+                <Text style={{
+                    fontSize: normalize(12),
+                    color: index == alphaindex ? 'white' : 'black',
+                    fontWeight: index == alphaindex ? 'bold' : 'normal',
+                }}>
+                    {item}
+                </Text>
+            </TouchableOpacity>
+        );
+    }
+
+    function getAlphabetData(alpha, index) {
+
+        var filter = displayData.filter(value => value.displayvalue != null && value.displayvalue != undefined && value.displayvalue.length > 0 ? value.displayvalue.charAt(0) == alpha : undefined);
+        setAlphaIndex(index);
+        setFilterPurpose(filter);
+        index == 0 ? setSearchData('') : setSearchData(alpha);
+        index == 0 ? setAlphaFilter(false) : setAlphaFilter(true);
+    }
+
+    function renderItem(b) {
+
+        return (
+            <TouchableOpacity
+                style={[b.item.selected == true ? getListviewItem(true) : getListviewItem(false),
+                {
+                    borderWidth: 1,
+                    width: '100%',
+                    borderRadius: 7,
+                    borderColor: 'lightgrey',
+                },
+                ]}
+                onPress={() => props.multiselect == true ? multiselection(b.item) : props.fastselection ? fastsingleselection(b) : singleselection(b)}
+                activeOpacity={0.5}
+            >
+                <View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                }}>
+                    <HOCIcons.Icons
+                        icongroup={b.item.selected == true ? 3 : 4}
+                        name={b.item.selected == true ? 'radiobox-marked' : 'dot-circle-o'}
+                        color={'darkblue'}
+                        size={normalize(13)}
+                        style={{ marginHorizontal: normalize(3) }}
+                    />
+                    <Text style={b.item.selected == true ? getListviewItemText(true) : getListviewItemText(false)}>
+                        {b.item.displayvalue}
+                    </Text>
+                </View>
+                {(isBNU(b.item.dropdownremarks) || isBNU(b.item.finalresultvaluenature) || isBNU(b.item.pathologyclonename)) ?
+                    <View style={{ borderWidth: 0, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                        {isBNU(b.item.finalresultvaluenature) ?
+                            <Text style={{ color: Global.AppTheme.primary_color, fontSize: normalize(8), fontWeight: 'bold' }}>
+                                {b.item.finalresultvaluenature}
+                            </Text>
+                            : null}
+                        {isBNU(b.item.pathologyclonename) ?
+                            <Text style={{ color: Global.AppTheme.primary_color, fontSize: normalize(8), fontWeight: 'bold' }}>
+                                {b.item.pathologyclonename}
+                            </Text>
+                            : null}
+                        {isBNU(b.item.dropdownremarks) ?
+                            <Text style={{ color: 'grey', fontSize: normalize(7) }}>
+                                {b.item.dropdownremarks}
+                            </Text>
+                            : null}
+                    </View>
+                    : null}
+            </TouchableOpacity>
+        );
+    }
+
+    return (
+        <TouchableOpacity
+            disabled={props.disabled != null && props.disabled != undefined && props.disabled == true ? true : false}
+            style={props.buttonstyle}
+            onPress={() => { FetchDropdownList(); }}
+        >
+            {props.icon ?
+                <HOCIcons.Icons
+                    icongroup={props.icon.icongroup != null && props.icon.icongroup != undefined ? props.icon.icongroup : 5}
+                    name={props.icon.name}
+                    size={props.icon.size}
+                    style={props.iconstyle}
+                />
+                : null}
+            {props.textview && props.textview != null && props.textview != undefined ?
+                <Text adjustsFontSizeToFit style={props.textstyle}>
+                    {isBNU(data) ? data : null}
+                </Text>
+                : null}
+            {props.iconclose && isBNU(data) ?
+                <TouchableOpacity
+                    disabled={props.disabled != null && props.disabled != undefined && props.disabled == true ? true : false}
+                    onPress={() => {
+                        setData(''),
+                            props.iconclosecallback(true);
+                    }}
+                >
+                    <HOCIcons.Icons
+                        icongroup={props.iconclose.icongroup != null && props.iconclose.icongroup != undefined ? props.iconclose.icongroup : 5}
+                        name={props.iconclose.name}
+                        color={props.iconclose.color}
+                        size={props.iconclose.size}
+                        style={props.iconclosestyle}
+                    />
+                </TouchableOpacity>
+                : null}
+            {overlay ? (
+                <Overlay
+                    visible={overlay}
+                    onClose={() => { setStage(1), setOverlay(false), props.setoverlay(false); }}
+                    closeOnTouchOutside
+                    animationType="fadeInUp"
+                    // animationType="zoomIn"
+                    containerStyle={{ backgroundColor: 'transparent' }}
+                    childrenWrapperStyle={{
+                        position: 'absolute',
+                        bottom: 0,
+                        // top: Platform.OS === 'ios' ? normalize(50) : 0,
+                        top: Dimensions.get('screen').height * (PropStyles.overlayheight),
+                        borderTopLeftRadius: 10,
+                        borderTopRightRadius: 10,
+                        borderColor: '#4497ea',
+                        alignItems: 'center',
+                        alignSelf: 'center',
+                        justifyContent: 'flex-start',
+                        width: Dimensions.get('window').width,
+                        // height: Dimensions.get('window').height * 0.8,
+                        padding: 0,
+                    }}
+                    animationDuration={500}
+                >
+
+                    <View style={{ flex: 1 }}>
+
+                        <View
+                            style={{
+                                flexDirection: 'row',
+                                justifyContent: 'space-between',
+                                alignItems: 'center',
+                                width: Dimensions.get('screen').width,
+                                borderTopLeftRadius: 10,
+                                paddingVertical: normalize(2),
+                                borderTopRightRadius: 10,
+                                borderWidth: 0,
+                            }}>
+                            <View style={{ width: '20%', borderWidth: 0 }}>
+                                <Text>{' '}</Text>
+                            </View>
+                            <View style={{
+                                flex: 1,
+                                width: '60%',
+                                borderWidth: 0,
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                            }}>
+                                <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
+                                    {props.overlayicon != null && props.overlayicon != undefined ?
+                                        <Icons.FontAwesome5
+                                            name={props.overlayicon != null && props.overlayicon != undefined ? props.overlayicon : 'file'}
+                                            color={'#000000'}
+                                            size={normalize(11)}
+                                            style={{ marginHorizontal: normalize(5) }}
+                                        />
+                                        : null}
+                                    <Text style={{ color: Global.AppTheme.primary_color, fontSize: normalize(11), fontWeight: 'bold', textAlign: 'center' }}>{props.overlayheading != null && props.overlayheading != undefined ? props.overlayheading : 'SELECT OPTION'}</Text>
+                                </View>
+                            </View>
+                            <View style={{ width: '20%', borderWidth: 0, justifyContent: 'flex-end', alignItems: 'flex-end' }}>
+                                <TouchableOpacity style={{}}
+                                    onPress={() => { setStage(1), setOverlay(false), props.setoverlay(false); }}
+                                >
+                                    <HOCIcons.FontAwesome5
+                                        name={'angle-double-down'}
+                                        color={Global.AppTheme.primary_color}
+                                        size={normalize(20)}
+                                        style={{
+                                            marginHorizontal: normalize(5),
+                                        }}
+                                    />
+                                </TouchableOpacity>
+                            </View>
+                        </View>
+                        {props.stage ?
+                            <View style={{
+                                flexDirection: 'row', width: '100%', borderRadius: 6,
+                                justifyContent: 'space-evenly', alignItems: 'center',
+                            }}>
+                                {isBNUL(selectarray) ? selectarray.map((buttons, i) => {
+                                    return (
+                                        buttons.visibility == true ?
+                                            <CAwesomeButton
+                                                callback={(val) => {
+                                                    setStage(buttons.stage),
+                                                        (buttons.stage == 1 ? (setEditMode(false), FetchDropdownList()) : buttons.stage == 2 ?
+                                                            null
+                                                            : null),
+                                                        setRefresh(refresh + 1);
+                                                }}
+                                                buttonstyle={{
+                                                    'borderRadius': 10,
+                                                    'borderWidth': 1,
+                                                    'height': normalize(30),
+                                                    'width': normalize(100),
+                                                    'backgroundColor': stage == buttons.stage ? '#f7efef' : '#eff6f7',
+                                                    'paddingHorizontal': 0,
+                                                    'raiseLevel': 1,
+                                                    'paddingBottom': 0,
+                                                    'borderColor': stage == buttons.stage ? 'lightblue' : '#ddfbff',
+                                                    'paddingTop': 0,
+                                                }}
+                                                viewstyle={{
+                                                    borderWidth: 0,
+                                                    borderRadius: 0,
+                                                    justifyContent: 'center',
+                                                    alignItems: 'center',
+                                                    flexDirection: 'row',
+                                                }}
+                                                icon={{
+                                                    'icongroup': buttons.icongroup,
+                                                    'name': buttons.iconname,
+                                                    'color': Global.AppTheme.primary_color,
+                                                    'size': normalize(15),
+                                                    'style': {
+                                                        textAlign: 'center',
+                                                        marginHorizontal: normalize(5),
+                                                    },
+                                                }}
+                                                text={{
+                                                    fontSize: normalize(10),
+                                                    fontWeight: 'bold',
+                                                    color: Global.AppTheme.primary_color,
+                                                    textAlign: 'center',
+                                                }}
+                                                displaytext={buttons.displayvalue}
+                                            />
+                                            // <TouchableOpacity
+                                            //     onPress={() => {
+                                            //         console.log('selectarray')
+                                            //     }}
+                                            // >
+                                            //     <Text>{"SELECT"}</Text>
+                                            // </TouchableOpacity>
+                                            : null
+                                    );
+                                }) : null}
+                            </View>
+
+                            : null}
+
+                        {stage == 1 ?
+                            <View style={{ flex: 1 }}>
+                                <View style={{ flex: 1, borderWidth: 0 }}>
+                                    {!loading ? (searchResult.httpstatus == 200 ? (
+                                        DropdownLayout()
+                                    ) : (
+                                        <View style={{ flex: 1, alignSelf: 'center' }}>
+                                            <Text style={[ComponentStyles.no_data_found_text]}>
+                                                No Result Found
+                                            </Text>
+                                        </View>
+                                    )) : (
+                                        <View
+                                            style={{
+                                                flex: 1,
+                                                width: '100%',
+                                                justifyContent: 'flex-start',
+                                            }}>
+                                            <Loader />
+                                        </View>
+                                    )}
+                                </View>
+                                <CFooterView color={'white'}>
+                                    <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start' }}>
+                                        {buttonarray.map((val) => {
+                                            return (val.visible ?
+                                                <CAwesomeButton
+                                                    callback={(k) => { onPressFunction(val.code); }}
+                                                    buttonstyle={{
+                                                        'borderRadius': 10,
+                                                        'borderWidth': 0.5,
+                                                        'height': Dimensions.get('screen').height * 0.06,
+                                                        'width': Dimensions.get('screen').height * 0.06,
+                                                        'backgroundColor': '#f2f3ff',
+                                                        'paddingHorizontal': 0,
+                                                        'raiseLevel': 4,
+                                                        'paddingBottom': 0,
+                                                        'borderColor': 'white',
+                                                        'paddingTop': 0,
+                                                        'style': {
+                                                            padding: 0,
+                                                            marginHorizontal: 2,
+                                                        },
+                                                    }}
+                                                    viewstyle={{
+                                                        borderWidth: 0,
+                                                        borderRadius: 0,
+                                                        justifyContent: 'center',
+                                                        alignItems: 'center',
+                                                    }}
+                                                    icon={{
+                                                        'icongroup': val.icongroup,
+                                                        'name': val.icon,
+                                                        'color': Global.AppTheme.primary_color,
+                                                        'size': normalize(25),
+                                                        'style': {
+                                                            textAlign: 'center',
+                                                        },
+                                                    }}
+                                                    text={{
+                                                        fontSize: normalize(7),
+                                                        fontWeight: 'bold',
+                                                        color: Global.AppTheme.primary_color,
+                                                        textAlign: 'center',
+                                                    }}
+                                                    displaytext={val.name}
+                                                />
+                                                : null);
+                                        })}
+                                    </View>
+                                </CFooterView>
+                            </View>
+                            : stage == 2 ?
+                                <View style={{ flex: 1 }}>
+                                    {isBNU(props.hoccomponent) ?
+                                        <HView
+                                            editmode={editmode}
+                                            displaydata={displayData}
+                                            component={props.hoccomponent}
+                                            hocdata={props.hocdata}
+                                            savecallback={(val) => { setStage(1), FetchDropdownList(), setRefresh(refresh + 1); }}
+                                            natureoption={props.natureoption ? true : false}
+                                            pathologycloneoption={props.pathologycloneoption ? true : false}
+                                        />
+                                        : null}
+                                </View>
+                                : null}
+                    </View>
+                </Overlay>
+            ) : null}
+        </TouchableOpacity>
+    );
+};
+export default SDropDownHoc;