diff --git a/README.md b/README.md index 647040a..cf165f9 100644 --- a/README.md +++ b/README.md @@ -93,64 +93,64 @@ yarn add react-native-element-dropdown ### MultiSelect Props -| Props | Params | isRequire | Description | -| ------------------ | -----------------------------------------------------| --------- | ------------------------------------------------------------------- | -| mode | 'default' or 'modal' of 'auto' | No | Mode 'modal' is show the dropdown in the middle of the screen. | -| 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 | -| onChange | (value[]) => void | Yes | Selection callback. A array containing the "valueField". | -| onChangeText | (search: string) => void | No | Callback that is called when the text input's text changes | -| value | Item[] | No | Set default value. A array containing the "valueField". | -| placeholder | String | No | The string that will be rendered before dropdown has been selected | -| placeholderStyle | TextStyle | No | Styling for text placeholder | -| style | ViewStyle | No | Styling for view container | -| containerStyle | ViewStyle | No | Styling for list container | -| maxHeight | Number | No | Customize max height for list container | -| minHeight | Number | No | Customize min height for list container | -| maxSelect | Number | No | maximum number of items that can be selected | -| fontFamily | String | No | Customize font style | -| iconStyle | ImageStyle | No | Styling for icon | -| iconColor | String | No | Color of icons | -| activeColor | String | No | Background color for item selected in list container | -| itemContainerStyle | TextStyle | No | Styling for item container in list | -| itemTextStyle | TextStyle | No | Styling for text item in list | -| selectedStyle | ViewStyle | No | Styling for selected view | -| selectedTextStyle | TextStyle | No | Styling for selected text | -| selectedTextProps | TextProps | No | Text Props for selected text. Ex: numberOfLines={1} | -| renderSelectedItem | (item: object, unSelect?: () => void) => JSX.Element | No | Takes an item from data and renders it into the list selected | -| alwaysRenderSelectedItem | Boolean | No | Always show the list of selected items | -| visibleSelectedItem | Boolean | No | Option to hide selected item list, Ẽx: visibleSelectedItem={false} | -| search | Boolean | No | Show or hide input search | -| 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 | -| searchPlaceholderTextColor | String | No | The text color of the placeholder string | -| renderInputSearch | (onSearch: (text:string) => void) => JSX.Element | No | Customize TextInput search | -| disable | Boolean | No | Specifies the disabled state of the Dropdown | -| dropdownPosition | 'auto' or 'top' or 'bottom' | No | Dropdown list position. Default is 'auto' | -| showsVerticalScrollIndicator | Boolean | No | When true, shows a vertical scroll indicator, default is true | -| renderLeftIcon | (visible?: boolean) => JSX.Element | No | Customize left icon for dropdown | -| renderRightIcon | (visible?: boolean) => JSX.Element | No | Customize right icon for dropdown | -| renderItem | (item: object, selected: Boolean) => JSX.Element | No | Takes an item from data and renders it into the list | -| flatListProps | FlatListProps | No | Customize FlatList element | -| inverted | Boolean | No | Reverses the direction of scroll on top position mode. Default is true| -| onFocus | () => void | No | Callback that is called when the dropdown is focused | -| onBlur | () => void | No | Callback that is called when the dropdown is blurred | -| keyboardAvoiding | Boolean | No | keyboardAvoiding default is true | -| inside | Boolean | No | inside default is false | -| backgroundColor | String | No | Set background color | -| confirmSelectItem | Boolean | No | Turn On confirm select item. Refer example/src/dropdown/example7 | -| confirmUnSelectItem | Boolean | No | Turn On confirm un-select item. Refer example/src/dropdown/example7 | -| onConfirmSelectItem | (item: any) => void | No | Selection callback. Refer example/src/dropdown/example7 | -| testID | String | No | Used to locate this view in end-to-end tests | -| itemTestIDField | String | No | Add this field to the input data. Ex: DATA = [{itemTestIDField: '', label: '', value:: ''}]| -| accessibilityLabel | String | No | Set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected | -| itemAccessibilityLabelField | String | No | Add this field to the input data. Ex: DATA = [{itemAccessibilityLabelField: '', label: '', value:: ''}]| -| excludeItems | Item[] | No | The array containing the items to be excluded. | -| excludeSearchItems | Item[] | No | The array containing the items to be excluded. | - +| Props | Params | isRequire | Description | +| ------------------ | -----------------------------------------------------| --------- |--------------------------------------------------------------------------------------------------------------------------------------------------------| +| mode | 'default' or 'modal' of 'auto' | No | Mode 'modal' is show the dropdown in the middle of the screen. | +| 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 | +| onChange | (value[]) => void | Yes | Selection callback. A array containing the "valueField". | +| onChangeText | (search: string) => void | No | Callback that is called when the text input's text changes | +| value | Item[] | No | Set default value. A array containing the "valueField". | +| placeholder | String | No | The string that will be rendered before dropdown has been selected | +| placeholderStyle | TextStyle | No | Styling for text placeholder | +| style | ViewStyle | No | Styling for view container | +| containerStyle | ViewStyle | No | Styling for list container | +| maxHeight | Number | No | Customize max height for list container | +| minHeight | Number | No | Customize min height for list container | +| maxSelect | Number | No | maximum number of items that can be selected | +| fontFamily | String | No | Customize font style | +| iconStyle | ImageStyle | No | Styling for icon | +| iconColor | String | No | Color of icons | +| activeColor | String | No | Background color for item selected in list container | +| itemContainerStyle | TextStyle | No | Styling for item container in list | +| itemTextStyle | TextStyle | No | Styling for text item in list | +| selectedStyle | ViewStyle | No | Styling for selected view | +| selectedTextStyle | TextStyle | No | Styling for selected text | +| selectedTextProps | TextProps | No | Text Props for selected text. Ex: numberOfLines={1} | +| renderSelectedItem | (item: object, unSelect?: () => void) => JSX.Element | No | Takes an item from data and renders it into the list selected | +| alwaysRenderSelectedItem | Boolean | No | Always show the list of selected items | +| visibleSelectedItem | Boolean | No | Option to hide selected item list, Ẽx: visibleSelectedItem={false} | +| search | Boolean | No | Show or hide input search | +| 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 | +| searchPlaceholderTextColor | String | No | The text color of the placeholder string | +| renderInputSearch | (onSearch: (text:string) => void) => JSX.Element | No | Customize TextInput search | +| disable | Boolean | No | Specifies the disabled state of the Dropdown | +| dropdownPosition | 'auto' or 'top' or 'bottom' | No | Dropdown list position. Default is 'auto' | +| showsVerticalScrollIndicator | Boolean | No | When true, shows a vertical scroll indicator, default is true | +| renderLeftIcon | (visible?: boolean) => JSX.Element | No | Customize left icon for dropdown | +| renderRightIcon | (visible?: boolean) => JSX.Element | No | Customize right icon for dropdown | +| renderItem | (item: object, selected: Boolean) => JSX.Element | No | Takes an item from data and renders it into the list | +| flatListProps | FlatListProps | No | Customize FlatList element | +| inverted | Boolean | No | Reverses the direction of scroll on top position mode. Default is true | +| onFocus | () => void | No | Callback that is called when the dropdown is focused | +| onBlur | () => void | No | Callback that is called when the dropdown is blurred | +| keyboardAvoiding | Boolean | No | keyboardAvoiding default is true | +| inside | Boolean | No | inside default is false | +| backgroundColor | String | No | Set background color | +| confirmSelectItem | Boolean | No | Turn On confirm select item. Refer example/src/dropdown/example7 | +| confirmUnSelectItem | Boolean | No | Turn On confirm un-select item. Refer example/src/dropdown/example7 | +| onConfirmSelectItem | (item: any) => void | No | Selection callback. Refer example/src/dropdown/example7 | +| testID | String | No | Used to locate this view in end-to-end tests | +| itemTestIDField | String | No | Add this field to the input data. Ex: DATA = [{itemTestIDField: '', label: '', value:: ''}] | +| accessibilityLabel | String | No | Set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected | +| itemAccessibilityLabelField | String | No | Add this field to the input data. Ex: DATA = [{itemAccessibilityLabelField: '', label: '', value:: ''}] | +| excludeItems | Item[] | No | The array containing the items to be excluded. | +| excludeSearchItems | Item[] | No | The array containing the items to be excluded. | +| closeModalWhenSelectedItem | Boolean | No | By default, closeModalWhenSelectedItem is set to false. When closeModalWhenSelectedItem is set to true, the Modal will close when an item is selected. | ### SelectCountry extends Dropdown diff --git a/example/package.json b/example/package.json index efb9085..945cce1 100644 --- a/example/package.json +++ b/example/package.json @@ -14,12 +14,12 @@ "expo-status-bar": "~1.4.4", "react": "18.2.0", "react-dom": "18.2.0", - "react-native": "0.71.3", + "react-native": "0.71.14", "react-native-web": "~0.18.10" }, "devDependencies": { "@babel/core": "^7.20.0", - "@expo/webpack-config": "^0.17.2", + "@expo/webpack-config": "^18.0.1", "babel-loader": "^8.1.0", "babel-plugin-module-resolver": "^4.1.0" }, diff --git a/example/src/dropdown/MultiSelectAll.tsx b/example/src/dropdown/MultiSelectAll.tsx index c70eedd..2394aec 100644 --- a/example/src/dropdown/MultiSelectAll.tsx +++ b/example/src/dropdown/MultiSelectAll.tsx @@ -70,6 +70,7 @@ const MultiSelectComponent = () => { }} selectedStyle={styles.selectedStyle} flatListProps={{ ListHeaderComponent: renderSelectAllIcon }} + closeModalWhenSelectedItem={false} />