From 5eb49f411293fb9a07c0ff94e42efbe1faeb63a3 Mon Sep 17 00:00:00 2001
From: Markus Unger <38430185+markusunger@users.noreply.github.com>
Date: Fri, 18 Oct 2024 15:35:26 +0200
Subject: [PATCH] feat: add support for multiple default options (#263)

* feat: add support for multiple default options

* docs: add usage example

* docs: update prop list

* docs: update v2 changelog

* chore: add changeset
---
 .changeset/loud-comics-learn.md               |  5 ++
 apps/expo/src/constants/routes.ts             |  5 ++
 .../multiselect-with-default-options.tsx      | 13 +++++
 .../get-default-selection-index.test.ts       | 44 ++++++++++++++++
 .../helpers/get-default-selection-index.ts    | 24 +++++++++
 .../src/helpers/index.ts                      |  1 +
 .../src/state/reducer.ts                      | 34 +++++++------
 .../src/state/types.ts                        |  2 +-
 .../src/types/types.ts                        |  4 +-
 website/docs/api/select.mdx                   | 40 +++++++--------
 website/docs/usage.md                         | 50 +++++++++++++++++++
 website/docs/v2.mdx                           |  2 +
 12 files changed, 187 insertions(+), 37 deletions(-)
 create mode 100644 .changeset/loud-comics-learn.md
 create mode 100644 apps/expo/src/examples/multiselect-with-default-options.tsx
 create mode 100644 packages/react-native-select-pro/src/helpers/__tests__/get-default-selection-index.test.ts
 create mode 100644 packages/react-native-select-pro/src/helpers/get-default-selection-index.ts

diff --git a/.changeset/loud-comics-learn.md b/.changeset/loud-comics-learn.md
new file mode 100644
index 00000000..6a79e72b
--- /dev/null
+++ b/.changeset/loud-comics-learn.md
@@ -0,0 +1,5 @@
+---
+'@mobile-reality/react-native-select-pro': minor
+---
+
+Added support for multiple defaultOption objects
diff --git a/apps/expo/src/constants/routes.ts b/apps/expo/src/constants/routes.ts
index 131b9722..ba8fecf9 100644
--- a/apps/expo/src/constants/routes.ts
+++ b/apps/expo/src/constants/routes.ts
@@ -8,6 +8,7 @@ import { CustomStyles } from '../examples/custom-styles';
 import { ModalExample } from '../examples/modal-example';
 import { MultiSelect } from '../examples/multiselect';
 import { MultiSelectSearchableWithSeparatedOptions } from '../examples/multiselect-searchable-with-separated-options';
+import { MultiSelectWithDefaultOptions } from '../examples/multiselect-with-default-options';
 import { MultiSelectWithHiddenOptions } from '../examples/multiselect-with-hidden-options';
 import { MultiSelectWithSearchable } from '../examples/multiselect-with-searchable';
 import { MultiSelectWithSeparatedOptions } from '../examples/multiselect-with-separated-options';
@@ -115,6 +116,10 @@ export const ROUTES = [
         name: 'MultiSelect with Hidden Options',
         screen: MultiSelectWithHiddenOptions,
     },
+    {
+        name: 'MultiSelect with Default Options',
+        screen: MultiSelectWithDefaultOptions,
+    },
     {
         name: 'TextInputProps',
         screen: TextInputProps,
diff --git a/apps/expo/src/examples/multiselect-with-default-options.tsx b/apps/expo/src/examples/multiselect-with-default-options.tsx
new file mode 100644
index 00000000..7d3608ec
--- /dev/null
+++ b/apps/expo/src/examples/multiselect-with-default-options.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { Select } from '@mobile-reality/react-native-select-pro';
+
+import { SafeAreaViewWrapper } from '../components/safe-area-view-wrapper';
+import { DATA } from '../constants/data';
+
+export const MultiSelectWithDefaultOptions = () => {
+    return (
+        <SafeAreaViewWrapper>
+            <Select options={DATA} multiple={true} defaultOption={[DATA[0], DATA[1]]} />
+        </SafeAreaViewWrapper>
+    );
+};
diff --git a/packages/react-native-select-pro/src/helpers/__tests__/get-default-selection-index.test.ts b/packages/react-native-select-pro/src/helpers/__tests__/get-default-selection-index.test.ts
new file mode 100644
index 00000000..7e101b08
--- /dev/null
+++ b/packages/react-native-select-pro/src/helpers/__tests__/get-default-selection-index.test.ts
@@ -0,0 +1,44 @@
+import type { OptionType } from '../../types';
+import { getDefaultSelectionIndex } from '../index';
+
+describe('getDefaultSelectionIndex', () => {
+    const options: OptionType[] = [
+        { label: 'Option 1', value: 'value1' },
+        { label: 'Option 2', value: 'value2' },
+        { label: 'Option 3', value: 'value3' },
+    ];
+
+    it('should return the correct index for a single default option', () => {
+        const defaultOption = { label: 'Option 2', value: 'value2' };
+        expect(getDefaultSelectionIndex(options, defaultOption)).toBe(1);
+    });
+
+    it('should return -1 if the single default option is not found', () => {
+        const defaultOption = { label: 'Option 4', value: 'value4' };
+        expect(getDefaultSelectionIndex(options, defaultOption)).toBe(-1);
+    });
+
+    it('should return an array of indices for multiple default options', () => {
+        const defaultOptions = [
+            { label: 'Option 1', value: 'value1' },
+            { label: 'Option 3', value: 'value3' },
+        ];
+        expect(getDefaultSelectionIndex(options, defaultOptions)).toEqual([0, 2]);
+    });
+
+    it('should return only found indices for multiple default options', () => {
+        const defaultOptions = [
+            { label: 'Option 1', value: 'value1' },
+            { label: 'Option 4', value: 'value4' },
+        ];
+        expect(getDefaultSelectionIndex(options, defaultOptions)).toEqual([0]);
+    });
+
+    it('should return an empty array if no default options are found', () => {
+        const defaultOptions = [
+            { label: 'Option 4', value: 'value4' },
+            { label: 'Option 5', value: 'value5' },
+        ];
+        expect(getDefaultSelectionIndex(options, defaultOptions)).toEqual([]);
+    });
+});
diff --git a/packages/react-native-select-pro/src/helpers/get-default-selection-index.ts b/packages/react-native-select-pro/src/helpers/get-default-selection-index.ts
new file mode 100644
index 00000000..478a69d5
--- /dev/null
+++ b/packages/react-native-select-pro/src/helpers/get-default-selection-index.ts
@@ -0,0 +1,24 @@
+import type { OptionType } from '../types';
+
+export const getDefaultSelectionIndex = <T>(
+    flatOptions: OptionType<T>[],
+    defaultOption: OptionType<T> | OptionType<T>[],
+): number | number[] => {
+    if (Array.isArray(defaultOption)) {
+        const foundIndices = defaultOption
+            .map((option) => flatOptions.findIndex((item) => item.value === option.value))
+            .filter((index) => index !== -1);
+
+        if (foundIndices.length > 0) {
+            return foundIndices;
+        }
+    } else {
+        const foundIndex = flatOptions.findIndex((item) => item.value === defaultOption.value);
+
+        if (foundIndex !== -1) {
+            return foundIndex;
+        }
+    }
+
+    return Array.isArray(defaultOption) ? [] : -1;
+};
diff --git a/packages/react-native-select-pro/src/helpers/index.ts b/packages/react-native-select-pro/src/helpers/index.ts
index aac4f773..79f48b1d 100755
--- a/packages/react-native-select-pro/src/helpers/index.ts
+++ b/packages/react-native-select-pro/src/helpers/index.ts
@@ -1,4 +1,5 @@
 export { dimensionPercentageToDP } from './dimension-percentage-to-dp';
+export { getDefaultSelectionIndex } from './get-default-selection-index';
 export { getReducedSectionData } from './get-reduced-section-data';
 export { getSectionOptionsIndexes } from './get-section-options-indexes';
 export { isAndroid } from './is-android';
diff --git a/packages/react-native-select-pro/src/state/reducer.ts b/packages/react-native-select-pro/src/state/reducer.ts
index 2037bafa..6ece405a 100755
--- a/packages/react-native-select-pro/src/state/reducer.ts
+++ b/packages/react-native-select-pro/src/state/reducer.ts
@@ -2,6 +2,7 @@ import { LayoutAnimation } from 'react-native';
 
 import { ANIMATION_DURATION } from '../constants';
 import { ERRORS, getReducedSectionData, isValidDefaultOption, searchNormalize } from '../helpers';
+import { getDefaultSelectionIndex } from '../helpers/get-default-selection-index';
 import type { OptionsType, OptionType } from '../types';
 import { isSectionOptionsType } from '../types';
 
@@ -88,25 +89,29 @@ export const reducer = <T>(state: State<T>, action: ActionType<T>): State<T> =>
     }
 };
 
