/** * Select 组件公共类型定义 * 供 PisellSingleSelect、PisellMultipleSelect 等组件使用 */ import React from 'react'; export type { DisplayState } from '../common'; /** * 选项基础类型 * @template T 选项值的类型,默认为 string | number */ export interface SelectOption { /** * 选项值(唯一标识) */ value: T; /** * 选项显示文本 */ label: string; /** * 是否禁用该选项 * @default false */ disabled?: boolean; /** * 选项图标(可选) */ icon?: React.ReactNode; /** * 标签背景色(多选时用于自定义标签颜色) * @example '#61dafb' */ color?: string; } /** * 选项过滤函数类型 * @template T 选项值的类型 * @param input 用户输入的搜索文本 * @param option 当前选项对象 * @returns 是否保留该选项 */ export declare type FilterOptionFunc = (input: string, option: SelectOption) => boolean; /** * 排序方向 */ export declare type SortDirection = 'asc' | 'desc'; /** * Select 状态 Hook 返回值(单选) * @template T 值的类型 */ export interface SelectState { /** * 当前选中值 */ value: T | null | undefined; /** * 设置选中值 */ setValue: (value: T | null) => void; /** * 清空选中值 */ clearValue: () => void; } /** * Multiple Select 状态 Hook 返回值(多选) * @template T 值的类型 */ export interface MultipleSelectState { /** * 当前选中值数组 */ value: T[]; /** * 设置选中值数组 */ setValue: (value: T[]) => void; /** * 添加一个选中值 */ addValue: (value: T) => void; /** * 移除一个选中值 */ removeValue: (value: T) => void; /** * 清空所有选中值 */ clearValue: () => void; } /** * 标签显示信息(多选专用) * @template T 选项值的类型 */ export interface TagDisplayInfo { /** * 可见的标签列表 */ visibleTags: SelectOption[]; /** * 隐藏的标签列表 */ hiddenTags: SelectOption[]; /** * 隐藏的标签数量 */ hiddenCount: number; } /** * useSelectState Hook 的配置选项(单选) * @template T 值的类型 */ export interface UseSelectStateOptions { /** * 受控模式:当前值 */ value?: T | null; /** * 非受控模式:默认值 */ defaultValue?: T; /** * 值变化回调 */ onChange?: (value: T | null, option: SelectOption | null) => void; /** * 模式(用于类型区分) */ mode: 'single'; } /** * useMultipleSelectState Hook 的配置选项(多选) * @template T 值的类型 */ export interface UseMultipleSelectStateOptions { /** * 受控模式:当前值数组 */ value?: T[]; /** * 非受控模式:默认值数组 */ defaultValue?: T[]; /** * 值变化回调 */ onChange?: (value: T[], options: SelectOption[]) => void; /** * 模式(用于类型区分) */ mode: 'multiple'; } /** * 基础 Select Props(公共属性) * @template T 值的类型 */ export interface BaseSelectProps { /** * 选项列表(必填) */ options: SelectOption[]; /** * 占位符文本 * @default '请选择' */ placeholder?: string; /** * 是否显示搜索框 * @default false */ showSearch?: boolean; /** * 是否显示清空按钮 * @default false */ allowClear?: boolean; /** * 是否禁用 * @default false */ disabled?: boolean; /** * 是否只读 * @default false */ readOnly?: boolean; /** * 尺寸 * @default 'middle' */ size?: 'small' | 'middle' | 'large'; /** * 自定义类名 */ className?: string; /** * 自定义样式 */ style?: React.CSSProperties; /** * 标签文本 */ label?: string; /** * 辅助提示文本 */ helperText?: string; /** * 是否必填 * @default false */ required?: boolean; /** * 是否显示错误状态 * @default false */ error?: boolean; /** * 错误提示文本 */ errorText?: string; /** * 是否启用过滤 * @default false */ filterable?: boolean; /** * 自定义过滤函数 */ filterOption?: FilterOptionFunc; /** * 是否启用排序 * @default false */ sortable?: boolean; /** * 排序方向 */ sortDirection?: SortDirection; /** * 搜索输入回调 */ onSearch?: (value: string) => void; /** * 获得焦点回调 */ onFocus?: (event: React.FocusEvent) => void; /** * 失去焦点回调 */ onBlur?: (event: React.FocusEvent) => void; /** * 下拉框显隐回调 */ onDropdownVisibleChange?: (visible: boolean) => void; }