feat: Add internal props ability for rc-tree-select usage

Author: zombieJ

src/generate.tsx

@@ -25,6 +25,8 @@ import {
   DisplayLabelValueType,
   FlattenOptionsType,
   SingleType,
+  OnClear,
+  INTERNAL_PROPS_MARK,
 } from './interface/generator';
 import { OptionListProps, RefOptionListProps } from './OptionList';
 import { toInnerValue, toOuterValues, removeLastEnabledValue, getUUID } from './utils/commonUtil';
@@ -137,6 +139,16 @@ export interface SelectProps<OptionsType extends object[], ValueType> extends Re
 
   // Motion
   choiceTransitionName?: string;
+
+  // Internal props
+  /**
+   * Only used in current version for internal event process.
+   * Do not use in production environment.
+   */
+  internalProps?: {
+    mark?: string;
+    onClear?: OnClear;
+  };
 }
 
 export interface GenerateConfig<OptionsType extends object[]> {
@@ -272,6 +284,8 @@ export default function generateSelector<
       onSelect,
       onDeselect,
 
+      internalProps = {},
+
       ...restProps
     } = props;
 
@@ -604,7 +618,12 @@ export default function generateSelector<
         !mergedSearchValue &&
         mergedRawValue.length
       ) {
-        triggerChange(removeLastEnabledValue(displayValues, mergedRawValue));
+        const removeInfo = removeLastEnabledValue(displayValues, mergedRawValue);
+
+        if (removeInfo.removedValue !== null) {
+          triggerChange(removeInfo.values);
+          triggerSelect(removeInfo.removedValue, false);
+        }
       }
 
       if (mergedOpen && listRef.current) {
@@ -746,6 +765,11 @@ export default function generateSelector<
     // ============================= Clear ==============================
     let clearNode: React.ReactNode;
     const onClearMouseDown: React.MouseEventHandler<HTMLSpanElement> = () => {
+      // Trigger internal `onClear` event
+      if (internalProps.mark === INTERNAL_PROPS_MARK && internalProps.onClear) {
+        internalProps.onClear();
+      }
+
       triggerChange([]);
       triggerSearch('', false);
     };

src/interface/generator.ts

@@ -1,5 +1,7 @@
 import { SelectProps, RefSelectProps } from '../generate';
 
+export const INTERNAL_PROPS_MARK = 'RC_SELECT_INTERNAL_PROPS_MARK';
+
 // =================================== Shared Type ===================================
 export type Key = string | number;
 
@@ -18,6 +20,8 @@ export interface DisplayLabelValueType extends LabelValueType {
 
 export type SingleType<MixType> = MixType extends (infer Single)[] ? Single : MixType;
 
+export type OnClear = () => void;
+
 // ==================================== Generator ====================================
 export type GetLabeledValue<FOT extends FlattenOptionsType> = (
   value: RawValueType,

src/utils/commonUtil.ts

@@ -66,7 +66,7 @@ export function toOuterValues<FOT extends FlattenOptionsType>(
 export function removeLastEnabledValue<
   T extends { disabled?: boolean },
   P extends RawValueType | object
->(measureValues: T[], values: P[]): P[] {
+>(measureValues: T[], values: P[]): { values: P[]; removedValue: P } {
   const newValues = [...values];
 
   let removeIndex: number;
@@ -76,11 +76,17 @@ export function removeLastEnabledValue<
     }
   }
 
+  let removedValue = null;
+
   if (removeIndex !== -1) {
+    removedValue = newValues[removeIndex];
     newValues.splice(removeIndex, 1);
   }
 
-  return newValues;
+  return {
+    values: newValues,
+    removedValue,
+  };
 }
 
 export const isClient =

tests/Select.test.tsx

@@ -15,6 +15,7 @@ import {
   findSelection,
   injectRunAllTimers,
 } from './utils/common';
+import { INTERNAL_PROPS_MARK } from '../src/interface/generator';
 
 describe('Select.Basic', () => {
   injectRunAllTimers(jest);
@@ -340,8 +341,18 @@ describe('Select.Basic', () => {
 
   it('clears value', () => {
     const handleChange = jest.fn();
+    const onClear = jest.fn();
+
     const wrapper = mount(
-      <Select value="1" allowClear onChange={handleChange}>
+      <Select
+        value="1"
+        allowClear
+        onChange={handleChange}
+        internalProps={{
+          mark: INTERNAL_PROPS_MARK,
+          onClear,
+        }}
+      >
         <Option value="1">1</Option>
         <Option value="2">2</Option>
       </Select>,
@@ -354,6 +365,7 @@ describe('Select.Basic', () => {
       .simulate('mousedown');
     expect(handleChange).toHaveBeenCalledWith(undefined, undefined);
     expect(wrapper.find('input').props().value).toEqual('');
+    expect(onClear).toHaveBeenCalled();
   });
 
   it('adds label to value', () => {