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

package/src/CustomComponents/SDropDownDosage.js

@@ -0,0 +1,1087 @@
+import React, { useState, useContext, useEffect } from 'react';
+import { TouchableOpacity, StyleSheet, View, TouchableHighlight, Text, Image, TextInput, ScrollView, FlatList, Touchable } from 'react-native';
+import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
+import ComponentStyles, { normalize } from '../CommonStyle/componentStyle';
+import { colors } from '../CommonStyle/commonStyle';
+import Overlay from 'react-native-modal-overlay';
+import {
+    getListviewItem,
+    getListviewItemText,
+    getPopupHeadingOptionText,
+} from '../CommonStyle/PopupStyle';
+import { APIURL } from '../../../../../src/Common/apiConstants';
+import Dropdown from '../Json/Dropdown.json';
+import Entypo from 'react-native-vector-icons/Entypo';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
+import { Dimensions } from 'react-native';
+import SearchLoader from '../Custom/SearchLoader';
+import { notifyMessage } from '../CommonStyle/ComponentFunctions';
+import { NetworkServiceCall } from '@jescon-technologies/react-native-ui-kit';
+import FontAwesome from 'react-native-vector-icons/FontAwesome';
+import SDropDownNew from '../StaticComponents/SDropDownNew';
+import AntDesign from 'react-native-vector-icons/AntDesign';
+import STimePicker from '../StaticComponents/STimePicker';
+import SCheckBox from '../StaticComponents/SCheckBox';
+import { Global } from '../../../../../src/Common/Global';
+import { Icons } from '@jescon-technologies/react-native-ui-kit';;
+
+var searchResult = [];
+var tempvalue = [];
+var DosageArray = [];
+var ValueString = null;
+const SDropDownDosage = (props) => {
+    const [isdropdownshow, setDropdownShow] = useState(false);
+    const [searchData, setSearchData] = useState('');
+    const [isLoading, setIsLoading] = useState(true);
+    const [savevisibility, setSaveVisibility] = useState(true);
+    const [section, setSection] = useState(props.editable ? 1 : 2);
+    // console.log("EDITABLEEEEEEEEEEEEEEEEEE", JSON.stringify(section))
+    const [refresh, setRefresh] = useState(1);
+    const [selectedValue, setSelectedValue] = useState(props.value);
+    const [displayData, setDisplayData] = useState([]);
+    const [stage, setStage] = useState(false);
+    const [alphaindex, setAlphaIndex] = useState();
+    const [alphaFilter, setAlphaFilter] = useState(false);
+    const [filterPurpose, setFilterPurpose] = useState([]);
+    const [visibility, setVisibility] = useState(true);
+    const [object, setObject] = useState({
+        'description': '',
+        'volume': 0,
+        'unit': '',
+        'intake': 0,
+        'usagetype': 20,
+        'hosumrusagenature': 23,
+        'hosumrusagenaturedisplay': '',
+        'patientdescription': '',
+        'consultantdescription': '',
+        'medicationdescription': '',
+        'flag': 1,
+        'remarks': '',
+        'specifictime': false,
+        'timeprovided': '',
+        'editspecifictime': false,
+    });
+
+    const [cloneobject, setCloneObject] = useState({
+        'description': '',
+        'descriptionedit': false,
+        'volume': 0,
+        'editvolume': false,
+        'unit': '',
+        'editunit': false,
+        'intake': 0,
+        'editintake': false,
+        'usagetype': 20,
+        'hosumrusagenature': 23,
+        'hosumrusagenaturedisplay': '',
+        'patientdescription': '',
+        'editpatientdescription': false,
+        'consultantdescription': '',
+        'editconsultantdescription': false,
+        'medicationdescription': '',
+        'editmedicationdescription': false,
+        'flag': 1,
+        'remarks': '',
+        'editremarks': false,
+        'specifictime': false,
+        'timeprovided': '',
+    });
+
+    useEffect(() => {
+        NetworkServiceCall('get', APIURL + 'emr/emrcommonget/rnladropdown 17', '')
+            .then(function (response) {
+                if (response.data.data != null &&
+                    response.data.data != undefined) {
+                    DosageArray = response.data.data;
+                }
+                else {
+                    notifyMessage('Network Error', 2);
+                }
+            });
+    }, []);
+
+
+    // console.log("......................", props.editable)
+    const [dropdowndata, setDropDownData] = useState(props.dropdowndata);
+    let flag = props.flagData ? props.flagData : 0;
+    function getOverlayScreenContainer() {
+        return ({
+            flexDirection: 'row',
+            margin: 10,
+            height: Dimensions.get('window').height * 0.045,
+        });
+    }
+
+
+    function FetchDropdownList(key) {
+        setSection(1);
+        setSearchData('');
+        setIsLoading(true);
+        setDropdownShow(true);
+        console.log('DROPDOWN AFTER SAVE', 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.sort((a, b) => a.displayvalue.localeCompare(b.displayvalue)));
+                    setIsLoading(false);
+
+                }
+                else {
+                    searchResult = [];
+                    setDisplayData([]);
+                    setIsLoading(false);
+                }
+            });
+    }
+
+    function FetchList() {
+        setSearchData('');
+        setIsLoading(true);
+        setDropdownShow(true);
+        searchResult = { 'httpstatus': 200 };
+        setDisplayData(props.dropdownarray);
+        setIsLoading(false);
+    }
+
+    function getDropDownIntake(details) {
+        let dropdownvaluenew3;
+        Dropdown.Intake != null
+            ? Dropdown.Intake.map(val => {
+                if (val.datavalue == details) {
+                    dropdownvaluenew3 = val.displayvalue;
+                    object.intake = val.datavalue;
+                }
+            })
+            : null;
+        return dropdownvaluenew3;
+    }
+
+    function EditDosage(params) {
+        // console.log("++++++++++++++++++++++++++++++++", JSON.stringify(props.completeData.dosage[0]))
+        setSection(2);
+        setSaveVisibility(false);
+        setDropdownShow(true);
+        setObject(props.completeData.dosage[0]);
+        // console.log("KKKKKKKKLLLLLLLLLHHHHHHHHHHH", JSON.stringify(object))
+        // let buttonapi = ""
+        // NetworkServiceCall("get", buttonapi, "")
+        //     .then(function (response) {
+        //         if (response.httpstatus == 200) {
+
+        //         }
+        //         else {
+
+        //         }
+        //     })
+    }
+
+    function selection(item, changevalue, keycode) {
+        console.log('flaggggggggggggggg', item);
+        // flag == 1 ? (calenderResponseComponentData.tokenno = 0) : null
+        let dataset = {
+            'datavalue': item.datavalue,
+            'displayvalue': item.displayvalue,
+            'key': keycode,
+        };
+        setDropDownData(item.displayvalue);
+        props.onChangeData(item);
+        props.refreshCount(1);
+        // props.editStatus(1)
+        setDropdownShow(false);
+    }
+
+    function DropdownLayout() {
+        return (
+            <View style={layoutstyles.overlay_screen_container}>
+                {/* <View style={{ alignItems: 'center' }}> */}
+                {/* <Text style={{ fontSize: normalize(12), fontWeight: 'bold' }}> 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 getDosageUnit(details) {
+        let dropdownvaluenew4;
+        Global.DosageArray != null && Global.DosageArray != undefined
+            && Global.DosageArray.length > 0
+            ? Global.DosageArray.map(val => {
+                if (val.datavalue == parseInt(details)) {
+                    dropdownvaluenew4 = val.displayvalue;
+                }
+            })
+            : null;
+        return dropdownvaluenew4;
+    }
+
+    function AddNewDosage(params) {
+        if (object.description != '' && object.volume != 0 && object.unit != '' && object.volume > 0) {
+            // let obj = {
+            //     ...object,
+            //     'displayvalue': object.description
+            // }
+
+            let obj = {
+                'hosumrcode': object.hosumrcode,
+                'description': cloneobject.descriptionedit ? cloneobject.description : object.description,
+                'volume': cloneobject.editvolume ? parseFloat(cloneobject.volume) : object.volume,
+                'unit': cloneobject.editunit ? cloneobject.unit : object.unit,
+                'intake': cloneobject.editintake ? cloneobject.intake : object.intake,
+                'usagename': cloneobject.descriptionedit ? cloneobject.description : object.description,
+                'usagetype': 20,
+                'patientdescription': cloneobject.editpatientdescription ? cloneobject.patientdescription : object.patientdescription,
+                'consultantdescription': cloneobject.editconsultantdescription ? cloneobject.consultantdescription : object.consultantdescription,
+                'medicationdescription': cloneobject.editmedicationdescription ? cloneobject.medicationdescription : object.medicationdescription,
+                'patientdescriptionlocalfont': object.patientdescriptionlocalfont,
+                'timingremarks': cloneobject.editremarks ? cloneobject.remarks : object.remarks,
+                'homrcodedetail': object.homrcodedetail,
+                'hosumrprescriptiontiming': object.hosumrprescriptiontiming,
+                'displayvalue': object.description,
+                'specifictime': cloneobject.editspecifictime ? cloneobject.specifictime : object.specifictime,
+                'timeprovided': cloneobject.editspecifictime ? cloneobject.timeprovided : object.timeprovided,
+            };
+
+            props.onChangeDosage(obj);
+            props.onChangeData(obj);
+            props.refreshCount(1);
+            setDropDownData(obj.description);
+            console.log('OBJDAGHDGJFHADFJAFHJDAHJFDHF', JSON.stringify(obj));
+            // console.log("$$$$$$$$$$$$$$$$$$$$$$$$$$$$", JSON.stringify(obj2))
+            setObject(obj);
+            setDropdownShow(false);
+        } else {
+            notifyMessage('Please fill out required fields', 3);
+        }
+    }
+
+    function SaveDosage(params) {
+        var groups = {
+            'procedurename': 'hosumrusage1',
+            'usagedescription': (cloneobject.description).toUpperCase(),
+            'volume': parseFloat(cloneobject.volume),
+            'unit': cloneobject.unit,
+            'intake': cloneobject.intake,
+            'usagetype': 20,
+            'hosumrusagenature': object.hosumrusagenature,
+            'patientdescription': cloneobject.patientdescription,
+            'consultantdescription': cloneobject.consultantdescription,
+            'medicationdescription': cloneobject.medicationdescription,
+            'flag': 1,
+            'remarks': cloneobject.remarks,
+            'specifictime': cloneobject.specifictime,
+            'timeprovided': cloneobject.timeprovided,
+        };
+        var output = { groups };
+
+        // console.log("OUTPUTTTTTTTTTTTTT", JSON.stringify(cloneobject.description))
+        // console.log("OUTPUTTTTTTTTTTTTT", JSON.stringify(cloneobject.volume))
+        // console.log("OUTPUTTTTTTTTTTTTT", JSON.stringify(cloneobject.unit))
+
+        if (cloneobject.description != '' && cloneobject.volume != 0 && cloneobject.unit != '' && cloneobject.volume > 0) {
+            let buttonapi = APIURL + 'commontemplatesave/RnCommonTemplateSave';
+            setIsLoading(true);
+            console.log('OUTPUTTTTTTTTTTTTT', JSON.stringify(output));
+            NetworkServiceCall('post', buttonapi, output).then(function (response) {
+                console.log('RESPONSEEEEEEEEEEEEEEEEEEEEEEEEEEEE', JSON.stringify(response));
+                if (response.httpstatus == 200
+                    && response.data != undefined && response.data != null
+                    && response.data.code != undefined && response.data.code > 0) {
+                    setSection(1);
+                    FetchDropdownList();
+                    setObject({
+                        'description': '',
+                        'volume': 0,
+                        'unit': '',
+                        'intake': 0,
+                        'usagetype': 20,
+                        'hosumrusagenature': 23,
+                        'hosumrusagenaturedisplay': '',
+                        'patientdescription': '',
+                        'consultantdescription': '',
+                        'medicationdescription': '',
+                        'flag': 1,
+                        'remarks': '',
+                        'specifictime': false,
+                        'timeprovided': '',
+                    });
+                    notifyMessage('Data Saved!!!!!', 1);
+                    setDropDownData(object.description);
+                } else {
+                    notifyMessage('Data Not Saved!!!!!', 2);
+                }
+            });
+        } else {
+            notifyMessage('Please fill out required fields', 3);
+        }
+        // console.log("DAttatattatatttatatata",JSON.stringify(output))
+    }
+
+    function createDosage(params) {
+        return (
+            <View style={{ flex: 1 }}>
+                <View style={{ flex: 1, padding: normalize(5) }}>
+                    {visibility ?
+                        <ScrollView >
+                            <View style={{ padding: normalize(10), backgroundColor: 'rgba(237, 232, 232,0.3)', borderWidth: 1, borderColor: 'lightgrey', borderRadius: 7 }}>
+                                <View style={{}}>
+                                    <Text style={{ fontSize: normalize(11), paddingHorizontal: 10 }}>Dosage Title *</Text>
+                                    <View
+                                        style={{
+                                            flexDirection: 'row',
+                                            borderWidth: 1,
+                                            borderColor: 'lightgrey',
+                                            justifyContent: 'flex-start',
+                                            alignItems: 'center',
+                                            borderRadius: 7,
+                                            height: Dimensions.get('screen').height * 0.048,
+                                            backgroundColor: '#fff', elevation: 3,
+                                        }}>
+
+                                        <FontAwesome5 name={'file'} color={Global.AppTheme.primary_color}
+                                            size={normalize(15)} style={{ paddingHorizontal: normalize(6) }} />
+
+                                        <TextInput
+                                            editable={true} // To scroll data , Editable is checked in onChangeText props
+                                            keyboardType={'default'}
+                                            placeholder={'Headings'}
+                                            autoCapitalize="characters"
+                                            placeholderTextColor={'lightgrey'}
+                                            onChangeText={changevalue => (cloneobject.description = changevalue,
+                                                cloneobject.descriptionedit = true)}
+                                            scrollEnabled
+                                            style={{
+                                                textAlignVertical: 'center',
+                                                width: '100%',
+                                                marginLeft: '1%',
+                                                padding: 0,
+                                                height: '100%',
+                                                fontSize: normalize(14),
+                                            }}
+                                        >{object.description != undefined ? object.description : ''}</TextInput>
+                                    </View>
+                                </View>
+
+                                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                                    <View>
+                                        <Text style={{ fontSize: normalize(11), paddingHorizontal: 10 }}>Dosage Volume *</Text>
+                                        <View
+                                            style={{
+                                                flexDirection: 'row',
+                                                borderWidth: 1,
+                                                borderColor: 'lightgrey',
+                                                justifyContent: 'flex-start',
+                                                alignItems: 'center',
+                                                borderRadius: 7,
+                                                width: normalize(150),
+                                                height: Dimensions.get('screen').height * 0.040,
+                                                backgroundColor: 'white',
+                                                backgroundColor: '#fff', elevation: 3,
+                                            }}>
+
+                                            <FontAwesome5 name={'file'} color={Global.AppTheme.primary_color}
+                                                size={normalize(15)} style={{ paddingHorizontal: normalize(6) }} />
+
+                                            <TextInput
+                                                editable={true} // To scroll data , Editable is checked in onChangeText props
+                                                keyboardType={'number-pad'}
+                                                placeholder={'Volume'}
+                                                autoCapitalize="characters"
+                                                placeholderTextColor={'lightgrey'}
+                                                onChangeText={changevalue =>
+                                                (cloneobject.volume = changevalue,
+                                                    cloneobject.editvolume = true)
+                                                }
+                                                scrollEnabled
+                                                style={{
+                                                    textAlignVertical: 'center',
+                                                    width: '100%',
+                                                    marginLeft: '3%',
+                                                    padding: 0,
+                                                    height: '100%',
+                                                    fontSize: normalize(14),
+                                                }}
+                                            >{object.volume != 0 ? object.volume : ''}</TextInput>
+                                        </View>
+                                    </View>
+
+                                    <View style={{ paddingHorizontal: normalize(5) }}>
+                                        <Text style={{ fontSize: normalize(11), paddingHorizontal: 10 }}>Unit *</Text>
+                                        <SDropDownNew
+                                            dropdownapi={'emr/emrcommonget/rnladropdown 17'}
+                                            dropdowndata={getDosageUnit(
+                                                object.unit != null && object.unit != undefined
+                                                    ? object.unit
+                                                    : '')}
+
+                                            onChangeData={val =>
+                                                val == undefined ? null : (cloneobject.unit = val.datavalue,
+                                                    cloneobject.editunit = true)
+                                            }
+                                            editable={true}
+                                            widthArr={Dimensions.get('screen').width * 0.41}
+                                            iconName={'file-medical'}
+                                            refreshCount={val =>
+                                                val == undefined ? null : setRefresh(refresh + val)
+                                            }
+                                        />
+                                    </View>
+
+                                    {/* <View style={{ marginLeft: normalize(5) }}>
+                                    <Text style={{ fontSize: normalize(11), paddingHorizontal: 10 }}>Dosage Unit *</Text>
+                                    <View
+                                        style={{
+                                            flexDirection: 'row',
+                                            borderWidth: 1,
+                                            borderColor: 'black',
+                                            justifyContent: 'flex-start',
+                                            alignItems: 'center',
+                                            borderRadius: 7,
+                                            width: normalize(120),
+                                            height: Dimensions.get('screen').height * 0.048,
+                                            backgroundColor: 'white',
+                                            backgroundColor: '#fff',
+                                        }}>
+
+                                        <FontAwesome5 name={"file"} color=Global.AppTheme.primary_color
+                                            size={normalize(15)} style={{ paddingHorizontal: normalize(6) }} />
+
+                                        <TextInput
+                                            editable={true} // To scroll data , Editable is checked in onChangeText props
+                                            keyboardType={'default'}
+                                            placeholder={'Unit'}
+                                            autoCapitalize='characters'
+                                            placeholderTextColor={'lightgrey'}
+                                            onChangeText={changevalue =>
+                                            (cloneobject.unit = changevalue,
+                                                cloneobject.editunit = true)
+                                            }
+                                            scrollEnabled
+                                            style={{
+                                                textAlignVertical: 'center',
+                                                width: '100%',
+                                                marginLeft: '3%',
+                                                padding: 0,
+                                                height: '100%',
+                                                fontSize: normalize(14),
+                                            }}
+                                        >{object.unit}</TextInput>
+                                    </View>
+                                </View> */}
+
+                                </View>
+
+                                <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginRight: 1 }}>
+                                    <View style={{}}>
+                                        <Text style={{ fontSize: normalize(11), paddingHorizontal: 10 }}>Intake</Text>
+                                        <SDropDownNew
+                                            dropdownapi={'emr/emrcommonget/rnladropdown 1'}
+                                            // dropdowndata={object.intakedisplay}
+                                            dropdowndata={getDropDownIntake(
+                                                object.intake != null && object.intake != undefined
+                                                    ? object.intake
+                                                    : '')}
+                                            onChangeData={val =>
+                                                val == undefined ? null : (cloneobject.intake = val.datavalue,
+                                                    cloneobject.intakedisplay = val.displayvalue,
+                                                    cloneobject.editintake = true)
+                                            }
+                                            editable={false}
+                                            dropdownarray={Dropdown.Intake}
+                                            widthArr={Dimensions.get('screen').width * 0.88}
+                                            iconName={'file-medical'}
+                                            refreshCount={val =>
+                                                val == undefined ? null : setRefresh(refresh + val)
+                                            }
+                                        />
+                                    </View>
+
+                                    {/* <View style={{}}>
+                                    <Text style={{ fontSize: normalize(11), paddingHorizontal: 10 }}>Intake</Text>
+                                    <SDropDownNew
+                                        dropdownapi={'emr/emrcommonget/rnladropdown 1'}
+                                        dropdowndata={object.hosumrusagenaturedisplay}
+                                        onChangeData={val =>
+                                            val == undefined ? null : object.hosumrusagenature = val.datavalue
+                                        }
+                                        editable={false}
+                                        dropdownarray={Dropdown.Intake}
+                                        widthArr={Dimensions.get('screen').width * 0.35}
+                                        iconName={'file-medical'}
+                                        refreshCount={val =>
+                                            val == undefined ? null : setRefresh(refresh + val)
+                                        }
+                                    />
+                                </View> */}
+                                </View>
+
+                                <View style={{ flexDirection: 'column', marginHorizontal: normalize(5), justifyContent: 'space-between' }} >
+                                    <SCheckBox data={{
+                                        value: object.specifictime, size: normalize(20),
+                                        displaytext: 'Specific Time ?',
+                                        // width: Dimensions.get('screen').width * 0.5
+                                    }}
+                                        callBack={val => (val == undefined ? null : (cloneobject.specifictime = val, object.specifictime = val, cloneobject.editspecifictime = true, setRefresh(refresh + 1)))}
+                                    />
+
+                                    {object.specifictime ?
+                                        <STimePicker
+
+                                            value={object.timeprovided}
+                                            callBack={val => (val == undefined ? null : (cloneobject.timeprovided = val,
+                                                cloneobject.editspecifictime = true))} /> : null}
+                                </View>
+
+                                <View style={{}}>
+                                    <Text style={{ fontSize: normalize(11), paddingHorizontal: 10 }}>Medication Description</Text>
+                                    <View
+                                        style={{
+                                            flexDirection: 'row',
+                                            borderWidth: 1,
+                                            borderColor: 'lightgrey',
+                                            justifyContent: 'flex-start',
+                                            alignItems: 'center',
+                                            borderRadius: 7,
+                                            height: Dimensions.get('screen').height * 0.049,
+                                            backgroundColor: '#fff', elevation: 3,
+                                        }}>
+                                        <FontAwesome5 name={'capsules'} color={Global.AppTheme.primary_color}
+                                            size={normalize(15)} style={{ paddingHorizontal: normalize(6) }} />
+
+                                        <TextInput
+                                            editable={true} // To scroll data , Editable is checked in onChangeText props
+                                            keyboardType={'default'}
+                                            autoCapitalize="characters"
+                                            placeholder={''}
+                                            placeholderTextColor={'lightgrey'}
+                                            onChangeText={changevalue =>
+                                            (cloneobject.medicationdescription = changevalue,
+                                                cloneobject.editmedicationdescription = true)
+                                            }
+                                            scrollEnabled
+                                            style={{
+                                                textAlignVertical: 'center',
+                                                width: '100%',
+                                                marginLeft: '1%',
+                                                padding: 0,
+                                                height: '100%',
+                                                fontSize: normalize(14),
+                                            }}
+                                        >{object.medicationdescription}</TextInput>
+                                    </View>
+                                </View>
+
+                                <View style={{}}>
+                                    <Text style={{ fontSize: normalize(11), paddingHorizontal: 10 }}>Consultant Description</Text>
+                                    <View
+                                        style={{
+                                            flexDirection: 'row',
+                                            borderWidth: 1,
+                                            borderColor: 'lightgrey',
+                                            justifyContent: 'flex-start',
+                                            alignItems: 'center',
+                                            borderRadius: 7,
+                                            height: Dimensions.get('screen').height * 0.048,
+                                            backgroundColor: 'white', elevation: 3,
+                                        }}>
+                                        <FontAwesome5 name={'user-md'} color={Global.AppTheme.primary_color}
+                                            size={normalize(15)} style={{ paddingHorizontal: normalize(6) }} />
+
+                                        <TextInput
+                                            editable={true} // To scroll data , Editable is checked in onChangeText props
+                                            keyboardType={'default'}
+                                            autoCapitalize="characters"
+                                            placeholder={''}
+                                            placeholderTextColor={'lightgrey'}
+                                            onChangeText={changevalue =>
+                                            (cloneobject.consultantdescription = changevalue,
+                                                cloneobject.editconsultantdescription = true)
+                                            }
+                                            scrollEnabled
+                                            style={{
+                                                textAlignVertical: 'center',
+                                                width: '100%',
+                                                marginLeft: '1%',
+                                                padding: 0,
+                                                height: '100%',
+                                                fontSize: normalize(14),
+                                            }}
+                                        >{object.consultantdescription}</TextInput>
+                                    </View>
+                                </View>
+
+                                <View style={{}}>
+                                    <Text style={{ fontSize: normalize(11), paddingHorizontal: 10 }}>Patient Description</Text>
+                                    <View
+                                        style={{
+                                            flexDirection: 'row',
+                                            borderWidth: 1,
+                                            borderColor: 'lightgrey',
+                                            justifyContent: 'flex-start',
+                                            alignItems: 'center',
+                                            borderRadius: 7,
+                                            height: Dimensions.get('screen').height * 0.048,
+                                            backgroundColor: '#fff', elevation: 3,
+                                        }}>
+
+                                        <FontAwesome5 name={'user-injured'} color={Global.AppTheme.primary_color}
+                                            size={normalize(15)} style={{ paddingHorizontal: normalize(6) }} />
+
+
+                                        <TextInput
+                                            editable={true} // To scroll data , Editable is checked in onChangeText props
+                                            keyboardType={'default'}
+                                            placeholder={''}
+                                            autoCapitalize="characters"
+                                            placeholderTextColor={'lightgrey'}
+                                            onChangeText={changevalue =>
+                                            (cloneobject.patientdescription = changevalue,
+                                                cloneobject.editpatientdescription = true)
+                                            }
+                                            scrollEnabled
+                                            style={{
+                                                textAlignVertical: 'center',
+                                                width: '100%',
+                                                marginLeft: '1%',
+                                                padding: 0,
+                                                height: '100%',
+                                                fontSize: normalize(14),
+                                            }}
+                                        >{object.patientdescription}</TextInput>
+                                    </View>
+                                </View>
+
+                                <View style={{}}>
+                                    <Text style={{ fontSize: normalize(11), paddingHorizontal: 10 }}>Remarks</Text>
+                                    <View
+                                        style={{
+                                            flexDirection: 'row',
+                                            borderWidth: 1,
+                                            borderColor: 'lightgrey',
+                                            justifyContent: 'flex-start',
+                                            alignItems: 'center',
+                                            borderRadius: 7,
+                                            height: Dimensions.get('screen').height * 0.048,
+                                            backgroundColor: '#fff', elevation: 3,
+                                        }}>
+                                        <FontAwesome5 name={'file'} color={Global.AppTheme.primary_color}
+                                            size={normalize(15)} style={{ paddingHorizontal: normalize(6) }} />
+
+                                        <TextInput
+                                            editable={true} // To scroll data , Editable is checked in onChangeText props
+                                            keyboardType={'default'}
+                                            autoCapitalize="characters"
+                                            placeholder={'Remarks'}
+                                            placeholderTextColor={'lightgrey'}
+                                            onChangeText={changevalue =>
+                                            (cloneobject.remarks = changevalue,
+                                                cloneobject.editremarks = true)
+                                            }
+                                            scrollEnabled
+                                            style={{
+                                                textAlignVertical: 'center',
+                                                width: '100%',
+                                                marginLeft: '1%',
+                                                padding: 0,
+                                                height: '100%',
+                                                fontSize: normalize(14),
+                                            }}
+                                        >{object.remarks}</TextInput>
+                                    </View>
+                                </View>
+                            </View>
+                        </ScrollView> : null}
+                </View >
+
+                <View style={{ flexDirection: 'row' }}>
+                    <View
+                        style={{
+                            position: 'absolute',
+                            bottom: normalize(0),
+                            zIndex: 1,
+                            width: '100%',
+                            // justifyContent: 'center',
+                            alignItems: 'center',
+                            flexDirection: 'row',
+                            backgroundColor: 'white',
+                            height: normalize(32),
+                        }}>
+                        {savevisibility ?
+                            <TouchableOpacity
+                                onPress={() => SaveDosage()}
+                                style={{
+                                    width: '20%',
+                                    height: normalize(30),
+                                    borderRadius: 7,
+                                    //backgroundColor: '#eae3e3',
+                                    alignItems: 'flex-start',
+                                    justifyContent: 'center',
+                                }}>
+                                <View style={{ backgroundColor: '#f4f2f2', alignItems: 'center', padding: normalize(6), paddingHorizontal: normalize(15), borderRadius: 7, borderBottomWidth: 4, borderBottomColor: 'lightgrey' }}>
+                                    <Entypo name="save" color={Global.AppTheme.primary_color} size={normalize(25)} />
+                                    <Text style={{ fontSize: normalize(10), color: Global.AppTheme.primary_color, marginLeft: normalize(5) }}>
+                                        Save
+                                    </Text>
+                                </View>
+                            </TouchableOpacity> : null}
+
+                        {!savevisibility ?
+                            <TouchableOpacity
+                                onPress={() => AddNewDosage()}
+                                style={{
+                                    width: '20%',
+                                    height: normalize(30),
+                                    borderRadius: 7,
+                                    //backgroundColor: '#eae3e3',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                }}>
+                                <View style={{ backgroundColor: '#f4f2f2', alignItems: 'center', padding: normalize(6), paddingHorizontal: normalize(15), borderRadius: 7, borderBottomWidth: 4, borderBottomColor: 'lightgrey' }}>
+                                    <FontAwesome5 name="edit" color={Global.AppTheme.primary_color} size={normalize(20)} />
+                                    <Text style={{ fontSize: normalize(10), color: Global.AppTheme.primary_color, fontWeight: 'bold' }}>
+                                        EDIT
+                                    </Text>
+                                </View>
+                            </TouchableOpacity> : null}
+                    </View>
+                </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 getSectionNew(params) {
+        setSection(2, FetchDropdownList());
+        setObject({
+            'description': '',
+            'volume': 0,
+            'unit': '',
+            'intake': 0,
+            'usagetype': 20,
+            'hosumrusagenature': 23,
+            'hosumrusagenaturedisplay': '',
+            'patientdescription': '',
+            'consultantdescription': '',
+            'medicationdescription': '',
+            'flag': 1,
+            'remarks': '',
+            'specifictime': false,
+            'timeprovided': '',
+            'editspecifictime': false,
+        });
+        setSaveVisibility(true);
+    }
+
+
+    return (
+        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+            <TouchableOpacity
+                onPress={() => props.editable ? FetchDropdownList() : EditDosage()}
+                disabled={props.disabled != undefined ? props.disabled : false}
+                onLongPress={() => props.LongPress ? setStage(true) : null}
+                style={{
+                    // borderTopWidth: 1, borderBottomWidth: 1, borderLeftWidth: 0.5, borderRightWidth: 0.5,
+                    paddingLeft: 1, width: props.widthArr, alignItems: 'center',
+                    backgroundColor: '#fff', borderWidth: 0,
+                    elevation: 3, shadowColor: '#000',
+                    shadowOffset: { width: 0, height: 2 },
+                    shadowRadius: 2,
+                    height: props.heightArr ? props.heightArr : Dimensions.get('screen').height * 0.06,
+                    flexDirection: 'row', borderRadius: 10,
+                    // borderColor: props.borderArr ? props.borderArr : Global.AppTheme.primary_color
+                }}
+            >
+                {props.iconName ?
+                    <View style={{ width: normalize(15) }}>
+                        <Ionicons name={props.iconName} color=
+                            {props.flagData == 1 ? Global.AppTheme.primary_color : Global.AppTheme.primary_color}
+                            size={normalize(14)} />
+                    </View> : null}
+
+                <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>
+
+                <FontAwesome name="window-close" color={Global.AppTheme.primary_color} size={normalize(15)}
+                    onPress={() => setDropDownData('', props.onDeleteData(props.completeData))} style={{ position: 'absolute', right: 2, bottom: 2 }} />
+                {isdropdownshow ?
+                    <Overlay visible={true}
+                        onClose={() => setDropdownShow(false)}
+                        closeOnTouchOutside
+                        animationType="fadeInUp"
+                        containerStyle={{ backgroundColor: 'transparent' }}
+                        childrenWrapperStyle={getOverlayChildrenWrapperStyle()}
+                        animationDuration={1500}
+                    >
+                        <Text style={{ alignSelf: 'center', fontSize: normalize(12), fontWeight: 'bold', marginBottom: normalize(8), color: Global.AppTheme.primary_color, marginTop: normalize(-3) }}>{section == 1 ? 'SELECT DOSAGE' : savevisibility ? 'CREATE DOSAGE' : 'EDIT DOSAGE'}</Text>
+                        <View style={{ flex: 1, width: '100%' }}>
+                            <View
+                                style={{
+                                    //marginTop: normalize(10),
+                                    // backgroundColor: '#eae5e5',
+                                    width: '100%',
+                                    borderRadius: 5,
+                                    height: normalize(35),
+                                    flexDirection: 'row',
+                                    alignItems: 'center',
+                                    justifyContent: 'space-evenly',
+
+                                }}>
+                                <TouchableOpacity
+                                    onPress={() => setSection(1)}
+                                    style={{
+                                        height: '100%',
+                                        flexDirection: 'column', padding: 5,
+                                        alignItems: 'center',
+                                        backgroundColor: section == 1 ? '#eaf2ff' : '#fff',
+                                        borderWidth: 1, borderRadius: 5,
+                                        borderColor: Global.AppTheme.primary_color,
+                                        width: '15%', justifyContent: 'center', elevation: 3,
+                                    }}>
+                                    <View style={{}}>
+                                        <MaterialIcons
+                                            name="find-in-page"
+                                            color={Global.AppTheme.primary_color}
+                                            size={normalize(20)}
+                                        />
+                                    </View>
+                                    <View>
+                                        <Text
+                                            style={[getPopupHeadingOptionText(
+                                                section == 1 ? Global.AppTheme.primary_color : Global.AppTheme.primary_color,
+                                            ),{fontSize:normalize(10)}]}>
+                                            ALL
+                                        </Text>
+                                    </View>
+                                </TouchableOpacity>
+
+                                <TouchableOpacity
+                                    onPress={() => getSectionNew()}
+                                    style={{
+                                        height: '100%',
+                                        flexDirection: 'column',
+                                        alignItems: 'center',
+                                        padding: normalize(5),
+                                        backgroundColor: section == 1 ? '#fff' : '#eaf2ff',
+                                        borderWidth: 1, borderRadius: 5,
+                                        borderColor: Global.AppTheme.primary_color,
+                                        width: '15%', justifyContent: 'center', elevation: 3,
+                                    }}>
+                                    <View>
+                                        <Entypo
+                                            name="add-to-list"
+                                            color={Global.AppTheme.primary_color}
+                                            size={normalize(20)}
+                                        />
+                                    </View>
+                                    <View>
+                                        <Text
+                                            style={[getPopupHeadingOptionText(
+                                                section == 2 ? '#eaf2ff' : '#fff',
+                                            ),{fontSize:normalize(10)}]}>
+                                            CREATE
+                                        </Text>
+                                    </View>
+                                </TouchableOpacity>
+
+                                <TouchableOpacity style={{
+                                    height: '100%',
+                                    flexDirection: 'column', padding: 5,
+                                    alignItems: 'center',
+                                    backgroundColor: '#fff',
+                                    borderWidth: 1, borderRadius: 5,
+                                    borderColor: Global.AppTheme.primary_color,
+                                    width: '15%', justifyContent: 'center', elevation: 3,
+                                }}
+                                    onPress={() => setDropdownShow(false)}
+                                >
+                                    <FontAwesome name={'reply'}
+                                        color={Global.AppTheme.primary_color} size={normalize(20)} />
+                                    <Text
+                                        style={[getPopupHeadingOptionText(
+
+                                        ), { fontSize: normalize(10) }]}>
+                                        BACK
+                                    </Text>
+                                </TouchableOpacity>
+
+                            </View>
+                            {section == 1 ?
+                                <View style={{ flex: 1, width: '100%' }}>
+                                    {!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>}
+                                </View> :
+                                <View style={{ flex: 1, width: '100%' }}>
+                                    {createDosage()}
+                                </View>}
+                        </View>
+                    </Overlay>
+                    : null}
+            </TouchableOpacity>
+        </View>
+
+    );
+
+    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}
+                    keyExtractor={(item, index) => 'key' + index}
+                />
+
+                <View style={{
+                    height: Dimensions.get('window').height * 0.60,
+                    marginBottom: Dimensions.get('window').height * 0.01,
+                }}>
+                    <FlatList
+                        data={['#', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '-', '.', '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 getAlphabetData(alpha, index) {
+        var filter = displayData.filter(value => value.displayvalue != undefined ? (value.displayvalue).charAt(0) == alpha : '');
+        setAlphaIndex(index);
+        setFilterPurpose(filter);
+        setSearchData(alpha);
+        index == 0 ? (setAlphaFilter(false), setSearchData('')) : (setAlphaFilter(true), setSearchData(alpha));
+    }
+
+    function renderAlphabet({ index, item }) {
+        return (
+            <TouchableOpacity style={{
+                width: normalize(25), alignItems: 'center', paddingVertical: 2, borderRadius: normalize(40) / 2,
+                backgroundColor: index == alphaindex ? '#8162fc' : 'white',
+            }}
+                onPress={() => getAlphabetData(item, index)}>
+                <Text style={{
+                    color: index == alphaindex ? 'white' : 'black',
+                    fontWeight: index == alphaindex ? 'bold' : 'normal',
+                }}>{item}</Text>
+            </TouchableOpacity>
+        );
+    }
+
+    function renderItem(data) {
+        return (
+            <TouchableOpacity
+                style={[getListviewItem(), { flexDirection: 'row', alignItems: 'center' }]}
+                onPress={() => 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(5) }} />
+
+                <Text style={selectedValue != null && selectedValue != undefined ? selectedValue == item.datavalue ? getListviewItemText(true) : getListviewItemText(false) : getListviewItemText(false)}>
+                    {data.item.displayvalue}
+                </Text>
+            </TouchableOpacity>
+        );
+    }
+
+    function getOverlayScreenChildcontainer() {
+        return (
+            {
+                height: Dimensions.get('window').height * 0.60,
+                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%',
+    },
+});
+
+export default SDropDownDosage;