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

package/src/Components/SDropDownNew.js

@@ -0,0 +1,529 @@
+//dddddddddddddddddddddddddddddddddddddddddddddddd
+import React, { useState, useEffect, useRef } from 'react';
+import { TouchableOpacity, StyleSheet, View, Dimensions, Text, Image, TextInput, FlatList, ScrollView } from 'react-native';
+import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
+import ComponentStyles, { normalize } from '../CommonStyle/componentStyle';
+import {
+    getListviewItem,
+    getListviewItemText,
+} from '../CommonStyle/PopupStyle';
+import { APIURL } from '../../../../../src/Common/apiConstants';
+import AntDesign from 'react-native-vector-icons/AntDesign';
+import Icons, { MaterialCommunityIcons } from '../Common/Icons';
+import { NetworkServiceCall } from '@jescon-technologies/react-native-ui-kit';
+import SearchLoader from '../Custom/SearchLoader';
+import { isBNU, isBNUL, isNU, isNUL } from '../CommonStyle/ComponentFunctions';
+import { Global } from '../../../../../src/Common/Global';
+import { Menu, MenuOptions, MenuTrigger } from 'react-native-popup-menu';
+import HOCIcons from '../HOC/HOCIcons';
+import SHelpDescription from './SHelpDescription';
+import CModalOverlay from '../CustomComponents/CModalOverlay';
+
+var searchResult = [];
+var tempvalue = [];
+var ValueString = null;
+const SDropDownNew = (props) => {
+    const [isdropdownshow, setDropdownShow] = useState(false);
+    const [searchData, setSearchData] = useState('');
+    const [isLoading, setIsLoading] = useState(true);
+    const [selectedValue, setSelectedValue] = useState(props.value);
+    const [displayData, setDisplayData] = useState([]);
+    const [stage, setStage] = useState(false);
+    const [refresh, setRefresh] = useState(0);
+    const [filterPurpose, setFilterPurpose] = useState([]);
+    const [alphaFilter, setAlphaFilter] = useState(false);
+    const [dropdowndata, setDropDownData] = useState(props.dropdowndata);
+    const dynamicMenuRef = useRef(null);
+    const [data, setData] = useState(props.data ? props.data : null);
+
+    useEffect(() => {
+        setDropDownData(props.dropdowndata);
+    }, [props.dropdowndata]);
+
+    useEffect(() => {
+        setData(props.data ? props.data : null);
+    }, [props.data]);
+
+    useEffect(() => {
+        isBNU(props.overlay) && props.overlay == true ? FetchDropdownList() : null;
+    }, [props.overlay]);
+
+    function getOverlayScreenContainer() {
+        return ({
+            flexDirection: 'row',
+            margin: 10,
+        });
+    }
+
+    useEffect(() => {
+        setAlphaFilter(false);
+    });
+
+    function FetchDropdownList(key) {
+        const updatedApiUrl = props.dropdownPort ? '' : APIURL;
+        setSearchData('');
+        setIsLoading(true);
+        setDropdownShow(true);
+        // console.log("SDROPDOWNLINK___________________", "get", APIURL + props.dropdownapi, "")
+        NetworkServiceCall('get', updatedApiUrl + props.dropdownapi, '')
+            .then(function (response) {
+                console.log('updatedUrl', updatedApiUrl + props.dropdownapi);
+                // console.log('Responseeeeeeeeeeeeeeeeeeeeeeeeee', JSON.stringify(response.data.data))
+                // console.log("SDROPDOWN_________________DATA___________", response)
+                searchResult = response;
+                if (response.data.data != null && response.data.data != undefined) {
+
+                    // console.log('arrayyyyyyyyyyyyyyy', JSON.stringify(props.multidropdownarray))
+                    if (props.iconOnly && props.multiselect) {
+                        if (isBNUL(props.multidropdownarray) && isBNUL(response.data.data)) {
+
+                            var results = response.data.data.map((item) => {
+                                // Find the matching `xxx` object from `props.multidropdownarray`
+                                const matchingXxx = props.multidropdownarray.find((xxx) => item.datavalue === xxx.datavalue);
+
+                                // If a match is found, update `item` with all properties from `matchingXxx`
+                                if (matchingXxx) {
+                                    return { ...item, ...matchingXxx };  // Merge properties of `item` and `matchingXxx`
+                                }
+
+                                // If no match is found, return the original `item`
+                                return item;
+                            });
+
+                        }
+                        else {
+                            var results = response.data.data;
+                        }
+
+
+
+                        console.log('response.data.data #################', JSON.stringify(results));
+                        setDisplayData(results);
+                        setIsLoading(false);
+
+
+
+                    }
+                    else {
+                        if (props.selectedval != undefined && props.selectedval != null && props.selectedval.length > 0) {
+
+
+                            var results = response.data.data.map((item) => {
+
+
+
+                                props.selectedval.map((xxx) => {
+                                    if (item.datavalue == xxx) {
+                                        item.selected = true;
+                                    }
+                                });
+                            });
+                        }
+
+                        console.log('response.data.data #################', JSON.stringify(results));
+                        setDisplayData(response.data.data);
+                        setIsLoading(false);
+
+
+                    }
+
+
+
+
+
+                }
+                else {
+                    searchResult = [];
+                    setDisplayData([]);
+                    setIsLoading(false);
+                }
+            });
+    }
+
+    function FetchList() {
+        setSearchData('');
+        setIsLoading(true);
+        setDropdownShow(true);
+        searchResult = { 'httpstatus': 200 };
+        setDisplayData(props.dropdownarray);
+        setIsLoading(false);
+    }
+
+    function selection(item, changevalue, keycode) {
+        console.log('DROP DOWN DETAILCODE-----------------------', item);
+        let dataset = {
+            ...item,
+            // "datavalue": item.datavalue,
+            // "displayvalue": item.displayvalue,
+            // "detailcode": item.detailcode,
+            // "color": item.color,
+            // "searchparam": item.searchparam,
+            // "jasperfilename":item.jasperfilename,
+            // "reporttype":item.reporttype,
+            // "key": keycode,
+            // "item": item
+        };
+        setDropDownData(item.displayvalue);
+        props.onChangeData(dataset);
+        props.refreshCount(1);
+        // props.editStatus(1)
+        setDropdownShow(false);
+        if (props.setOverlay) {
+            props.setOverlay(false);
+        }
+    }
+
+    function DropdownLayout() {
+        return (
+            <View style={layoutstyles.overlay_screen_container}>
+                <View style={{ alignItems: 'center' }}>
+                    <Text style={{ fontSize: normalize(12), fontWeight: 'bold', color: 'darkblue' }}>{isNU(data) && data.displaytext != undefined ? data.displaytext.toUpperCase() : ' SELECT OPTION '}</Text>
+                </View>
+                <View style={getOverlayScreenChildcontainer()}>
+                    {GetDropdown(alphaFilter ? filterPurpose : displayData)}
+                </View>
+
+                {props.multiselect != undefined && props.multiselect
+                    ?
+                    <View style={{ justifyContent: 'center', alignItems: 'center', flexDirection: 'row', gap: normalize(5) }}>
+                        <TouchableOpacity style={{ justifyContent: 'center', borderRadius: 10, alignItems: 'center', paddingHorizontal: normalize(0) }}
+                            onPress={() => getMultiSelect(false)}
+                        >
+                            <View style={{
+                                flexDirection: 'column',
+                                backgroundColor: '#f7f4f4', borderRadius: 10,
+                                paddingHorizontal: normalize(15),
+                                paddingVertical: normalize(5),
+                                alignItems: 'center',
+                            }}>
+                                <AntDesign name="select1"
+                                    color={'#094485'} size={normalize(20)} />
+
+                                <Text
+                                    style={{
+                                        fontSize: normalize(11),
+                                        color: '#094485',
+                                        fontWeight: 'bold',
+                                    }}>
+                                    {' '}
+                                    Select
+                                </Text>
+                            </View>
+                        </TouchableOpacity>
+                        <TouchableOpacity style={{ justifyContent: 'center', borderRadius: 10, alignItems: 'center', paddingHorizontal: normalize(0) }}
+                            onPress={() => getMultiSelect(true)}
+                        >
+                            <View style={{
+                                flexDirection: 'column',
+                                backgroundColor: '#f7f4f4', borderRadius: 10,
+                                paddingHorizontal: normalize(15),
+                                paddingVertical: normalize(5),
+                                alignItems: 'center',
+                            }}>
+                                <AntDesign name="sync"
+                                    color={'#094485'} size={normalize(20)} />
+
+                                <Text
+                                    style={{
+                                        fontSize: normalize(11),
+                                        color: '#094485',
+                                        fontWeight: 'bold',
+                                    }}>
+                                    {' '}
+                                    Reset
+                                </Text>
+                            </View>
+                        </TouchableOpacity>
+                    </View> : null}
+            </View>
+        );
+    }
+
+    function getMultiSelect(reset) {
+        let filterArray;
+        let display;
+        // console.log('DISPLAYDATA @@@@@@@@@@@@@@@@', displayData)
+        if (reset == false) {
+            filterArray = displayData.filter((element) => element.selected == true);
+            display = filterArray != undefined &&
+                filterArray.length > 0 ? filterArray.map((item) => item.displayvalue) : null;
+            setDropDownData(display?.join());
+        } else {
+            filterArray = [];
+        }
+
+        props.onChangeData(filterArray);
+        setDropdownShow(false);
+        if (props.setOverlay) {
+            props.setOverlay(false);
+        }
+    }
+
+    function getOverlayChildrenWrapperStyle() {
+        return ({
+            position: 'absolute',
+            bottom: 0,
+            top: Dimensions.get('screen').height * 0.17,
+            width: Dimensions.get('screen').width,
+            borderRadius: 20,
+            borderWidth: 2,
+            borderColor: '#e0e0e0',
+            paddingHorizontal: normalize(5),
+        });
+    }
+
+    return (
+        <View style={{ width: props.widthArr ? props.widthArr : '100%', borderWidth: 0 ,marginVertical: normalize(5)}}>
+            {isNU(data) && data.displaytext != undefined && props.iconOnly == undefined ?
+                <Text style={{ fontSize: normalize(11), color: 'black', paddingHorizontal: normalize(5), height: normalize(15) }}>
+                    {data.required == true ?
+                        <Text style={{ color: 'red', fontSize: normalize(13), fontWeight: 'bold' }}>* </Text> : null}
+                    {data.displaytext}
+                </Text> : null}
+            {/* <Text>DDDDDDDDDDDDDD</Text> */}
+
+            <TouchableOpacity
+                onPress={() => (Global.HelpId = props.columnid, props.editable ? FetchDropdownList() : FetchList())}
+                disabled={props.disabled ? props.disabled : false}
+                // onLongPress={() => props.LongPress ? setStage(true) : null}
+                style={{
+                    borderWidth: props.borderWidth ? 0 : 1, borderColor: 'lightgrey'
+                    , paddingLeft: 2, alignItems: 'center', paddingRight: 15, elevation: 0,
+                    backgroundColor: props.backgroundColor != undefined ? props.backgroundColor : '#fff',
+                    height: props.heightArr ? props.heightArr : Dimensions.get('screen').height * 0.040,
+                    flexDirection: 'row', borderRadius: props.borderRadiusArr ? props.borderRadiusArr : 5,
+                    borderColor: props.borderArr ? props.borderArr : 'lightgrey',
+                }}
+
+            >
+
+
+                {props.iconOnly == undefined && props.iconName != undefined || props.icon != undefined ?
+
+                    <Menu ref={dynamicMenuRef}>
+                        <MenuTrigger
+                            disabled={false}
+                            customStyles={{ triggerWrapper: { borderWidth: 0, borderRadius: 10, elevation: 0 } }}
+                        >
+                            <TouchableOpacity disabled={true} style={{ width: normalize(22), paddingLeft: normalize(3) }}>
+                                {props.iconName != undefined ? <FontAwesome5 name={props.iconName} color=
+                                    {props.flagData == 1 ? 'darkblue' : '#094485'}
+                                    size={props.iconSize != undefined ? normalize(props.iconSize) : normalize(15)} /> : null}
+                                {props.icon != undefined ?
+                                    <MaterialCommunityIcons name={props.icon} color=
+                                        {props.flagData == 1 ? 'darkblue' : '#094485'}
+                                        size={normalize(20)} /> : null}
+
+                            </TouchableOpacity>
+                        </MenuTrigger>
+                        <MenuOptions optionsContainerStyle={{ marginTop: normalize(25), marginLeft: 0, width: props.widthArr }}>
+                            {props.columnid != undefined ? <SHelpDescription column={props.columnid != undefined ? props.columnid : 0} /> : null}
+                        </MenuOptions>
+                    </Menu>
+                    : null}
+                {props.iconOnly != true ?
+                    <View style={{ position: 'absolute', bottom: 0, right: 3 }}>
+                        <Text adjustsFontSizeToFit numberOfLines={3}
+                            style={{ fontSize: props.fontSize ? props.fontSize : normalize(11), alignSelf: 'flex-start', fontWeight: 'bold', width: parseFloat(props.widthArr) - normalize(10) + '%' }} >
+                            {props.cornerKey != null && props.cornerKey != undefined && typeof props.cornerKey === 'string' ? props.cornerKey : ''}</Text>
+                    </View>
+                    : null}
+                {props.iconOnly != true ?
+                    <View style={{ alignItems: 'center', paddingRight: normalize(5.2), width: props.iconclose ? '88%' : '100%' }}>
+                        <Text adjustsFontSizeToFit numberOfLines={3} style={{ fontSize: props.fontSize ? props.fontSize : normalize(11), alignSelf: 'flex-start', fontWeight: 'bold', marginHorizontal: normalize(4), color: props.fontcolor ? props.fontcolor : 'black', width: '95%', borderWidth: 0 }} >
+                            {dropdowndata != null && dropdowndata != undefined ? dropdowndata : props.value}
+                            {/* {getDropDownData(dropdowndata)} */}
+                        </Text>
+                    </View>
+                    : null}
+                {isBNU(dropdowndata) && props.iconclose ?
+                    <TouchableOpacity
+                        disabled={props.disabled != null && props.disabled != undefined && props.disabled == true ? true : false}
+                        onPress={() => {
+                            setDropDownData(''),
+                                props.iconclosecallback(true);
+                        }}
+                    >
+                        <HOCIcons.Icons
+                            icongroup={3}
+                            name={'close-circle'}
+                            size={normalize(25)}
+                            color={'darkblue'}
+                            style={{ color: 'darkblue' }}
+                        />
+                    </TouchableOpacity>
+                    : null}
+                {props.iconName != undefined && props.iconOnly == true ?
+                    <FontAwesome5 name={props.iconName} color=
+                        {props.flagData == 1 ? 'darkblue' : '#094485'}
+                        size={props.iconsize} /> : null}
+                {props.icon != undefined && props.iconOnly == true ?
+                    <MaterialCommunityIcons name={props.icon} color=
+                        {props.flagData == 1 ? 'darkblue' : '#094485'}
+                        size={props.iconsize} /> : null}
+
+                {isdropdownshow ?
+                    <CModalOverlay visible={true}
+                        onClose={() => {
+                            setDropdownShow(false);
+                            if (props.setOverlay) {
+                                props.setOverlay(false);
+                            }
+                        }}
+                        closeOnTouchOutside
+                        animationType="zoomIn"
+                        containerStyle={{ backgroundColor: 'transparent' }}
+                        childrenWrapperStyle={getOverlayChildrenWrapperStyle()}
+                        animationDuration={500}
+                    >
+
+                        <TouchableOpacity style={{ position: 'absolute', right: 0, zIndex: 1, marginTop: normalize(5) }}
+                            onPress={() => {
+                                setDropdownShow(false);
+                                if (props.setOverlay) {
+                                    props.setOverlay(false);
+                                }
+                            }}
+                        >
+                            <FontAwesome5 name={'angle-double-down'}
+                                color={'#094485'} size={normalize(20)} />
+                        </TouchableOpacity>
+
+                        <View style={getOverlayScreenContainer()}>
+                            <View style={[ComponentStyles.searchTextbox_View, layoutstyles.overlay_searchTextbox_View]}>
+                                <View style={layoutstyles.textinput_view}>
+                                    <TextInput
+                                        style={[ComponentStyles.searchTextbox]}
+                                        editable={true}
+                                        autoCapitalize={'characters'}
+                                        value={searchData}
+                                        onChangeText={text => setSearchData(text)}
+                                        secureTextEntry={false}
+                                        keyboardType={'default'}
+                                        placeholder="Search"
+                                    />
+
+                                </View>
+                                <Image style={[ComponentStyles.searchIcon]}
+                                    source={{ uri: 'https://i.ibb.co/j8ywYpJ/search.png' }}
+                                />
+
+                            </View>
+                        </View>
+                            {!isLoading ?
+                                searchResult.httpstatus == 200 ?
+                                    DropdownLayout()
+                                    :
+                                    <View>
+                                        <Text style={[ComponentStyles.no_data_found_text]}>No Result Found</Text>
+                                    </View>
+                                :
+                                <View style={{
+                                    flex: 1, width: '100%', justifyContent: 'center',
+                                    backgroundColor: 'transparent', borderRadius: 10,
+                                }}>
+                                    <SearchLoader />
+                                </View>}
+                    </CModalOverlay>
+                    : null}
+
+                {stage ?
+                    <OverlayHOCComponent
+                        visibility={val => (val == undefined ? null : setStage(val))}
+                        xyz={val => (val == undefined ? null : setDropDownData(val.displayvalue, setStage(false)))}
+                        value={props.cornerKey}
+                    // onselect={val => (val == undefined ? null : onSelect(val))}
+                    // data={searchResult != null && searchResult != undefined && searchResult.length > 0 ? searchResult : null}
+                    /> : null}
+
+            </TouchableOpacity>
+        </View>
+
+    );
+
+    function GetDropdown(data) {
+
+        const newDropDownData = data != null && data != undefined ? data.filter(function (item) {
+            const dataItem = item.displayvalue ? item.displayvalue.toUpperCase() : ''.toUpperCase();
+            const textData = searchData.toUpperCase();
+            return dataItem.indexOf(textData) > -1;
+        }) : null;
+
+        return (
+            <View style={{ flexDirection: 'row', flex: 1, width: '100%' }}>
+                <FlatList
+                    data={newDropDownData}
+                    renderItem={renderItem}
+                    initialNumToRender={150}
+                    maxToRenderPerBatch={200}
+                    keyExtractor={(item, index) => 'key' + index}
+                    style={{ flex: 1, width: '85%' }}
+                    contentContainerStyle={{ flexGrow: 1 }}
+                    scrollEnabled={true}
+                    nestedScrollEnabled={true}
+                />
+            </View>
+        );
+    }
+
+    function multiselect(item, keycode) {
+        item.selected = !item.selected;
+        setRefresh(refresh + 1);
+    }
+    function renderItem(data) {
+        // console.log("________________________________________",data)
+        return (
+            <TouchableOpacity
+                style={[getListviewItem(data.item.selected), { flexDirection: 'row', alignItems: 'center' }]}
+                onPress={() => props.multiselect != undefined ? multiselect(data.item, props.keycode) : selection(data.item, data.item.selected, props.keycode)}
+                activeOpacity={0.5}
+            >
+                <Icons.FontAwesome name="dot-circle-o" color="darkblue" size={normalize(12)}
+                    style={{ paddingHorizontal: normalize(2), paddingLeft: normalize(4) }} />
+                <Text style={selectedValue != null && selectedValue != undefined ? selectedValue == item.datavalue ? getListviewItemText(true) : getListviewItemText(false) : getListviewItemText(false)}>
+                    {data.item.displayvalue}
+                </Text>
+            </TouchableOpacity>
+        );
+    }
+
+    function getOverlayScreenChildcontainer() {
+        return (
+            {
+                flex: 1,
+                minHeight: Dimensions.get('window').height * 0.5,
+                maxHeight: Dimensions.get('window').height * 0.75,
+                marginBottom: Dimensions.get('window').height * 0.01,
+                marginTop: Dimensions.get('window').height * 0.01,
+            }
+        );
+    }
+};
+
+const layoutstyles = StyleSheet.create({
+    lefticon_container: {
+        marginLeft: '2%',
+    },
+    textinput_view: {
+        flex: 1,
+        paddingLeft: '1%',
+    },
+    overlay_screen_listview_container: {
+        justifyContent: 'center',
+        marginBottom: 10,
+    },
+    overlay_searchTextbox_View: {
+        width: '96%',
+
+    },
+    overlay_screen_heading_text: {
+        ...ComponentStyles.popup_heading,
+        width: '100%',
+    },
+    overlay_screen_container: {
+        width: '100%',
+        flex: 1,
+    },
+});
+
+export default SDropDownNew;

