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

package/src/Custom/TableComponent/TagTable.js

@@ -1,1200 +0,0 @@
-
-
-import React, { useState } from 'react';
-import { View, FlatList, TouchableOpacity, StyleSheet, ScrollView, Dimensions, Text, TouchableWithoutFeedback } from 'react-native';
-import { height, normalize } from '../../CommonStyle/componentStyle';
-import CText from '../../CustomComponents/CText';
-import { TextInput } from 'react-native-paper';
-import { MenuProvider, Menu, MenuOptions, MenuOption, MenuTrigger } from 'react-native-popup-menu';
-import HOCIcons from '../../HOC/HOCIcons';
-import CDropDownList from '../../CustomComponents/CDropDownList';
-import moment from 'moment';
-import { Global } from '../../Common/Global';
-import { APIURL } from '../../Common/apiConstants';
-import CAwesomeButton from '../../CustomComponents/CAwesomeButtonLab';
-import { isBNUL, isNUQ } from '../../CommonStyle/ComponentFunctions';
-import CCustomTextInput from '../../CustomComponents/CCustomTextInput';
-
-const TagTable = (props) => {
-
-    // console.log('TagTable data @@@@@@@@@@@@@@@@@@@@@', JSON.stringify(data));
-    // console.log('TagTable data &&&&&&&&&&&&&&&&&&&&&', JSON.stringify(editdata));
-
-    const alternatecolor = '#fefefe';
-
-    const [refresh, setRefresh] = useState(0);
-    const [dropDownItem, setDropDownItem] = useState({
-        duration: '',
-        medicationtype: '',
-        tagdatanature: '',
-        tagparameter: '',
-        tagnature: '',
-        tagdatatype: '',
-        durationname: '',
-        medicationtypename: '',
-        tagdatanaturename: '',
-        tagparametername: '',
-        tagnaturename: '',
-        tagdatatypename: '',
-    });
-
-    const [selectedItems, setSelectedItems] = useState(props.editmode ? props.editdata : props.data);
-
-    // const selectedItems = props.editmode ? props.editdata : props.data;
-
-
-
-    const handleVariableSelect = (index) => {
-        setSelectedItems(prevItems =>
-            prevItems.map((item, i) =>
-                i === index
-                    ? { ...item, variableChecked: !item.variableChecked }
-                    : item
-            )
-        );
-        // props.setIdList(props.idlist);
-    };
-
-    const handleCheckboxChange = (index, field) => {
-        if (!selectedItems[index].variableChecked) {return;}
-        setSelectedItems(prevItems =>
-            prevItems.map((item, i) =>
-                i === index ? { ...item, [field]: !item[field] } : item
-            )
-        );
-        //  props.setIdList(props.idlist);
-    };
-
-    const handleSizeChange = (index, increment) => {
-        if (!selectedItems[index].variableChecked) {return;}
-        setSelectedItems(prevItems =>
-            prevItems.map((item, i) =>
-                i === index ? { ...item, fontsize: Math.max(1, item.fontsize + (increment ? 1 : -1)) } : item
-            )
-        );
-        // props.setIdList(props.idlist);
-    };
-
-    const handleTaborNewlineChange = (index, value) => {
-        if (!selectedItems[index].variableChecked) {return;}
-
-        setSelectedItems(prevItems =>
-            prevItems.map((item, i) =>
-                i === index ? { ...item, tabornewline: value } : item
-            )
-        );
-        // props.setIdList(props.idlist);
-    };
-
-
-    const getSelectedVariableNames = () => {
-
-        return selectedItems
-            .filter(item => item.variableChecked)
-            .map(item => {
-                // generate new variabename with uniqueid
-                const uniquename = `${moment().format('YYMMDDHHMMssS')}`;
-                const newVariableName = `#${item.variablename}${uniquename}`;
-                item.variablename = newVariableName;
-                item.duration = dropDownItem.duration;
-                item.medicationtype = dropDownItem.medicationtype;
-                item.tagdatanature = dropDownItem.tagdatanature;
-                item.tagparameter = dropDownItem.tagparameter;
-                item.tagnature = dropDownItem.tagnature;
-                item.tagdatatype = dropDownItem.tagdatatype;
-                const prefix = item.prefix ? `${item.prefix} ` : '';
-                const suffix = item.suffix ? ` ${item.suffix}` : '';
-
-                const boldStyle = item.bold ? 'font-weight: bold;' : 'font-weight: normal;';
-                const italicStyle = item.italic ? 'font-style: italic;' : 'font-style: normal;';
-                const underlineStyle = item.underline ? 'text-decoration: underline;' : 'text-decoration: none;';
-                const fontSize = item.fontsize ? `${item.fontsize}px` : '12px';
-
-                // Create the formatted variable name
-                const formattedVariableName = `${prefix}${newVariableName}${suffix}`;
-
-                // Determine the newline character based on tabornewline
-                const newlineCharacter = item.tabornewline === 0 ? '' :
-                    item.tabornewline === 1 ? ' ' : // Space
-                        item.tabornewline === 2 ? '     ' : // Tab
-                            item.tabornewline === 3 ? '<br/>' : // HTML line break for new line
-                                '';
-
-                // Create the final formatted string with the appropriate styling
-                const formattedString = `
-                <span style="${boldStyle}${italicStyle}${underlineStyle}font-size: ${fontSize};">
-                    ${newlineCharacter}${formattedVariableName}
-                </span>
-                `;
-                return {
-                    item,
-                    dropDownItem,
-                    formattedString,
-                    tabornewline: item.tabornewline,
-                    // newVariableName: item.variablename,
-                };
-            });
-    };
-
-    const handlePrefixChange = (index, text) => {
-        setSelectedItems(prevItems =>
-            prevItems.map((item, i) =>
-                i === index ? { ...item, prefix: text } : item
-            )
-        );
-        // props.setIdList(props.idlist);
-    };
-
-    const handleSuffixChange = (index, text) => {
-        setSelectedItems(prevItems =>
-            prevItems.map((item, i) =>
-                i === index ? { ...item, suffix: text } : item
-            ));
-            // props.setIdList(props.idlist);
-    };
-
-    const handleDropdownChange = (key, value) => {
-        setDropDownItem(prevState => ({ ...prevState, [key]: value }));
-    };
-
-    const addtagarray = [
-        {
-            'tabornewline': 0,
-            'iconname': 'not-interested',
-        },
-        {
-            'tabornewline': 1,
-            'iconname': 'remove-outline',
-        },
-        {
-            'tabornewline': 2,
-            'iconname': 'progress-empty',
-        },
-        {
-            'tabornewline': 3,
-            'iconname': 'corner-down-left',
-        },
-    ];
-
-    function fnHandleDropDownChange(v, firstindex, secondindex) {
-
-        setSelectedItems(prevData => {
-
-            const updatedData = [...prevData];
-
-            updatedData[firstindex] = {
-                ...updatedData[firstindex],
-                tagproperties: updatedData[firstindex].tagproperties,
-            };
-
-            updatedData[firstindex].tagproperties = [
-                ...updatedData[firstindex].tagproperties,
-            ];
-
-            updatedData[firstindex].tagproperties[secondindex] = {
-                ...updatedData[firstindex].tagproperties[secondindex],
-                datavalue: v.datavalue,
-                displayvalue: v.displayvalue,
-            };
-
-            return updatedData;
-        });
-        // props.setIdList(props.idlist);
-
-
-
-    }
-
-
-
-
-    const renderItem = ({ item, index }) => {
-
-        const getIcon = (value) => {
-
-            switch (value) {
-                case 0:
-                    return (
-                        <HOCIcons.MaterialIcons
-                            name={'not-interested'}
-                            size={normalize(12)}
-                            color={'black'}
-                        />
-                    );
-                case 1:
-                    return (
-                        <HOCIcons.Ionicons
-                            name={'remove-outline'}
-                            size={normalize(12)}
-                            color={'black'}
-                        />
-                    );
-                case 2:
-                    return (
-                        <HOCIcons.Entypo
-                            name={'progress-empty'}
-                            size={normalize(12)}
-                            color={'black'}
-                        />
-                    );
-                case 3:
-                    return (
-                        <HOCIcons.Feather
-                            name={'corner-down-left'}
-                            size={normalize(12)}
-                            color={'black'}
-                        />
-                    );
-                default:
-                    return null;
-            }
-        };
-
-        // let jsondata = [
-        //     {
-        //         code: 1,
-        //         displayname: 'Duration',
-        //         iconname: 'file',
-        //         icongroup: 3,
-        //         datavalue: 1,
-        //         displayvalue: ''
-        //     },
-        //     {
-        //         code: 2,
-        //         datavalue: 2,
-        //         iconname: 'file',
-        //         icongroup: 3,
-        //         displayname: 'Medication Type',
-        //         displayvalue: ''
-        //     },
-        //     {
-        //         code: 3,
-        //         datavalue: 3,
-        //         iconname: 'file',
-        //         icongroup: 3,
-        //         displayname: 'Scope',
-        //         displayvalue: ''
-        //     },
-        //     {
-        //         code: 4,
-        //         datavalue: 4,
-        //         iconname: 'file',
-        //         icongroup: 3,
-        //         displayname: 'Granularity',
-        //         displayvalue: ''
-        //     },
-        //     {
-        //         code: 5,
-        //         datavalue: 5,
-        //         iconname: 'file',
-        //         icongroup: 3,
-        //         displayname: 'Format',
-        //         displayvalue: ''
-        //     },
-        //     {
-        //         code: 6,
-        //         datavalue: 6,
-        //         iconname: 'file',
-        //         icongroup: 3,
-        //         displayname: 'Entity',
-        //         displayvalue: ''
-        //     },
-        // ]
-
-        return (
-            <TouchableWithoutFeedback>
-                <View style={{
-                    borderWidth: item.variableChecked ? 2 : 0.5,
-                    borderColor: item.variableChecked ? Global.AppTheme.primary_color : 'lightgrey',
-                    borderRadius: 5,
-                    padding: normalize(3),
-                    margin: normalize(3),
-                    backgroundColor: item.variableChecked ? alternatecolor : 'white',
-                }}>
-
-                    <View style={{
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        padding: 1,
-                    }}>
-                        <View style={{ marginLeft: 2, width: '45%' }}>
-                            <TouchableOpacity onPress={() =>
-                                props.editmode ?
-                                    null :
-                                    handleVariableSelect(index)
-                            }
-                                style={{
-                                    borderWidth: 0,
-                                }}
-                            >
-                                <CText style={[
-                                    styles.variableSelectText,
-                                    { color: item.variableChecked ? 'black' : 'gray' },
-                                ]}>
-                                    {item.variableChecked ? '✓ ' : ' '}
-                                    <CText
-                                        style={{
-                                            fontSize: item.fontsize || normalize(12),
-                                            fontWeight: item.bold ? 'bold' : 'normal',
-                                            fontStyle: item.italic ? 'italic' : 'normal',
-                                            textDecorationLine: item.underline ? 'underline' : 'none',
-                                            color: item.variableChecked ? 'black' : 'gray',
-                                            marginLeft: 10,
-                                        }}
-                                    >
-                                        {item.prefix ? `${item.prefix} ` : ''}{item.variablename}{item.suffix ? ` ${item.suffix}` : ''}
-                                    </CText>
-                                </CText>
-                            </TouchableOpacity>
-                        </View>
-                        <View style={{ flexDirection: 'row', width: '55%', justifyContent: 'flex-end', borderWidth: 0 }}>
-                            <TouchableOpacity
-                                style={[styles.varcolumn,
-
-                                item.bold && item.variableChecked && styles.activeButton]}
-                                onPress={() => handleCheckboxChange(index, 'bold')}
-                            >
-                                <CText style={[
-                                    styles.textButton,
-                                    {
-                                        fontWeight: item.bold && item.variableChecked ? 'bold' : 'normal',
-                                        color: item.bold && item.variableChecked ? 'blue' : 'gray',
-                                    },
-                                ]}>
-                                    B
-                                </CText>
-                            </TouchableOpacity>
-
-                            <TouchableOpacity
-                                style={[styles.varcolumn, item.italic && item.variableChecked && styles.activeButton]}
-                                onPress={() => handleCheckboxChange(index, 'italic')}
-                            >
-                                <CText style={[
-                                    styles.textButton,
-
-                                    {
-                                        fontStyle: item.italic && item.variableChecked ? 'italic' : 'normal',
-                                        color: item.italic && item.variableChecked ? 'blue' : 'gray',
-                                    },
-                                ]}>
-                                    i
-                                </CText>
-                            </TouchableOpacity>
-
-                            <TouchableOpacity
-                                style={[styles.varcolumn, item.underline && item.variableChecked && styles.activeButton]}
-                                onPress={() => handleCheckboxChange(index, 'underline')}
-                            >
-                                <CText style={[
-                                    styles.textButton,
-                                    {
-                                        textDecorationLine: item.underline && item.variableChecked ? 'underline' : 'none',
-                                        color: item.underline && item.variableChecked ? 'blue' : 'gray',
-                                    },
-                                ]}>
-                                    U
-                                </CText>
-                            </TouchableOpacity>
-
-                            <View style={styles.sizeControl}>
-                                <TouchableOpacity onPress={() => item.variableChecked && handleSizeChange(index, false)}>
-                                    <CText style={styles.sizeButton}>-</CText>
-                                </TouchableOpacity>
-                                <CText style={styles.sizeValue}>{item.fontsize}</CText>
-                                <TouchableOpacity onPress={() => item.variableChecked && handleSizeChange(index, true)}>
-                                    <CText style={styles.sizeButton}>+</CText>
-                                </TouchableOpacity>
-                            </View>
-
-                            {/* Menu for TaborNewline */}
-                            <View>
-                                <View style={styles.menuGroup} disabled={!item.variableChecked}>
-                                    <Menu disabled={!item.variableChecked}>
-                                        <MenuTrigger style={{}}>
-                                            <CText style={styles.triggerText}>
-                                                {getIcon(item.tabornewline)}
-                                                <HOCIcons.AntDesign
-                                                    name={'down'}
-                                                    size={normalize(12)}
-                                                    color={'black'}
-                                                />
-                                            </CText>
-                                        </MenuTrigger>
-                                        <MenuOptions
-                                            optionsContainerStyle={{ marginTop: normalize(-30) }}
-                                            disabled={!item.variableChecked}
-                                        >
-                                            <MenuOption onSelect={() => item.variableChecked && handleTaborNewlineChange(index, 0)}
-                                                style={[styles.menuOption, !item.variableChecked && styles.disabledOption]}
-                                            >
-                                                <View style={styles.optionContainer}>
-                                                    <HOCIcons.MaterialIcons
-                                                        name={'not-interested'}
-                                                        size={normalize(12)}
-                                                        color={'black'}
-                                                    />
-                                                    <CText style={styles.optionText}>None</CText>
-                                                </View>
-                                            </MenuOption>
-                                            <MenuOption onSelect={() => handleTaborNewlineChange(index, 1)} style={styles.menuOption}>
-                                                <View style={styles.optionContainer}>
-                                                    <HOCIcons.Ionicons
-                                                        name={'remove-outline'}
-                                                        size={normalize(12)}
-                                                        color={'black'}
-                                                    />
-                                                    <CText style={styles.optionText}>Space</CText>
-                                                </View>
-                                            </MenuOption>
-                                            <MenuOption onSelect={() => handleTaborNewlineChange(index, 2)} style={styles.menuOption}>
-                                                <View style={styles.optionContainer}>
-                                                    <HOCIcons.Entypo
-                                                        name={'progress-empty'}
-                                                        size={normalize(12)}
-                                                        color={'black'}
-                                                    />
-                                                    <CText style={styles.optionText}>Tab</CText>
-                                                </View>
-                                            </MenuOption>
-                                            <MenuOption onSelect={() => handleTaborNewlineChange(index, 3)} style={styles.menuOption}>
-                                                <View style={styles.optionContainer}>
-                                                    <HOCIcons.Feather
-                                                        name={'corner-down-left'}
-                                                        size={normalize(12)}
-                                                        color={'black'}
-                                                    />
-                                                    <CText style={styles.optionText}>Newline</CText>
-                                                </View>
-                                            </MenuOption>
-                                        </MenuOptions>
-                                    </Menu>
-                                </View>
-                            </View>
-                        </View>
-                    </View>
-
-                    <View>
-                        {item.variableChecked ?
-                            <View style={{ flexDirection: 'row', marginTop: normalize(10), justifyContent: 'space-evenly', width: '100%' }}>
-                                <View style={{ width: '47%' }}>
-                                    <CCustomTextInput
-                                        required={false}
-                                        info={'Enter Prefix.'}
-                                        custompositiontextviewstyle={{
-                                            position: 'absolute',
-                                            top: normalize(-5),
-                                            left: normalize(7),
-                                            flexDirection: 'row',
-                                            alignItems: 'center',
-                                            backgroundColor: item.variableChecked ? alternatecolor : 'white',
-                                        }}
-                                        inputstyle={{
-                                            flexDirection: 'row',
-                                            borderWidth: 0.5,
-                                            borderColor: 'grey',
-                                            borderRadius: 5,
-                                            alignItems: 'center',
-                                            height: normalize(30),
-                                            backgroundColor: item.variableChecked ? alternatecolor : 'white',
-                                            elevation: 0,
-                                        }}
-                                        iconstyle={{
-                                            icongroup: 3,
-                                            iconname: 'rename-box',
-                                            iconsize: normalize(18),
-                                            iconcolor: '#164c92',
-                                            style: {
-                                                paddingHorizontal: normalize(7),
-                                            },
-                                        }}
-                                        data={{
-                                            displaytext: 'Prefix',
-                                            type: 'default',
-                                            iconcolor: 'darkblue',
-                                            editable: true,
-                                            itemwidth: '100%',
-                                            iconname: 'id-badge',
-                                            value: isNUQ(item.prefix) ? item.prefix : null,
-                                            tfontweight: isNUQ(item.prefix) ? 'bold' : 'bold',
-                                            placeholder: '',
-                                            placeholdercolor: 'lightgrey',
-                                            capitalize: 'characters',
-                                            tfontsize: normalize(12),
-                                        }}
-                                        callBack={val => (val == undefined ? null : (
-                                            handlePrefixChange(index, val)
-                                        ))}
-                                    />
-                                </View>
-
-                                <View style={{ width: '47%' }}>
-                                    <CCustomTextInput
-                                        required={false}
-                                        info={'Enter Suffix.'}
-                                        custompositiontextviewstyle={{
-                                            position: 'absolute',
-                                            top: normalize(-5),
-                                            left: normalize(7),
-                                            flexDirection: 'row',
-                                            alignItems: 'center',
-                                            backgroundColor: item.variableChecked ? alternatecolor : 'white',
-                                        }}
-                                        inputstyle={{
-                                            flexDirection: 'row',
-                                            borderWidth: 0.5,
-                                            borderColor: 'grey',
-                                            borderRadius: 5,
-                                            alignItems: 'center',
-                                            height: normalize(30),
-                                            backgroundColor: item.variableChecked ? alternatecolor : 'white',
-                                            elevation: 0,
-                                        }}
-                                        iconstyle={{
-                                            icongroup: 3,
-                                            iconname: 'rename-box',
-                                            iconsize: normalize(18),
-                                            iconcolor: '#164c92',
-                                            style: {
-                                                paddingHorizontal: normalize(7),
-                                            },
-                                        }}
-                                        data={{
-                                            displaytext: 'Suffix',
-                                            type: 'default',
-                                            iconcolor: 'darkblue',
-                                            editable: true,
-                                            itemwidth: '100%',
-                                            iconname: 'id-badge',
-                                            value: isNUQ(item.prefix) ? item.prefix : null,
-                                            tfontweight: isNUQ(item.prefix) ? 'bold' : 'bold',
-                                            placeholder: '',
-                                            placeholdercolor: 'lightgrey',
-                                            capitalize: 'characters',
-                                            tfontsize: normalize(12),
-                                        }}
-                                        callBack={val => (val == undefined ? null : (
-                                            handleSuffixChange(index, val)
-                                        ))}
-                                    />
-                                </View>
-
-                                {/* <TextInput
-                                value={item.prefix}
-                                keyboardType={'default'}
-                                onChangeText={(text) => handlePrefixChange(index, text)}
-                                label="Prefix"
-                                editable={item.variableChecked}
-                                mode="outlined"
-                                style={{
-                                    width: Dimensions.get('screen').width * 0.438,
-                                    margin: 2,
-                                    height: 30,
-                                    padding: 0,
-                                }}
-                                placeholder="Prefix"
-                            /> */}
-
-
-                                {/* <TextInput
-                                value={item.suffix}
-                                keyboardType={'default'}
-                                onChangeText={(text) => handleSuffixChange(index, text)}
-                                label="Suffix"
-                                editable={item.variableChecked}
-                                mode="outlined"
-                                style={{
-                                    width: Dimensions.get('screen').width * 0.438,
-                                    margin: 2,
-                                    height: 30,
-                                }}
-                                placeholder="Suffix"
-                            /> */}
-                            </View>
-                        : null}
-                    </View>
-
-                    {item.variableChecked && isBNUL(item.tagproperties) ?
-                        <View style={{ marginTop: normalize(10) }}>
-                            <FlatList
-                                data={item.tagproperties}
-                                numColumns={3}
-                                renderItem={(val) => {
-                                    return (
-                                        <View style={{ borderWidth: 0, width: '33%' }}>
-                                            <View style={{ margin: normalize(5) }}>
-                                                <Menu>
-                                                    <MenuTrigger>
-                                                        <View style={{
-                                                            flexDirection: 'row',
-                                                            alignItems: 'center',
-                                                            borderWidth: 1,
-                                                            borderColor: 'lightgrey',
-                                                            borderRadius: 5,
-                                                            padding: normalize(4),
-                                                            backgroundColor: item.variableChecked ? alternatecolor : 'white',
-                                                            width: '100%',
-                                                        }}>
-                                                            <View style={{
-                                                                position: 'absolute', top: normalize(-5), left: normalize(5),
-                                                                backgroundColor: item.variableChecked ? alternatecolor : 'white',
-                                                                flexDirection: 'row', alignItems: 'center',
-                                                            }}>
-                                                                <Text style={{ color: '#164c92', fontSize: normalize(8), textAlign: 'left', fontWeight: 'normal' }}>{' '}{isNUQ(val.item.displayname) ? val.item.displayname : null}</Text>
-                                                            </View>
-                                                            <HOCIcons.Icons
-                                                                // icongroup={val.item.icongroup ? val.item.icongroup : 3}
-                                                                // name={val.item.iconname ? val.item.iconname : 'file'}
-                                                                icongroup={3}
-                                                                name={'file'}
-                                                                size={normalize(15)}
-                                                                color={Global.AppTheme.primary_color}
-                                                            />
-                                                            <CText adjustsFontSizeToFit style={{
-                                                                marginLeft: 5,
-                                                                fontSize: normalize(10),
-                                                                fontWeight: 'bold',
-                                                                color: 'black',
-                                                            }}>
-                                                                {isNUQ(val.item.displayvalue) ? val.item.displayvalue : ''}
-                                                            </CText>
-                                                        </View>
-                                                    </MenuTrigger>
-                                                    <MenuOptions
-                                                        optionsContainerStyle={{ marginTop: normalize(-35) }}
-                                                        style={{ backgroundColor: 'transparent' }}>
-                                                        <CDropDownList
-                                                            dropdownapi={DropdownLink(val)}
-                                                            callback={v => {
-                                                                if (v) {
-                                                                    fnHandleDropDownChange(v, index, val.index);
-                                                                    // val.item.datavalue = v.datavalue;
-                                                                    // val.item.displayvalue = v.displayvalue;
-                                                                    // setRefresh(refresh + 1);
-                                                                }
-                                                            }}
-                                                        />
-                                                    </MenuOptions>
-                                                </Menu>
-                                            </View>
-                                        </View>
-                                    );
-                                }}
-                            />
-                        </View>
-                    : null}
-
-                </View>
-            </TouchableWithoutFeedback>
-
-        );
-    };
-
-    function DropdownLink(val) {
-
-        switch (val.item.code) {
-            case 1:
-                return APIURL + 'emr/emrcommonget/rnladropdown 27';
-            case 2:
-                return APIURL + 'emr/emrcommonget/rnladropdown 28';
-            case 3:
-                return APIURL + 'emr/emrcommonget/rnladropdown 29';
-            case 4:
-                return APIURL + 'emr/emrcommonget/rnladropdown 30';
-            case 5:
-                return APIURL + 'emr/emrcommonget/rnladropdown 31';
-            case 6:
-                return APIURL + 'emr/emrcommonget/rnladropdown 32';
-            default:
-                return APIURL + 'emr/emrcommonget/rnladropdown 27';
-        }
-
-    }
-
-    const isSelectButtonEnabled = selectedItems.some(item => item.variableChecked);
-
-    return (
-        <MenuProvider>
-            <View style={{
-                flex: 1,
-                margin: 2,
-                justifyContent: 'center',
-                alignItems: 'center',
-            }}>
-                <View style={{}}>
-                    <ScrollView>
-                        <View style={{ flexDirection: 'column' }}>
-                            <View style={{ width: '100%' }}>
-
-                                {/* {data.durationstatus ? (
-                                    <View style={{ margin: 5 }}>
-                                        <Menu>
-                                            <MenuTrigger>
-                                                <View style={{
-                                                    flexDirection: 'row',
-                                                    alignItems: 'center',
-                                                    borderWidth: 1,
-                                                    borderColor: 'lightgrey',
-                                                    borderRadius: 5,
-                                                    padding: normalize(4),
-                                                    backgroundColor: 'white'
-                                                }}>
-                                                    <HOCIcons.Icons
-                                                        icongroup={3}
-                                                        name="file"
-                                                        size={normalize(15)}
-                                                        color="darkblue"
-                                                    />
-                                                    <CText style={{
-                                                        marginLeft: 5,
-                                                        fontSize: normalize(14),
-                                                        fontWeight: 'bold',
-                                                        color: 'darkblue'
-                                                    }}>
-                                                        {dropDownItem.durationname ? dropDownItem.durationname : 'DURATION'}
-                                                    </CText>
-                                                </View>
-                                            </MenuTrigger>
-                                            <MenuOptions
-                                                optionsContainerStyle={{ marginTop: normalize(-30) }}
-                                                style={{ backgroundColor: 'transparent', }}>
-                                                <CDropDownList
-                                                    dropdownapi={APIURL + 'emr/emrcommonget/rnladropdown 27'}
-                                                    dropdownarray={dropDownItem.duration}
-                                                    callback={val => {
-                                                        if (val) {
-                                                            handleDropdownChange('duration', val.datavalue)
-                                                            handleDropdownChange('durationname', val.displayvalue)
-                                                        }
-                                                    }}
-                                                />
-                                            </MenuOptions>
-                                        </Menu>
-                                    </View>
-                                ) : null}
-
-                                {data.medicationtypestatus ? (
-                                    <View style={{ margin: 5 }}>
-                                        <Menu>
-                                            <MenuTrigger>
-                                                <View style={{
-                                                    flexDirection: 'row',
-                                                    alignItems: 'center',
-                                                    borderWidth: 1,
-                                                    borderColor: 'lightgrey',
-                                                    borderRadius: 5,
-                                                    padding: normalize(4),
-                                                    backgroundColor: 'white'
-                                                }}>
-                                                    <HOCIcons.Icons
-                                                        icongroup={3}
-                                                        name="file"
-                                                        size={normalize(15)}
-                                                        color="darkblue"
-                                                    />
-                                                    <CText style={{
-                                                        marginLeft: 5,
-                                                        fontSize: normalize(14),
-                                                        fontWeight: 'bold',
-                                                        color: 'darkblue'
-                                                    }}>
-                                                        {dropDownItem.medicationtypename ? dropDownItem.medicationtypename : 'MEDICATION TYPE'}
-                                                    </CText>
-                                                </View>
-                                            </MenuTrigger>
-                                            <MenuOptions
-                                                optionsContainerStyle={{ marginTop: normalize(-30) }}
-                                                style={{ backgroundColor: 'transparent', }}>
-                                                <CDropDownList
-                                                    dropdownapi={APIURL + 'emr/emrcommonget/rnladropdown 28'}
-                                                    dropdownarray={dropDownItem.medicationtype}
-                                                    callback={val => {
-                                                        if (val) {
-                                                            handleDropdownChange('medicationtype', val.datavalue)
-                                                            handleDropdownChange('medicationtypename', val.displayvalue)
-                                                        }
-                                                    }}
-                                                />
-                                            </MenuOptions>
-                                        </Menu>
-                                    </View>
-                                ) : null}
-
-                                {data.tagdatanaturestatus ? (
-                                    <View style={{ margin: 5 }}>
-                                        <Menu>
-                                            <MenuTrigger>
-                                                <View style={{
-                                                    flexDirection: 'row',
-                                                    alignItems: 'center',
-                                                    borderWidth: 1,
-                                                    borderColor: 'lightgrey',
-                                                    borderRadius: 5,
-                                                    padding: normalize(4),
-                                                    backgroundColor: 'white'
-                                                }}>
-                                                    <HOCIcons.Icons
-                                                        icongroup={3}
-                                                        name="file"
-                                                        size={normalize(15)}
-                                                        color="darkblue"
-                                                    />
-                                                    <CText style={{
-                                                        marginLeft: 5,
-                                                        fontSize: normalize(14),
-                                                        fontWeight: 'bold',
-                                                        color: 'darkblue'
-                                                    }}>
-                                                        {dropDownItem.tagdatanaturename ? dropDownItem.tagdatanaturename : 'SCOPE'}
-                                                    </CText>
-                                                </View>
-                                            </MenuTrigger>
-                                            <MenuOptions
-                                                optionsContainerStyle={{ marginTop: normalize(-30) }}
-                                                style={{ backgroundColor: 'transparent', }}>
-                                                <CDropDownList
-                                                    dropdownapi={APIURL + 'emr/emrcommonget/rnladropdown 29'}
-                                                    dropdownarray={dropDownItem.tagdatanature}
-                                                    callback={val => {
-                                                        if (val) {
-                                                            handleDropdownChange('tagdatanature', val.datavalue)
-                                                            handleDropdownChange('tagdatanaturename', val.displayvalue)
-                                                        }
-                                                    }}
-                                                />
-                                            </MenuOptions>
-                                        </Menu>
-                                    </View>
-                                ) : null}
-
-                                {data.tagparameterstatus ? (
-                                    <View style={{ margin: 5 }}>
-                                        <Menu>
-                                            <MenuTrigger>
-                                                <View style={{
-                                                    flexDirection: 'row',
-                                                    alignItems: 'center',
-                                                    borderWidth: 1,
-                                                    borderColor: 'lightgrey',
-                                                    borderRadius: 5,
-                                                    padding: normalize(4),
-                                                    backgroundColor: 'white'
-                                                }}>
-                                                    <HOCIcons.Icons
-                                                        icongroup={3}
-                                                        name="file"
-                                                        size={normalize(15)}
-                                                        color="darkblue"
-                                                    />
-                                                    <CText style={{
-                                                        marginLeft: 5,
-                                                        fontSize: normalize(14),
-                                                        fontWeight: 'bold',
-                                                        color: 'darkblue'
-                                                    }}>
-                                                        {dropDownItem.tagparametername ? dropDownItem.tagparametername : 'GRANULARITY'}
-                                                    </CText>
-                                                </View>
-                                            </MenuTrigger>
-                                            <MenuOptions
-                                                optionsContainerStyle={{ marginTop: normalize(-30) }}
-                                                style={{ backgroundColor: 'transparent', }}>
-                                                <CDropDownList
-                                                    dropdownapi={APIURL + 'emr/emrcommonget/rnladropdown 30'}
-                                                    dropdownarray={dropDownItem.tagparameter}
-                                                    callback={val => {
-                                                        if (val) {
-                                                            handleDropdownChange('tagparameter', val.datavalue)
-                                                            handleDropdownChange('tagparametername', val.displayvalue)
-                                                        }
-                                                    }}
-                                                />
-                                            </MenuOptions>
-                                        </Menu>
-                                    </View>
-                                ) : null}
-
-                                {data.tagnaturestatus ? (
-                                    <View style={{ margin: 5 }}>
-                                        <Menu>
-                                            <MenuTrigger>
-                                                <View style={{
-                                                    flexDirection: 'row',
-                                                    alignItems: 'center',
-                                                    borderWidth: 1,
-                                                    borderColor: 'lightgrey',
-                                                    borderRadius: 5,
-                                                    padding: normalize(4),
-                                                    backgroundColor: 'white'
-                                                }}>
-                                                    <HOCIcons.Icons
-                                                        icongroup={3}
-                                                        name="file"
-                                                        size={normalize(15)}
-                                                        color="darkblue"
-                                                    />
-                                                    <CText style={{
-                                                        marginLeft: 5,
-                                                        fontSize: normalize(14),
-                                                        fontWeight: 'bold',
-                                                        color: 'darkblue'
-                                                    }}>
-                                                        {dropDownItem.tagnaturename ? dropDownItem.tagnaturename : 'FORMAT'}
-                                                    </CText>
-                                                </View>
-                                            </MenuTrigger>
-                                            <MenuOptions
-                                                optionsContainerStyle={{ marginTop: normalize(-30) }}
-                                                style={{ backgroundColor: 'transparent', }}>
-                                                <CDropDownList
-                                                    dropdownapi={APIURL + 'emr/emrcommonget/rnladropdown 31'}
-                                                    dropdownarray={dropDownItem.tagnature}
-                                                    callback={val => {
-                                                        if (val) {
-                                                            handleDropdownChange('tagnature', val.datavalue)
-                                                            handleDropdownChange('tagnaturename', val.displayvalue)
-                                                        }
-                                                    }}
-                                                />
-                                            </MenuOptions>
-                                        </Menu>
-                                    </View>
-                                ) : null}
-
-                                {data.tagdatatypestatus ? (
-                                    <View style={{ margin: 5 }}>
-                                        <Menu>
-                                            <MenuTrigger>
-                                                <View style={{
-                                                    flexDirection: 'row',
-                                                    alignItems: 'center',
-                                                    borderWidth: 1,
-                                                    borderColor: 'lightgrey',
-                                                    borderRadius: 5,
-                                                    padding: normalize(4),
-                                                    backgroundColor: 'white'
-                                                }}>
-                                                    <HOCIcons.Icons
-                                                        icongroup={3}
-                                                        name="file"
-                                                        size={normalize(15)}
-                                                        color="darkblue"
-                                                    />
-                                                    <CText style={{
-                                                        marginLeft: 5,
-                                                        fontSize: normalize(14),
-                                                        fontWeight: 'bold',
-                                                        color: 'darkblue'
-                                                    }}>
-                                                        {dropDownItem.tagdatatypename ? dropDownItem.tagdatatypename : 'ENTITY'}
-                                                    </CText>
-                                                </View>
-                                            </MenuTrigger>
-                                            <MenuOptions
-                                                optionsContainerStyle={{ marginTop: normalize(-30) }}
-                                                style={{ backgroundColor: 'transparent' }}>
-                                                <CDropDownList
-                                                    dropdownapi={APIURL + 'emr/emrcommonget/rnladropdown 32'}
-                                                    dropdownarray={dropDownItem.tagdatatype}
-                                                    callback={val => {
-                                                        if (val) {
-                                                            handleDropdownChange('tagdatatype', val.datavalue)
-                                                            handleDropdownChange('tagdatatypename', val.displayvalue)
-                                                        }
-                                                    }}
-                                                />
-                                            </MenuOptions>
-                                        </Menu>
-                                    </View>
-                                ) : null} */}
-
-                            </View>
-                            <FlatList
-                                contentContainerStyle={{}}
-                                data={selectedItems.sort((a, b) => (b.variableChecked - a.variableChecked))}
-                                renderItem={renderItem}
-                                keyExtractor={item => item.variablename}
-                            />
-                        </View>
-                    </ScrollView>
-                    <View>
-                        <CAwesomeButton
-                            disablepress={!isSelectButtonEnabled}
-                            callback={() => {
-                                // props.callback(getSelectedVariableNames());
-                                props.callback(selectedItems);
-                            }}
-                            buttonstyle={{
-                                'borderRadius': 10,
-                                'borderWidth': 0.5,
-                                'height': normalize(40),
-                                'width': normalize(45),
-                                'backgroundColor': '#f2f3ff',
-                                'paddingHorizontal': 0,
-                                'raiseLevel': 1,
-                                'paddingBottom': 0,
-                                'borderColor': 'lightblue',
-                                'paddingTop': 0,
-                                'style': {
-                                    margin: 5,
-                                },
-                            }}
-                            viewstyle={{
-                                borderWidth: 0,
-                                borderRadius: 0,
-                                justifyContent: 'center',
-                                alignItems: 'center',
-                            }}
-                            icon={{
-                                'icongroup': 1,
-                                'name': 'select1',
-                                'color': Global.AppTheme.primary_color,
-                                'size': normalize(25),
-                                'style': {
-                                    textAlign: 'center',
-                                },
-                            }}
-                            text={{
-                                fontSize: normalize(6),
-                                fontWeight: 'bold',
-                                color: Global.AppTheme.primary_color,
-                                textAlign: 'center',
-                            }}
-                            displaytext={'SELECT'}
-                        />
-                    </View>
-                </View>
-            </View>
-        </MenuProvider>
-    );
-};
-
-const styles = StyleSheet.create({
-    overlayContainer: {
-        flex: 1,
-        margin: 2,
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-    container: {
-        flexDirection: 'column',
-    },
-    row: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        padding: 1,
-        // backgroundColor: 'rgba(237, 232, 232,0.4)',
-    },
-    variableSelectText: {
-        fontSize: normalize(13),
-        marginLeft: 5,
-        marginTop: 5,
-    },
-    varcolumn: {
-        // backgroundColor: 'rgba(237, 232, 232,0.4)',
-        marginHorizontal: 4,
-        borderRadius: 4,
-        padding: 4,
-        width: '10%',
-        justifyContent: 'center',
-    },
-    textButton: {
-        fontSize: 16,
-        textAlign: 'center',
-    },
-    activeButton: {
-        backgroundColor: 'lightblue',
-    },
-    sizeControl: {
-        // backgroundColor: 'rgba(237, 232, 232,0.4)',
-        flexDirection: 'row',
-        alignItems: 'center',
-        // marginLeft: 2,
-        width: '40%',
-        justifyContent: 'center',
-    },
-    sizeButton: {
-        fontSize: normalize(16),
-        padding: 5,
-    },
-    sizeValue: {
-        fontSize: normalize(14),
-        marginHorizontal: 5,
-        borderWidth: 0.5,
-        borderColor: 'lightgrey',
-        borderRadius: 5,
-        // backgroundColor: 'white'
-    },
-    dropdownRow: {
-        flexDirection: 'row',
-        marginBottom: 10,
-    },
-    card: {
-        padding: 5,
-        borderWidth: 1,
-        borderColor: 'gray',
-        borderRadius: 5,
-        margin: 5,
-        width: Dimensions.get('screen').width * 0.2,
-    },
-    triggerText: {
-        padding: 5,
-        justifyContent: 'center',
-        alignItems: 'center',
-        textAlign: 'center',
-    },
-    menuGroup: {
-        flex: 1,
-        marginLeft: '3%',
-        borderWidth: 0.5,
-        borderColor: 'lightgrey',
-        borderRadius: 5,
-        // backgroundColor: 'white',
-
-    },
-    optionContainer: {
-        flexDirection: 'row',
-        alignItems: 'center',
-    },
-    submitButton: {
-        backgroundColor: 'lightgray',
-        padding: 5,
-        alignItems: 'center',
-        borderRadius: 5,
-        width: 70,
-        marginVertical: 5,
-    },
-    disabledButton: {
-        borderWidth: 1,
-        borderColor: 'gray',
-        borderRadius: 5,
-        backgroundColor: 'white',
-    },
-    submitButtonText: {
-        color: Global.AppTheme.primary_color,
-        fontSize: normalize(12),
-    },
-    optionText: {
-        marginLeft: 8,
-    },
-    cardvariable: {
-        // backgroundColor: '#fff',
-        backgroundColor: 'rgba(237, 232, 232, 0.137)',
-        borderRadius: 10,
-        padding: 1,
-        marginVertical: 5,
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.1,
-        shadowRadius: 4,
-        // borderColor: 'Global.AppTheme.primary_color',
-        // borderWidth: 1,
-    },
-    activeCardvariable: {
-        // backgroundColor: 'rgba(237, 232, 232,0.4)',
-        backgroundColor: 'rgba(177, 172, 174, 0.4)',
-        borderColor: Global.AppTheme.primary_color,
-        borderWidth: 2,
-    },
-});
-
-export default TagTable;