///
//#region src/pro/Selector/types.d.ts
interface ExprRule {
[key: string]: any;
}
interface RuleConfig {
autoValidate?: boolean;
required?: 0 | 1;
min?: number;
max?: number;
minTypes?: number;
maxTypes?: number;
mutex?: Array>;
customValidator?: (value: SelectionValue) => Promise;
}
interface GroupItem {
id?: number;
title?: string;
mode?: 'single' | 'multiple';
valueType?: 'primitive' | 'object';
preserve?: boolean;
fieldNames?: {
label?: string;
value?: string;
cover?: string;
};
ruleConfig?: RuleConfig;
dataSource?: OptionItem[];
[key: string]: any;
}
interface OptionItem {
id?: number;
title?: string;
label?: string;
value?: OptionKey;
cover?: string;
groups?: GroupItem[];
disabled?: boolean;
ruleConfig?: {
min?: number;
max?: number;
};
[key: string]: any;
}
type OptionKey = number | string;
/** 复杂对象值类型:包含id、数量等额外信息 */
interface SelectionValueObject {
value?: T;
quantity?: number;
[key: string]: any;
}
/** 单选值类型 */
type SelectionValueSingle = T | SelectionValueObject;
/** 多选值类型 */
type SelectionValueMultiple = T[] | SelectionValueObject[];
/** 选择器值类型 */
type SelectionValue = SelectionValueSingle | SelectionValueMultiple;
type RenderItemProps = {
dataSource: OptionItem; /** 组合后的最终禁用态:Selector 组禁用或当前选项禁用。 */
disabled?: boolean;
actions: any;
optionItemValue?: any;
indicator: React.ReactNode;
numberSelector: React.ReactNode;
values: any;
quantityInfo: {
maxReached: boolean;
remainingCount: number;
selectedCount: number;
selectedTypeCount: number;
typeMaxReached: boolean;
remainingTypeCount: number;
};
};
type ItemProps = {
layout?: 'vertical' | 'horizontal';
renderContent?: (props: {
dataSource: OptionItem;
}) => React.ReactNode;
styles?: {
[key: string]: React.CSSProperties;
};
[key: string]: any;
};
type LayoutType = 'antdGrid' | 'custom';
/** 单个断点的完整配置 */
type BreakpointConfig = {
columns: number;
gap?: number | string;
style?: React.CSSProperties;
};
/**
* 断点映射
* key: 最小宽度(px)
* value: 列数(简写)或完整配置
* @example { 0: 1, 420: 2, 630: 3 } // 简写
* @example { 0: { columns: 1, gap: 12 }, 420: { columns: 2, gap: 16 } } // 完整
*/
type BreakpointMap = Record;
/** 响应式布局配置 */
type ResponsiveConfig = {
/** 每项最小宽度,系统自动计算断点 */minWidth?: number; /** 最大列数限制 */
maxColumns?: number;
/**
* 显式断点映射,key 为容器最小宽度(px)
* @example { 0: 1, 420: 2, 630: 3, 841: 4, 1367: 5 }
* @example { 0: { columns: 1, gap: 12 }, 420: { columns: 2, gap: 16 } }
*/
breakpoints?: BreakpointMap; /** 默认列数(容器宽度小于所有断点时),默认为 1 */
defaultColumns?: number; /** 间距,默认为 16 */
gap?: number | string; /** ResizeObserver 防抖延迟(ms),默认为 0 */
debounce?: number;
};
type LayoutConfig = {
type?: LayoutType;
className?: string;
containerStyle?: React.CSSProperties;
/**
* 响应式布局配置
* 存在此配置时自动启用 ResizeObserver 响应式布局
*/
responsive?: ResponsiveConfig;
columns?: number;
gutter?: number | object | Array;
align?: 'top' | 'middle' | 'bottom' | 'stretch';
justify?: 'start' | 'end' | 'center' | 'space-between' | 'space-around';
wrap?: boolean;
colConfig?: {
[key: string]: any;
};
};
interface PresetConfig {
variant?: '1' | '2' | '3' | '4' | '5';
}
type ItemLayout = 'vertical' | 'horizontal';
type SelectorVariant = 'default' | 'select' | 'card' | 'media';
type HeaderProps = {
className?: string;
visible?: boolean;
style?: React.CSSProperties;
title?: {
visible?: boolean;
text?: React.ReactNode;
style?: React.CSSProperties;
};
icon?: {
visible?: boolean;
icon?: React.ReactNode;
style?: React.CSSProperties;
};
tip?: {
visible?: boolean;
text?: React.ReactNode;
style?: React.CSSProperties;
};
requiredTag?: {
visible?: boolean;
};
renderExtra?: (props: {
dataSource: OptionItem;
values: SelectionValue;
}) => React.ReactNode;
renderHeader?: (props: {
defaults: {
title: React.ReactNode;
requiredTag: React.ReactNode;
hint: React.ReactNode;
aggregate: React.ReactNode;
};
}) => React.ReactNode;
};
interface SelectorProps extends GroupItem {
className?: string;
theme?: {
token?: {
colorPrimary?: string;
};
};
value?: SelectionValue;
defaultValue?: SelectionValue;
onChange?: (value: SelectionValue) => void;
onClear?: () => void;
disabled?: boolean;
/** 单选模式下再次点击已选项是否允许清空,默认保持 true。 */
allowDeselect?: boolean;
variant?: SelectorVariant;
itemLayout?: ItemLayout;
preset?: PresetConfig;
layout?: LayoutConfig;
renderItem?: (props: RenderItemProps) => React.ReactNode;
itemProps?: ItemProps;
indicatorProps?: {
show?: boolean;
variant?: 'outlined' | 'filled';
render?: (props: {
option: OptionItem;
selected: boolean;
disabled: boolean;
actions: any;
}) => React.ReactNode;
[key: string]: any;
};
showStepper?: true | false | 'auto';
stepperProps?: {
size?: 'small' | 'middle' | 'large';
shape?: 'round' | 'square';
horizontalPadding?: number | string;
};
style?: React.CSSProperties;
/**
* @deprecated
*/
titleProps?: HeaderProps;
headerProps?: HeaderProps;
selectProps?: any;
}
interface SelectorGroupProps {
allowedValuesPolicy?: 'relaxed' | 'strict';
className?: string;
customScrollParent?: HTMLElement | string;
dataSource: GroupItem[];
defaultValue?: Record;
linkageRules?: ExprRule[] | Record;
theme?: {
token?: {
colorPrimary?: string;
};
};
onChange?: (values: Record) => void;
preserve?: boolean;
tabProps?: {
visible?: boolean;
};
style?: React.CSSProperties;
value?: Record;
scrollToFirstError?: boolean;
[key: string]: any;
}
//#endregion
export { BreakpointConfig, BreakpointMap, ExprRule, GroupItem, HeaderProps, ItemLayout, ItemProps, LayoutConfig, LayoutType, OptionItem, OptionKey, PresetConfig, RenderItemProps, ResponsiveConfig, RuleConfig, SelectionValue, SelectionValueMultiple, SelectionValueObject, SelectionValueSingle, SelectorGroupProps, SelectorProps, SelectorVariant };