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

package/src/Custom/TableComponent/TagTable.js

@@ -0,0 +1,1200 @@
+
+
+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;