fat-design 0.0.1-beta.20250505154859

package/types/time-picker/index.d.ts

@@ -0,0 +1,193 @@
+/// <reference types="react" />
+
+import * as React from 'react';
+import CommonProps from '../util';
+import { PopupProps } from '../overlay';
+import { InputProps } from '../input';
+import { ButtonProps } from '../button';
+import { Dayjs, ConfigType } from 'dayjs';
+
+interface IPresetType {
+    label?: string;
+    value?: ConfigType | (() => ConfigType);
+}
+interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement> {
+    defaultValue?: any;
+    onChange?: any;
+}
+
+export interface DatePreset extends ButtonProps {
+    label: string;
+    // 时间值（dayjs 对象或时间字符串）或者返回时间值的函数
+    value: any;
+}
+
+export interface RangePreset {
+    [propName: string]: (Dayjs)[];
+}
+
+export interface TimePickerProps extends HTMLAttributesWeak, CommonProps {
+    /**
+     * 按钮的文案
+     */
+    label?: React.ReactNode;
+    name?: string;
+
+    /**
+     * 输入框状态
+     */
+    state?: 'error' | 'success';
+
+    /**
+     * 输入框提示
+     */
+    placeholder?: string;
+
+    /**
+     * 时间值（dayjs 对象或时间字符串，受控状态使用）
+     */
+    value?: ConfigType;
+
+    /**
+     * 时间初值（dayjs 对象或时间字符串，非受控状态使用）
+     */
+    defaultValue?: ConfigType;
+
+    /**
+     * 时间选择框的尺寸
+     */
+    size?: 'small' | 'medium' | 'large';
+
+    /**
+     * 是否允许清空时间
+     */
+    hasClear?: boolean;
+
+    /**
+     * 时间的格式
+     * https://dayjs.gitee.io/docs/zh-CN/display/format
+     */
+    format?: string;
+
+    /**
+     * 小时选项步长
+     */
+    hourStep?: number;
+
+    /**
+     * 分钟选项步长
+     */
+    minuteStep?: number;
+
+    /**
+     * 秒钟选项步长
+     */
+    secondStep?: number;
+
+    /**
+     * 禁用小时函数
+     */
+    disabledHours?: (index: number) => boolean;
+
+    /**
+     * 禁用分钟函数
+     */
+    disabledMinutes?: (index: number) => boolean;
+
+    /**
+     * 禁用秒钟函数
+     */
+    disabledSeconds?: (index: number) => boolean;
+
+    /**
+     * 弹层是否显示（受控）
+     */
+    visible?: boolean;
+
+    /**
+     * 弹层默认是否显示（非受控）
+     */
+    defaultVisible?: boolean;
+
+    /**
+     * 弹层容器
+     */
+    popupContainer?: string | HTMLElement | ((target: HTMLElement) => HTMLElement);
+
+    /**
+     * 弹层对齐方式, 详情见Overlay 文档
+     */
+    popupAlign?: string;
+
+    /**
+     * 弹层触发方式
+     */
+    popupTriggerType?: 'click' | 'hover';
+
+    /**
+     * 弹层展示状态变化时的回调
+     */
+    onVisibleChange?: (visible: boolean, reason: string) => void;
+
+    /**
+     * 弹层自定义样式
+     */
+    popupStyle?: React.CSSProperties;
+
+    /**
+     * 弹层自定义样式类
+     */
+    popupClassName?: string;
+
+    /**
+     * 弹层属性
+     */
+    popupProps?: PopupProps;
+
+    /**
+     * 是否禁用
+     */
+    disabled?: boolean;
+
+    /**
+     * 输入框是否有边框
+     */
+    hasBorder?: boolean;
+
+    /**
+     * 透传给 Input 的属性
+     */
+    inputProps?: InputProps;
+
+    /**
+     * 预设值，会显示在时间面板下面
+     */
+    ranges?: RangePreset | DatePreset[];
+
+    /**
+     * 时间值改变时的回调
+     */
+    onChange?: (date: Dayjs, dateString: string) => void;
+}
+
+export interface RangePickerProps
+    extends Omit<
+        TimePickerProps,
+        'value' | 'placeholder' | 'defaultValue' | 'onOk' | 'disabled' | 'onChange' | 'preset'
+    > {
+    value?: Array<ConfigType>;
+    defaultValue?: Array<ConfigType>;
+    onOk?: (value: Array<Dayjs>, strVal: Array<string>) => void;
+    onChange?: (value: Array<Dayjs>, strVal: Array<string>) => void;
+    placeholder?: string | Array<string>;
+    disabled?: boolean | boolean[];
+    preset?: IPresetType | IPresetType[];
+}
+
+export class RangePicker extends React.Component<RangePickerProps, any> {
+    type: 'range';
+}
+
+export default class TimePicker extends React.Component<TimePickerProps, any> {
+    static RangePicker: typeof RangePicker;
+}