package/src/Components/SHelpDescription.js

@@ -0,0 +1,147 @@
+import React, { useState, useEffect } from 'react';
+import { TouchableOpacity, View, Text, Dimensions } from 'react-native';
+import { normalize } from '../CommonStyle/componentStyle';
+import { getLoading, isNU, isNUL, isNUQ, notifyMessage } from '../CommonStyle/ComponentFunctions';
+import { APIURL } from '../../../../../src/Common/apiConstants';
+import { NetworkServiceCall } from '@jescon-technologies/react-native-ui-kit';
+import { Global } from '../../../../../src/Common/Global';
+
+const SHelpDescription = (props) => {
+    const [data, setData] = useState();
+    const [isLoading, setIsLoading] = useState(false);
+    const [visibility, setVisibility] = useState(false);
+
+    console.log('kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk', props);
+    useEffect(() => {
+        getData(props.column != undefined ? props.column : 1);
+    }, []);
+
+    function getData(column) {
+        setVisibility(false);
+        setIsLoading(true);
+        // let buttonapi = APIURL + Global.PatientDetails.detailapi
+        let buttonapi = APIURL + 'commonhis/his/rnhrenhelpdescription ' + column;
+        // let buttonapi = APIURL + "commonhis/his/rnhrenbiodatasegregation_03112023" + " " + props.suoptiondetail + "," + code
+        console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>', buttonapi);
+        NetworkServiceCall('get', buttonapi)
+            .then(function (response) {
+                if (response.httpstatus == 200) {
+                    console.log('hhhhhhhhhhhhhhhhh',response.data.data);
+                    // notifyMessage(isNUQ(response.data.data)&& isNUQ( response.data.data[0].helpfor)&&isNUQ(response.data.data[0].helpmessage ) ? response.data.data[0].helpfor + " :- "+ response.data.data[0].helpmessage : "Please select column for help")
+                    setData(response.data.data[0]);
+                    setTimeout(() => {
+                        setVisibility(true);
+                    });
+                    Global.HelpId = 0;
+                    // setResponseJSON(response.data.data[0])
+                    // setData(response.data.bioarray)
+                    setIsLoading(false);
+
+                } else {
+                    notifyMessage('Please select valid column for help ', 4);
+                    setIsLoading(false);
+                    // console.log("RESPONSEEEEEEEEEEE FROM CONSULTATTION22222222", JSON.stringify(response.data.data[0]))
+
+                }
+            });
+        getLoading(v => setIsLoading(false));
+    }
+
+
+    return (
+        // <View style={{ marginHorizontal: normalize(3), marginVertical: normalize(2) }}>
+        //         {/* <Menu  style={{ borderRadius: 0, borderWidth: 0 }}>
+        //             <MenuTrigger
+        //                 disabled={false}
+        //                 // customStyles={{ triggerWrapper: { borderWidth: 0, backgroundColor: '#ffffffff', borderRadius: 10, elevation: 0 } }}
+        //             > */}
+        //                 <View>
+        //                     <TouchableOpacity
+        //                         onPress={()=> getData(1)}
+        //                         // disabled={true}
+        //                         style={{
+        //                             borderWidth: 1,
+        //                             borderColor: 'lightgrey',
+        //                             borderRadius: 10,
+        //                             alignItems: 'center',
+        //                             justifyContent: 'flex-start',
+        //                             height: normalize(25),
+        //                             flexDirection: 'row',
+        //                             backgroundColor: '#ffffff',
+        //                             // width: Dimensions.get('screen').width * 0.08,
+        //                             // minWidth: normalize(100),
+        //                             // maxWidth: Dimensions.get('screen').width * 0.278
+        //                         }}>
+        //                         <HOCIcons.Icons
+        //                             icongroup={11}
+        //                             name={'help-with-circle'}
+        //                             color={'darkblue'}
+        //                             size={normalize(18)}
+        //                             style={{ marginHorizontal: normalize(3), borderWidth: 0 }}
+        //                         />
+        //                         {/* <Text
+        //                             adjustsFontSizeToFit
+        //                             style={{
+        //                                 borderWidth: 0,
+        //                                 width: '80%',
+        //                                 fontSize: normalize(8),
+        //                                 fontWeight: 'bold',
+        //                                 color: '#000000',
+        //                                 alignItems: 'center',
+        //                                 textAlign: 'center',
+        //                                 justifyContent: 'center',
+        //                             }}>help</Text> */}
+        //                     </TouchableOpacity>
+        //                 </View>
+        //             {/* </MenuTrigger>
+        //             <MenuOptions
+        //                 optionsContainerStyle={{ marginTop: normalize(30) }}
+        //                 customStyles={{
+        //                     optionsContainer: {
+        //                         shadowColor: '#000000ff',
+        //                         shadowRadius: 10,
+        //                         borderRadius: 5,
+        //                         borderWidth: 0.5,
+        //                         borderColor: 'lightgrey',
+        //                         elevation: 3,
+        //                         width: Dimensions.get('screen').width * 0.28
+        //                     },
+        //                     optionText: {},
+        //                 }}>
+        //                 <Text>HELP</Text>
+        //             </MenuOptions>
+        //         </Menu> */}
+        //         {/* <Text style={{ position: 'absolute', color: '#000000', fontSize: normalize(6), fontWeight: 'normal', top: normalize(-1), left: normalize(5), backgroundColor: 'white' }}>{params.displaytext}</Text> */}
+        //     </View>
+        // <TouchableOpacity onPress={() => getData(Global.HelpId)}
+        //     style={{ alignItems: 'center' }}
+        // >
+        //     <HOCIcons.Icons
+        //         icongroup={data.group != undefined ? data.group : 3}
+        //         name={data.name ? data.name : 'help-circle'}
+        //         color={data.color ? data.color : 'darkblue'}
+        //         size={data.size ? data.size : normalize(25)}
+        //         style={{ marginHorizontal: normalize(3), borderWidth: 0 }}
+        //     />
+        //     <Text
+        //         adjustsFontSizeToFit
+        //         style={{
+        //             borderWidth: 0,
+        //             width: '80%',
+        //             fontSize: normalize(10),
+        //             fontWeight: 'bold',
+        //             color: '#000000',
+        //             alignItems: 'center',
+        //             textAlign: 'center',
+        //             justifyContent: 'center',
+        //         }}>help</Text>
+
+
+        // </TouchableOpacity>
+        <View style={{padding:normalize(5),borderWidth:0,borderColor:'lightblue',backgroundColor:'lightgrey',width:props.width ? props.width : '100%'}}>
+        {isNU(data) ? <Text style={{color:'black',fontStyle:'italic',fontSize:normalize(11),fontWeight:'bold'}}>{data.helpmessage != undefined ? data.helpmessage : 'help not setuped for current column'}</Text> : null}
+
+        </View>
+    );
+};
+export default SHelpDescription;