perf(components/picker): 优化 Picker 组件 Props 类型，使 props 类型提示更精准

packages/components/src/picker/Picker.tsx

@@ -1,5 +1,5 @@
+import type { PickerProps, PickerFC } from './picker.types';
 import type { RequiredPart } from '@tool-pack/types';
-import type { PickerProps } from './picker.types';
 import { PickerPanel } from '~/picker/components';
 import { getClassNames } from '@tool-pack/basic';
 import { InputPopover } from '~/input-popover';
@@ -11,7 +11,7 @@ const defaultProps = {
   format: (v) => v.join(','),
 } satisfies Partial<PickerProps>;
 
-export const Picker: React.FC<PickerProps> = React.forwardRef<
+export const _Picker: React.FC<PickerProps> = React.forwardRef<
   HTMLDivElement,
   PickerProps
 >((props, ref) => {
@@ -51,5 +51,7 @@ export const Picker: React.FC<PickerProps> = React.forwardRef<
   );
 });
 
-Picker.defaultProps = defaultProps;
-Picker.displayName = 'Picker';
+_Picker.defaultProps = defaultProps;
+_Picker.displayName = 'Picker';
+
+export const Picker = _Picker as PickerFC;

packages/components/src/picker/components/picker.Panel.tsx

@@ -1,12 +1,12 @@
 import { useFollowingState, OptionValueType, getClasses } from '@pkg/shared';
-import type { PickerPanelProps } from '../picker.types';
+import type { PickerPanelProps, PickerPanelFC } from '../picker.types';
 import { getClassNames } from '@tool-pack/basic';
 import React, { useEffect } from 'react';
 import { PickerCol } from './picker.Col';
 
 const cls = getClasses('picker-panel', [], []);
 
-export const PickerPanel: React.FC<PickerPanelProps> = React.forwardRef<
+export const _PickerPanel: React.FC<PickerPanelProps> = React.forwardRef<
   HTMLDivElement,
   PickerPanelProps
 >((props, ref) => {
@@ -45,3 +45,5 @@ export const PickerPanel: React.FC<PickerPanelProps> = React.forwardRef<
     });
   }
 });
+
+export const PickerPanel = _PickerPanel as PickerPanelFC;

packages/components/src/picker/demo/format.tsx

@@ -2,17 +2,15 @@
  * title: 格式化显示
  */
 
-import { OptionValueType, PickerOption, Picker } from '@tool-pack/react-ui';
+import { PickerOption, Picker } from '@tool-pack/react-ui';
 import React, { useEffect, useState } from 'react';
 
 const hours = createNumberOptions(24);
 const minutes = createNumberOptions(60);
 const seconds = createNumberOptions(60);
 
 const App: React.FC = () => {
-  const [value, setValue] = useState<OptionValueType[]>(() =>
-    getTimeValue(new Date()),
-  );
+  const [value, setValue] = useState<string[]>(() => getTimeValue(new Date()));
 
   useEffect(() => {
     // 跟随滚动
@@ -37,7 +35,7 @@ function getTimeValue(date: Date) {
     String(v).padStart(2, '0'),
   );
 }
-function createNumberOptions(length: number): PickerOption[] {
+function createNumberOptions(length: number): PickerOption<string>[] {
   return Array.from({ length }).map((_, i) => {
     const value = String(i).padStart(2, '0');
     return {

packages/components/src/picker/picker.types.ts

@@ -3,20 +3,32 @@ import { InputPopoverProps } from '~/input-popover';
 import { OptionProps } from '~/option';
 import React from 'react';
 
-export interface PickerOption extends OptionProps {
+export interface PickerOption<T extends OptionValueType = OptionValueType>
+  extends OptionProps {
   label: React.ReactNode;
-  value: OptionValueType;
+  value: T;
 }
 
-export interface PickerPanelProps
+export interface PickerPanelProps<T extends OptionValueType = OptionValueType>
   extends Omit<PropsBase<HTMLDivElement>, 'children'> {
-  onChange?: (value: OptionValueType[]) => void;
-  options?: Array<PickerOption[]>;
-  value?: OptionValueType[];
+  options?: Array<PickerOption<T>[]>;
+  onChange?: (value: T[]) => void;
+  value?: T[];
 }
 
-export interface PickerProps extends PickerPanelProps {
+export type PickerPanelFC = <
+  ValueType extends OptionValueType = OptionValueType,
+>(
+  props: PickerPanelProps<ValueType>,
+) => React.ReactElement;
+
+export interface PickerProps<T extends OptionValueType = OptionValueType>
+  extends PickerPanelProps<T> {
   panelAttrs?: Partial<React.HTMLAttributes<HTMLDivElement>>;
-  format?: (value: OptionValueType[]) => React.ReactNode;
   inputPopoverProps?: Partial<InputPopoverProps>;
+  format?: (value: T[]) => React.ReactNode;
 }
+
+export type PickerFC = <ValueType extends OptionValueType = OptionValueType>(
+  props: PickerProps<ValueType>,
+) => React.ReactElement;