@ray-js/smart-ui
Version:
轻量、可靠的智能小程序 UI 组件库
152 lines (151 loc) • 3.11 kB
TypeScript
/// <reference types="react" />
import { SmartComponent, SmartEventHandler } from '../base';
export interface CascaderOption {
/**
* 选项文字
*/
text: string;
/**
* 选项对应的值
*/
value: string | number;
/**
* 选项文字颜色
*/
color?: string;
/**
* 子选项列表
*/
options?: CascaderOption[];
/**
* 是否禁用
*/
disabled?: boolean;
/**
* 为对应列添加额外的 class
*/
className?: string;
}
export interface SmartCascaderProps {
/**
* 顶部标题
*/
title?: string;
/**
* 选中项的值
*/
value?: string | number;
/**
* 可选项数据源
*
* @default []
*/
options?: CascaderOption[];
/**
* placeholder 提示
*
* @default 'Please select'
*/
placeholder?: string;
/**
* 选中状态的高亮颜色
*
* @default '#1989fa'
*/
activeColor?: string | number;
/**
* 是否开启手势左右滑动切换
*
* @default false
*/
swipeable?: boolean;
/**
* 是否显示关闭图标
*
* @default true
*/
closeable?: boolean;
/**
* 是否展示标题栏
*
* @default true
*/
showHeader?: boolean;
/**
* 关闭图标名称或图片链接,等同于 Icon 组件的 name 属性
*
* @default 'cross'
*/
closeIcon?: string;
/**
* 是否使用自定义标题的插槽
*
* @default false
*/
useTitleSlot?: boolean;
/**
* 是否省略过长的标题文字
*
* @default true
*/
ellipsis?: boolean;
/**
* 滚动阈值,标签数量超过阈值且总宽度超过标签栏宽度时开始横向滚动
*
* @default 5
*/
swipeThreshold?: number;
}
export interface SmartCascaderData {
/**
* 当前操作选中的值
*
*/
value: string | number;
/**
* 当前选中的所有值
*/
selectedOptions: CascaderOption[];
/**
* 当前选中标签的下标数值
*/
tabIndex: number;
}
export interface SmartCascaderTabData {
/**
* 当前点击标签的文字
*
*/
title: string | number;
/**
* 当前点击标签的下标数值
*/
tabIndex: number;
}
export interface SmartCascaderEvents {
/**
* 点击单元格时触发
*/
onChange?: SmartEventHandler<SmartCascaderData>;
/**
* 全部选项选择完成后触发
*/
onFinish?: SmartEventHandler<SmartCascaderData>;
/**
* 点击关闭图标时触发
*/
onClose?: SmartEventHandler<null>;
/**
* 点击标签时触发
*/
onClickTab?: SmartEventHandler<SmartCascaderTabData>;
}
export interface SmartCascaderSlot {
slot?: {
/**
* 自定义标题,当 useTitleSlot 属性为 true 时生效
*/
title?: React.ReactNode;
};
}
export type SmartCascader = SmartComponent<SmartCascaderProps, SmartCascaderEvents, SmartCascaderSlot>;