feat: internal props can skip onChange onSelect event

Author: zombieJ

src/OptionList.tsx

@@ -131,6 +131,7 @@ const OptionList: React.RefForwardingComponent<
   // ========================== Values ==========================
   const onSelectValue = (value: RawValueType) => {
     if (value !== null) {
+      console.log('-->', value, Array.from(values));
       onSelect(value, { selected: !values.has(value) });
     }
 

src/generate.tsx

@@ -148,6 +148,10 @@ export interface SelectProps<OptionsType extends object[], ValueType> extends Re
   internalProps?: {
     mark?: string;
     onClear?: OnClear;
+    skipTriggerChange?: boolean;
+    skipTriggerSelect?: boolean;
+    onRawSelect?: (value: RawValueType, option: OptionsType[number]) => void;
+    onRawDeselect?: (value: RawValueType, option: OptionsType[number]) => void;
   };
 }
 
@@ -289,6 +293,8 @@ export default function generateSelector<
       ...restProps
     } = props;
 
+    const useInternalProps = internalProps.mark === INTERNAL_PROPS_MARK;
+
     const domProps = omitDOMProps ? omitDOMProps(restProps) : restProps;
     DEFAULT_OMIT_PROPS.forEach(prop => {
       delete domProps[prop];
@@ -428,25 +434,41 @@ export default function generateSelector<
     );
 
     const triggerSelect = (newValue: RawValueType, isSelect: boolean) => {
-      const selectValue = (mergedLabelInValue
-        ? getLabeledValue(newValue, {
-            options: mergedFlattenOptions,
-            prevValue: baseValue,
-            labelInValue: mergedLabelInValue,
-            optionLabelProp: mergedOptionLabelProp,
-          })
-        : newValue) as SingleType<ValueType>;
-
       const outOption = findValueOption([newValue], mergedFlattenOptions)[0];
 
-      if (isSelect && onSelect) {
-        onSelect(selectValue, outOption);
-      } else if (!isSelect && onDeselect) {
-        onDeselect(selectValue, outOption);
+      if (!internalProps.skipTriggerSelect) {
+        // Skip trigger `onSelect` or `onDeselect` if configured
+        const selectValue = (mergedLabelInValue
+          ? getLabeledValue(newValue, {
+              options: mergedFlattenOptions,
+              prevValue: baseValue,
+              labelInValue: mergedLabelInValue,
+              optionLabelProp: mergedOptionLabelProp,
+            })
+          : newValue) as SingleType<ValueType>;
+
+        if (isSelect && onSelect) {
+          onSelect(selectValue, outOption);
+        } else if (!isSelect && onDeselect) {
+          onDeselect(selectValue, outOption);
+        }
+      }
+
+      // Trigger internal event
+      if (useInternalProps) {
+        if (isSelect && internalProps.onRawSelect) {
+          internalProps.onRawSelect(newValue, outOption);
+        } else if (!isSelect && internalProps.onRawDeselect) {
+          internalProps.onRawDeselect(newValue, outOption);
+        }
       }
     };
 
     const triggerChange = (newRawValues: RawValueType[]) => {
+      if (useInternalProps && internalProps.skipTriggerChange) {
+        return;
+      }
+
       const outValues = toOuterValues<FlattenOptionsType<OptionsType>>(Array.from(newRawValues), {
         labelInValue: mergedLabelInValue,
         options: mergedFlattenOptions,
@@ -766,7 +788,7 @@ export default function generateSelector<
     let clearNode: React.ReactNode;
     const onClearMouseDown: React.MouseEventHandler<HTMLSpanElement> = () => {
       // Trigger internal `onClear` event
-      if (internalProps.mark === INTERNAL_PROPS_MARK && internalProps.onClear) {
+      if (useInternalProps && internalProps.onClear) {
         internalProps.onClear();
       }
 

tests/Select.test.tsx

@@ -1265,8 +1265,22 @@ describe('Select.Basic', () => {
         expect(opt.props).toBeTruthy();
       };
 
+      // We also test if internal hooks work here.
+      // Can be remove if not need in `rc-tree-select` anymore.
+      const onRawSelect = jest.fn();
+      const onRawDeselect = jest.fn();
+
       const wrapper = mount(
-        <Select mode="multiple" onSelect={readPropsFunc} onDeselect={readPropsFunc}>
+        <Select
+          mode="multiple"
+          onSelect={readPropsFunc}
+          onDeselect={readPropsFunc}
+          internalProps={{
+            mark: INTERNAL_PROPS_MARK,
+            onRawSelect,
+            onRawDeselect,
+          }}
+        >
           <Option value="light">Light</Option>
           <Option value="bamboo">Bamboo</Option>
         </Select>,
@@ -1277,13 +1291,15 @@ describe('Select.Basic', () => {
       expect(errorSpy).toHaveBeenCalledWith(
         'Warning: Return type is option instead of Option instance. Please read value directly instead of reading from `props`.',
       );
+      expect(onRawSelect).toHaveBeenCalled();
 
       errorSpy.mockReset();
       resetWarned();
       selectItem(wrapper);
       expect(errorSpy).toHaveBeenCalledWith(
         'Warning: Return type is option instead of Option instance. Please read value directly instead of reading from `props`.',
       );
+      expect(onRawDeselect).toHaveBeenCalled();
 
       errorSpy.mockRestore();
     });
@@ -1311,6 +1327,25 @@ describe('Select.Basic', () => {
 
       errorSpy.mockRestore();
     });
+
+    // This test case can be safe remove
+    it('skip onChange', () => {
+      const onChange = jest.fn();
+      const wrapper = mount(
+        <Select
+          onChange={onChange}
+          internalProps={{ mark: INTERNAL_PROPS_MARK, skipTriggerChange: true }}
+        >
+          <Option value="light">Light</Option>
+          <Option value="bamboo">Bamboo</Option>
+        </Select>,
+      );
+
+      toggleOpen(wrapper);
+      selectItem(wrapper);
+
+      expect(onChange).not.toHaveBeenCalled();
+    });
   });
 
   it('not crash when options is null', () => {