fat-design 0.0.1-beta.20250505154859

package/types/breadcrumb/index.d.ts

@@ -0,0 +1,60 @@
+/// <reference types="react" />
+
+import * as React from 'react';
+import { PopupProps } from '../overlay';
+
+export interface ItemProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * 面包屑节点链接，如果设置这个属性，则该节点为`<a />` ，否则是`<span />`
+     */
+    link?: string;
+    onClick?: React.MouseEventHandler<HTMLLIElement>;
+}
+
+export class Item extends React.Component<ItemProps, any> {}
+export interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * 样式类名的品牌前缀
+     */
+    prefix?: string;
+
+    /**
+     * 面包屑子节点，需传入 Breadcrumb.Item
+     */
+    children?: any;
+
+    /**
+     * 面包屑最多显示个数，超出部分会被隐藏
+     */
+    maxNode?: number | 'auto';
+
+    /**
+     * 分隔符，可以是文本或 Icon
+     */
+    separator?: string | React.ReactNode;
+
+    /**
+     * 设置标签类型
+     */
+    component?: string | (() => void);
+    /**
+     * 当超过的项被隐藏时，是否可通过点击省略号展示菜单（包含被隐藏的项）
+     */
+    showHiddenItems?: boolean;
+    /**
+     * 弹层挂载的容器节点（在showHiddenItems为true时才有意义）
+     */
+    popupContainer?: any;
+    /**
+     * 是否跟随trigger滚动（在showHiddenItems为true时才有意义）
+     */
+    followTrigger?: boolean;
+    /**
+     * 添加到弹层上的属性（在showHiddenItems为true时才有意义）
+     */
+    popupProps?: PopupProps;
+}
+
+export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
+    static Item: typeof Item;
+}

package/types/button/index.d.ts

