From 00674f3bccdf2178efe3e07264c013e49d7a291f Mon Sep 17 00:00:00 2001 From: abraham <54504399+Drownie@users.noreply.github.com> Date: Mon, 2 Dec 2024 21:23:05 +0700 Subject: [PATCH 1/6] Add Custom Jsx --- src/components/Dropdown/index.tsx | 59 +++++++++++++++++-------------- 1 file changed, 32 insertions(+), 27 deletions(-) diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx index 9c6a599..3e4eac4 100644 --- a/src/components/Dropdown/index.tsx +++ b/src/components/Dropdown/index.tsx @@ -79,6 +79,7 @@ const DropdownComponent: ( inverted = true, renderLeftIcon, renderRightIcon, + renderSelectedItem, renderItem, renderInputSearch, onFocus, @@ -450,33 +451,37 @@ const DropdownComponent: ( accessibilityLabel={accessibilityLabel} onPress={showOrClose} > - - {renderLeftIcon?.(visible)} - - {isSelected !== null - ? _get(currentValue, labelField) - : placeholder} - - {renderRightIcon ? ( - renderRightIcon(visible) - ) : ( - - )} - + { + renderSelectedItem ? + renderSelectedItem(visible) : + + {renderLeftIcon?.(visible)} + + {isSelected !== null + ? _get(currentValue, labelField) + : placeholder} + + {renderRightIcon ? ( + renderRightIcon(visible) + ) : ( + + )} + + } ); }; From 1362ab4950feb34927c6ae7896d7fe50abbc7b4c Mon Sep 17 00:00:00 2001 From: abraham <54504399+Drownie@users.noreply.github.com> Date: Mon, 2 Dec 2024 21:24:30 +0700 Subject: [PATCH 2/6] Update model.ts --- src/components/Dropdown/model.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Dropdown/model.ts b/src/components/Dropdown/model.ts index a32bba5..64bc58a 100644 --- a/src/components/Dropdown/model.ts +++ b/src/components/Dropdown/model.ts @@ -59,6 +59,7 @@ export interface DropdownProps { excludeItems?: T[]; excludeSearchItems?: T[]; onChange: (item: T) => void; + renderSelectedItem?: (visible?: boolean) => JSX.Element | null | undefined; renderLeftIcon?: (visible?: boolean) => JSX.Element | null | undefined; renderRightIcon?: (visible?: boolean) => JSX.Element | null | undefined; renderItem?: (item: T, selected?: boolean) => JSX.Element | null | undefined; From 4d4ace11c188c4f69ffec2e8709d6e152b8b3311 Mon Sep 17 00:00:00 2001 From: abraham <54504399+Drownie@users.noreply.github.com> Date: Mon, 2 Dec 2024 22:45:57 +0700 Subject: [PATCH 3/6] Update Search --- src/components/Dropdown/index.tsx | 28 ++++++++++++++++++++++++---- 1 file changed, 24 insertions(+), 4 deletions(-) diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx index 3e4eac4..be5367e 100644 --- a/src/components/Dropdown/index.tsx +++ b/src/components/Dropdown/index.tsx @@ -30,6 +30,7 @@ import { View, ViewStyle, StatusBar, + TextInput, } from 'react-native'; import { useDetectDevice } from '../../toolkits'; import { useDeviceOrientation } from '../../useDeviceOrientation'; @@ -557,11 +558,13 @@ const DropdownComponent: ( onSearch(text); }); } else { + const { height } = position; + return ( ( {isInverted && _renderListHelper()} - {renderSearch()} + {/* {renderSearch()} */} {!isInverted && _renderListHelper()} @@ -635,7 +638,7 @@ const DropdownComponent: ( flatListProps, listData, inverted, - renderSearch, + // renderSearch, scrollIndex, showsVerticalScrollIndicator, testID, @@ -645,6 +648,7 @@ const DropdownComponent: ( const _renderModal = useCallback(() => { if (visible && position) { const { isFull, width, height, top, bottom, left } = position; + // console.log(position); const onAutoPosition = () => { if (keyboardHeight > 0) { @@ -668,6 +672,10 @@ const DropdownComponent: ( let keyboardStyle: ViewStyle = {}; let extendHeight = !isTopPosition ? top : bottom; + if (search) { + extendHeight = !isTopPosition ? top - height - 2 : bottom - (height * .5); + } + if ( keyboardAvoiding && keyboardHeight > 0 && @@ -703,9 +711,21 @@ const DropdownComponent: ( justifyContent: 'flex-end', paddingBottom: extendHeight, }, - isFull && styles.fullScreen, + isFull && styles.fullScreen ])} > + + { renderSearch() } + Date: Mon, 2 Dec 2024 22:46:32 +0700 Subject: [PATCH 4/6] Update Search Styles --- src/components/Dropdown/styles.ts | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/Dropdown/styles.ts b/src/components/Dropdown/styles.ts index 2c83bdd..4a98a73 100644 --- a/src/components/Dropdown/styles.ts +++ b/src/components/Dropdown/styles.ts @@ -31,6 +31,7 @@ export const styles = StyleSheet.create({ flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row', justifyContent: 'space-between', alignItems: 'center', + columnGap: 10, }, title: { marginVertical: 5, @@ -53,11 +54,13 @@ export const styles = StyleSheet.create({ height: 20, }, input: { - borderWidth: 0.5, - borderColor: '#DDDDDD', + borderColor: 'gray', + borderWidth: 1, + borderRadius: 8, paddingHorizontal: 8, marginBottom: 8, - margin: 6, + // margin: 6, + backgroundColor: 'white', height: 45, }, fullScreen: { From 6fb358e9ba3ed1034a31609231b83de126b682de Mon Sep 17 00:00:00 2001 From: abraham <54504399+Drownie@users.noreply.github.com> Date: Tue, 3 Dec 2024 20:02:11 +0700 Subject: [PATCH 5/6] Update index.tsx --- src/components/Dropdown/index.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx index be5367e..7ae1ec5 100644 --- a/src/components/Dropdown/index.tsx +++ b/src/components/Dropdown/index.tsx @@ -605,6 +605,15 @@ const DropdownComponent: ( const isInverted = !inverted ? false : isTopPosition; const _renderListHelper = () => { + let customList = listData; + if (customList.length === 0) { + let customNotFound: any = { _index: 0 }; + customNotFound[valueField] = null; + customNotFound[labelField] = "Not Found"; + + customList.push(customNotFound); + } + return ( ( keyboardShouldPersistTaps="handled" ref={refList} onScrollToIndexFailed={scrollIndex} - data={listData} + data={customList} inverted={isTopPosition ? inverted : false} renderItem={_renderItem} keyExtractor={(_item, index) => index.toString()} From a751d3cb9a183cddb222ce96d4a530dbfd202dd3 Mon Sep 17 00:00:00 2001 From: abraham <54504399+Drownie@users.noreply.github.com> Date: Tue, 3 Dec 2024 21:30:25 +0700 Subject: [PATCH 6/6] refactor: remove unused component --- src/components/Dropdown/index.tsx | 29 +++++++++++++++++------------ 1 file changed, 17 insertions(+), 12 deletions(-) diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx index 7ae1ec5..9cb6470 100644 --- a/src/components/Dropdown/index.tsx +++ b/src/components/Dropdown/index.tsx @@ -30,7 +30,6 @@ import { View, ViewStyle, StatusBar, - TextInput, } from 'react-native'; import { useDetectDevice } from '../../toolkits'; import { useDeviceOrientation } from '../../useDeviceOrientation'; @@ -452,9 +451,9 @@ const DropdownComponent: ( accessibilityLabel={accessibilityLabel} onPress={showOrClose} > - { - renderSelectedItem ? - renderSelectedItem(visible) : + {renderSelectedItem ? ( + renderSelectedItem(visible) + ) : ( {renderLeftIcon?.(visible)} ( /> )} - } + )} ); }; @@ -598,6 +597,7 @@ const DropdownComponent: ( searchPlaceholderTextColor, testID, searchText, + position, ]); const _renderList = useCallback( @@ -609,11 +609,11 @@ const DropdownComponent: ( if (customList.length === 0) { let customNotFound: any = { _index: 0 }; customNotFound[valueField] = null; - customNotFound[labelField] = "Not Found"; + customNotFound[labelField] = 'Not Found'; customList.push(customNotFound); } - + return ( ( scrollIndex, showsVerticalScrollIndicator, testID, + labelField, + valueField, ] ); @@ -682,8 +684,10 @@ const DropdownComponent: ( let extendHeight = !isTopPosition ? top : bottom; if (search) { - extendHeight = !isTopPosition ? top - height - 2 : bottom - (height * .5); - } + extendHeight = !isTopPosition + ? top - height - 2 + : bottom - height * 0.5; + } if ( keyboardAvoiding && @@ -720,7 +724,7 @@ const DropdownComponent: ( justifyContent: 'flex-end', paddingBottom: extendHeight, }, - isFull && styles.fullScreen + isFull && styles.fullScreen, ])} > ( { left: left, width: width, - } + }, ])} > - { renderSearch() } + {renderSearch()} ( containerStyle, styleHorizontal, _renderList, + renderSearch, ]); return (