Revert "chore: optimize multiple onChange performence(#22822) (#499)" (#500)

afc163 · web-flow · commit 4a441b54809f · 2020-06-05T21:04:57.000+08:00
This reverts commit 7f0dbd5.
diff --git a/src/generate.tsx b/src/generate.tsx
@@ -30,7 +30,6 @@ import {
   INTERNAL_PROPS_MARK,
   SelectSource,
   CustomTagProps,
-  FlattenOptionMapType,
 } from './interface/generator';
 import { OptionListProps, RefOptionListProps } from './OptionList';
 import { toInnerValue, toOuterValues, removeLastEnabledValue, getUUID } from './utils/commonUtil';
@@ -41,7 +40,6 @@ import useLayoutEffect from './hooks/useLayoutEffect';
 import { getSeparatedContent } from './utils/valueUtil';
 import useSelectTriggerControl from './hooks/useSelectTriggerControl';
 import useCacheDisplayValue from './hooks/useCacheDisplayValue';
-import useCacheOptions from './hooks/useCacheOptions';
 
 const DEFAULT_OMIT_PROPS = [
   'removeIcon',
@@ -184,17 +182,14 @@ export interface GenerateConfig<OptionsType extends object[]> {
   /** Flatten nest options into raw option list */
   flattenOptions: (options: OptionsType, props: any) => FlattenOptionsType<OptionsType>;
   /** Convert single raw value into { label, value } format. Will be called by each value */
-  getLabeledValue: GetLabeledValue<FlattenOptionMapType<OptionsType[number]>>;
+  getLabeledValue: GetLabeledValue<FlattenOptionsType<OptionsType>>;
   filterOptions: FilterOptions<OptionsType>;
   findValueOption: (
     values: RawValueType[],
-    optionMap: FlattenOptionMapType<OptionsType[number]>,
+    options: FlattenOptionsType<OptionsType>,
   ) => OptionsType;
   /** Check if a value is disabled */
-  isValueDisabled: (
-    value: RawValueType,
-    optionMap: FlattenOptionMapType<OptionsType[number]>,
-  ) => boolean;
+  isValueDisabled: (value: RawValueType, options: FlattenOptionsType<OptionsType>) => boolean;
   warningProps?: (props: any) => void;
   fillOptionsWithMissingValue?: (
     options: OptionsType,
@@ -424,8 +419,6 @@ export default function generateSelector<
       [mergedOptions],
     );
 
-    const optionMap = useCacheOptions(mergedRawValue, mergedFlattenOptions);
-
     // Display options for OptionList
     const displayOptions = React.useMemo<OptionsType>(() => {
       if (!mergedSearchValue || !mergedShowSearch) {
@@ -462,15 +455,15 @@ export default function generateSelector<
       () =>
         mergedRawValue.map((val: RawValueType) => {
           const displayValue = getLabeledValue(val, {
-            optionMap,
+            options: mergedFlattenOptions,
             prevValue: baseValue,
             labelInValue: mergedLabelInValue,
             optionLabelProp: mergedOptionLabelProp,
           });
 
           return {
             ...displayValue,
-            disabled: isValueDisabled(val, optionMap),
+            disabled: isValueDisabled(val, mergedFlattenOptions),
           };
         }),
       [baseValue, mergedOptions],
@@ -480,13 +473,13 @@ export default function generateSelector<
     displayValues = useCacheDisplayValue(displayValues);
 
     const triggerSelect = (newValue: RawValueType, isSelect: boolean, source: SelectSource) => {
-      const outOption = findValueOption([newValue], optionMap)[0];
+      const outOption = findValueOption([newValue], mergedFlattenOptions)[0];
 
       if (!internalProps.skipTriggerSelect) {
         // Skip trigger `onSelect` or `onDeselect` if configured
         const selectValue = (mergedLabelInValue
           ? getLabeledValue(newValue, {
-              optionMap,
+              options: mergedFlattenOptions,
               prevValue: baseValue,
               labelInValue: mergedLabelInValue,
               optionLabelProp: mergedOptionLabelProp,
@@ -515,21 +508,18 @@ export default function generateSelector<
         return;
       }
 
-      const outValues = toOuterValues<FlattenOptionMapType<OptionsType[number]>>(
-        Array.from(newRawValues),
-        {
-          labelInValue: mergedLabelInValue,
-          optionMap,
-          getLabeledValue,
-          prevValue: baseValue,
-          optionLabelProp: mergedOptionLabelProp,
-        },
-      );
+      const outValues = toOuterValues<FlattenOptionsType<OptionsType>>(Array.from(newRawValues), {
+        labelInValue: mergedLabelInValue,
+        options: mergedFlattenOptions,
+        getLabeledValue,
+        prevValue: baseValue,
+        optionLabelProp: mergedOptionLabelProp,
+      });
 
       const outValue: ValueType = (isMultiple ? outValues : outValues[0]) as ValueType;
       // Skip trigger if prev & current value is both empty
       if (onChange && (mergedRawValue.length !== 0 || outValues.length !== 0)) {
-        const outOptions = findValueOption(newRawValues, optionMap);
+        const outOptions = findValueOption(newRawValues, mergedFlattenOptions);
 
         onChange(outValue, isMultiple ? outOptions : outOptions[0]);
       }
diff --git a/src/hooks/useCacheOptions.ts b/src/hooks/useCacheOptions.ts
diff --git a/src/interface/generator.ts b/src/interface/generator.ts
@@ -14,13 +14,19 @@ export interface LabelValueType {
   value?: RawValueType;
   label?: React.ReactNode;
 }
-export type DefaultValueType = RawValueType | RawValueType[] | LabelValueType | LabelValueType[];
+export type DefaultValueType =
+  | RawValueType
+  | RawValueType[]
+  | LabelValueType
+  | LabelValueType[];
 
 export interface DisplayLabelValueType extends LabelValueType {
   disabled?: boolean;
 }
 
-export type SingleType<MixType> = MixType extends (infer Single)[] ? Single : MixType;
+export type SingleType<MixType> = MixType extends (infer Single)[]
+  ? Single
+  : MixType;
 
 export type OnClear = () => void;
 
@@ -33,10 +39,10 @@ export type CustomTagProps = {
 };
 
 // ==================================== Generator ====================================
-export type GetLabeledValue<FOT extends FlattenOptionMapType> = (
+export type GetLabeledValue<FOT extends FlattenOptionsType> = (
   value: RawValueType,
   config: {
-    optionMap: FOT;
+    options: FOT;
     prevValue: DefaultValueType;
     labelInValue: boolean;
     optionLabelProp: string;
@@ -53,12 +59,19 @@ export type FilterOptions<OptionsType extends object[]> = (
   },
 ) => OptionsType;
 
-export type FilterFunc<OptionType> = (inputValue: string, option?: OptionType) => boolean;
+export type FilterFunc<OptionType> = (
+  inputValue: string,
+  option?: OptionType,
+) => boolean;
 
 export declare function RefSelectFunc<OptionsType extends object[], ValueType>(
-  Component: React.RefForwardingComponent<RefSelectProps, SelectProps<OptionsType, ValueType>>,
+  Component: React.RefForwardingComponent<
+    RefSelectProps,
+    SelectProps<OptionsType, ValueType>
+  >,
 ): React.ForwardRefExoticComponent<
-  React.PropsWithoutRef<SelectProps<OptionsType, ValueType>> & React.RefAttributes<RefSelectProps>
+  React.PropsWithoutRef<SelectProps<OptionsType, ValueType>> &
+    React.RefAttributes<RefSelectProps>
 >;
 
 export type FlattenOptionsType<OptionsType extends object[] = object[]> = {
@@ -67,8 +80,3 @@ export type FlattenOptionsType<OptionsType extends object[] = object[]> = {
   /** Used for customize data */
   [name: string]: any; // eslint-disable-line @typescript-eslint/no-explicit-any
 }[];
-
-export type FlattenOptionMapType<OptionType extends object = object> = Map<
-  DefaultValueType,
-  OptionType
->;
diff --git a/src/utils/commonUtil.ts b/src/utils/commonUtil.ts
@@ -3,7 +3,7 @@ import {
   GetLabeledValue,
   LabelValueType,
   DefaultValueType,
-  FlattenOptionMapType,
+  FlattenOptionsType,
 } from '../interface/generator';
 
 export function toArray<T>(value: T | T[]): T[] {
@@ -27,8 +27,8 @@ export function toInnerValue(
   const values = Array.isArray(value) ? value : [value];
 
   if (labelInValue) {
-    return (values as LabelValueType[]).map(({ key, value: val }: LabelValueType) =>
-      (val !== undefined ? val : key),
+    return (values as LabelValueType[]).map(
+      ({ key, value: val }: LabelValueType) => (val !== undefined ? val : key),
     );
   }
 
@@ -38,19 +38,19 @@ export function toInnerValue(
 /**
  * Convert internal value into out event value
  */
-export function toOuterValues<FOT extends FlattenOptionMapType>(
+export function toOuterValues<FOT extends FlattenOptionsType>(
   valueList: RawValueType[],
   {
     optionLabelProp,
     labelInValue,
     prevValue,
-    optionMap,
+    options,
     getLabeledValue,
   }: {
     optionLabelProp: string;
     labelInValue: boolean;
     getLabeledValue: GetLabeledValue<FOT>;
-    optionMap: FOT;
+    options: FOT;
     prevValue: DefaultValueType;
   },
 ): RawValueType[] | LabelValueType[] {
@@ -59,7 +59,7 @@ export function toOuterValues<FOT extends FlattenOptionMapType>(
   if (labelInValue) {
     values = values.map(val =>
       getLabeledValue(val, {
-        optionMap,
+        options,
         prevValue,
         labelInValue,
         optionLabelProp,
@@ -77,7 +77,11 @@ export function removeLastEnabledValue<
   const newValues = [...values];
 
   let removeIndex: number;
-  for (removeIndex = measureValues.length - 1; removeIndex >= 0; removeIndex -= 1) {
+  for (
+    removeIndex = measureValues.length - 1;
+    removeIndex >= 0;
+    removeIndex -= 1
+  ) {
     if (!measureValues[removeIndex].disabled) {
       break;
     }
@@ -97,7 +101,9 @@ export function removeLastEnabledValue<
 }
 
 export const isClient =
-  typeof window !== 'undefined' && window.document && window.document.documentElement;
+  typeof window !== 'undefined' &&
+  window.document &&
+  window.document.documentElement;
 
 /** Is client side and not jsdom */
 export const isBrowserClient = process.env.NODE_ENV !== 'test' && isClient;
diff --git a/src/utils/valueUtil.ts b/src/utils/valueUtil.ts
@@ -89,16 +89,26 @@ function injectPropsWithOption<T>(option: T): T {
 
 export function findValueOption(
   values: RawValueType[],
-  optionMap: Map<RawValueType, OptionData>,
+  options: FlattenOptionData[],
 ): OptionData[] {
+  const optionMap: Map<RawValueType, OptionData> = new Map();
+
+  options.forEach(flattenItem => {
+    if (!flattenItem.group) {
+      const data = flattenItem.data as OptionData;
+      // Check if match
+      optionMap.set(data.value, data);
+    }
+  });
+
   return values.map(val => injectPropsWithOption(optionMap.get(val)));
 }
 
-export const getLabeledValue: GetLabeledValue<Map<RawValueType, OptionData>> = (
+export const getLabeledValue: GetLabeledValue<FlattenOptionData[]> = (
   value,
-  { optionMap, prevValue, labelInValue, optionLabelProp },
+  { options, prevValue, labelInValue, optionLabelProp },
 ) => {
-  const item = findValueOption([value], optionMap)[0];
+  const item = findValueOption([value], options)[0];
   const result: LabelValueType = {
     value,
   };
@@ -235,11 +245,8 @@ export function getSeparatedContent(text: string, tokens: string[]): string[] {
   return match ? list : null;
 }
 
-export function isValueDisabled(
-  value: RawValueType,
-  optionMap: Map<RawValueType, OptionData>,
-): boolean {
-  const option = findValueOption([value], optionMap)[0];
+export function isValueDisabled(value: RawValueType, options: FlattenOptionData[]): boolean {
+  const option = findValueOption([value], options)[0];
   return option.disabled;
 }
 