package/types/timeline/index.d.ts

@@ -0,0 +1,95 @@
+/// <reference types="react" />
+
+import * as React from 'react';
+import CommonProps from '../util';
+
+interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement> {
+    title?: any;
+}
+
+export interface ItemProps extends Omit<HTMLAttributesWeak, 'content'>, CommonProps {
+    /**
+     * 节点状态
+     */
+    state?: 'done' | 'process' | 'error' | 'success';
+
+    /**
+     * 图标
+     */
+    icon?: string;
+
+    /**
+     * 自定义时间轴节点
+     */
+    dot?: React.ReactNode;
+
+    /**
+     * 格式化后的时间
+     */
+    time?: React.ReactNode;
+
+    /**
+     * 标题
+     */
+    title?: React.ReactNode;
+
+    /**
+     * 左侧时间
+     */
+    timeLeft?: React.ReactNode;
+
+    /**
+     * 右侧内容
+     */
+    content?: React.ReactNode;
+
+    /**
+     * 动画
+     */
+    animation?: boolean;
+    mode?: 'left' | 'alternate';
+}
+
+export class Item extends React.Component<ItemProps, any> {}
+
+type foldItem = {
+    /**
+     * [startIndex, endIndex] or [startIndex] 到最后一个节点
+     */
+    foldArea?: Array<number>;
+    foldShow?: boolean;
+};
+
+export interface TimelineProps extends React.HTMLAttributes<HTMLElement>, CommonProps {
+    /**
+     * 样式的品牌前缀
+     */
+    prefix?: string;
+
+    /**
+     * 自定义折叠选项 示例`[{foldArea: [startIndex, endIndex], foldShow: boolean}]`
+     */
+    fold?: Array<foldItem>;
+
+    /**
+     * 自定义类名
+     */
+    className?: string;
+
+    /**
+     * 动画
+     */
+    animation?: boolean;
+
+    /**
+     * 展示的模式，left 为左，alternate 为交替显示
+     * @en show mode
+     * @defaultValue 'left'
+     * @version 1.23.18
+     */
+    mode?: 'left' | 'alternate';
+}
+
+export default class Timeline extends React.Component<TimelineProps, any> {
+    static Item: typeof Item;
+}

package/types/transfer/index.d.ts