-const setDefaultOption = <T>(options: OptionsType<T>, defaultOption: OptionType<T> | undefined) => {
-    if (isValidDefaultOption(defaultOption) && options.length > 0) {
+const setDefaultOption = <T>(
+    options: OptionsType<T>,
+    defaultOption: OptionType<T> | OptionType<T>[] | undefined,
+) => {
+    if (
+        (Array.isArray(defaultOption)
+            ? defaultOption.every(isValidDefaultOption)
+            : isValidDefaultOption(defaultOption)) &&
+        options.length > 0 &&
+        defaultOption !== undefined
+    ) {
         const isSectionedOptions = isSectionOptionsType(options);
+        const flatOptions = isSectionedOptions ? getReducedSectionData(options) : options;
 
-        const foundIndex = isSectionedOptions
-            ? getReducedSectionData(options).findIndex((item) => item.value === defaultOption.value)
-            : options.findIndex((item) => item.value === defaultOption.value);
-
-        if (foundIndex !== -1) {
-            return {
-                selectedOption: defaultOption,
-                selectedOptionIndex: foundIndex,
-            };
-        }
+        return {
+            selectedOption: defaultOption,
+            selectedOptionIndex: getDefaultSelectionIndex(flatOptions, defaultOption),
+        };
     }
 
     return {
         selectedOption: null,
-        selectedOptionIndex: -1,
+        selectedOptionIndex: Array.isArray(defaultOption) ? [] : -1,
     };
 };
 
@@ -121,7 +126,8 @@ export const createInitialState = <T>({
     }
 
     const { selectedOption, selectedOptionIndex } = setDefaultOption(options, defaultOption);
-    const defaultSearchValue = defaultOption?.label ?? '';
+    const defaultSearchOption = Array.isArray(defaultOption) ? defaultOption[0] : defaultOption;
+    const defaultSearchValue = defaultSearchOption?.label ?? '';
 
     return {
         isOpened: false,
diff --git a/packages/react-native-select-pro/src/state/types.ts b/packages/react-native-select-pro/src/state/types.ts
index 3ed117ef..257b4142 100755
--- a/packages/react-native-select-pro/src/state/types.ts
+++ b/packages/react-native-select-pro/src/state/types.ts
@@ -73,5 +73,5 @@ export type CreateInitialStateType<T> = {
     searchable: boolean;
     animation: boolean | number;
 
-    defaultOption: OptionType<T> | undefined;
+    defaultOption: OptionType<T> | OptionType<T>[] | undefined;
 };
diff --git a/packages/react-native-select-pro/src/types/types.ts b/packages/react-native-select-pro/src/types/types.ts
index c517a51a..2b19d6f5 100644
--- a/packages/react-native-select-pro/src/types/types.ts
+++ b/packages/react-native-select-pro/src/types/types.ts
@@ -70,9 +70,9 @@ export interface SelectProps<T = unknown> {
     closeOptionsListOnSelect?: boolean;
 
     /**
-     *  An object that represents the default option for a `Select`.
+     *  An object or array of objects that represents the default option(s) for a `Select`.
      */
-    defaultOption?: OptionType<T>;
+    defaultOption?: OptionType<T> | OptionType<T>[];
 
     /**
      *  Disable a `Select` pressable.
diff --git a/website/docs/api/select.mdx b/website/docs/api/select.mdx
index 03d89529..31730159 100644
--- a/website/docs/api/select.mdx
+++ b/website/docs/api/select.mdx
@@ -34,26 +34,26 @@ The `Select` component has only one required prop, which is the `options` prop.
 
 <div className='table-size'>
 
-| Name                       | Type                          | Default                             | Description                                                                                                                                                                                                                                                | Example                                              |
-| -------------------------- | ----------------------------- | ----------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- |
-| `options` **(required)**   | `OptionsType<T>`              |                                     | An array of objects that represents the available options for a `Select`.                                                                                                                                                                                  | <TableExample expo={<OptionsPropSnackLink />} />     |
-| `animation`                | `boolean` \| `number`         | `true` \| `200`                     | An options list open-close animation can be enabled or disabled using a `boolean` parameter. The duration of the animation can be set using a `number` parameter. If you pass `0` as the duration, the animation is still occur but will be instantaneous. | <TableExample expo={<Animation />} />                |
-| `clearable`                | `boolean`                     | `true`                              | Show a clear button to remove selected option.                                                                                                                                                                                                             | <TableExample expo={<Clearable />} />                |
-| `closeOptionsListOnSelect` | `boolean`                     | `true`                              | Close the options list after selected option.                                                                                                                                                                                                              | <TableExample expo={<CloseOptionsListOnSelect />} /> |
-| `defaultOption`            | `OptionType<T>`               |                                     | An object that represents the default option for a `Select`.                                                                                                                                                                                               | <TableExample expo={<DefaultOption />} />            |
-| `disabled`                 | `boolean`                     | `false`                             | Disable a `Select` pressable.                                                                                                                                                                                                                              | <TableExample expo={<Disabled />} />                 |
-| `hasBackdrop`              | `boolean`                     | `true`                              | Determines whether a `Select` component should have a `Backdrop` component.                                                                                                                                                                                | <TableExample expo={<HasBackdrop />} />              |
-| `hideArrow`                | `boolean`                     | `false`                             | Determines the arrow icon should be displayed.                                                                                                                                                                                                             | <TableExample expo={<HideArrow />} />                |
-| `multiple`                 | `boolean`                     | `false`                             | Determines whether a `Select` component should allow the user to select multiple options.                                                                                                                                                                  | <TableExample expo={<Multiple />} />                 |
-| `noOptionsText`            | `string`                      | `No options`                        | Determines the text that should be displayed when there are no available options in a `Select` component.                                                                                                                                                  | <TableExample expo={<NoOptionsText />} />            |
-| `placeholderText`          | `string`                      | `Select...`                         | Determines the placeholder text that should be displayed in a `Select` component when no option is selected.                                                                                                                                               | <TableExample expo={<PlaceholderText />} />          |
-| `placeholderTextColor`     | `string`                      | `#808080`                           | Determines the color of the placeholder text in a `Select` component.                                                                                                                                                                                      | <TableExample expo={<PlaceholderTextColor />} />     |
-| `scrollToSelectedOption`   | `boolean`                     | `true`                              | Determines whether a `Select` component should automatically scroll to the selected option when the options list is opened.                                                                                                                                | <TableExample expo={<ScrollToSelectedOption />} />   |
-| `pressableSelectedOption`  | `boolean`                     | `true`                              | Determines whether the selected option should still be pressable after it has been selected.                                                                                                                                                               | <TableExample expo={<PressableSelectedOption />} />  |
-| `searchable`               | `boolean`                     | `false`                             | Determines whether a `Select` component should include a search field that allows the user to filter the options by keyword.                                                                                                                               | <TableExample expo={<Searchable />} />               |
-| `searchPattern`            | `(payload: string) => string` | `(payload: string) => (${payload})` | Regex definition for searching options.                                                                                                                                                                                                                    | To Do                                                |
-| `styles`                   | `SelectStyles`                |                                     | An object that represents the styles for a `Select` component.                                                                                                                                                                                             | To Do                                                |
-| `theme`                    | `none` \| `light` \| `dark`   | `none`                              | Pre-prepared styles for light and dark theme. They can be overwritten.                                                                                                                                                                                     | <TableExample expo={<Theme />} />                    |
+| Name                       | Type                               | Default                             | Description                                                                                                                                                                                                                                                | Example                                              |
+| -------------------------- | -----------------------------      | ----------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- |
+| `options` **(required)**   | `OptionsType<T>`                   |                                     | An array of objects that represents the available options for a `Select`.                                                                                                                                                                                  | <TableExample expo={<OptionsPropSnackLink />} />     |
+| `animation`                | `boolean` \| `number`              | `true` \| `200`                     | An options list open-close animation can be enabled or disabled using a `boolean` parameter. The duration of the animation can be set using a `number` parameter. If you pass `0` as the duration, the animation is still occur but will be instantaneous. | <TableExample expo={<Animation />} />                |
+| `clearable`                | `boolean`                          | `true`                              | Show a clear button to remove selected option.                                                                                                                                                                                                             | <TableExample expo={<Clearable />} />                |
+| `closeOptionsListOnSelect` | `boolean`                          | `true`                              | Close the options list after selected option.                                                                                                                                                                                                              | <TableExample expo={<CloseOptionsListOnSelect />} /> |
+| `defaultOption`            | `OptionType<T>` | `OptionType<T>[] |                                     | An object or an array of objects that represent the default option(s) for a `Select`.                                                                                                                                                                                               | <TableExample expo={<DefaultOption />} />            |
+| `disabled`                 | `boolean`                          | `false`                             | Disable a `Select` pressable.                                                                                                                                                                                                                              | <TableExample expo={<Disabled />} />                 |
+| `hasBackdrop`              | `boolean`                          | `true`                              | Determines whether a `Select` component should have a `Backdrop` component.                                                                                                                                                                                | <TableExample expo={<HasBackdrop />} />              |
+| `hideArrow`                | `boolean`                          | `false`                             | Determines the arrow icon should be displayed.                                                                                                                                                                                                             | <TableExample expo={<HideArrow />} />                |
+| `multiple`                 | `boolean`                          | `false`                             | Determines whether a `Select` component should allow the user to select multiple options.                                                                                                                                                                  | <TableExample expo={<Multiple />} />                 |
+| `noOptionsText`            | `string`                           | `No options`                        | Determines the text that should be displayed when there are no available options in a `Select` component.                                                                                                                                                  | <TableExample expo={<NoOptionsText />} />            |
+| `placeholderText`          | `string`                           | `Select...`                         | Determines the placeholder text that should be displayed in a `Select` component when no option is selected.                                                                                                                                               | <TableExample expo={<PlaceholderText />} />          |
+| `placeholderTextColor`     | `string`                           | `#808080`                           | Determines the color of the placeholder text in a `Select` component.                                                                                                                                                                                      | <TableExample expo={<PlaceholderTextColor />} />     |
+| `scrollToSelectedOption`   | `boolean`                          | `true`                              | Determines whether a `Select` component should automatically scroll to the selected option when the options list is opened.                                                                                                                                | <TableExample expo={<ScrollToSelectedOption />} />   |
+| `pressableSelectedOption`  | `boolean`                          | `true`                              | Determines whether the selected option should still be pressable after it has been selected.                                                                                                                                                               | <TableExample expo={<PressableSelectedOption />} />  |
+| `searchable`               | `boolean`                          | `false`                             | Determines whether a `Select` component should include a search field that allows the user to filter the options by keyword.                                                                                                                               | <TableExample expo={<Searchable />} />               |
+| `searchPattern`            | `(payload: string) => string`      | `(payload: string) => (${payload})` | Regex definition for searching options.                                                                                                                                                                                                                    | To Do                                                |
+| `styles`                   | `SelectStyles`                     |                                     | An object that represents the styles for a `Select` component.                                                                                                                                                                                             | To Do                                                |
+| `theme`                    | `none` \| `light` \| `dark`        | `none`                              | Pre-prepared styles for light and dark theme. They can be overwritten.                                                                                                                                                                                     | <TableExample expo={<Theme />} />                    |
 
 </div>
 
diff --git a/website/docs/usage.md b/website/docs/usage.md
index 17a677b2..c1dd6c94 100644
--- a/website/docs/usage.md
+++ b/website/docs/usage.md
@@ -616,6 +616,56 @@ const styles = StyleSheet.create({
 export default App;
 ```
 
+### Default Options
+
+You can use the `defaultOption` prop to pass pre-selected options to either a single or multi select component.
+
+```SnackPlayer name=Multiple with separated options&dependencies=@mobile-reality/react-native-select-pro@2.0.0
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Select, SelectProvider } from '@mobile-reality/react-native-select-pro';
+
+const data = [
+     {
+        value: 'value1',
+        label: 'First label',
+    },
+    {
+        value: 'value2',
+        label: 'Second label ',
+    },
+    {
+        value: 'value3',
+        label: 'Third label',
+    },
+    {
+        value: 'value4',
+        label: 'Fourth label',
+    },
+];
+
+const App = () => {
+    return (
+        <SelectProvider>
+            <View style={styles.container}>
+               <Select options={data} defaultOption={{ label: 'First label', value: 'value1' }} />
+               <Select options={data} multiple={true} defaultOption={[data[0], data[1]]} />
+            </View>
+        </SelectProvider>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+});
+
+export default App;
+```
+
 ### Select inside Modal
 
 If you want to use `Select` component inside:
diff --git a/website/docs/v2.mdx b/website/docs/v2.mdx
index ad5e528d..438128ee 100644
--- a/website/docs/v2.mdx
+++ b/website/docs/v2.mdx
@@ -6,6 +6,8 @@ sidebar_label: React Native Select Pro v2
 
 ### Changes
 
+-   Added support for multiple `defaultOption` objects
+
 -   Added example using overridden `flatListProps`
 
 -   Added an option to hide already selected options from the list `hideSelectedOptions`