fix(pickers): improve pickers renderValue property type definition (#…

…4145)
rsuite · simonguo · Dec 20, 2024 · Dec 20, 2024 · Dec 23, 2024 · Dec 23, 2024
commit 37cc54ce6472d76b70f775a2e96baad5cb17aa49
diff --git a/src/Cascader/test/Cascader.test.tsx b/src/Cascader/test/Cascader.test.tsx
@@ -32,3 +32,20 @@ const stringValuedData = [{ label: 'One', value: 'One' }];
 const ref = React.useRef<PickerHandle>(null);
 <Cascader data={[]} ref={ref} />;
 ref.current?.open?.();
+const pickerRef = React.createRef<PickerHandle>();
+
+<Cascader ref={pickerRef} data={[]} />;
+
+interface Item<T> {
+  label?: React.ReactNode;
+  value?: T;
+}
+
+// Check renderValue
+<Cascader
+  data={[]}
+  renderValue={(value: string, selectedPaths: Item<string>[]) => {
+    console.log(value, selectedPaths);
+    return selectedPaths.map(item => item.label).join(' / ');
+  }}
+/>;
diff --git a/src/CheckPicker/CheckPicker.tsx b/src/CheckPicker/CheckPicker.tsx
@@ -36,18 +36,25 @@ import {
 } from '@/internals/Picker';
 import type { PickerLocale } from '../locales';
 import type { ItemDataType, FormControlPickerProps } from '@/internals/types';
-import type { MultipleSelectProps } from '../SelectPicker';
+import type { SelectProps } from '../SelectPicker';

 export type ValueType = (number | string)[];
 export interface CheckPickerProps<T = any>
  extends FormControlPickerProps<T[], PickerLocale, ItemDataType<T>>,
-    MultipleSelectProps<T>,
+    Omit<SelectProps<T>, 'renderValue'>,
    Pick<PickerToggleProps, 'label' | 'caretAs' | 'loading'> {
  /** Top the selected option in the options */
  sticky?: boolean;

  /** A picker that can be counted */
  countable?: boolean;
+
+  /** Custom render selected items */
+  renderValue?: (
+    value: T[],
+    item: ItemDataType<T>[],
+    selectedElement: React.ReactNode
+  ) => React.ReactNode;
 }

 const emptyArray = [];
