diff --git a/README.md b/README.md index 647040a..9ebbc5e 100644 --- a/README.md +++ b/README.md @@ -43,9 +43,10 @@ yarn add react-native-element-dropdown | data | Array | Yes | Data is a plain array | | labelField | String | Yes | Extract the label from the data item | | valueField | String | Yes | Extract the primary key from the data item | -| searchField | String | No | Specify the field of data list you want to search | +| searchField | String | No | Specify the field of data list you want to search | +| searchKeyboardType | KeyboardTypeOptions | No | Specify the field of keyboard type list you want to use | | onChange | (item: object) => void | Yes | Selection callback | -| onChangeText | (search: string) => void | No | Callback that is called when the text input's text changes | +| onChangeText | (search: string) => void | No | Callback that is called when the text input's text changes | | value | Item | No | Set default value | | placeholder | String | No | The string that will be rendered before dropdown has been selected | | placeholderStyle | TextStyle | No | Styling for text placeholder | @@ -62,6 +63,7 @@ yarn add react-native-element-dropdown | itemTextStyle | TextStyle | No | Styling for text item in list | | activeColor | String | No | Background color for item selected in list container | | search | Boolean | No | Show or hide input search | +| searchBothFields | Boolean | No | Search by valueField and labelField | | searchQuery | (keyword: string, labelValue: string) => Boolean| No | Callback used to filter the list of items | | inputSearchStyle | ViewStyle | No | Styling for input search | | searchPlaceholder | String | No | The string that will be rendered before text input has been entered | diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx index 2a73f2f..253a272 100644 --- a/src/components/Dropdown/index.tsx +++ b/src/components/Dropdown/index.tsx @@ -61,6 +61,7 @@ const DropdownComponent = React.forwardRef>( labelField, valueField, searchField, + searchKeyboardType, value, activeColor = '#F6F7F8', fontFamily, @@ -69,6 +70,7 @@ const DropdownComponent = React.forwardRef>( searchPlaceholderTextColor = 'gray', placeholder = 'Select item', search = false, + searchBothFields = false, maxHeight = 340, minHeight = 0, disable = false, @@ -194,7 +196,7 @@ const DropdownComponent = React.forwardRef>( if (ref && ref?.current) { ref.current.measureInWindow((pageX, pageY, width, height) => { let isFull = isTablet - ? false + ? true : mode === 'modal' || orientation === 'LANDSCAPE'; if (mode === 'auto') { @@ -372,6 +374,30 @@ const DropdownComponent = React.forwardRef>( return item.indexOf(key) >= 0; }; + const searchBothFieldFunction = (e: any) => { + const item = _get(e, labelField) + ?.toLowerCase() + .replace(/\s/g, '') + .normalize('NFD') + .replace(/[\u0300-\u036f]/g, ''); + const key = text + .toLowerCase() + .replace(/\s/g, '') + .normalize('NFD') + .replace(/[\u0300-\u036f]/g, ''); + + const item1 = _get(e, valueField) + ?.toLowerCase() + .replace(/\s/g, '') + .normalize('NFD') + .replace(/[\u0300-\u036f]/g, ''); + + const isLabelMatch = item.indexOf(key) >= 0; + const isValueMatch = item1.indexOf(key) >= 0; + + return isLabelMatch || isValueMatch; + }; + const propSearchFunction = (e: any) => { const labelText = _get(e, searchField || labelField); @@ -379,7 +405,7 @@ const DropdownComponent = React.forwardRef>( }; const dataSearch = data.filter( - searchQuery ? propSearchFunction : defaultFilterFunction + searchQuery ? propSearchFunction : searchBothFields ? searchBothFieldFunction: defaultFilterFunction ); if (excludeSearchItems.length > 0 || excludeItems.length > 0) { @@ -402,6 +428,7 @@ const DropdownComponent = React.forwardRef>( [ data, searchQuery, + searchBothFields, excludeSearchItems, excludeItems, searchField, @@ -559,6 +586,7 @@ const DropdownComponent = React.forwardRef>( inputStyle={[inputSearchStyle, font()]} value={searchText} autoCorrect={false} + keyboardType={searchKeyboardType || 'default'} placeholder={searchPlaceholder} onChangeText={(e) => { if (onChangeText) { @@ -606,6 +634,19 @@ const DropdownComponent = React.forwardRef>( onContentSizeChange={scrollIndex} onScrollToIndexFailed={scrollIndex} data={listData} + ListEmptyComponent={ + + + No Result Found + + + } inverted={isTopPosition ? inverted : false} renderItem={_renderItem} keyExtractor={(_item, index) => index.toString()} diff --git a/src/components/Dropdown/model.ts b/src/components/Dropdown/model.ts index e4212a9..b4d2a61 100644 --- a/src/components/Dropdown/model.ts +++ b/src/components/Dropdown/model.ts @@ -6,6 +6,7 @@ import type { TextProps, ImageStyle, FlatListProps, + KeyboardTypeOptions, } from 'react-native'; export type IDropdownRef = { @@ -42,10 +43,12 @@ export interface DropdownProps { valueField: keyof T; searchField?: keyof T; search?: boolean; + searchBothFields?: boolean; searchPlaceholder?: string; searchPlaceholderTextColor?: string; disable?: boolean; autoScroll?: boolean; + searchKeyboardType? : KeyboardTypeOptions | 'default'; showsVerticalScrollIndicator?: boolean; dropdownPosition?: 'auto' | 'top' | 'bottom'; flatListProps?: Omit, 'renderItem' | 'data'>;