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

package/src/Custom/TableComponent/SDropdownTable.js

@@ -0,0 +1,491 @@
+import React, { useState, useEffect, useContext } from 'react';
+import { TouchableOpacity, StyleSheet, View, Dimensions, Text, Image, TextInput, ScrollView, FlatList, Platform } from 'react-native';
+import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
+import ComponentStyles, { height, normalize } from '../../CommonStyle/componentStyle';
+import Overlay from 'react-native-modal-overlay';
+import popupStyles, {
+    getListviewItem,
+    getListviewItemText,
+} from '../../CommonStyle/PopupStyle';
+import { APIURL } from '../../Common/apiConstants';
+import SearchLoader from '../../Custom/SearchLoader';
+import AntDesign from 'react-native-vector-icons/AntDesign';
+import SAlphabet from '../../StaticComponents/SAlphabet';
+import Icons from '../../Common/Icons';
+// import COutsidePrescription from "../../Classification/Prescription/COutsidePrescription";
+import { ValueCheck } from '../../CommonStyle/ComponentFunctions';
+import EmrResponseComponentContext from '../../Handlers/emrResponseComponentContext';
+import { Global } from '../../Common/Global';
+import HOCIcons from '../../HOC/HOCIcons';
+import { useNavigation } from '@react-navigation/native';
+var searchResult = [];
+var tempvalue = [];
+var ValueString = null;
+const SDropdownTable = (props) => {
+
+    const navigation = useNavigation();
+    const { responseJSON, setResponseJSON } = useContext(EmrResponseComponentContext);
+    const [MedicineData, setMedicineData] = useState();
+    const [isdropdownshow, setDropdownShow] = useState(false);
+    const [searchData, setSearchData] = useState('');
+    const [isLoading, setIsLoading] = useState(true);
+    const [alphaFilter, setAlphaFilter] = useState(false);
+    const [selectedValue, setSelectedValue] = useState(props.value);
+    const [displayData, setDisplayData] = useState([]);
+    const [filterPurpose, setFilterPurpose] = useState([]);
+    // console.log("display Texttttttttttttttttttttttttt", JSON.stringify(filterPurpose))
+    const [stage, setStage] = useState(false);
+    const [alphaindex, setAlphaIndex] = useState();
+    // const [dropdowndata, setDropDownData] = useState(props.dropdowndata)
+    const dropdowndata = props.dropdowndata;
+
+    function getOverlayScreenContainer() {
+        return ({
+            // paddingVertical:normalize(5),
+            flexDirection: 'row',
+            // margin: 10,
+            // backgroundColor:'blue',
+            marginHorizontal: 10,
+            // height: Dimensions.get('window').height * 0.045
+        });
+    }
+
+    function FetchDropdownList(key) {
+        setSearchData('');
+        setIsLoading(true);
+        setDropdownShow(true);
+        console.log('BUTTTTOOONNNNN APIIIIIIIIIIIIIIIIII', JSON.stringify(APIURL + props.dropdownapi));
+        NetworkServiceCall('get', APIURL + props.dropdownapi, '')
+            .then(function (response) {
+                searchResult = response;
+                setDisplayData(response.data.data);
+                setIsLoading(false);
+            });
+    }
+
+    function FetchList() {
+        setSearchData('');
+        setIsLoading(true);
+        setDropdownShow(true);
+        searchResult = { 'httpstatus': 200 };
+        setDisplayData(props.dropdownarray);
+        setIsLoading(false);
+    }
+
+    function FetchOutsideMeds() {
+        setMedicineData(props.medicineData);
+        setDropdownShow(true);
+        // setIsLoading(false)
+        // console.log("ppppppppppppppppppppppppppppp", JSON.stringify(props.medicineData))
+    }
+
+    function selection(item, changevalue, keycode) {
+        let dataset = {
+            'content': ValueCheck(item.content) ? item.content : '',
+            'datavalue': item.datavalue,
+            'displayvalue': item.displayvalue,
+            'timingdescription': item.datavalue == 'D' ? 1 : item.datavalue == 'W' ? 2 : item.datavalue == 'M' ? 3 : item.datavalue == 'Y' ? 4 : 1,
+            'key': keycode,
+        };
+        // console.log("RRRRRRRRRRRRRRRRRRRRR", dataset)
+        // setDropDownData(item.displayvalue)
+        props.onChangeData(dataset);
+        props.refreshCount(1);
+        props.singlelinepreview != undefined ? props.singlelinepreview(1) : null;
+        props.editStatus(1);
+        setDropdownShow(false);
+    }
+
+    function DropdownLayout() {
+        return (
+            <View style={layoutstyles.overlay_screen_container}>
+                <View style={{ alignItems: 'center' }}>
+                    <Text style={{ fontSize: normalize(13), fontWeight: 'bold', color: Global.AppTheme.primary_color }}>{ValueCheck(props.heading) ? props.heading : ValueCheck(responseJSON) && ValueCheck(responseJSON.consultationEdit) && ValueCheck(responseJSON.consultationEdit.heading) ? responseJSON.consultationEdit.heading : '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>
+            </View>
+        );
+    }
+
+    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 getOverlayScreenChildlistContainer() {
+        return {
+            width: '90%',
+            // height: Dimensions.get('window').height * 0.37,
+            marginBottom: Dimensions.get('window').height * 0.01,
+            marginTop: Dimensions.get('window').height * 0.01,
+        };
+    }
+
+    // const OverlayHOCComponent = COverlay(CLongPressTable);
+
+    return (
+        <View>
+            {props.type == undefined ?
+                <TouchableOpacity
+                    onPress={() => props.editable == true ? props.outsidemeds == true ? FetchOutsideMeds() : FetchDropdownList() : FetchList()}
+                    // onLongPress={() => props.LongPress ? setStage(true) : null}
+                    disabled={props.multiformat != undefined ? props.multiformat : false}
+                    style={{
+                        borderWidth: 1,
+                        borderColor: props.columntype != undefined ? props.columntype ? '#f99090' : '#9ef79e' : 'lightgrey',
+                        // elevation: 3,
+                        paddingLeft: 2,
+                        width: props.widthArr,
+                        alignItems: 'center',
+                        backgroundColor: ValueCheck(props.bgColor) ? props.bgColor : '#fff',
+                        marginHorizontal: normalize(2),
+                        height: props.height != undefined ? Dimensions.get('screen').height * props.height : Dimensions.get('screen').height * 0.055,
+                        flexDirection: 'row',
+                        borderRadius: 5,
+                        marginHorizontal: normalize(2),
+                        marginVertical: props.height != undefined ? 0 : normalize(2),
+                    }}
+                >
+
+                    {props.iconName ?
+                        <View style={{ width: normalize(22) }}>
+                            <Icons.FontAwesome5 name={props.iconName} color=
+                                {props.flagData == 1 ? props.outsidemeds != undefined && props.outsidemeds != null && props.outsidemeds ? 'red' : Global.AppTheme.primary_color : props.outsidemeds != undefined && props.outsidemeds != null && props.outsidemeds ? 'red' : Global.AppTheme.primary_color}
+                                size={normalize(15)} />
+                        </View> : null}
+
+                    <View style={{ position: 'absolute', bottom: 0, right: 3, width: normalize(130) }}>
+                        <Text numberOfLines={1} adjustsFontSizeToFit style={{ fontSize: normalize(9), fontWeight: 'bold', color: 'blue' }} >
+                            {props.cornerKey != null && props.cornerKey != undefined && typeof props.cornerKey === 'string' ? (props.cornerKey).toUpperCase() : ''}</Text>
+                    </View>
+                    <View>
+                        <Text adjustsFontSizeToFit numberOfLines={2} style={{ fontSize: normalize(11), alignSelf: 'flex-start', fontWeight: 'bold', width: normalize(100) }} >
+                            {dropdowndata != null && dropdowndata != undefined ? dropdowndata : ''}
+                            {/* {getDropDownData(dropdowndata)} */}
+                        </Text>
+                    </View>
+                </TouchableOpacity> : null}
+
+            {props.type != undefined && props.type == 2 ?
+                <TouchableOpacity
+                    onPress={() => props.editable == true ? props.outsidemeds == true ? FetchOutsideMeds() : FetchDropdownList() : FetchList()}
+                    // onLongPress={() => props.LongPress ? setStage(true) : null}
+                    disabled={props.multiformat != undefined ? props.multiformat : false}
+                    style={{
+                        flexDirection: 'row', paddingHorizontal: normalize(5), alignItems: 'center',
+                    }}
+                >
+                    {props.iconName ?
+                        <View style={{}}>
+                            <Icons.FontAwesome5 name={props.iconName} color=
+                                {props.flagData == 1 ? props.outsidemeds != undefined && props.outsidemeds != null && props.outsidemeds ? 'red' : Global.AppTheme.primary_color : props.outsidemeds != undefined && props.outsidemeds != null && props.outsidemeds ? 'red' : Global.AppTheme.primary_color}
+                                size={normalize(20)}
+                                style={{ paddingHorizontal: normalize(5), transform: [{ rotate: '45deg' }] }} />
+                        </View> : null}
+
+
+                    <View style={{ paddingLeft: normalize(5) }}>
+                        <View>
+                            <Text adjustsFontSizeToFit style={{ fontSize: normalize(14), alignSelf: 'flex-start', fontWeight: 'bold', color: ValueCheck(props.bgColor) ? props.bgColor : Global.AppTheme.primary_color }} >
+                                {dropdowndata != null && dropdowndata != undefined ? dropdowndata : ''}
+                            </Text>
+                        </View>
+
+                        <View style={{}}>
+                            <Text style={{ fontSize: normalize(9), fontWeight: 'bold', color: 'blue' }} >
+                                {props.cornerKey != null && props.cornerKey != undefined && typeof props.cornerKey === 'string' ? (props.cornerKey).toUpperCase() : ''}
+                            </Text>
+                        </View>
+                    </View>
+                </TouchableOpacity> : null}
+
+            {props.type != undefined && props.type == 3 ?
+                <View style={{ flexDirection: 'column' }}>
+                    <View style={{ flexDirection: 'row', paddingVertical: normalize(0), alignItems: 'center' }}>
+                        {/* <Icons.MaterialCommunityIcons name={"clock-time-eight"} color={"black"} size={normalize(15)} /> */}
+                        <Text style={{
+                            fontSize: normalize(11),
+                            // color: 'black',
+                            // fontStyle: 'italic',
+                            fontWeight: Platform.OS == 'ios' ? '300' : '325',
+                            color: Global.AppTheme.primary_color,
+                        }}> {props.typeText}
+                        </Text>
+                    </View>
+
+                    <TouchableOpacity
+                        onPress={() => props.editable == true ? props.outsidemeds == true ? FetchOutsideMeds() : FetchDropdownList() : FetchList()}
+                        // onLongPress={() => props.LongPress ? setStage(true) : null}
+                        disabled={props.multiformat != undefined ? props.multiformat : false}
+                        style={{
+                            width: Dimensions.get('screen').width * 0.24, alignItems: 'center',
+                            backgroundColor: 'white',
+                            alignSelf: 'center',
+                            flexDirection: 'row', borderColor: 'lightgrey',
+                            borderWidth: 1, borderRadius: 5, padding: 5, elevation: 3,
+                            height: normalize(30), marginHorizontal: normalize(2),
+                        }}
+                    >
+                        <View style={{ position: 'absolute', bottom: 0, right: 3, width: normalize(130) }}>
+                            <Text numberOfLines={1} style={{ fontSize: normalize(9), fontWeight: 'bold' }} >
+                                {props.cornerKey != null && props.cornerKey != undefined && typeof props.cornerKey === 'string' ? (props.cornerKey).toUpperCase() : ''}</Text>
+                        </View>
+                        <View>
+                            <Text style={{ fontSize: normalize(12), paddingLeft: 3, fontWeight: 'bold' }} >
+                                {dropdowndata != null && dropdowndata != undefined ? dropdowndata : ''}
+                                {/* {getDropDownData(dropdowndata)} */}
+                            </Text>
+                        </View>
+                    </TouchableOpacity>
+                </View> : null}
+
+            {props.patientservicenewoption ?
+                <TouchableOpacity
+                    onPress={() => {
+                        navigation.navigate('CPatientServiceInvestigation', { data: props.medicineData, medicineindex: props.medicineindex });
+                    }}
+                    style={{
+                        borderWidth: 0,
+                        borderColor: 'red',
+                        position: 'absolute',
+                        right: 0,
+                        height: '100%',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                    }}
+                >
+                    <HOCIcons.Icons
+                        icongroup={2}
+                        name={'list-alt'}
+                        color={Global.AppTheme.primary_color}
+                        size={normalize(25)}
+                        style={{
+                            marginHorizontal: normalize(5),
+                        }}
+                    />
+                </TouchableOpacity>
+                : null}
+
+
+            {isdropdownshow ?
+                <Overlay visible={true}
+                    onClose={() => setDropdownShow(false)}
+                    closeOnTouchOutside
+                    animationType="fadeInUp"
+                    containerStyle={{ backgroundColor: 'transparent' }}
+                    childrenWrapperStyle={getOverlayChildrenWrapperStyle()}
+                    animationDuration={500}
+                >
+
+                    <View style={{ position: 'absolute', right: 14, top: 5, marginTop: normalize(5) }}>
+                        <TouchableOpacity
+                            onPress={() => setDropdownShow(false)}
+                        >
+                            <Icons.FontAwesome5 name={'angle-double-down'} size={normalize(20)} color={Global.AppTheme.primary_color} />
+                        </TouchableOpacity>
+                    </View>
+                    {!isLoading ?
+                        searchResult.httpstatus == 200 ?
+                            DropdownLayout()
+                            :
+                            <View>
+                                <Text style={[ComponentStyles.no_data_found_text]}>No Result Found</Text>
+                            </View>
+                        :
+                        props.outsidemeds == true ?
+                            <View>
+                                {/* <Text style={{ alignSelf: 'center' }}>Edit Content</Text> */}
+                                {/* <COutsidePrescription
+                                    type={2}
+                                    data={MedicineData}
+                                    callBackFromOP={val => (val == undefined ? null : props.callBackFromOP != undefined ? (props.callBackFromOP(val)
+                                        // setDropDownData(val.medicinename)
+                                    ) : null)}
+                                    visibility={val => (val == undefined ? null : setDropdownShow(false))}
+                                    callBack={val => (val == undefined ? null : props.outSideMeds != undefined ? props.outSideMeds(val) : null)}
+                                /> */}
+                            </View>
+                            :
+                            <View style={{
+                                flex: 1, width: '100%', justifyContent: 'center',
+                                backgroundColor: 'transparent', borderRadius: 10,
+                            }}>
+                                <SearchLoader />
+                            </View>
+                    }
+                </Overlay>
+                : null}
+
+            {stage ?
+                <OverlayHOCComponent
+                    visibility={val => (val == undefined ? null : setStage(val))}
+                    xyz={val => (val == undefined ? null :
+                        setStage(false)
+                        // setDropDownData(val.displayvalue)
+                    )}
+                    value={props.cornerKey}
+                    data={props.medicineData}
+                // onselect={val => (val == undefined ? null : onSelect(val))}
+                // data={searchResult != null && searchResult != undefined && searchResult.length > 0 ? searchResult : null}
+                /> : null}
+        </View>
+    );
+
+    function GetDropdown(data) {
+        const newDropDownData = data != undefined ? data.filter(function (item) {
+            const dataItem1 = item.displayvalue ? item.displayvalue.toUpperCase() : ''.toUpperCase();
+            const dataItem2 = item.content != undefined ? item.content.toUpperCase() : ''.toUpperCase();
+            const dataItem = dataItem1 + dataItem2;
+            const textData = searchData.toUpperCase();
+            return dataItem.indexOf(textData) > -1;
+        }) : null;
+        return (
+            <View style={layoutstyles.overlay_screen_listview_container}>
+                <View style={getOverlayScreenChildlistContainer()}>
+                    <FlatList
+                        data={newDropDownData}
+                        renderItem={renderItem}
+                        keyboardShouldPersistTaps="handled"
+                        initialNumToRender={10}
+                        maxToRenderPerBatch={20}
+                        keyExtractor={item => item.datavalue}
+                    />
+                </View>
+
+                <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}
+                        keyboardShouldPersistTaps="handled"
+                        style={{ paddingBottom: 20 }}
+                        contentContainerStyle={{ alignItems: 'center' }}
+                        keyExtractor={item => item}
+                    />
+                </View>
+            </View>
+        );
+    }
+
+    function renderAlphabet({ index, item }) {
+        return (
+            <TouchableOpacity style={{
+                width: normalize(40), alignItems: 'center', paddingVertical: 2, borderRadius: normalize(40) / 2,
+                backgroundColor: index == alphaindex ? 'blue' : 'white',
+            }}
+                onPress={() => getAlphabetData(item, index)}>
+                <Text style={{
+                    color: index == alphaindex ? 'white' : 'black',
+                    fontWeight: index == alphaindex ? 'bold' : 'normal',
+                }}>{item}</Text>
+            </TouchableOpacity>
+        );
+    }
+
+    function getAlphabetData(alpha, index) {
+        var filter = displayData.filter(value => value.displayvalue != undefined ? (value.displayvalue).charAt(0) == alpha : '');
+        setAlphaIndex(index);
+        setFilterPurpose(filter);
+        index == 0 ? setSearchData('') : setSearchData(alpha);
+        index == 0 ? setAlphaFilter(false) : setAlphaFilter(true);
+    }
+
+    function renderItem(data) {
+        return (
+            <TouchableOpacity
+                style={getListviewItem()}
+                onPress={() => selection(data.item, data.item.selected, props.keycode)}
+                activeOpacity={0.5}
+            >
+                <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                    <Icons.FontAwesome name="dot-circle-o" color={Global.AppTheme.primary_color} size={normalize(12)}
+                        style={{ paddingRight: normalize(5), paddingLeft: normalize(4) }} />
+                    <Text style={selectedValue != null && selectedValue != undefined ? selectedValue == item.datavalue ? getListviewItemText(true) : getListviewItemText(false) : (getListviewItemText(false), { color: data.item.color && data.item.color != null && data.item.color != undefined ? data.item.color : 'black', fontSize: normalize(14) })}>
+                        {data.item.displayvalue}
+                    </Text>
+                </View>
+
+                {data.item.content != undefined ?
+                    <Text style={{ fontSize: normalize(11), fontWeight: 'bold', color: 'blue', paddingRight: normalize(5), alignSelf: 'flex-end' }}>{data.item.content}</Text> : null}
+            </TouchableOpacity>
+        );
+    }
+
+    function getOverlayScreenChildcontainer() {
+        return (
+            {
+                // height: Dimensions.get('window').height * 0.7,
+                // backgroundColor:'red',
+                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: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        marginBottom: 5,
+    },
+    overlay_searchTextbox_View: {
+        width: '96%',
+
+    },
+    overlay_screen_heading_text: {
+        ...ComponentStyles.popup_heading,
+        width: '100%',
+    },
+    overlay_screen_container: {
+        width: '100%',
+        flex: 1,
+        // backgroundColor:'yellow'
+    },
+});
+
+export default SDropdownTable;