@@ -0,0 +1,199 @@
+/// <reference types="react" />
+
+import * as React from 'react';
+import CommonProps from '../util';
+
+interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement> {
+    defaultValue?: any;
+    onChange?: any;
+}
+
+
+/**
+ * @api TransferDataItem
+ */
+export type TransferDataItem = {
+    label: string | React.ReactNode;
+    value: string;
+    title?: string;
+    disabled?: boolean;
+    children?: TransferDataItem[];
+    [key: string]: unknown;
+};
+/**
+ * @api PositionType
+ */
+export type PositionType = 'left' | 'right';
+
+/**
+ * @api ExtraOptions
+ */
+export type ExtraOptions = {
+    /**
+     * 移动的方向，值为'left'或'right'
+     * @en Move direction, 'left' or 'right'
+     */
+    direction: PositionType;
+    /**
+     * 左面板值
+     * @en Data of left panel
+     */
+    leftValue: string[];
+    /**
+     * 左面板数据
+     * @en Data of left panel
+     */
+    leftData: TransferDataItem[];
+    /**
+     * 发生移动的数据
+     * @en Moved data
+     */
+    movedData: TransferDataItem[];
+    /**
+     * 发生移动的值
+     * @en Moved value
+     */
+    movedValue: string[];
+};
+
+export interface TransferProps extends HTMLAttributesWeak, CommonProps {
+    /**
+     * 移动选项模式
+     */
+    mode?: 'normal' | 'simple';
+
+    /**
+     * 数据源
+     */
+    dataSource?: Array<any>;
+
+    /**
+     * （用于受控）当前值
+     */
+    value?: Array<any>;
+
+    /**
+     * （用于非受控）初始值
+     */
+    defaultValue?: Array<any>;
+
+    /**
+     * 值发生改变的时候触发的回调函数
+     */
+    onChange?: (value: Array<any>, data: Array<any>, extra: ExtraOptions) => void;
+
+    /**
+     * 是否禁用
+     */
+    disabled?: boolean;
+
+    /**
+     * 是否禁用左侧面板
+     */
+    leftDisabled?: boolean;
+
+    /**
+     * 是否禁用右侧面板
+     */
+    rightDisabled?: boolean;
+
+    /**
+     * 列表项渲染函数
+     */
+    itemRender?: (data: any) => React.ReactNode;
+
+    /**
+     * 左右面板是否显示搜索框
+     */
+    showSearch?: boolean | boolean[];
+
+    /**
+     * 左右面板搜索框配置
+     */
+    searchProps?: Record<string, any> | Record<string, any>[];
+
+    /**
+     * 自定义搜索函数
+     */
+    filter?: (searchedValue: string, data: any) => boolean;
+
+    /**
+     * 搜索框输入时触发的回调函数
+     */
+    onSearch?: (searchedValue: string, position: string) => void;
+
+    /**
+     * 是否开启虚拟滚动
+     */
+    useVirtual?: boolean;
+
+    /**
+     * 搜索框占位符
+     */
+    searchPlaceholder?: string;
+
+    /**
+     * 列表为空显示内容
+     */
+    notFoundContent?: React.ReactNode | React.ReactNode[];
+
+    /**
+     * 左右面板标题
+     */
+    titles?: Array<any>;
+
+    /**
+     * 向右向左移动按钮显示内容
+     */
+    operations?: Array<any>;
+
+    /**
+     * 左面板默认选中值
+     */
+    defaultLeftChecked?: Array<any>;
+
+    /**
+     * 右面板默认选中值
+     */
+    defaultRightChecked?: Array<any>;
+
+    /**
+     * 左右面板列表自定义样式类名
+     */
+    listClassName?: string;
+
+    /**
+     * 左右面板列表自定义样式对象
+     */
+    listStyle?: React.CSSProperties;
+
+    /**
+     * 是否允许拖拽排序
+     */
+    sortable?: boolean;
+
+    /**
+     * 拖拽排序时触发的回调函数
+     */
+    onSort?: (value: Array<any>, position: string) => void;
+
+    /**
+     * 请设置 id 以保证transfer的可访问性
+     */
+    id?: string;
+
+    /**
+     * 是否显示底部全选 checkbox
+     * @en Whether show footer's check-all checkbox
+     * @defaultValue true
+     */
+    showCheckAll?: boolean;
+
+    /**
+     * 接收 children 自定义渲染列表
+     * @en Customer panel
+     */
+    children?: (props: TransferPanelProps) => React.ReactNode;
+}
+
+export default class Transfer extends React.Component<TransferProps, any> {}