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

Author: markusunger

.changeset/loud-comics-learn.md

@@ -0,0 +1,5 @@
+---
+'@mobile-reality/react-native-select-pro': minor
+---
+
+Added support for multiple defaultOption objects

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,

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>
+    );
+};

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([]);
+    });
+});

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;
+};

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';

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,

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;
 };

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.