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

package/src/layout/FooterBlock.js

@@ -1,821 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-import {
-    View,
-    TouchableOpacity,
-    Text,
-    ScrollView,
-    Dimensions,
-    TouchableHighlight,
-    Pressable,
-    FlatList,
-    Platform,
-} from 'react-native';
-import {
-    Menu,
-    MenuOptions,
-    MenuOption,
-    MenuTrigger,
-} from 'react-native-popup-menu';
-import CText from '../CustomComponents/CText';
-import HOCIcons from '../HOC/HOCIcons';
-import themes from '../CommonStyle/CommonTheme';
-import { normalize } from '../CommonStyle/componentStyle';
-import { isBNUL } from '../CommonStyle/ComponentFunctions';
-import CAwesomeButtonLIS from '../Custom/CAwesomeButton';
-import SSearchBar from '../StaticComponents/SSearchBar';
-import { Global } from '../Common/Global';
-import SAlphabet from '../StaticComponents/SAlphabet';
-import { useNavigation } from '../Navigation/useNavigation';
-
-
-
-const FooterBlock = props => {
-    const navigation = useNavigation();
-    const [FooterArray, SetFooterArray] = useState(
-        props.footerdata &&
-            props.footerdata != null &&
-            props.footerdata != undefined
-            ? props.footerdata
-            : null,
-    );
-    const [stage, setStage] = useState(props.stage);
-    const [more, setMore] = useState(false);
-    const [activities, setActivities] = useState(false);
-    const [searchData, setSearchData] = useState('');
-    const [alpha, setAlpha] = useState(null);
-    const [expandedCategory, setExpandedCategory] = useState(null);
-    const [optionSelected, setOptionSelected] = useState(null);
-    const [isLoading, setIsLoading] = useState(false);
-    const [refresh, setRefresh] = useState(0);
-    const [visibility, setVisibility] = useState(0);
-    const [data, setData] = useState([]);
-    const [displayData, setDisplayData] = useState([]);
-    const [alphaFilter, setAlphaFilter] = useState(false);
-    const [filterPurpose, setFilterPurpose] = useState([]);
-    const [filterdata, setFilterData] = useState(data);
-    const alphabet = Array.from({ length: 26 }, (_, i) =>
-        String.fromCharCode(65 + i),
-    ); // Create alphabet array A-Z
-    const scrollViewRef = useRef(null);
-    useEffect(() => {
-        // getmorebutton();
-
-        setData(Global.userOptionList);
-        setFilterData(Global.userOptionList);
-        // SetFooterArray([
-        //   {
-        //     stage: 1,
-        //     display: 'MY PROFILE',
-        //     suoptiondetail: 46001,
-        //     icon: 'account-cog',
-        //     icongroup: 3,
-        //     component: 'CProfileDetails',
-        //     color: '#2bcfc1',
-        //     componenttype: 'screen',
-        //     more: false,
-        //     selectedicon: 'account-cog',
-        //     footerorder: 1,
-        //   },
-        //   {
-        //     stage: 2,
-        //     display: 'ABOUT US',
-        //     suoptiondetail: 46201,
-        //     icon: 'account-group-outline',
-        //     icongroup: 3,
-        //     component: 'CGeneralBiodata',
-        //     color: '#3ef06e',
-        //     componenttype: 'screen',
-        //     more: false,
-        //     selectedicon: 'account-group',
-        //     footerorder: 2,
-        //   },
-        //   {
-        //     stage: 3,
-        //     display: 'HELP',
-        //     suoptiondetail: 43801,
-        //     icon: 'help-circle-outline',
-        //     icongroup: 3,
-        //     component: 'CBiodataCollection',
-        //     color: '#a33ef0',
-        //     componenttype: 'screen2',
-        //     more: false,
-        //     selectedicon: 'help-circle',
-        //     footerorder: 3,
-        //   },
-        //   {
-        //     stage: 4,
-        //     display: 'CHANGE PASSWORD',
-        //     suoptiondetail: 43802,
-        //     icon: 'lock-reset',
-        //     icongroup: 3,
-        //     component: 'ForgotPassword',
-        //     color: '#a33ef0',
-        //     componenttype: 'screen2',
-        //     more: false,
-        //     selectedicon: 'lock-reset',
-        //     footerorder: 4,
-        //   },
-
-        //   {
-        //     stage: 9,
-        //     display: 'MORE',
-        //     icon: 'cog-outline',
-        //     icongroup: 3,
-        //     componenttype: 'more',
-        //     more: false,
-        //     selectedicon: 'cog',
-        //     footerorder: 10,
-        //     view: true,
-        //     moreoptions: [],
-        //   },
-        //   {
-        //     stage: 83,
-        //     display: 'DECLARATION CANCELLATION',
-        //     more: false,
-        //     footerorder: 11,
-        //   },
-        // ]);
-    }, []);
-
-    // function getmorebutton() {
-    //   setIsLoading(true);
-    //   let buttonapi = "http://192.168.1.3:9090/hislogin/login/UserLogin1_27122024%201,'1199',0";
-
-    //   console.log('BUTTON API MORE BUTTON', buttonapi);
-
-    //   NetworkServiceCall('get', buttonapi)
-    //     .then(function (response) {
-    //       if (response.httpstatus === 200 && response.data && response.data.data) {
-    //         setData(response.data.data); // Store data in state
-    //         console.log('success.....', JSON.stringify(response.data.data));
-    //       } else {
-    //         notifyMessage('Supplier data not found.');
-    //       }
-    //       setIsLoading(false);
-    //     })
-    //     .catch((error) => {
-    //       console.error('Network error:', error);
-    //       notifyMessage('Failed to fetch data.');
-    //       setIsLoading(false);
-    //     });
-    // }
-    // console.log("FOOTER BLOCK--------------------------------", FooterArray)
-    function getAlphabetData(alpha, index) {
-        var filter = isBNUL(displayData)
-            ? displayData.filter(
-                value =>
-                    (value.displayvalue != undefined ? value.displayvalue : '').charAt(
-                        0,
-                    ) == alpha,
-            )
-            : [];
-        setFilterPurpose(filter);
-        index == 0 ? setSearchData('') : setSearchData(alpha);
-        index == 0 ? setAlphaFilter(false) : setAlphaFilter(true);
-    }
-
-    const handleCategoryPress = categoryId => {
-        // Toggle display expansion
-        // console.log('-----------------------', categoryId);
-        setExpandedCategory(prev =>
-            prev === categoryId.display ? null : categoryId.display,
-        );
-    };
-
-    const handleAlphabetPress = letter => {
-        const filteredLetter = letter === "#" ? null : letter;
-        setAlpha(filteredLetter);
-
-        setFilterData(data.filter(params =>
-            params.display.toLowerCase().startsWith(filteredLetter?.toLowerCase() || '')
-        ));
-    };
-
-    function CShadowDynamic(offsetX, offsetY, blurRadius, spreadDistance, color) {
-        const isAndroidBelow9 = Platform.OS === 'android' && Platform.Version < 28;
-        return isAndroidBelow9
-            ? {
-                elevation: 10,
-                shadowColor: color || Global.AppTheme.primary_color,
-                shadowOffset: { width: offsetX, height: offsetY },
-                shadowOpacity: 0.3,
-                shadowRadius: blurRadius,
-            }
-            : {
-                boxShadow: `${offsetX}px ${offsetY}px ${blurRadius}px ${spreadDistance}px ${color}`,
-            };
-    }
-
-    const renderItem = ({ item, index }) => {
-        return (
-            <MenuOption
-                key={item.suoptiondetail || index} // Ensure a unique key using suoptiondetail or index
-                onSelect={() => {
-                    setActivities(false);
-                    props.fooCallBack(item);
-                    setStage(item.display);
-                    setMore(true);
-                }}
-                style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    borderLeftWidth: 3,
-                    borderColor: item.color,
-                    height: normalize(36),
-                }}>
-                <HOCIcons.Icons
-                    icongroup={item.icongroup != undefined ? item.icongroup : 3}
-                    name={item.icon}
-                    color={item.display === stage ? item.color : '#303030'}
-                    size={normalize(15)}
-                    style={{
-                        borderWidth: 0,
-                        borderColor: item.color,
-                        borderRadius: 100,
-                        textAlign: 'center',
-                        padding: normalize(4),
-                        backgroundColor: 'transparent',
-                        elevation: 0,
-                    }}
-                />
-                <CText
-                    style={{
-                        fontSize: normalize(9),
-                        marginLeft: '5%',
-                        width: Dimensions.get('screen').width * 0.38,
-                        color: item.display === stage ? item.color : '#303030',
-                        fontWeight: 'bold',
-                    }}>
-                    {item.display} {/* Handle undefined item.display */}
-                </CText>
-            </MenuOption>
-        );
-    };
-
-    // console.log("FOOTERBLOCK---------------------------------------",props.footerdata)
-    return (
-        // <View style={{
-        //     flexDirection: 'row',
-        //     alignItems: 'center',
-        //     justifyContent: 'space-between',
-        //     width: '100%',
-        //     height: normalize(45),
-        //     borderTopLeftRadius: 15,
-        //     borderTopRightRadius: 15,
-        //     paddingTop: normalize(5),
-        //     elevation: 100,
-        //     paddingHorizontal: normalize(6)
-        // }}>
-        //     {isBNUL(FooterArray) ? FooterArray.map((items, k) => {
-        //         return (
-        //             // items.view ?
-        //             //     items.componenttype == 'more' ?
-        //                     <Menu ref={r => (items.moremenu = r) /*  this.menu2.open() */}>
-        //                         <MenuTrigger customStyles={{ triggerWrapper: {} }} >
-        //                             <CAwesomeButtonLIS
-        //                                 callback={(val) => { { items.moremenu.open() } }}
-        //                                 buttonstyle={{
-        //                                     'borderRadius': 10,
-        //                                     'borderWidth': 1,
-        //                                     'height': normalize(40),
-        //                                     'width': normalize(40),
-        //                                     'backgroundColor': '#f2f3ff',
-        //                                     'paddingHorizontal': 0,
-        //                                     'raiseLevel': 1,
-        //                                     'paddingBottom': 0,
-        //                                     'borderColor': 'lightblue',
-        //                                     'paddingTop': 0,
-        //                                     'style': {
-        //                                         padding: 0
-        //                                     }
-        //                                 }}
-        //                                 viewstyle={{
-        //                                     borderWidth: 0,
-        //                                     borderRadius: 0,
-        //                                     justifyContent: 'center',
-        //                                     alignItems: 'center'
-        //                                 }}
-        //                                 icon={{
-        //                                     'icongroup': 3,
-        //                                     'name':  items.optionicon ,
-        //                                     'color':
-        //                                     // items.color
-        //                                     'darkblue'
-        //                                     ,
-        //                                     'size': normalize(25),
-        //                                     'style': {
-        //                                         textAlign: 'center'
-        //                                     }
-        //                                 }}
-        //                                 text={{
-        //                                     fontSize: normalize(6),
-        //                                     fontWeight: 'bold',
-        //                                     color: more == true ?
-        //                                         items.color
-        //                                     // 'red'
-        //                                      : themes.main,
-        //                                     textAlign: 'center'
-        //                                 }}
-        //                                 displaytext={items.optionname}
-        //                             />
-        //                         </MenuTrigger>
-        //                         <MenuOptions customStyles={{ optionsContainer: { width: '45%', maxHeight: Dimensions.get('screen').height * 0.8, shadowColor: 'transparent' }, optionText: {}, }}>
-        //                             {items.optiondetail != undefined ?
-        //                                 <View style={{ backgroundColor: 'transparent' }}>
-        //                                     <ScrollView>
-        //                                         {items.optiondetail.map((params, key) => {
-        //                                             return (
-        //                                                 <MenuOption
-        //                                                     key={key}
-        //                                                     onSelect={() => { params.componenttype == 'screen' ? (setActivities(false), props.fooCallBack(params)) : (setStage(params.stage), setMore(true), setActivities(false), props.fooCallBack(params)) }}
-        //                                                     style={{
-        //                                                         flexDirection: 'row', alignItems: 'center', borderLeftWidth: 3,borderColor: params.color,
-        //                                                         height: normalize(36),
-        //                                                     }}>
-        //                                                     <HOCIcons.Icons
-        //                                                         icongroup={3}
-        //                                                         name={params.optionicon}
-        //                                                         color={"darkblue"}
-        //                                                         // color={params.stage == stage ?
-        //                                                         //     // 'red'
-        //                                                         //     params.color
-        //                                                         //      : params.color}
-        //                                                         size={normalize(22)}
-        //                                                         style={{ borderWidth: 0, borderColor: "darkblue", borderRadius: 100, textAlign: 'center', padding: normalize(4), backgroundColor: 'transparent', elevation: 0 }}
-        //                                                     />
-        //                                                     <CText style={{
-        //                                                         fontSize: normalize(9), marginLeft: '5%',
-        //                                                         color: params.stage == stage ?
-        //                                                         // 'red'
-        //                                                         params.color
-        //                                                          : "#303030",
-        //                                                         fontWeight: 'bold'
-        //                                                     }}>
-        //                                                         {params.optiondetailname}
-        //                                                     </CText>
-        //                                                 </MenuOption>
-        //                                             )
-        //                                         })}
-        //                                     </ScrollView>
-        //                                 </View> : null}
-        //                         </MenuOptions>
-        //                     </Menu>
-        //                 //     : items.componenttype == 'activities' ?
-        //                 //         <Menu
-        //                 //             ref={r => (items.activitymenu = r)}
-        //                 //         >
-        //                 //             <MenuTrigger
-        //                 //                 customStyles={{
-        //                 //                     triggerWrapper: {
-        //                 //                     }
-        //                 //                 }}
-        //                 //             >
-        //                 //                 <CAwesomeButtonLIS
-        //                 //                     callback={(val) => { { items.activitymenu.open() } }}
-        //                 //                     buttonstyle={{
-        //                 //                         'borderRadius': 10,
-        //                 //                         'borderWidth': 1,
-        //                 //                         'height': normalize(40),
-        //                 //                         'width': normalize(40),
-        //                 //                         'backgroundColor': '#f2f3ff',
-        //                 //                         'paddingHorizontal': 0,
-        //                 //                         'raiseLevel': 1,
-        //                 //                         'paddingBottom': 0,
-        //                 //                         'borderColor': 'lightblue',
-        //                 //                         'paddingTop': 0,
-        //                 //                         'style': {
-        //                 //                             padding: 0
-        //                 //                         }
-        //                 //                     }}
-        //                 //                     viewstyle={{
-        //                 //                         borderWidth: 0,
-        //                 //                         borderRadius: 0,
-        //                 //                         justifyContent: 'center',
-        //                 //                         alignItems: 'center'
-        //                 //                     }}
-        //                 //                     icon={{
-        //                 //                         'icongroup': 3,
-        //                 //                         'name': activities == true ? items.selectedicon : items.icon,
-        //                 //                         'color': activities == true ?
-        //                 //                         // 'red'
-        //                 //                             items.color
-        //                 //                          : themes.main,
-        //                 //                         'size': normalize(25),
-        //                 //                         'style': {
-        //                 //                             textAlign: 'center'
-        //                 //                         }
-        //                 //                     }}
-        //                 //                     text={{
-        //                 //                         fontSize: normalize(6),
-        //                 //                         fontWeight: 'bold',
-        //                 //                         color: activities == true ?
-        //                 //                         // 'red'
-        //                 //                         items.color
-        //                 //                          : themes.main,
-        //                 //                         textAlign: 'center'
-        //                 //                     }}
-        //                 //                     displaytext={items.display}
-        //                 //                 />
-        //                 //             </MenuTrigger>
-        //                 //             <MenuOptions customStyles={{ optionsContainer: { width: '40%', shadowColor: 'transparent' }, optionText: {}, }}>
-        //                 //                 {items.data != undefined ?
-        //                 //                     <View style={{ backgroundColor: 'transparent' }}>
-        //                 //                         {items.data.map((params, key) => {
-        //                 //                             return (
-        //                 //                                 <MenuOption
-        //                 //                                     key={key}
-        //                 //                                     onSelect={() => { params.componenttype == 'screen' ? (setActivities(true), setMore(false), props.fooCallBack(params)) : (setStage(params.stage), setActivities(true), setMore(false), props.fooCallBack(params)) }}
-        //                 //                                     style={{
-        //                 //                                         flexDirection: 'row', alignItems: 'center', borderWidth: 0,
-        //                 //                                         height: normalize(36),
-        //                 //                                     }}>
-        //                 //                                     <HOCIcons.Icons
-        //                 //                                         icongroup={3}
-        //                 //                                         name={params.icon}
-        //                 //                                         color={params.stage == stage ?
-        //                 //                                             // 'red'
-        //                 //                                             params.color
-        //                 //                                              : "#585858"}
-        //                 //                                         size={normalize(20)}
-        //                 //                                         style={{ borderWidth: 0, borderColor: 'grey', borderRadius: 100, paddingHorizontal: normalize(5), textAlign: 'center', paddingVertical: normalize(5), backgroundColor: 'transparent', elevation: 0 }}
-        //                 //                                     />
-        //                 //                                     <CText style={{
-        //                 //                                         fontSize: normalize(9), marginLeft: '5%',
-        //                 //                                         color: params.stage == stage ?
-        //                 //                                         // 'red'
-        //                 //                                         params.color
-        //                 //                                          : "#585858",
-        //                 //                                         fontWeight: 'normal'
-        //                 //                                     }}>
-        //                 //                                         {params.display}
-        //                 //                                     </CText>
-        //                 //                                 </MenuOption>
-        //                 //                             )
-        //                 //                         })}
-        //                 //                     </View> : null}
-        //                 //             </MenuOptions>
-        //                 //         </Menu>
-        //                 //         :
-        //                 //         <CAwesomeButtonLIS
-        //                 //             callback={(val) => { { setStage(items.stage), setMore(false), setActivities(false), props.fooCallBack(items) } }}
-        //                 //             buttonstyle={{
-        //                 //                 'borderRadius': 10,
-        //                 //                 'borderWidth': 1,
-        //                 //                 'height': normalize(40),
-        //                 //                 'width': normalize(40),
-        //                 //                 'backgroundColor': '#f2f3ff',
-        //                 //                 'paddingHorizontal': 0,
-        //                 //                 'raiseLevel': 1,
-        //                 //                 'paddingBottom': 0,
-        //                 //                 'borderColor': 'lightblue',
-        //                 //                 'paddingTop': 0,
-        //                 //                 'style': {
-        //                 //                     padding: 0
-        //                 //                 }
-        //                 //             }}
-        //                 //             viewstyle={{
-        //                 //                 borderWidth: 0,
-        //                 //                 borderRadius: 0,
-        //                 //                 justifyContent: 'center',
-        //                 //                 alignItems: 'center'
-        //                 //             }}
-        //                 //             icon={{
-        //                 //                 'icongroup': 3,
-        //                 //                 'name': items.stage == stage ? items.selectedicon : items.icon,
-        //                 //                 'color': items.stage == stage ?
-        //                 //                 //  'red'
-        //                 //                  items.color
-        //                 //                   : themes.main,
-        //                 //                 'size': normalize(25),
-        //                 //                 'style': {
-        //                 //                     textAlign: 'center'
-        //                 //                 }
-        //                 //             }}
-        //                 //             text={{
-        //                 //                 fontSize: normalize(6),
-        //                 //                 fontWeight: 'bold',
-        //                 //                 color: items.stage == stage ?
-        //                 //                 // 'red'
-        //                 //                 items.color
-        //                 //                 : themes.main,
-        //                 //                 textAlign: 'center'
-        //                 //             }}
-        //                 //             displaytext={items.display}
-        //                 //         />
-
-        //                 // : null
-        //             )
-        //     }) : null}
-        // </View>
-
-        <View
-            style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                // justifyContent: 'space-between',
-                justifyContent: 'flex-end',
-                width: '100%',
-                height: '100%',
-                borderTopLeftRadius: 15,
-                borderTopRightRadius: 15,
-                paddingTop: normalize(5),
-                elevation: 100,
-                paddingHorizontal: normalize(6),
-                flex: 1,
-            }}>
-            {/* {console.log('dddddddddddddddddddddddddd@@@@@@@@@@@@@@@@@', JSON.stringify(data))} */}
-            {isBNUL(FooterArray)
-                ? FooterArray.filter(item => item.componenttype).map((items, k) => {
-                    return items.view ? (
-                        items.componenttype == 'more' ? (
-                            <Menu
-                                key={k}
-                                ref={r => (items.moremenu = r) /*  this.menu2.open() */}>
-                                <MenuTrigger customStyles={{ triggerWrapper: {} }}>
-                                    {/* <CAwesomeButtonLIS
-                                        callback={val => {
-                                            {
-                                                navigation.navigate('MoreOptionsScreen', {
-                                                    footerdata: FooterArray, // Pass the FooterArray
-                                                    stage: stage,           // Pass the current stage
-                                                    fooCallBack: props.fooCallBack,
-                                                })
-                                                console.log('options')
-                                                // items.moremenu.open();
-                                            }
-                                        }}
-                                        buttonstyle={{
-                                            borderRadius: 10,
-                                            borderWidth: 1,
-                                            height: normalize(40),
-                                            width: normalize(40),
-                                            backgroundColor: '#f2f3ff',
-                                            paddingHorizontal: 0,
-                                            raiseLevel: 1,
-                                            paddingBottom: 0,
-                                            borderColor: 'lightblue',
-                                            paddingTop: 0,
-                                            style: {
-                                                padding: 0,
-                                            },
-                                        }}
-                                        viewstyle={{
-                                            borderWidth: 0,
-                                            borderRadius: 0,
-                                            justifyContent: 'center',
-                                            alignItems: 'center',
-                                        }}
-                                        icon={{
-                                            icongroup: 3,
-                                            name: more == true ? items.selectedicon : items.icon,
-                                            color:
-                                                more == true
-                                                    ? themes.main ? themes.main : null
-                                                    : // 'red'
-                                                    themes.main,
-                                            size: normalize(25),
-                                            style: {
-                                                textAlign: 'center',
-                                            },
-                                        }}
-                                        text={{
-                                            fontSize: normalize(6),
-                                            fontWeight: 'bold',
-                                            color:
-                                                more == true
-                                                    ? items.color ? items.color : null
-                                                    : // 'red'
-                                                    themes.main,
-                                            textAlign: 'center',
-                                        }}
-                                        displaytext={items.display}
-                                    /> */}
-                                    <TouchableOpacity
-                                        disabled={false} // You can make this dynamic if needed
-                                        onPress={() =>
-                                            navigation.navigate('MoreOptionsScreen', {
-                                                footerdata: FooterArray, // Pass the FooterArray
-                                                stage: stage, // Pass the current stage
-                                                fooCallBack: props.fooCallBack,
-                                            })
-                                        }
-                                        style={{
-                                            width: normalize(40), // Adjust width for the button
-                                            flexDirection: 'column', // Stack icon and text vertically
-                                            alignItems: 'center',
-                                            justifyContent: 'center',
-                                            padding: normalize(2), // Add margin for spacing
-                                            backgroundColor: 'white', // Background color for the button
-                                            borderRadius: normalize(10), // Rounded corners
-                                            ...CShadowDynamic(-3, 3, 5, 0, Global.AppTheme.primary_color), // Apply shadow dynamically
-                                        }}
-                                    >
-                                        {/* Icon */}
-                                        <HOCIcons.Icons
-                                            icongroup={items.icongroup || 3}
-                                            name={items.icon || 'cog-outline'}
-                                            color={items.color || Global.AppTheme.primary_color}
-                                            size={normalize(22)}
-                                        />
-                                        {/* Text */}
-                                        <Text
-                                            style={{
-                                                fontSize: normalize(8), // Make text smaller
-                                                color: items.color || Global.AppTheme.primary_color,
-                                                fontWeight: 'bold', // Bold text
-                                                textAlign: 'center',
-                                                maxWidth: normalize(35), // Limit text width
-                                            }}
-                                            numberOfLines={1} // Ensure text is displayed in a single line
-                                            ellipsizeMode="tail" // Add ellipsis if text overflows
-                                        >
-                                            {items.display}
-                                        </Text>
-                                    </TouchableOpacity>
-                                </MenuTrigger>
-                                <MenuOptions
-                                    customStyles={{
-                                        optionsContainer: {
-                                            width: '55%',
-                                            height: '60%',
-                                            shadowColor: 'transparent',
-                                            borderRadius: 10,
-                                        },
-                                        optionText: {},
-                                    }}>
-                                    {/* Alphabet column */}
-
-                                    {items.moreoptions != undefined ? (
-                                        <View style={{ marginBottom: normalize(80), height: '88%' }}>
-                                            <SSearchBar
-                                                // value={searchData}
-                                                onChangeText={setSearchData}
-                                            />
-                                            <View style={{ flexDirection: 'row', flex: 1 }}>
-                                                <ScrollView
-                                                    showsVerticalScrollIndicator={true}>
-                                                    {isBNUL(filterdata) ? filterdata
-                                                        .filter(
-                                                            params =>
-                                                                params.display
-                                                                    ?.toLowerCase()
-                                                                    ?.includes((searchData || '').toLowerCase()), // Handle undefined searchData
-                                                        )
-                                                        .map(params => {
-                                                            return (
-                                                                <View key={params.display} style={{ flex: 1 }}>
-                                                                    <TouchableOpacity
-                                                                        style={{
-                                                                            width: '100%',
-                                                                            backgroundColor: '#f5f5f5',
-                                                                            borderRadius: 8,
-                                                                            marginBottom: 5,
-                                                                            elevation: 2, // Shadow effect
-                                                                            paddingHorizontal: 10,
-                                                                        }}
-                                                                        onPress={() =>
-                                                                            handleCategoryPress(params)
-                                                                        }>
-                                                                        <View
-                                                                            style={{
-                                                                                padding: 5,
-                                                                                flexDirection: 'row',
-                                                                                alignItems: 'center',
-                                                                            }}>
-                                                                            <HOCIcons.Icons
-                                                                                icongroup={
-                                                                                    params.icongroup != undefined
-                                                                                        ? params.icongroup
-                                                                                        : 3
-                                                                                }
-                                                                                name={
-                                                                                    params.icon != undefined
-                                                                                        ? params.icon
-                                                                                        : 'file'
-                                                                                }
-                                                                                color={
-                                                                                    params.color != undefined
-                                                                                        ? params.color
-                                                                                        : null
-                                                                                }
-                                                                                size={normalize(18)}
-                                                                                style={{
-                                                                                    borderWidth: 0,
-                                                                                    borderColor: params.color != undefined
-                                                                                        ? params.color
-                                                                                        : null,
-                                                                                    borderRadius: 100,
-                                                                                    textAlign: 'center',
-                                                                                    backgroundColor: 'transparent',
-                                                                                    elevation: 0,
-                                                                                }}
-                                                                            />
-                                                                            <Text
-                                                                                style={{
-                                                                                    fontSize: 10,
-                                                                                    fontWeight: 'bold',
-                                                                                    color: '#333',
-                                                                                    paddingLeft: normalize(5),
-                                                                                }}>
-                                                                                {params.display}
-                                                                            </Text>
-                                                                        </View>
-                                                                    </TouchableOpacity>
-
-                                                                    {expandedCategory === params.display && (
-                                                                        <FlatList
-                                                                            data={params.optiondetail.filter(
-                                                                                item => item.component != '',
-                                                                            )}
-                                                                            keyExtractor={(item, index) =>
-                                                                                index.toString()
-                                                                            }
-                                                                            renderItem={renderItem}
-                                                                        />
-                                                                    )}
-                                                                </View>
-                                                            );
-                                                        }) : null}
-                                                </ScrollView>
-                                                <View>
-                                                    <SAlphabet
-                                                        callBack={val =>
-                                                            val == undefined
-                                                                ? null
-                                                                : handleAlphabetPress(val.alpha)
-                                                        }
-                                                    />
-                                                </View>
-                                            </View>
-                                        </View>
-                                    ) : null}
-                                </MenuOptions>
-                            </Menu>
-                        ) : null
-                    ) : (
-                        <CAwesomeButtonLIS
-                            key={k}
-                            // callback={(val) => { { setStage(items.stage), setMore(false), setActivities(false), props.fooCallBack(items) } }}
-                            callback={() => {
-                                items.componenttype == 'screen'
-                                    ? (setActivities(false), props.fooCallBack(items))
-                                    : (setStage(items.stage),
-                                        setMore(true),
-                                        setActivities(false),
-                                        props.fooCallBack(items));
-                            }}
-                            buttonstyle={{
-                                borderRadius: 10,
-                                borderWidth: 1,
-                                height: normalize(40),
-                                width: normalize(40),
-                                backgroundColor: '#f2f3ff',
-                                paddingHorizontal: 0,
-                                raiseLevel: 1,
-                                paddingBottom: 0,
-                                borderColor: 'lightblue',
-                                paddingTop: 0,
-                                style: {
-                                    padding: 0,
-                                },
-                            }}
-                            viewstyle={{
-                                borderWidth: 0,
-                                borderRadius: 0,
-                                justifyContent: 'center',
-                                alignItems: 'center',
-                            }}
-                            icon={{
-                                icongroup: 3,
-                                name: items.stage == stage ? items.selectedicon : items.icon,
-                                color:
-                                    items.stage == stage
-                                        ? //  'red'
-                                        themes.main
-                                        : themes.main,
-                                size: normalize(25),
-                                style: {
-                                    textAlign: 'center',
-                                },
-                            }}
-                            text={{
-                                fontSize: normalize(6),
-                                fontWeight: 'bold',
-                                color:
-                                    items.stage == stage
-                                        ? // 'red'
-                                        themes.main
-                                        : themes.main,
-                                textAlign: 'center',
-                            }}
-                            displaytext={items.display}
-                        />
-                    );
-
-                    // : null
-                })
-                : null}
-        </View>
-    );
-};
-export default FooterBlock;