feat(Slider): support generic type infer

packages/components/checkbox/_example/group.tsx

@@ -40,12 +40,10 @@ export default function CheckboxExample() {
       <Space direction="vertical">
         <strong>写法一：使用 options</strong>
         <div>选中值: {city.join('、')}</div>
-        <Checkbox.Group
+        <Checkbox.Group<string[]>
           disabled={disabled}
           value={city}
-          onChange={(value) => {
-            setCity(value);
-          }}
+          onChange={setCity}
           options={options}
         />
       </Space>
@@ -55,13 +53,7 @@ export default function CheckboxExample() {
       <Space direction="vertical">
         <strong>写法二：使用插槽</strong>
         <div>选中值: {city2.join('、')}</div>
-        <Checkbox.Group
-          disabled={disabled}
-          value={city2}
-          onChange={(value) => {
-            setCity2(value);
-          }}
-        >
+        <Checkbox.Group<string[]> disabled={disabled} value={city2} onChange={setCity2}>
           <Checkbox checkAll>全选</Checkbox>
           <Checkbox value="北京">北京</Checkbox>
           <Checkbox value="上海">上海</Checkbox>

packages/components/slider/Slider.tsx

@@ -1,20 +1,22 @@
 import React, { useMemo, useRef } from 'react';
 import classNames from 'classnames';
-import { isFunction, isString, isNumber } from 'lodash-es';
+import { isFunction, isNumber, isString } from 'lodash-es';
+
 import { largeNumberToFixed } from '@tdesign/common-js/input-number/large-number';
 import { accAdd } from '../_util/number';
-import type { StyledProps, TNode } from '../common';
 import useConfig from '../hooks/useConfig';
 import useControlled from '../hooks/useControlled';
 import useDefaultProps from '../hooks/useDefaultProps';
-import type { MouseCallback } from '../hooks/useMouseEvent';
 import InputNumber from '../input-number/InputNumber';
 import { sliderDefaultProps } from './defaultProps';
 import SliderHandleButton from './SliderHandleButton';
-import type { TdSliderProps } from './type';
 import { numberToPercent } from './utils/handleNumber';
 
-export type SliderProps = TdSliderProps & StyledProps;
+import type { StyledProps, TNode } from '../common';
+import type { MouseCallback } from '../hooks/useMouseEvent';
+import type { SliderValue, TdSliderProps } from './type';
+
+export interface SliderProps<T extends SliderValue = SliderValue> extends TdSliderProps<T>, StyledProps {}
 
 const LEFT_NODE = 0;
 const RIGHT_NODE = 1;
@@ -264,4 +266,6 @@ const Slider = React.forwardRef<HTMLDivElement, SliderProps>((originalProps, ref
 
 Slider.displayName = 'Slider';
 
-export default Slider;
+export default Slider as <T extends SliderValue = SliderValue>(
+  props: SliderProps<T> & React.RefAttributes<HTMLDivElement>,
+) => React.ReactElement;

packages/components/slider/_example/base.tsx

@@ -1,20 +1,19 @@
 import React, { useState } from 'react';
 import { Slider } from 'tdesign-react';
-import type { SliderValue } from 'tdesign-react';
 
 const BaseSlider = () => {
-  const [value, setValue] = useState<SliderValue>(10);
-  const [rangeValue, setRangeValue] = useState<SliderValue>([10, 80]);
+  const [value, setValue] = useState<number>(10);
+  const [rangeValue, setRangeValue] = useState<number[]>([10, 80]);
 
   return (
     <>
-      <Slider
+      <Slider<number>
         label={({ value }) => `${value}%`}
         style={{ marginBottom: 50 }}
         value={value}
         onChange={setValue}
       ></Slider>
-      <Slider value={rangeValue} onChange={setRangeValue} range></Slider>
+      <Slider<number[]> value={rangeValue} onChange={setRangeValue} range></Slider>
     </>
   );
 };

packages/components/slider/type.ts

@@ -8,7 +8,7 @@ import { InputNumberProps } from '../input-number';
 import { TooltipProps } from '../tooltip';
 import { TNode } from '../common';
 
-export interface TdSliderProps {
+export interface TdSliderProps<T = SliderValue> {
   /**
    * 是否禁用组件
    * @default false
@@ -68,7 +68,7 @@ export interface TdSliderProps {
   /**
    * 滑块值变化时触发
    */
-  onChange?: (value: SliderValue) => void;
+  onChange?: (value: T) => void;
 }
 
 export interface SliderMarks {

packages/components/switch/_example/describe.tsx

@@ -1,20 +1,41 @@
-import React from 'react';
-import { Switch, Space } from 'tdesign-react';
+import React, { useState } from 'react';
 import { Icon } from 'tdesign-icons-react';
+import { Space, Switch } from 'tdesign-react';
+
+type Status = 'on' | 'off';
 
 export default function SwitchBasic() {
-  const renderActiveContent = () => <Icon name="check" />;
-  const renderInactiveContent = () => <Icon name="close" />;
+  const [status, setStatus] = useState<Status>('on');
+  const [enabled, setEnabled] = useState(true);
+
+  const handleStatusChange = (value: Status) => {
+    console.log('Status:', value);
+    setStatus(value);
+  };
+
+  const handleEnableChange = (value: boolean) => {
+    console.log('Enabled:', value);
+    setEnabled(value);
+  };
+
+  const renderActiveIcon = () => <Icon name="check" />;
+  const renderInactiveIcon = () => <Icon name="close" />;
+
   return (
-    <Space direction="vertical">
-      <Space>
-        <Switch size="large" label={['开', '关']} />
-        <Switch size="large" defaultValue label={['开', '关']} />
-      </Space>
-      <Space>
-        <Switch size="large" label={[renderActiveContent(), renderInactiveContent()]} />
-        <Switch size="large" defaultValue label={[renderActiveContent(), renderInactiveContent()]} />
-      </Space>
+    <Space>
+      <Switch<Status>
+        size="large"
+        value={status}
+        customValue={['on', 'off']}
+        label={['ON', 'OFF']}
+        onChange={handleStatusChange}
+      />
+      <Switch<boolean>
+        size="large"
+        value={enabled}
+        label={[renderActiveIcon(), renderInactiveIcon()]}
+        onChange={handleEnableChange}
+      />
     </Space>
   );
 }

test/snap/__snapshots__/csr.test.jsx.snap

@@ -99298,110 +99298,50 @@ exports[`csr snapshot test > csr test packages/components/switch/_example/before
 exports[`csr snapshot test > csr test packages/components/switch/_example/describe.tsx 1`] = `
 <div>
   <div
-    class="t-space t-space-vertical"
+    class="t-space t-space-horizontal"
     style="gap: 16px;"
   >
     <div
       class="t-space-item"
     >
-      <div
-        class="t-space t-space-horizontal"
-        style="gap: 16px;"
+      <button
+        class="t-switch t-is-checked t-size-l"
+        role="switch"
+        type="button"
       >
+        <span
+          class="t-switch__handle"
+        />
         <div
-          class="t-space-item"
-        >
-          <button
-            class="t-switch t-size-l"
-            role="switch"
-            type="button"
-          >
-            <span
-              class="t-switch__handle"
-            />
-            <div
-              class="t-switch__content"
-            >
-              关
-            </div>
-          </button>
-        </div>
-        <div
-          class="t-space-item"
+          class="t-switch__content"
         >
-          <button
-            class="t-switch t-is-checked t-size-l"
-            role="switch"
-            type="button"
-          >
-            <span
-              class="t-switch__handle"
-            />
-            <div
-              class="t-switch__content"
-            >
-              开
-            </div>
-          </button>
+          ON
         </div>
-      </div>
+      </button>
     </div>
     <div
       class="t-space-item"
     >
-      <div
-        class="t-space t-space-horizontal"
-        style="gap: 16px;"
+      <button
+        class="t-switch t-is-checked t-size-l"
+        role="switch"
+        type="button"
       >
+        <span
+          class="t-switch__handle"
+        />
         <div
-          class="t-space-item"
-        >
-          <button
-            class="t-switch t-size-l"
-            role="switch"
-            type="button"
-          >
-            <span
-              class="t-switch__handle"
-            />
-            <div
-              class="t-switch__content"
-            >
-              <svg
-                class="t-icon t-icon-close"
-              >
-                <use
-                  xlink:href="#t-icon-close"
-                />
-              </svg>
-            </div>
-          </button>
-        </div>
-        <div
-          class="t-space-item"
+          class="t-switch__content"
         >
-          <button
-            class="t-switch t-is-checked t-size-l"
-            role="switch"
-            type="button"
+          <svg
+            class="t-icon t-icon-check"
           >
-            <span
-              class="t-switch__handle"
+            <use
+              xlink:href="#t-icon-check"
             />
-            <div
-              class="t-switch__content"
-            >
-              <svg
-                class="t-icon t-icon-check"
-              >
-                <use
-                  xlink:href="#t-icon-check"
-                />
-              </svg>
-            </div>
-          </button>
+          </svg>
         </div>
-      </div>
+      </button>
     </div>
   </div>
 </div>
@@ -150552,7 +150492,7 @@ exports[`ssr snapshot test > ssr test packages/components/switch/_example/base.t
 
 exports[`ssr snapshot test > ssr test packages/components/switch/_example/beforeChange.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-horizontal"><div class="t-space-item"><button type="button" role="switch" class="t-switch t-is-checked t-size-l"><span class="t-switch__handle"></span><div class="t-switch__content"></div></button></div><div class="t-space-item"><button type="button" role="switch" class="t-switch t-is-checked t-size-l"><span class="t-switch__handle"></span><div class="t-switch__content"></div></button></div></div>"`;
 
-exports[`ssr snapshot test > ssr test packages/components/switch/_example/describe.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div style="gap:16px" class="t-space t-space-horizontal"><div class="t-space-item"><button type="button" role="switch" class="t-switch t-size-l"><span class="t-switch__handle"></span><div class="t-switch__content">关</div></button></div><div class="t-space-item"><button type="button" role="switch" class="t-switch t-is-checked t-size-l"><span class="t-switch__handle"></span><div class="t-switch__content">开</div></button></div></div></div><div class="t-space-item"><div style="gap:16px" class="t-space t-space-horizontal"><div class="t-space-item"><button type="button" role="switch" class="t-switch t-size-l"><span class="t-switch__handle"></span><div class="t-switch__content"><svg class="t-icon t-icon-close"><use xlink:href="#t-icon-close"></use></svg></div></button></div><div class="t-space-item"><button type="button" role="switch" class="t-switch t-is-checked t-size-l"><span class="t-switch__handle"></span><div class="t-switch__content"><svg class="t-icon t-icon-check"><use xlink:href="#t-icon-check"></use></svg></div></button></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test packages/components/switch/_example/describe.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-horizontal"><div class="t-space-item"><button type="button" role="switch" class="t-switch t-is-checked t-size-l"><span class="t-switch__handle"></span><div class="t-switch__content">ON</div></button></div><div class="t-space-item"><button type="button" role="switch" class="t-switch t-is-checked t-size-l"><span class="t-switch__handle"></span><div class="t-switch__content"><svg class="t-icon t-icon-check"><use xlink:href="#t-icon-check"></use></svg></div></button></div></div>"`;
 
 exports[`ssr snapshot test > ssr test packages/components/switch/_example/size.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-horizontal"><div class="t-space-item"><button type="button" role="switch" class="t-switch t-is-checked t-size-l"><span class="t-switch__handle"></span><div class="t-switch__content"></div></button></div><div class="t-space-item"><button type="button" role="switch" class="t-switch t-size-m"><span class="t-switch__handle"></span><div class="t-switch__content"></div></button></div><div class="t-space-item"><button type="button" role="switch" class="t-switch t-size-s"><span class="t-switch__handle"></span><div class="t-switch__content"></div></button></div></div>"`;
 

test/snap/__snapshots__/ssr.test.jsx.snap

@@ -976,7 +976,7 @@ exports[`ssr snapshot test > ssr test packages/components/switch/_example/base.t
 
 exports[`ssr snapshot test > ssr test packages/components/switch/_example/beforeChange.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-horizontal"><div class="t-space-item"><button type="button" role="switch" class="t-switch t-is-checked t-size-l"><span class="t-switch__handle"></span><div class="t-switch__content"></div></button></div><div class="t-space-item"><button type="button" role="switch" class="t-switch t-is-checked t-size-l"><span class="t-switch__handle"></span><div class="t-switch__content"></div></button></div></div>"`;
 
-exports[`ssr snapshot test > ssr test packages/components/switch/_example/describe.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div style="gap:16px" class="t-space t-space-horizontal"><div class="t-space-item"><button type="button" role="switch" class="t-switch t-size-l"><span class="t-switch__handle"></span><div class="t-switch__content">关</div></button></div><div class="t-space-item"><button type="button" role="switch" class="t-switch t-is-checked t-size-l"><span class="t-switch__handle"></span><div class="t-switch__content">开</div></button></div></div></div><div class="t-space-item"><div style="gap:16px" class="t-space t-space-horizontal"><div class="t-space-item"><button type="button" role="switch" class="t-switch t-size-l"><span class="t-switch__handle"></span><div class="t-switch__content"><svg class="t-icon t-icon-close"><use xlink:href="#t-icon-close"></use></svg></div></button></div><div class="t-space-item"><button type="button" role="switch" class="t-switch t-is-checked t-size-l"><span class="t-switch__handle"></span><div class="t-switch__content"><svg class="t-icon t-icon-check"><use xlink:href="#t-icon-check"></use></svg></div></button></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test packages/components/switch/_example/describe.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-horizontal"><div class="t-space-item"><button type="button" role="switch" class="t-switch t-is-checked t-size-l"><span class="t-switch__handle"></span><div class="t-switch__content">ON</div></button></div><div class="t-space-item"><button type="button" role="switch" class="t-switch t-is-checked t-size-l"><span class="t-switch__handle"></span><div class="t-switch__content"><svg class="t-icon t-icon-check"><use xlink:href="#t-icon-check"></use></svg></div></button></div></div>"`;
 
 exports[`ssr snapshot test > ssr test packages/components/switch/_example/size.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-horizontal"><div class="t-space-item"><button type="button" role="switch" class="t-switch t-is-checked t-size-l"><span class="t-switch__handle"></span><div class="t-switch__content"></div></button></div><div class="t-space-item"><button type="button" role="switch" class="t-switch t-size-m"><span class="t-switch__handle"></span><div class="t-switch__content"></div></button></div><div class="t-space-item"><button type="button" role="switch" class="t-switch t-size-s"><span class="t-switch__handle"></span><div class="t-switch__content"></div></button></div></div>"`;