@@ -0,0 +1,179 @@
+/// <reference types="react" />
+
+import * as React from 'react';
+import CommonProps from '../util';
+
+export interface GroupProps extends React.HTMLAttributes<HTMLElement>, CommonProps {
+    /**
+     * 统一设置 Button 组件的按钮大小
+     */
+    size?: string;
+}
+
+export class Group extends React.Component<GroupProps, any> {}
+interface HTMLAttributesWeak extends React.ButtonHTMLAttributes<HTMLElement> {
+    type?: any;
+    onClick?: any;
+}
+
+export interface ButtonProps extends HTMLAttributesWeak, CommonProps {
+    children?: React.ReactNode;
+
+    /**
+     * 按钮的类型
+     */
+    type?: 'primary' | 'secondary' | 'normal';
+
+    /**
+     * 按钮的尺寸
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * 按钮中 Icon 的尺寸，用于替代 Icon 的默认大小
+     */
+    icons?: { loading?: React.ReactNode };
+    /**
+     * 按钮中 Icon 的尺寸，用于替代 Icon 的默认大小
+     */
+    iconSize?: number | 'xxs' | 'xs' | 'small' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl' | 'inherit';
+
+    /**
+     * 当 component = 'button' 时，设置 button 标签的 type 值
+     */
+    htmlType?: 'submit' | 'reset' | 'button';
+
+    /**
+     * 设置标签类型
+     * TODO: 这里的 ReactNode 是错的，但是为了向前兼容而保留，下个大版本应该去掉
+     */
+    component?: 'button' | 'a' | React.ReactNode | React.ComponentType<any>;
+
+    /**
+     * 设置按钮的载入状态
+     */
+    loading?: boolean;
+
+    /**
+     * 是否为幽灵按钮
+     */
+    ghost?: true | false | 'light' | 'dark';
+
+    /**
+     * 是否为文本按钮
+     */
+    text?: boolean;
+
+    /**
+     * 是否为警告按钮
+     */
+    warning?: boolean;
+
+    /**
+     * 是否禁用
+     */
+    disabled?: boolean;
+
+    /**
+     * 点击按钮的回调
+     */
+    onClick?: React.MouseEventHandler;
+
+    /**
+     * 在Button组件使用component属性值为a时有效，代表链接页面的URL
+     */
+    href?: string;
+
+    /**
+     * 在Button组件使用component属性值为a时有效，代表何处打开链接文档
+     */
+    target?: string;
+
+    /**
+     * 在Button组件使用component属性值为 React Router Link 时有效，代表链接页面的路径
+     */
+    to?: string;
+}
+
+
+/**
+ * 保存按钮。按钮会监听Ctrl+S键盘事件。
+ */
+export interface SaveButtonProps extends ButtonProps {
+    /**
+     * 操作按钮额外携带的参数
+     */
+    actionParams?: any;
+
+    /**
+     * 是否显示保存中...Message。默认值：‘保存中...’
+     */
+    loadingMessage?: string | boolean;
+
+    /**
+     *  是否显示成功提示文案
+     */
+    successMessage?: string | boolean;
+
+}
+
+
+declare function SaveButton(props: SaveButtonProps): React.JSX.Element;
+
+
+export type IDoubleConfirmConfigType = 'dialog' | 'balloon'
+
+export interface IDoubleConfirmConfig {
+    type?: IDoubleConfirmConfigType; // dialog(默认), balloon,
+    title?: any;
+    content?: any;
+}
+
+
+/**
+ * 普通操作按钮，可以带二次确认.
+ */
+export interface ActionButtonProps extends ButtonProps {
+
+    /**
+     * 操作按钮额外携带的参数
+     */
+    actionParams?: any;
+
+    /**
+     * 是否显示操作中...Message
+     */
+    loadingMessage?: string | boolean;
+
+    /**
+     *  是否显示成功提示文案
+     */
+    successMessage?: string | boolean;
+
+
+    /**
+     * 是否显示二次确认对话框
+     */
+    doubleConfirm?: boolean;
+
+    /**
+     * 二次确认对话框的属性
+     */
+    doubleConfirmConfig?: IDoubleConfirmConfig;
+}
+
+
+declare function ActionButton(props: ActionButtonProps): React.JSX.Element;
+
+
+
+
+
+
+export default class Button extends React.Component<ButtonProps, any> {
+    static Group: typeof Group;
+    static SaveButton: typeof SaveButton;
+    static ActionButton: typeof ActionButton;
+}
+
+
+

package/types/calendar/index.d.ts

@@ -0,0 +1,76 @@
+/// <reference types="react" />
+
+import * as React from 'react';
+import CommonProps from '../util';
+import { Dayjs, ConfigType } from 'dayjs';
+
+interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement> {
+    defaultValue?: any;
+    onSelect?: any;
+    onChange?: any;
+}
+
+export interface CalendarProps extends HTMLAttributesWeak, CommonProps {
+    name?: string;
+    /**
+     * 默认选中的日期（dayjs 对象）
+     */
+    defaultValue?: ConfigType;
+
+    /**
+     * 选中的日期值 (dayjs 对象)
+     */
+    value?: ConfigType;
+
+    /**
+     * 面板默认显示的日期
+     */
+    defaultPanelValue?: ConfigType;
+
+    /**
+     * 展现形态
+     */
+    shape?: 'card' | 'fullscreen' | 'panel';
+
+    /**
+     * 选择日期单元格时的回调
+     */
+    onSelect?: (value: Dayjs, strVal: string) => void;
+
+    /**
+     * 值改变时的回调
+     */
+    onChange?: (value: Dayjs, strVal: string) => void;
+
+    /**
+     * 日期面板变化回调
+     */
+    onPanelChange?: (value: Dayjs, mode: string) => void;
+
+    /**
+     * 自定义样式类
+     */
+    className?: string;
+
+    /**
+     * 自定义日期渲染
+     */
+    dateCellRender?: (value: Dayjs) => React.ReactNode;
+
+    /**
+     * 自定义月份渲染函数
+     */
+    monthCellRender?: (value: Dayjs) => React.ReactNode;
+
+    /**
+     * 自定义年份渲染函数
+     */
+    yearCellRender?: (value: Dayjs) => React.ReactNode;
+
+    /**
+     * 不可选择的日期
+     */
+    disabledDate?: (value: Dayjs, mode: string) => boolean;
+}
+
+export default class Calendar extends React.Component<CalendarProps, any> {}