@@ -210,13 +217,18 @@ const CheckPicker = forwardRef<'div', CheckPickerProps>(
    });

    const handleSelect = useEventCallback(
-      (nextItemValue: any, item: ItemDataType, event: React.SyntheticEvent) => {
+      (nextItemValue: any, item: ItemDataType<T>, event: React.SyntheticEvent) => {
        onSelect?.(nextItemValue, item, event);
      }
    );

    const handleItemSelect = useEventCallback(
-      (nextItemValue: any, item: ItemDataType, event: React.SyntheticEvent, checked: boolean) => {
+      (
+        nextItemValue: any,
+        item: ItemDataType<T>,
+        event: React.SyntheticEvent,
+        checked: boolean
+      ) => {
        const nextValue = clone(value);

        if (checked) {

diff --git a/src/CheckPicker/test/CheckPicker.test.tsx b/src/CheckPicker/test/CheckPicker.test.tsx
@@ -41,3 +41,16 @@ const stringValuedData = [{ label: 'One', value: 'One' }];
 const ref = React.useRef<PickerHandle>(null);
 <CheckPicker data={[]} ref={ref} />;
 ref.current?.open?.();
+
+interface Item<T> {
+  label?: React.ReactNode;
+  value?: T;
+}
+// Check renderValue
+<CheckPicker
+  data={[]}
+  renderValue={(value: string[], items: Item<string>[]) => {
+    console.log(value, items);
+    return value.map(v => items.find(item => item.value === v)?.label).join(', ');
+  }}
+/>;
diff --git a/src/InputPicker/InputPicker.tsx b/src/InputPicker/InputPicker.tsx
@@ -51,7 +51,7 @@ import type { SelectProps } from '../SelectPicker';
 export type ValueType = any;
 export interface InputPickerProps<V = ValueType>
  extends FormControlPickerProps<V, InputPickerLocale, InputItemDataType>,
-    SelectProps<V>,
+    Omit<SelectProps<V>, 'renderValue'>,
    Pick<PickerToggleProps, 'caretAs' | 'loading'> {
  tabIndex?: number;

@@ -82,6 +82,12 @@ export interface InputPickerProps<V = ValueType>
    searchKeyword: string,
    filteredData: InputItemDataType<V>[]
  ) => boolean;
+
+  renderValue?: (
+    value: V,
+    item: ItemDataType<V>,
+    selectedElement: React.ReactNode
+  ) => React.ReactNode;
 }

 /**

diff --git a/src/InputPicker/test/InputPicker.test.tsx b/src/InputPicker/test/InputPicker.test.tsx
@@ -8,3 +8,16 @@ import type { PickerHandle } from '@/internals/Picker';
 const ref = React.useRef<PickerHandle>(null);
 <InputPicker data={[]} ref={ref} />;
 ref.current?.open?.();
+interface Item<T> {
+  label?: React.ReactNode;
+  value?: T;
+}
+
+// Check renderValue
+<InputPicker
+  data={[]}
+  renderValue={(value: string, item: Item<string>) => {
+    console.log(value, item);
+    return item.label;
+  }}
+/>;
diff --git a/src/MultiCascader/MultiCascader.tsx b/src/MultiCascader/MultiCascader.tsx
@@ -30,10 +30,10 @@ import type { FormControlPickerProps, ItemDataType, DataItemValue } from '@/inte
 import type { PickerLocale } from '../locales';
 import type { MultiCascadeTreeProps } from '../MultiCascadeTree';

-export interface MultiCascaderProps<T extends DataItemValue = any>
+export interface MultiCascaderProps<T = any>
  extends FormControlPickerProps<T[], PickerLocale, ItemDataType<T>, T>,
    MultiCascadeTreeProps<T, T[], PickerLocale>,
-    Pick<PickerToggleProps, 'loading'> {
+    Pick<PickerToggleProps, 'label' | 'caretAs' | 'loading'> {
  /**
   * A picker that can be counted
   */
@@ -119,7 +119,7 @@ const emptyArray = [];
 * The `MultiCascader` component is used to select multiple values from cascading options.
 * @see https://rsuitejs.com/components/multi-cascader/
 */
-const MultiCascader = forwardRef<'div', MultiCascaderProps<DataItemValue>>(
+const MultiCascader = forwardRef<'div', MultiCascaderProps>(
  <T extends DataItemValue>(props: MultiCascaderProps<T>, ref) => {
    const { propsWithDefaults, rtl } = useCustom('MultiCascader', props);
    const {

diff --git a/src/MultiCascader/test/MultiCascader.test.tsx b/src/MultiCascader/test/MultiCascader.test.tsx
@@ -6,3 +6,17 @@ import type { PickerHandle } from '@/internals/Picker';
 const ref = React.useRef<PickerHandle>(null);
 <MultiCascader data={[]} ref={ref} />;
 ref.current?.open?.();
+
+interface Item<T> {
+  label?: React.ReactNode;
+  value?: T;
+}
+
+// Check renderValue
+<MultiCascader
+  data={[]}
+  renderValue={(value: string[], selectedPaths: Item<string>[]) => {
+    console.log(value, selectedPaths);
+    return selectedPaths.map(item => item.label).join(' / ');
+  }}
+/>;
diff --git a/src/SelectPicker/SelectPicker.tsx b/src/SelectPicker/SelectPicker.tsx
@@ -66,12 +66,12 @@ export interface SelectProps<T> {
  /** Custom render selected items */
  renderValue?: (
    value: T,
-    item: ItemDataType | ItemDataType[],
+    item: ItemDataType<T>,
    selectedElement: React.ReactNode
  ) => React.ReactNode;

  /** Called when the option is selected */
-  onSelect?: (value: any, item: ItemDataType, event: React.SyntheticEvent) => void;
+  onSelect?: (value: any, item: ItemDataType<T>, event: React.SyntheticEvent) => void;

  /** Called after clicking the group title */
  onGroupTitleClick?: (event: React.SyntheticEvent) => void;
@@ -83,15 +83,6 @@ export interface SelectProps<T> {
  onClean?: (event: React.SyntheticEvent) => void;
 }

-export interface MultipleSelectProps<T> extends Omit<SelectProps<T>, 'renderValue'> {
-  /** Custom render selected items */
-  renderValue?: (
-    value: T[],
-    item: ItemDataType<T>[],
-    selectedElement: React.ReactNode
-  ) => React.ReactNode;
-}
-
 export interface SelectPickerProps<T = any>
  extends Omit<
      FormControlPickerProps<T, PickerLocale, ItemDataType<T>>,
@@ -207,7 +198,7 @@ const SelectPicker = forwardRef<'div', SelectPickerProps>(
    });

    const handleSelect = useEventCallback(
-      (value: any, item: ItemDataType, event: React.SyntheticEvent) => {
+      (value: any, item: ItemDataType<T>, event: React.SyntheticEvent) => {
        onSelect?.(value, item, event);
        target.current?.focus();
      }
@@ -296,7 +287,7 @@ const SelectPicker = forwardRef<'div', SelectPickerProps>(
    }

    if (!isNil(value) && isFunction(renderValue)) {
-      selectedElement = renderValue(value, activeItem as ItemDataType, selectedElement);
+      selectedElement = renderValue(value, activeItem as ItemDataType<T>, selectedElement);
      // If renderValue returns null or undefined, hasValue is false.
      if (isNil(selectedElement)) {
        hasValue = false;

diff --git a/src/SelectPicker/index.tsx b/src/SelectPicker/index.tsx
@@ -1,7 +1,7 @@
 import SelectPicker from './SelectPicker';

 // export types
-export type { SelectProps, MultipleSelectProps, SelectPickerProps } from './SelectPicker';
+export type { SelectProps, SelectPickerProps } from './SelectPicker';

 // export components
 export { SelectPicker };

diff --git a/src/SelectPicker/test/SelectPicker.test.tsx b/src/SelectPicker/test/SelectPicker.test.tsx
@@ -62,3 +62,16 @@ type SortDirection = 'asc' | 'desc';
 const ref = React.useRef<PickerHandle>(null);
 <SelectPicker data={[]} ref={ref} />;
 ref.current?.open?.();
+interface Item<T> {
+  label?: React.ReactNode;
+  value?: T;
+}
+
+// Check renderValue
+<SelectPicker
+  data={[]}
+  renderValue={(value: string, item: Item<string>) => {
+    console.log(value, item);
+    return item.label;
+  }}
+/>;
diff --git a/src/TagPicker/TagPicker.tsx b/src/TagPicker/TagPicker.tsx
@@ -3,14 +3,24 @@ import InputPicker, { InputPickerProps } from '../InputPicker/InputPicker';
 import { TagProvider, TagOnlyProps } from '../InputPicker/InputPickerContext';
 import { useCustom } from '../CustomProvider';
 import { forwardRef } from '@/internals/utils';
+import type { ItemDataType } from '@/internals/types';
 import type { CheckboxProps } from '../Checkbox';

-export interface TagPickerProps extends InputPickerProps, Partial<TagOnlyProps> {
+export interface TagPickerProps<V = any>
+  extends Omit<InputPickerProps<V>, 'renderValue'>,
+    Partial<TagOnlyProps> {
  /**
   * Custom render checkbox on menu item
   * @version 5.47.0
   **/
  renderMenuItemCheckbox?: (checkboxProps: CheckboxProps) => React.ReactNode;
+
+  /** Custom render selected items */
+  renderValue?: (
+    values: V[],
+    items: ItemDataType<V>[],
+    selectedElement: React.ReactNode
+  ) => React.ReactNode;
 }

 /**
@@ -25,6 +35,7 @@ const TagPicker = forwardRef<'div', TagPickerProps>((props, ref) => {
    trigger = 'Enter',
    onTagRemove,
    renderMenuItemCheckbox,
+    renderValue,
    ...rest
  } = propsWithDefaults;

@@ -41,7 +52,11 @@ const TagPicker = forwardRef<'div', TagPickerProps>((props, ref) => {

  return (
    <TagProvider value={contextValue}>
-      <InputPicker {...rest} ref={ref} />
+      <InputPicker
+        renderValue={renderValue as InputPickerProps['renderValue']}
+        {...rest}
+        ref={ref}
+      />
    </TagProvider>
  );
 });

diff --git a/src/TagPicker/test/TagPicker.test.tsx b/src/TagPicker/test/TagPicker.test.tsx
@@ -6,3 +6,16 @@ import type { PickerHandle } from '@/internals/Picker';
 const ref = React.useRef<PickerHandle>(null);
 <TagPicker data={[]} ref={ref} />;
 ref.current?.open?.();
+
+interface Item<T> {
+  label?: React.ReactNode;
+  value?: T;
+}
+
+<TagPicker
+  data={[]}
+  renderValue={(value: string[], items: Item<string>[]) => {
+    console.log(value, items);
+    return value.map(v => items.find(item => item.value === v)?.label).join(', ');
+  }}
+/>;