diff --git a/README.md b/README.md index 4669c71..2e5e85a 100644 --- a/README.md +++ b/README.md @@ -142,6 +142,9 @@ yarn add react-native-element-dropdown | 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:: ''}]| +|------|------|------|------| +| selectedToTop | Boolean | No | Put selected items on top of the list | +|------|------|------|------| diff --git a/src/components/MultiSelect/index.tsx b/src/components/MultiSelect/index.tsx index 4f29abb..ea9e3b7 100644 --- a/src/components/MultiSelect/index.tsx +++ b/src/components/MultiSelect/index.tsx @@ -93,6 +93,7 @@ const MultiSelectComponent: ( itemAccessibilityLabelField, visibleSelectedItem = true, mode = 'default', + selectedToTop = false, } = props; const ref = useRef(null); @@ -519,7 +520,13 @@ const MultiSelectComponent: ( accessibilityLabel={accessibilityLabel + ' flatlist'} {...flatListProps} keyboardShouldPersistTaps="handled" - data={listData} + data={ + selectedToTop + ? listData + .filter((item) => checkSelected(item)) + .concat(listData.filter((item) => !checkSelected(item))) + : listData + } inverted={isTopPosition ? inverted : false} renderItem={_renderItem} keyExtractor={(_item, index) => index.toString()} diff --git a/src/components/MultiSelect/model.ts b/src/components/MultiSelect/model.ts index c4f018f..cb005e1 100644 --- a/src/components/MultiSelect/model.ts +++ b/src/components/MultiSelect/model.ts @@ -35,6 +35,7 @@ export interface MultiSelectProps { iconColor?: string; activeColor?: string; data: T[]; + selectedToTop?: boolean; value?: string[] | null | undefined; placeholder?: string; labelField: keyof T;