package/types/card/index.d.ts

@@ -0,0 +1,147 @@
+/// <reference types="react" />
+
+import * as React from 'react';
+import CommonProps from '../util';
+
+interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement> {
+    title?: any;
+}
+
+export interface CardProps extends HTMLAttributesWeak, CommonProps {
+    /**
+     * 卡片的上的图片 / 视频
+     */
+    media?: React.ReactNode;
+
+    /**
+     * 卡片的标题
+     */
+    title?: React.ReactNode;
+
+    /**
+     * 卡片的副标题
+     */
+    subTitle?: React.ReactNode;
+
+    /**
+     * 卡片操作组，位置在卡片底部
+     */
+    actions?: React.ReactNode;
+
+    /**
+     * 是否显示标题的项目符号
+     */
+    showTitleBullet?: boolean;
+
+    /**
+     * 是否展示头部的分隔线
+     */
+    showHeadDivider?: boolean;
+
+    /**
+     * 内容区域的固定高度
+     */
+    contentHeight?: string | number;
+
+    /**
+     * 标题区域的用户自定义内容
+     */
+    extra?: React.ReactNode;
+
+    /**
+     * 是否开启自由模式，开启后card 将使用子组件配合使用, 设置此项后 title, subtitle, 等等属性都将失效
+     */
+    free?: boolean;
+    hasBorder?: boolean;
+}
+
+export interface CardBulletHeaderProps extends HTMLAttributesWeak, CommonProps {
+    /**
+     * 卡片的标题
+     */
+    title?: React.ReactNode;
+
+    /**
+     * 卡片的副标题
+     */
+    subTitle?: React.ReactNode;
+    /**
+     * 是否显示标题的项目符号
+     */
+    showTitleBullet?: boolean;
+    /**
+     * 标题区域的用户自定义内容
+     */
+    extra?: React.ReactNode;
+}
+
+export interface CardCollaspeContentProps extends HTMLAttributesWeak, CommonProps {
+    contentHeight?: string | number;
+}
+export interface CardCollapseContentProps extends HTMLAttributesWeak, CommonProps {
+    contentHeight?: string | number;
+}
+
+export interface CardHeaderProps extends HTMLAttributesWeak, CommonProps {
+    /**
+     * 卡片的标题
+     */
+    title?: React.ReactNode;
+
+    /**
+     * 卡片的副标题
+     */
+    subTitle?: React.ReactNode;
+
+    /**
+     * 标题区域的用户自定义内容
+     */
+    extra?: React.ReactNode;
+
+    /**
+     * 设置标签类型
+     */
+    component?: React.ElementType;
+}
+
+export interface CardContentProps extends HTMLAttributesWeak, CommonProps {
+    /**
+     * 设置标签类型
+     */
+    component?: React.ElementType;
+}
+
+export interface CardMediaProps extends HTMLAttributesWeak, CommonProps {
+    /**
+     * 设置标签类型
+     */
+    component?: React.ElementType;
+    /**
+     * 背景图片地址
+     */
+    image?: string;
+    /**
+     * 媒体源文件地址
+     */
+    src?: string;
+}
+
+export interface CardActionsProps extends HTMLAttributesWeak, CommonProps {}
+
+export interface CardDividerProps extends HTMLAttributesWeak, CommonProps {
+    /**
+     * 分割线是否向内缩进
+     */
+    inset?: boolean;
+}
+
+export default class Card extends React.Component<CardProps, any> {
+    static BulletHeader: React.ComponentType<CardBulletHeaderProps>;
+    static CollaspeContent: React.ComponentType<CardCollaspeContentProps>;
+    static CollapseContent: React.ComponentType<CardCollapseContentProps>;
+    static Header: React.ComponentType<CardHeaderProps>;
+    static Content: React.ComponentType<CardContentProps>;
+    static Media: React.ComponentType<CardMediaProps>;
+    static Actions: React.ComponentType<CardActionsProps>;
+    static Divider: React.ComponentType<CardDividerProps>;
+}

