@jescon-technologies/react-native-ui-kit 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,824 @@
1
+ import React, { useState, useRef, useEffect } from 'react';
2
+ import {
3
+ View,
4
+ TouchableOpacity,
5
+ Text,
6
+ ScrollView,
7
+ Dimensions,
8
+ TouchableHighlight,
9
+ Pressable,
10
+ FlatList,
11
+ Platform,
12
+ } from 'react-native';
13
+ import {
14
+ Menu,
15
+ MenuOptions,
16
+ MenuOption,
17
+ MenuTrigger,
18
+ } from 'react-native-popup-menu';
19
+ import CText from '../CustomComponents/CText';
20
+ import HOCIcons from '../HOC/HOCIcons';
21
+ import themes from '../CommonStyle/CommonTheme';
22
+ import { normalize } from '../CommonStyle/componentStyle';
23
+ import { isBNUL } from '../CommonStyle/ComponentFunctions';
24
+ import CAwesomeButtonLIS from '../Custom/CAwesomeButton';
25
+ import SSearchBar from '../StaticComponents/SSearchBar';
26
+ import { APIURL, imageURL } from '../Common/apiConstants';
27
+ import NetworkServiceCall from '../Common/NetworkServiceCall';
28
+ import { notifyMessage } from '../CommonStyle/ComponentFunctions';
29
+ import { Global } from '../Common/Global';
30
+ import SAlphabet from '../StaticComponents/SAlphabet';
31
+ import { useNavigation } from '../Navigation/useNavigation';
32
+
33
+
34
+
35
+ const FooterBlock = props => {
36
+ const navigation = useNavigation();
37
+ const [FooterArray, SetFooterArray] = useState(
38
+ props.footerdata &&
39
+ props.footerdata != null &&
40
+ props.footerdata != undefined
41
+ ? props.footerdata
42
+ : null,
43
+ );
44
+ const [stage, setStage] = useState(props.stage);
45
+ const [more, setMore] = useState(false);
46
+ const [activities, setActivities] = useState(false);
47
+ const [searchData, setSearchData] = useState('');
48
+ const [alpha, setAlpha] = useState(null);
49
+ const [expandedCategory, setExpandedCategory] = useState(null);
50
+ const [optionSelected, setOptionSelected] = useState(null);
51
+ const [isLoading, setIsLoading] = useState(false);
52
+ const [refresh, setRefresh] = useState(0);
53
+ const [visibility, setVisibility] = useState(0);
54
+ const [data, setData] = useState([]);
55
+ const [displayData, setDisplayData] = useState([]);
56
+ const [alphaFilter, setAlphaFilter] = useState(false);
57
+ const [filterPurpose, setFilterPurpose] = useState([]);
58
+ const [filterdata, setFilterData] = useState(data);
59
+ const alphabet = Array.from({ length: 26 }, (_, i) =>
60
+ String.fromCharCode(65 + i),
61
+ ); // Create alphabet array A-Z
62
+ const scrollViewRef = useRef(null);
63
+ useEffect(() => {
64
+ // getmorebutton();
65
+
66
+ setData(Global.userOptionList);
67
+ setFilterData(Global.userOptionList);
68
+ // SetFooterArray([
69
+ // {
70
+ // stage: 1,
71
+ // display: 'MY PROFILE',
72
+ // suoptiondetail: 46001,
73
+ // icon: 'account-cog',
74
+ // icongroup: 3,
75
+ // component: 'CProfileDetails',
76
+ // color: '#2bcfc1',
77
+ // componenttype: 'screen',
78
+ // more: false,
79
+ // selectedicon: 'account-cog',
80
+ // footerorder: 1,
81
+ // },
82
+ // {
83
+ // stage: 2,
84
+ // display: 'ABOUT US',
85
+ // suoptiondetail: 46201,
86
+ // icon: 'account-group-outline',
87
+ // icongroup: 3,
88
+ // component: 'CGeneralBiodata',
89
+ // color: '#3ef06e',
90
+ // componenttype: 'screen',
91
+ // more: false,
92
+ // selectedicon: 'account-group',
93
+ // footerorder: 2,
94
+ // },
95
+ // {
96
+ // stage: 3,
97
+ // display: 'HELP',
98
+ // suoptiondetail: 43801,
99
+ // icon: 'help-circle-outline',
100
+ // icongroup: 3,
101
+ // component: 'CBiodataCollection',
102
+ // color: '#a33ef0',
103
+ // componenttype: 'screen2',
104
+ // more: false,
105
+ // selectedicon: 'help-circle',
106
+ // footerorder: 3,
107
+ // },
108
+ // {
109
+ // stage: 4,
110
+ // display: 'CHANGE PASSWORD',
111
+ // suoptiondetail: 43802,
112
+ // icon: 'lock-reset',
113
+ // icongroup: 3,
114
+ // component: 'ForgotPassword',
115
+ // color: '#a33ef0',
116
+ // componenttype: 'screen2',
117
+ // more: false,
118
+ // selectedicon: 'lock-reset',
119
+ // footerorder: 4,
120
+ // },
121
+
122
+ // {
123
+ // stage: 9,
124
+ // display: 'MORE',
125
+ // icon: 'cog-outline',
126
+ // icongroup: 3,
127
+ // componenttype: 'more',
128
+ // more: false,
129
+ // selectedicon: 'cog',
130
+ // footerorder: 10,
131
+ // view: true,
132
+ // moreoptions: [],
133
+ // },
134
+ // {
135
+ // stage: 83,
136
+ // display: 'DECLARATION CANCELLATION',
137
+ // more: false,
138
+ // footerorder: 11,
139
+ // },
140
+ // ]);
141
+ }, []);
142
+
143
+ // function getmorebutton() {
144
+ // setIsLoading(true);
145
+ // let buttonapi = "http://192.168.1.3:9090/hislogin/login/UserLogin1_27122024%201,'1199',0";
146
+
147
+ // console.log('BUTTON API MORE BUTTON', buttonapi);
148
+
149
+ // NetworkServiceCall('get', buttonapi)
150
+ // .then(function (response) {
151
+ // if (response.httpstatus === 200 && response.data && response.data.data) {
152
+ // setData(response.data.data); // Store data in state
153
+ // console.log('success.....', JSON.stringify(response.data.data));
154
+ // } else {
155
+ // notifyMessage('Supplier data not found.');
156
+ // }
157
+ // setIsLoading(false);
158
+ // })
159
+ // .catch((error) => {
160
+ // console.error('Network error:', error);
161
+ // notifyMessage('Failed to fetch data.');
162
+ // setIsLoading(false);
163
+ // });
164
+ // }
165
+ // console.log("FOOTER BLOCK--------------------------------", FooterArray)
166
+ function getAlphabetData(alpha, index) {
167
+ var filter = isBNUL(displayData)
168
+ ? displayData.filter(
169
+ value =>
170
+ (value.displayvalue != undefined ? value.displayvalue : '').charAt(
171
+ 0,
172
+ ) == alpha,
173
+ )
174
+ : [];
175
+ setFilterPurpose(filter);
176
+ index == 0 ? setSearchData('') : setSearchData(alpha);
177
+ index == 0 ? setAlphaFilter(false) : setAlphaFilter(true);
178
+ }
179
+
180
+ const handleCategoryPress = categoryId => {
181
+ // Toggle display expansion
182
+ // console.log('-----------------------', categoryId);
183
+ setExpandedCategory(prev =>
184
+ prev === categoryId.display ? null : categoryId.display,
185
+ );
186
+ };
187
+
188
+ const handleAlphabetPress = letter => {
189
+ const filteredLetter = letter === "#" ? null : letter;
190
+ setAlpha(filteredLetter);
191
+
192
+ setFilterData(data.filter(params =>
193
+ params.display.toLowerCase().startsWith(filteredLetter?.toLowerCase() || '')
194
+ ));
195
+ };
196
+
197
+ function CShadowDynamic(offsetX, offsetY, blurRadius, spreadDistance, color) {
198
+ const isAndroidBelow9 = Platform.OS === 'android' && Platform.Version < 28;
199
+ return isAndroidBelow9
200
+ ? {
201
+ elevation: 10,
202
+ shadowColor: color || Global.AppTheme.primary_color,
203
+ shadowOffset: { width: offsetX, height: offsetY },
204
+ shadowOpacity: 0.3,
205
+ shadowRadius: blurRadius,
206
+ }
207
+ : {
208
+ boxShadow: `${offsetX}px ${offsetY}px ${blurRadius}px ${spreadDistance}px ${color}`,
209
+ };
210
+ }
211
+
212
+ const renderItem = ({ item, index }) => {
213
+ return (
214
+ <MenuOption
215
+ key={item.suoptiondetail || index} // Ensure a unique key using suoptiondetail or index
216
+ onSelect={() => {
217
+ setActivities(false);
218
+ props.fooCallBack(item);
219
+ setStage(item.display);
220
+ setMore(true);
221
+ }}
222
+ style={{
223
+ flexDirection: 'row',
224
+ alignItems: 'center',
225
+ borderLeftWidth: 3,
226
+ borderColor: item.color,
227
+ height: normalize(36),
228
+ }}>
229
+ <HOCIcons.Icons
230
+ icongroup={item.icongroup != undefined ? item.icongroup : 3}
231
+ name={item.icon}
232
+ color={item.display === stage ? item.color : '#303030'}
233
+ size={normalize(15)}
234
+ style={{
235
+ borderWidth: 0,
236
+ borderColor: item.color,
237
+ borderRadius: 100,
238
+ textAlign: 'center',
239
+ padding: normalize(4),
240
+ backgroundColor: 'transparent',
241
+ elevation: 0,
242
+ }}
243
+ />
244
+ <CText
245
+ style={{
246
+ fontSize: normalize(9),
247
+ marginLeft: '5%',
248
+ width: Dimensions.get('screen').width * 0.38,
249
+ color: item.display === stage ? item.color : '#303030',
250
+ fontWeight: 'bold',
251
+ }}>
252
+ {item.display} {/* Handle undefined item.display */}
253
+ </CText>
254
+ </MenuOption>
255
+ );
256
+ };
257
+
258
+ // console.log("FOOTERBLOCK---------------------------------------",props.footerdata)
259
+ return (
260
+ // <View style={{
261
+ // flexDirection: 'row',
262
+ // alignItems: 'center',
263
+ // justifyContent: 'space-between',
264
+ // width: '100%',
265
+ // height: normalize(45),
266
+ // borderTopLeftRadius: 15,
267
+ // borderTopRightRadius: 15,
268
+ // paddingTop: normalize(5),
269
+ // elevation: 100,
270
+ // paddingHorizontal: normalize(6)
271
+ // }}>
272
+ // {isBNUL(FooterArray) ? FooterArray.map((items, k) => {
273
+ // return (
274
+ // // items.view ?
275
+ // // items.componenttype == 'more' ?
276
+ // <Menu ref={r => (items.moremenu = r) /* this.menu2.open() */}>
277
+ // <MenuTrigger customStyles={{ triggerWrapper: {} }} >
278
+ // <CAwesomeButtonLIS
279
+ // callback={(val) => { { items.moremenu.open() } }}
280
+ // buttonstyle={{
281
+ // 'borderRadius': 10,
282
+ // 'borderWidth': 1,
283
+ // 'height': normalize(40),
284
+ // 'width': normalize(40),
285
+ // 'backgroundColor': '#f2f3ff',
286
+ // 'paddingHorizontal': 0,
287
+ // 'raiseLevel': 1,
288
+ // 'paddingBottom': 0,
289
+ // 'borderColor': 'lightblue',
290
+ // 'paddingTop': 0,
291
+ // 'style': {
292
+ // padding: 0
293
+ // }
294
+ // }}
295
+ // viewstyle={{
296
+ // borderWidth: 0,
297
+ // borderRadius: 0,
298
+ // justifyContent: 'center',
299
+ // alignItems: 'center'
300
+ // }}
301
+ // icon={{
302
+ // 'icongroup': 3,
303
+ // 'name': items.optionicon ,
304
+ // 'color':
305
+ // // items.color
306
+ // 'darkblue'
307
+ // ,
308
+ // 'size': normalize(25),
309
+ // 'style': {
310
+ // textAlign: 'center'
311
+ // }
312
+ // }}
313
+ // text={{
314
+ // fontSize: normalize(6),
315
+ // fontWeight: 'bold',
316
+ // color: more == true ?
317
+ // items.color
318
+ // // 'red'
319
+ // : themes.main,
320
+ // textAlign: 'center'
321
+ // }}
322
+ // displaytext={items.optionname}
323
+ // />
324
+ // </MenuTrigger>
325
+ // <MenuOptions customStyles={{ optionsContainer: { width: '45%', maxHeight: Dimensions.get('screen').height * 0.8, shadowColor: 'transparent' }, optionText: {}, }}>
326
+ // {items.optiondetail != undefined ?
327
+ // <View style={{ backgroundColor: 'transparent' }}>
328
+ // <ScrollView>
329
+ // {items.optiondetail.map((params, key) => {
330
+ // return (
331
+ // <MenuOption
332
+ // key={key}
333
+ // onSelect={() => { params.componenttype == 'screen' ? (setActivities(false), props.fooCallBack(params)) : (setStage(params.stage), setMore(true), setActivities(false), props.fooCallBack(params)) }}
334
+ // style={{
335
+ // flexDirection: 'row', alignItems: 'center', borderLeftWidth: 3,borderColor: params.color,
336
+ // height: normalize(36),
337
+ // }}>
338
+ // <HOCIcons.Icons
339
+ // icongroup={3}
340
+ // name={params.optionicon}
341
+ // color={"darkblue"}
342
+ // // color={params.stage == stage ?
343
+ // // // 'red'
344
+ // // params.color
345
+ // // : params.color}
346
+ // size={normalize(22)}
347
+ // style={{ borderWidth: 0, borderColor: "darkblue", borderRadius: 100, textAlign: 'center', padding: normalize(4), backgroundColor: 'transparent', elevation: 0 }}
348
+ // />
349
+ // <CText style={{
350
+ // fontSize: normalize(9), marginLeft: '5%',
351
+ // color: params.stage == stage ?
352
+ // // 'red'
353
+ // params.color
354
+ // : "#303030",
355
+ // fontWeight: 'bold'
356
+ // }}>
357
+ // {params.optiondetailname}
358
+ // </CText>
359
+ // </MenuOption>
360
+ // )
361
+ // })}
362
+ // </ScrollView>
363
+ // </View> : null}
364
+ // </MenuOptions>
365
+ // </Menu>
366
+ // // : items.componenttype == 'activities' ?
367
+ // // <Menu
368
+ // // ref={r => (items.activitymenu = r)}
369
+ // // >
370
+ // // <MenuTrigger
371
+ // // customStyles={{
372
+ // // triggerWrapper: {
373
+ // // }
374
+ // // }}
375
+ // // >
376
+ // // <CAwesomeButtonLIS
377
+ // // callback={(val) => { { items.activitymenu.open() } }}
378
+ // // buttonstyle={{
379
+ // // 'borderRadius': 10,
380
+ // // 'borderWidth': 1,
381
+ // // 'height': normalize(40),
382
+ // // 'width': normalize(40),
383
+ // // 'backgroundColor': '#f2f3ff',
384
+ // // 'paddingHorizontal': 0,
385
+ // // 'raiseLevel': 1,
386
+ // // 'paddingBottom': 0,
387
+ // // 'borderColor': 'lightblue',
388
+ // // 'paddingTop': 0,
389
+ // // 'style': {
390
+ // // padding: 0
391
+ // // }
392
+ // // }}
393
+ // // viewstyle={{
394
+ // // borderWidth: 0,
395
+ // // borderRadius: 0,
396
+ // // justifyContent: 'center',
397
+ // // alignItems: 'center'
398
+ // // }}
399
+ // // icon={{
400
+ // // 'icongroup': 3,
401
+ // // 'name': activities == true ? items.selectedicon : items.icon,
402
+ // // 'color': activities == true ?
403
+ // // // 'red'
404
+ // // items.color
405
+ // // : themes.main,
406
+ // // 'size': normalize(25),
407
+ // // 'style': {
408
+ // // textAlign: 'center'
409
+ // // }
410
+ // // }}
411
+ // // text={{
412
+ // // fontSize: normalize(6),
413
+ // // fontWeight: 'bold',
414
+ // // color: activities == true ?
415
+ // // // 'red'
416
+ // // items.color
417
+ // // : themes.main,
418
+ // // textAlign: 'center'
419
+ // // }}
420
+ // // displaytext={items.display}
421
+ // // />
422
+ // // </MenuTrigger>
423
+ // // <MenuOptions customStyles={{ optionsContainer: { width: '40%', shadowColor: 'transparent' }, optionText: {}, }}>
424
+ // // {items.data != undefined ?
425
+ // // <View style={{ backgroundColor: 'transparent' }}>
426
+ // // {items.data.map((params, key) => {
427
+ // // return (
428
+ // // <MenuOption
429
+ // // key={key}
430
+ // // onSelect={() => { params.componenttype == 'screen' ? (setActivities(true), setMore(false), props.fooCallBack(params)) : (setStage(params.stage), setActivities(true), setMore(false), props.fooCallBack(params)) }}
431
+ // // style={{
432
+ // // flexDirection: 'row', alignItems: 'center', borderWidth: 0,
433
+ // // height: normalize(36),
434
+ // // }}>
435
+ // // <HOCIcons.Icons
436
+ // // icongroup={3}
437
+ // // name={params.icon}
438
+ // // color={params.stage == stage ?
439
+ // // // 'red'
440
+ // // params.color
441
+ // // : "#585858"}
442
+ // // size={normalize(20)}
443
+ // // style={{ borderWidth: 0, borderColor: 'grey', borderRadius: 100, paddingHorizontal: normalize(5), textAlign: 'center', paddingVertical: normalize(5), backgroundColor: 'transparent', elevation: 0 }}
444
+ // // />
445
+ // // <CText style={{
446
+ // // fontSize: normalize(9), marginLeft: '5%',
447
+ // // color: params.stage == stage ?
448
+ // // // 'red'
449
+ // // params.color
450
+ // // : "#585858",
451
+ // // fontWeight: 'normal'
452
+ // // }}>
453
+ // // {params.display}
454
+ // // </CText>
455
+ // // </MenuOption>
456
+ // // )
457
+ // // })}
458
+ // // </View> : null}
459
+ // // </MenuOptions>
460
+ // // </Menu>
461
+ // // :
462
+ // // <CAwesomeButtonLIS
463
+ // // callback={(val) => { { setStage(items.stage), setMore(false), setActivities(false), props.fooCallBack(items) } }}
464
+ // // buttonstyle={{
465
+ // // 'borderRadius': 10,
466
+ // // 'borderWidth': 1,
467
+ // // 'height': normalize(40),
468
+ // // 'width': normalize(40),
469
+ // // 'backgroundColor': '#f2f3ff',
470
+ // // 'paddingHorizontal': 0,
471
+ // // 'raiseLevel': 1,
472
+ // // 'paddingBottom': 0,
473
+ // // 'borderColor': 'lightblue',
474
+ // // 'paddingTop': 0,
475
+ // // 'style': {
476
+ // // padding: 0
477
+ // // }
478
+ // // }}
479
+ // // viewstyle={{
480
+ // // borderWidth: 0,
481
+ // // borderRadius: 0,
482
+ // // justifyContent: 'center',
483
+ // // alignItems: 'center'
484
+ // // }}
485
+ // // icon={{
486
+ // // 'icongroup': 3,
487
+ // // 'name': items.stage == stage ? items.selectedicon : items.icon,
488
+ // // 'color': items.stage == stage ?
489
+ // // // 'red'
490
+ // // items.color
491
+ // // : themes.main,
492
+ // // 'size': normalize(25),
493
+ // // 'style': {
494
+ // // textAlign: 'center'
495
+ // // }
496
+ // // }}
497
+ // // text={{
498
+ // // fontSize: normalize(6),
499
+ // // fontWeight: 'bold',
500
+ // // color: items.stage == stage ?
501
+ // // // 'red'
502
+ // // items.color
503
+ // // : themes.main,
504
+ // // textAlign: 'center'
505
+ // // }}
506
+ // // displaytext={items.display}
507
+ // // />
508
+
509
+ // // : null
510
+ // )
511
+ // }) : null}
512
+ // </View>
513
+
514
+ <View
515
+ style={{
516
+ flexDirection: 'row',
517
+ alignItems: 'center',
518
+ // justifyContent: 'space-between',
519
+ justifyContent: 'flex-end',
520
+ width: '100%',
521
+ height: '100%',
522
+ borderTopLeftRadius: 15,
523
+ borderTopRightRadius: 15,
524
+ paddingTop: normalize(5),
525
+ elevation: 100,
526
+ paddingHorizontal: normalize(6),
527
+ flex: 1,
528
+ }}>
529
+ {/* {console.log('dddddddddddddddddddddddddd@@@@@@@@@@@@@@@@@', JSON.stringify(data))} */}
530
+ {isBNUL(FooterArray)
531
+ ? FooterArray.filter(item => item.componenttype).map((items, k) => {
532
+ return items.view ? (
533
+ items.componenttype == 'more' ? (
534
+ <Menu
535
+ key={k}
536
+ ref={r => (items.moremenu = r) /* this.menu2.open() */}>
537
+ <MenuTrigger customStyles={{ triggerWrapper: {} }}>
538
+ {/* <CAwesomeButtonLIS
539
+ callback={val => {
540
+ {
541
+ navigation.navigate('MoreOptionsScreen', {
542
+ footerdata: FooterArray, // Pass the FooterArray
543
+ stage: stage, // Pass the current stage
544
+ fooCallBack: props.fooCallBack,
545
+ })
546
+ console.log('options')
547
+ // items.moremenu.open();
548
+ }
549
+ }}
550
+ buttonstyle={{
551
+ borderRadius: 10,
552
+ borderWidth: 1,
553
+ height: normalize(40),
554
+ width: normalize(40),
555
+ backgroundColor: '#f2f3ff',
556
+ paddingHorizontal: 0,
557
+ raiseLevel: 1,
558
+ paddingBottom: 0,
559
+ borderColor: 'lightblue',
560
+ paddingTop: 0,
561
+ style: {
562
+ padding: 0,
563
+ },
564
+ }}
565
+ viewstyle={{
566
+ borderWidth: 0,
567
+ borderRadius: 0,
568
+ justifyContent: 'center',
569
+ alignItems: 'center',
570
+ }}
571
+ icon={{
572
+ icongroup: 3,
573
+ name: more == true ? items.selectedicon : items.icon,
574
+ color:
575
+ more == true
576
+ ? themes.main ? themes.main : null
577
+ : // 'red'
578
+ themes.main,
579
+ size: normalize(25),
580
+ style: {
581
+ textAlign: 'center',
582
+ },
583
+ }}
584
+ text={{
585
+ fontSize: normalize(6),
586
+ fontWeight: 'bold',
587
+ color:
588
+ more == true
589
+ ? items.color ? items.color : null
590
+ : // 'red'
591
+ themes.main,
592
+ textAlign: 'center',
593
+ }}
594
+ displaytext={items.display}
595
+ /> */}
596
+ <TouchableOpacity
597
+ disabled={false} // You can make this dynamic if needed
598
+ onPress={() =>
599
+ navigation.navigate('MoreOptionsScreen', {
600
+ footerdata: FooterArray, // Pass the FooterArray
601
+ stage: stage, // Pass the current stage
602
+ fooCallBack: props.fooCallBack,
603
+ })
604
+ }
605
+ style={{
606
+ width: normalize(40), // Adjust width for the button
607
+ flexDirection: 'column', // Stack icon and text vertically
608
+ alignItems: 'center',
609
+ justifyContent: 'center',
610
+ padding: normalize(2), // Add margin for spacing
611
+ backgroundColor: 'white', // Background color for the button
612
+ borderRadius: normalize(10), // Rounded corners
613
+ ...CShadowDynamic(-3, 3, 5, 0, Global.AppTheme.primary_color), // Apply shadow dynamically
614
+ }}
615
+ >
616
+ {/* Icon */}
617
+ <HOCIcons.Icons
618
+ icongroup={items.icongroup || 3}
619
+ name={items.icon || 'cog-outline'}
620
+ color={items.color || Global.AppTheme.primary_color}
621
+ size={normalize(22)}
622
+ />
623
+ {/* Text */}
624
+ <Text
625
+ style={{
626
+ fontSize: normalize(8), // Make text smaller
627
+ color: items.color || Global.AppTheme.primary_color,
628
+ fontWeight: 'bold', // Bold text
629
+ textAlign: 'center',
630
+ maxWidth: normalize(35), // Limit text width
631
+ }}
632
+ numberOfLines={1} // Ensure text is displayed in a single line
633
+ ellipsizeMode="tail" // Add ellipsis if text overflows
634
+ >
635
+ {items.display}
636
+ </Text>
637
+ </TouchableOpacity>
638
+ </MenuTrigger>
639
+ <MenuOptions
640
+ customStyles={{
641
+ optionsContainer: {
642
+ width: '55%',
643
+ height: '60%',
644
+ shadowColor: 'transparent',
645
+ borderRadius: 10,
646
+ },
647
+ optionText: {},
648
+ }}>
649
+ {/* Alphabet column */}
650
+
651
+ {items.moreoptions != undefined ? (
652
+ <View style={{ marginBottom: normalize(80), height: '88%' }}>
653
+ <SSearchBar
654
+ // value={searchData}
655
+ onChangeText={setSearchData}
656
+ />
657
+ <View style={{ flexDirection: 'row', flex: 1 }}>
658
+ <ScrollView
659
+ showsVerticalScrollIndicator={true}>
660
+ {isBNUL(filterdata) ? filterdata
661
+ .filter(
662
+ params =>
663
+ params.display
664
+ ?.toLowerCase()
665
+ ?.includes((searchData || '').toLowerCase()), // Handle undefined searchData
666
+ )
667
+ .map(params => {
668
+ return (
669
+ <View key={params.display} style={{ flex: 1 }}>
670
+ <TouchableOpacity
671
+ style={{
672
+ width: '100%',
673
+ backgroundColor: '#f5f5f5',
674
+ borderRadius: 8,
675
+ marginBottom: 5,
676
+ elevation: 2, // Shadow effect
677
+ paddingHorizontal: 10,
678
+ }}
679
+ onPress={() =>
680
+ handleCategoryPress(params)
681
+ }>
682
+ <View
683
+ style={{
684
+ padding: 5,
685
+ flexDirection: 'row',
686
+ alignItems: 'center',
687
+ }}>
688
+ <HOCIcons.Icons
689
+ icongroup={
690
+ params.icongroup != undefined
691
+ ? params.icongroup
692
+ : 3
693
+ }
694
+ name={
695
+ params.icon != undefined
696
+ ? params.icon
697
+ : 'file'
698
+ }
699
+ color={
700
+ params.color != undefined
701
+ ? params.color
702
+ : null
703
+ }
704
+ size={normalize(18)}
705
+ style={{
706
+ borderWidth: 0,
707
+ borderColor: params.color != undefined
708
+ ? params.color
709
+ : null,
710
+ borderRadius: 100,
711
+ textAlign: 'center',
712
+ backgroundColor: 'transparent',
713
+ elevation: 0,
714
+ }}
715
+ />
716
+ <Text
717
+ style={{
718
+ fontSize: 10,
719
+ fontWeight: 'bold',
720
+ color: '#333',
721
+ paddingLeft: normalize(5),
722
+ }}>
723
+ {params.display}
724
+ </Text>
725
+ </View>
726
+ </TouchableOpacity>
727
+
728
+ {expandedCategory === params.display && (
729
+ <FlatList
730
+ data={params.optiondetail.filter(
731
+ item => item.component != '',
732
+ )}
733
+ keyExtractor={(item, index) =>
734
+ index.toString()
735
+ }
736
+ renderItem={renderItem}
737
+ />
738
+ )}
739
+ </View>
740
+ );
741
+ }) : null}
742
+ </ScrollView>
743
+ <View>
744
+ <SAlphabet
745
+ callBack={val =>
746
+ val == undefined
747
+ ? null
748
+ : handleAlphabetPress(val.alpha)
749
+ }
750
+ />
751
+ </View>
752
+ </View>
753
+ </View>
754
+ ) : null}
755
+ </MenuOptions>
756
+ </Menu>
757
+ ) : null
758
+ ) : (
759
+ <CAwesomeButtonLIS
760
+ key={k}
761
+ // callback={(val) => { { setStage(items.stage), setMore(false), setActivities(false), props.fooCallBack(items) } }}
762
+ callback={() => {
763
+ items.componenttype == 'screen'
764
+ ? (setActivities(false), props.fooCallBack(items))
765
+ : (setStage(items.stage),
766
+ setMore(true),
767
+ setActivities(false),
768
+ props.fooCallBack(items));
769
+ }}
770
+ buttonstyle={{
771
+ borderRadius: 10,
772
+ borderWidth: 1,
773
+ height: normalize(40),
774
+ width: normalize(40),
775
+ backgroundColor: '#f2f3ff',
776
+ paddingHorizontal: 0,
777
+ raiseLevel: 1,
778
+ paddingBottom: 0,
779
+ borderColor: 'lightblue',
780
+ paddingTop: 0,
781
+ style: {
782
+ padding: 0,
783
+ },
784
+ }}
785
+ viewstyle={{
786
+ borderWidth: 0,
787
+ borderRadius: 0,
788
+ justifyContent: 'center',
789
+ alignItems: 'center',
790
+ }}
791
+ icon={{
792
+ icongroup: 3,
793
+ name: items.stage == stage ? items.selectedicon : items.icon,
794
+ color:
795
+ items.stage == stage
796
+ ? // 'red'
797
+ themes.main
798
+ : themes.main,
799
+ size: normalize(25),
800
+ style: {
801
+ textAlign: 'center',
802
+ },
803
+ }}
804
+ text={{
805
+ fontSize: normalize(6),
806
+ fontWeight: 'bold',
807
+ color:
808
+ items.stage == stage
809
+ ? // 'red'
810
+ themes.main
811
+ : themes.main,
812
+ textAlign: 'center',
813
+ }}
814
+ displaytext={items.display}
815
+ />
816
+ );
817
+
818
+ // : null
819
+ })
820
+ : null}
821
+ </View>
822
+ );
823
+ };
824
+ export default FooterBlock;