feat: flatten support additional props to support treeSelect

Author: zombieJ

src/generate.tsx

@@ -141,7 +141,7 @@ export interface GenerateConfig<OptionsType extends object[]> {
   /** Convert jsx tree into `OptionsType` */
   convertChildrenToData: (children: React.ReactNode) => OptionsType;
   /** Flatten nest options into raw option list */
-  flattenOptions: (options: OptionsType) => FlattenOptionsType<OptionsType>;
+  flattenOptions: (options: OptionsType, props: any) => FlattenOptionsType<OptionsType>;
   /** Convert single raw value into { label, value } format. Will be called by each value */
   getLabeledValue: GetLabeledValue<FlattenOptionsType<OptionsType>>;
   filterOptions: FilterOptions<OptionsType>;
@@ -357,7 +357,7 @@ export default function generateSelector<
     }, [options, children, mode, baseValue]);
 
     const mergedFlattenOptions: FlattenOptionsType<OptionsType> = React.useMemo(
-      () => flattenOptions(mergedOptions),
+      () => flattenOptions(mergedOptions, props),
       [mergedOptions],
     );
 
@@ -382,7 +382,7 @@ export default function generateSelector<
     }, [mergedOptions, mergedSearchValue, mode]);
 
     const displayFlattenOptions: FlattenOptionsType<OptionsType> = React.useMemo(
-      () => flattenOptions(displayOptions),
+      () => flattenOptions(displayOptions, props),
       [displayOptions],
     );
 

src/utils/valueUtil.ts

@@ -37,32 +37,32 @@ function getKey(data: OptionData | OptionGroupData, index: number) {
  * We use `optionOnly` here is aim to avoid user use nested option group.
  * Here is simply set `key` to the index if not provided.
  */
-export function flattenOptions(
-  options: SelectOptionsType,
-  rootFlattenList?: FlattenOptionData[],
-): FlattenOptionData[] {
-  const flattenList: FlattenOptionData[] = rootFlattenList || [];
-  const isGroupOption = !!rootFlattenList;
-
-  options.forEach(data => {
-    if (isGroupOption || !('options' in data)) {
-      // Option
-      flattenList.push({
-        key: getKey(data, flattenList.length),
-        groupOption: isGroupOption,
-        data,
-      });
-    } else {
-      // Option Group
-      flattenList.push({
-        key: getKey(data, flattenList.length),
-        group: true,
-        data,
-      });
+export function flattenOptions(options: SelectOptionsType): FlattenOptionData[] {
+  const flattenList: FlattenOptionData[] = [];
+
+  function dig(list: SelectOptionsType, isGroupOption: boolean) {
+    list.forEach(data => {
+      if (isGroupOption || !('options' in data)) {
+        // Option
+        flattenList.push({
+          key: getKey(data, flattenList.length),
+          groupOption: isGroupOption,
+          data,
+        });
+      } else {
+        // Option Group
+        flattenList.push({
+          key: getKey(data, flattenList.length),
+          group: true,
+          data,
+        });
+
+        dig(data.options, true);
+      }
+    });
+  }
 
-      flattenOptions(data.options, flattenList);
-    }
-  });
+  dig(options, false);
 
   return flattenList;
 }