package/types/cascader/index.d.ts

@@ -0,0 +1,135 @@
+/// <reference types="react" />
+
+import * as React from 'react';
+import CommonProps from '../util';
+
+interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement> {
+    defaultValue?: any;
+    onChange?: any;
+}
+
+export type CascaderDataItem = {
+    value?: string;
+    label?: string;
+    disabled?: boolean;
+    checkboxDisabled?: boolean;
+    children?: Array<CascaderDataItem>;
+    [propName: string]: any;
+};
+
+export type CascaderOnChangeExtra = {
+    /**
+     * 单选时选中的数据的路径
+     */
+    selectedPath?: Array<CascaderDataItem>;
+    /**
+     * 多选时当前的操作是选中还是取消选中
+     */
+    checked?: boolean;
+    /**
+     * 多选时当前操作的数据
+     */
+    currentData?: any;
+    /**
+     * 多选时所有被选中的数据
+     */
+    checkedData?: Array<CascaderDataItem>;
+    /**
+     * 多选时半选的数据
+     */
+    indeterminateData?: Array<CascaderDataItem>;
+};
+
+export interface CascaderProps extends HTMLAttributesWeak, CommonProps {
+    /**
+     * 数据源，结构可参考下方说明
+     */
+    dataSource?: Array<CascaderDataItem>;
+
+    /**
+     * （非受控）默认值
+     */
+    defaultValue?: string | Array<string>;
+
+    /**
+     * （受控）当前值
+     */
+    value?: string | Array<string>;
+
+    /**
+     * 选中值改变时触发的回调函数
+     */
+    onChange?: (value: string | Array<string>, data: CascaderDataItem | Array<CascaderDataItem>, extra: CascaderOnChangeExtra) => void;
+
+    /**
+     * （非受控）默认展开值，如果不设置，组件内部会根据 defaultValue/value 进行自动设置
+     */
+    defaultExpandedValue?: Array<string>;
+
+    /**
+     * （受控）当前展开值
+     */
+    expandedValue?: Array<string>;
+
+    /**
+     * 展开触发的方式
+     */
+    expandTriggerType?: 'click' | 'hover';
+
+    /**
+     * 展开时触发的回调函数
+     */
+    onExpand?: (expandedValue: Array<string>) => void;
+
+    /**
+     * 是否开启虚拟滚动
+     */
+    useVirtual?: boolean;
+
+    /**
+     * 是否多选
+     */
+    multiple?: boolean;
+
+    /**
+     * 单选时是否只能选中叶子节点
+     */
+    canOnlySelectLeaf?: boolean;
+
+    /**
+     * 多选时是否只能选中叶子节点
+     */
+    canOnlyCheckLeaf?: boolean;
+
+    /**
+     * 父子节点是否选中不关联
+     */
+    checkStrictly?: boolean;
+
+    /**
+     * 每列列表样式对象
+     */
+    listStyle?: React.CSSProperties;
+
+    /**
+     * 每列列表类名
+     */
+    listClassName?: string;
+
+    /**
+     * 每列列表项渲染函数
+     */
+    itemRender?: (data: CascaderDataItem) => React.ReactNode;
+
+    /**
+     * 异步加载数据函数，source是原始对象
+     */
+    loadData?: (data: CascaderDataItem, source: CascaderDataItem) => void;
+
+    /**
+     * 是否是不可变数据
+     */
+    immutable?: boolean;
+}
+
+export default class Cascader extends React.Component<CascaderProps, any> {}