fat-design 0.0.1-beta.20250505154859

package/types/tree/index.d.ts

@@ -0,0 +1,421 @@
+/// <reference types="react" />
+
+import * as React from 'react';
+import CommonProps from '../util';
+import { VirtualListProps } from '../virtual-list';
+
+export type NodeInstance = InstanceType<typeof TreeNode>;
+
+export interface BasicDataNode {
+    checkable?: boolean;
+    disabled?: boolean;
+    checkboxDisabled?: boolean;
+    icon?: IconType;
+    isLeaf?: boolean;
+    selectable?: boolean;
+    draggable?: boolean;
+    editable?: boolean;
+
+    className?: string;
+    style?: React.CSSProperties;
+}
+
+export type FieldDataNode<T, ChildFieldName extends string = 'children'> = BasicDataNode &
+    T &
+    Partial<Record<ChildFieldName, FieldDataNode<T, ChildFieldName>[]>>;
+
+export type DataNode = FieldDataNode<{
+    key: Key;
+    label?: React.ReactNode;
+    illegalFlag?: boolean;
+    node?: NodeElement;
+    size?: number;
+    posinset?: number;
+    children?: DataNode[] | NodeElement;
+    pos?: string;
+    level?: number;
+    isLastChild?: boolean[];
+}>;
+
+export type TreeDataNode = FieldDataNode<{
+    key: Key;
+    label?: React.ReactNode;
+}>;
+
+export interface NodeProps extends React.HTMLAttributes<HTMLElement>, CommonProps {
+    /**
+     * 树节点
+     */
+    children?: React.ReactNode;
+
+    /**
+     * 节点文本内容
+     */
+    label?: React.ReactNode;
+
+    /**
+     * 单独设置是否支持选中，覆盖 Tree 的 selectable
+     */
+    selectable?: boolean;
+
+    /**
+     * 单独设置是否出现复选框，覆盖 Tree 的 checkable
+     */
+    checkable?: boolean;
+
+    /**
+     * 单独设置是否支持编辑，覆盖 Tree 的 editable
+     */
+    editable?: boolean;
+
+    /**
+     * 单独设置是否支持拖拽，覆盖 Tree 的 draggable
+     */
+    draggable?: boolean;
+
+    /**
+     * 是否禁止节点响应
+     */
+    disabled?: boolean;
+
+    /**
+     * 是否禁止勾选节点复选框
+     */
+    checkboxDisabled?: boolean;
+
+    /**
+     * 是否是叶子节点，设置loadData时生效
+     */
+    isLeaf?: boolean;
+
+    /**
+     * 点击文本是否可以勾选
+     */
+    clickToCheck?: boolean;
+}
+
+export class Node extends React.Component<NodeProps, any> {}
+interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement> {
+    onSelect?: any;
+}
+
+export interface TreeProps extends HTMLAttributesWeak, CommonProps {
+    /**
+     * 树节点
+     */
+    children?: React.ReactNode;
+
+    /**
+     * 数据源，该属性优先级高于 children
+     */
+    dataSource?: Array<any>;
+
+    /**
+     * 是否显示树的线
+     */
+    showLine?: boolean;
+
+    /**
+     * 是否支持选中节点
+     */
+    selectable?: boolean;
+
+    /**
+     * （用于受控）当前选中节点 key 的数组
+     */
+    selectedKeys?: Array<any>;
+
+    /**
+     * （用于非受控）默认选中节点 key 的数组
+     */
+    defaultSelectedKeys?: Array<any>;
+
+    /**
+     * 选中或取消选中节点时触发的回调函数
+     */
+    onSelect?: (selectedKeys: Array<any>, extra: {}) => void;
+
+    /**
+     * 是否支持多选
+     */
+    multiple?: boolean;
+
+    /**
+     * 是否支持勾选节点的复选框
+     */
+    checkable?: boolean;
+
+    /**
+     * （用于受控）当前勾选复选框节点 key 的数组或 `{checked: Array, indeterminate: Array}` 的对象
+     */
+    checkedKeys?: Array<any> | {};
+
+    /**
+     * （用于非受控）默认勾选复选框节点 key 的数组
+     */
+    defaultCheckedKeys?: Array<any>;
+
+    /**
+     * 勾选节点复选框是否完全受控（父子节点选中状态不再关联）
+     */
+    checkStrictly?: boolean;
+
+    /**
+     * 定义选中时回填的方式
+     */
+    checkedStrategy?: 'all' | 'parent' | 'child';
+
+    /**
+     * 勾选或取消勾选复选框时触发的回调函数
+     */
+    onCheck?: (checkedKeys: Array<any>, extra: {}) => void;
+
+    /**
+     * （用于受控）当前展开的节点 key 的数组
+     */
+    expandedKeys?: Array<any>;
+
+    /**
+     * （用于非受控）默认展开的节点 key 的数组
+     */
+    defaultExpandedKeys?: Array<any>;
+
+    /**
+     * 是否默认展开所有节点
+     */
+    defaultExpandAll?: boolean;
+
+    /**
+     * 是否自动展开父节点
+     */
+    autoExpandParent?: boolean;
+
+    /**
+     * 展开或收起节点时触发的回调函数
+     * @en Callback function when expanded or collapsed a node
+     * @defaultValue () =\> \{\}
+     * @param expandedKeys - 展开节点key的数组 - Array of expanded keys
+     * @param extra - 额外参数 - Extra parameters
+     * @returns 空 - void
+     */
+    onExpand?: (
+        expandedKeys: string[],
+        extra: {
+            node: NodeInstance;
+            expanded: boolean;
+        }
+    ) => void;
+
+    /**
+     * 是否支持编辑节点内容
+     */
+    editable?: boolean;
+
+    /**
+     * 编辑节点内容完成时触发的回调函数
+     */
+    onEditFinish?: (key: string, label: string, node: NodeInstance) => void;
+
+    /**
+     * 是否支持拖拽节点
+     */
+    draggable?: boolean;
+
+
+    /**
+     * 开始拖拽节点时触发的回调函数
+     * @en Callback function when drag start
+     * @defaultValue () =\> \{\}
+     * @param info - 额外参数 - Extra parameters
+     * @returns 空 - void
+     *
+     */
+    onDragStart?: (info: {
+        event: React.MouseEvent;
+        node: NodeInstance;
+        expandedKeys: string[];
+    }) => void;
+
+
+
+    /**
+     * 拖拽节点进入目标节点时触发的回调函数
+     * @en Callback function when drag enter
+     * @defaultValue () =\> \{\}
+     * @param info - 额外参数 - Extra parameters
+     * @returns 空 - void
+     */
+    onDragEnter?: (info: {
+        event: React.MouseEvent;
+        node: NodeInstance;
+        expandedKeys: Array<string>;
+    }) => void;
+
+
+
+    /**
+     * 拖拽节点在目标节点上移动的时候触发的回调函数
+     * @en Callback function when drag over
+     * @defaultValue () =\> \{\}
+     * @param info - 额外参数 - Extra parameters
+     * @returns 空 - void
+     */
+    onDragOver?: (info: { event: React.MouseEvent; node: NodeInstance }) => void;
+
+    /**
+     * 拖拽节点离开目标节点时触发的回调函数
+     * @en Callback function when drag leave
+     * @defaultValue () =\> \{\}
+     * @param info - 额外参数 - Extra parameters
+     * @returns 空 - void
+     */
+    onDragLeave?: (info: { event: React.MouseEvent; node: NodeInstance }) => void;
+
+    /**
+     * 拖拽节点拖拽结束时触发的回调函数
+     * @en Callback function when drag end
+     * @defaultValue () =\> \{\}
+     * @param info - 额外参数 - Extra parameters
+     * @returns 空 - void
+     */
+    onDragEnd?: (info: { event: React.MouseEvent; node: NodeInstance }) => void;
+    /**
+     * 拖拽节点放入目标节点内或前后触发的回调函数
+     * @en Callback function when drop
+     * @defaultValue () =\> \{\}
+     * @param info - 额外参数 - Extra parameters
+     * @returns 空 - void
+     */
+    onDrop?: (info: {
+        event: React.MouseEvent;
+        node: NodeInstance;
+        dragNode: NodeInstance;
+        dragNodesKeys: Array<string>;
+        dropPosition: number;
+    }) => void;
+
+    /**
+     * 节点是否可被作为拖拽的目标节点
+     * @en Whether the node can be a target node for drag
+     * @defaultValue () =\> \{\}
+     * @param info - 额外参数 - Extra parameters
+     * @returns 是否可以被当作目标节点 - Whether can be a target node
+     */
+    canDrop?: (info: {
+        event?: React.MouseEvent;
+        node: NodeInstance;
+        dragNode: NodeInstance;
+        dragNodesKeys: Array<string>;
+        dropPosition: number;
+    }) => boolean;
+
+    /**
+     * 异步加载数据的函数
+     * @en Asynchronous load data function
+     * @param node - 被点击展开的节点 - Node instance
+     */
+    loadData?: (node: NodeInstance) => Promise<unknown>;
+
+    /**
+     * 按需筛选高亮节点
+     * @en Highlight the node
+     * @param node - 待筛选的节点 - Node instance
+     * @returns 是否被筛选中 - Whether is filtered
+     */
+    filterTreeNode?: (node: NodeInstance) => boolean;
+
+    /**
+     * 右键点击节点时触发的回调函数
+     * @en Callback function when right click a node
+     * @defaultValue () =\> \{\}
+     * @param info - 额外参数 - Extra parameters
+     * @returns 空 - void
+     */
+    onRightClick?: (info: { event: React.MouseEvent; node: NodeInstance }) => void;
+
+    /**
+     * 设置节点是否占满剩余空间，一般用于统一在各节点右侧添加元素(借助 flex 实现，暂时只支持 ie10+)
+     */
+    isLabelBlock?: boolean;
+
+    /**
+     * 设置节点是否占满一行
+     */
+    isNodeBlock?: boolean | {};
+
+    /**
+     * 是否开启展开收起动画
+     */
+    animation?: boolean;
+
+    /**
+     * 当前获得焦点的子菜单或菜单项 key 值
+     */
+    focusedKey?: string;
+    /**
+     * 渲染子节点
+     */
+    renderChildNodes?: (nodes: React.ReactNode) => React.ReactNode;
+    /**
+     * 渲染单个子节点
+     */
+    labelRender?: (node: {}) => React.ReactNode;
+    /**
+     * 是否是不可变数据
+     */
+    immutable?: boolean;
+
+    /**
+     * 是否开启虚拟滚动
+     */
+    useVirtual?: boolean;
+
+
+    /**
+     * focusable
+     * @en focusable
+     * @skip
+     */
+    focusable?: string;
+
+    /**
+     * onItemKeyDown
+     * @en onItemkeyDown
+     * @skip
+     */
+    onItemKeyDown?: (
+        key: string | null | undefined,
+        item: NodeInstance,
+        e: React.KeyboardEvent
+    ) => void;
+
+    /**
+     * onItemFocus
+     * @en onItemFocus
+     * @skip
+     */
+    onItemFocus?: (key: string | null | undefined, e: React.KeyboardEvent) => void;
+
+    /**
+     * onBlur
+     * @en onBlur
+     * @skip
+     */
+    onBlur?: (e: React.FocusEvent) => void;
+
+    /**
+     * autoFocus
+     * @skip
+     */
+    autoFocus?: boolean;
+
+    /**
+     * className
+     * @skip
+     */
+    className?: string;
+}
+
+export default class Tree extends React.Component<TreeProps, any> {
+    static Node: typeof Node;
+}

package/types/tree-select/index.d.ts

@@ -0,0 +1,251 @@
+/// <reference types="react" />
+
+import * as React from 'react';
+import CommonProps from '../util';
+import { PopupProps } from '../overlay';
+import { TreeProps, Node as TreeNode } from '../tree';
+import { item } from '../select';
+
+interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement> {
+    defaultValue?: any;
+    onChange?: any;
+}
+
+export interface TreeSelectProps extends HTMLAttributesWeak, CommonProps {
+    /**
+     * 树节点
+     */
+    children?: React.ReactNode;
+
+    /**
+     * 选择框大小
+     */
+    size?: 'small' | 'medium' | 'large';
+
+    /**
+     * 选择框占位符
+     */
+    placeholder?: string;
+
+    /**
+     * 是否禁用
+     */
+    disabled?: boolean;
+
+    /**
+     * 是否有下拉箭头
+     */
+    hasArrow?: boolean;
+
+    /**
+     * 是否有边框
+     */
+    hasBorder?: boolean;
+
+    /**
+     * 是否有清空按钮
+     */
+    hasClear?: boolean;
+
+    /**
+     * 自定义内联 label
+     */
+    label?: React.ReactNode;
+
+    /**
+     * 是否只读，只读模式下可以展开弹层但不能选择
+     */
+    readOnly?: boolean;
+
+    /**
+     * 下拉框是否与选择器对齐
+     */
+    autoWidth?: boolean;
+
+    /**
+     * 数据源，该属性优先级高于 children
+     */
+    dataSource?: Array<any>;
+
+    /**
+     * （受控）当前值
+     */
+    value?: string | object | Array<any>;
+
+    /**
+     * （非受控）默认值
+     */
+    defaultValue?: string | object | Array<any>;
+
+    /**
+     * value/defaultValue 在 dataSource 中不存在时，是否展示
+     */
+    preserveNonExistentValue?: boolean;
+
+    /**
+     * 选中值改变时触发的回调函数
+     */
+    onChange?: (value: string | Array<any>, data: any | Array<any>) => void;
+
+    /**
+     * 是否一行显示，仅在 multiple 和 treeCheckable 为 true 时生效
+     */
+    tagInline?: boolean;
+
+    /**
+     * 隐藏多余 tag 时显示的内容，在 tagInline 生效时起作用
+     * @param {Object[]} selectedValues 当前已选中的元素
+     * @param {Object[]} [totalValues] 总待选元素，treeCheckedStrategy = 'parent' 时为 undefined
+     */
+    maxTagPlaceholder?: (selectedValues: any[], totalValues?: any[]) => React.ReactNode | HTMLElement;
+
+    /**
+     * 是否自动清除 searchValue
+     */
+    autoClearSearch?: boolean;
+
+    /**
+     * 是否显示搜索框
+     */
+    showSearch?: boolean;
+
+    /**
+     * 在搜索框中输入时触发的回调函数
+     */
+    onSearch?: (keyword: string) => void;
+    onSearchClear?: (actionType: string) => void;
+    /**
+     * 无数据时显示内容
+     */
+    notFoundContent?: React.ReactNode;
+
+    /**
+     * 是否支持多选
+     */
+    multiple?: boolean;
+
+    /**
+     * 下拉框中的树是否支持勾选节点的复选框
+     */
+    treeCheckable?: boolean;
+
+    /**
+     * 下拉框中的树勾选节点复选框是否完全受控（父子节点选中状态不再关联）
+     */
+    treeCheckStrictly?: boolean;
+
+    /**
+     * 定义选中时回填的方式
+     */
+    treeCheckedStrategy?: 'all' | 'parent' | 'child';
+
+    /**
+     * 下拉框中的树是否默认展开所有节点
+     */
+    treeDefaultExpandAll?: boolean;
+
+    /**
+     * 下拉框中的树默认展开节点key的数组
+     */
+    treeDefaultExpandedKeys?: Array<any>;
+
+    /**
+     * 下拉框中的树异步加载数据的函数，使用请参考[Tree的异步加载数据Demo](https://fusion.design/pc/component/basic/tree#%E5%BC%82%E6%AD%A5%E5%8A%A0%E8%BD%BD%E6%95%B0%E6%8D%AE)
+     */
+    treeLoadData?: (node: React.ReactElement<any>) => void;
+
+    /**
+     * 透传到 Tree 的属性对象
+     */
+    treeProps?: TreeProps;
+
+    /**
+     * 初始下拉框是否显示
+     */
+    defaultVisible?: boolean;
+
+    /**
+     * 当前下拉框是否显示
+     */
+    visible?: boolean;
+
+    /**
+     * 下拉框显示或关闭时触发事件的回调函数
+     */
+    onVisibleChange?: (visible: boolean, type: string) => void;
+
+    /**
+     * 下拉框自定义样式对象
+     */
+    popupStyle?: React.CSSProperties;
+
+    /**
+     * 下拉框样式自定义类名
+     */
+    popupClassName?: string;
+
+    /**
+     * 下拉框挂载的容器节点
+     */
+    popupContainer?: string | HTMLElement | ((target: HTMLElement) => HTMLElement);
+
+    /**
+     * 透传到 Popup 的属性对象
+     */
+    popupProps?: PopupProps;
+    /**
+     * 是否跟随滚动
+     */
+    followTrigger?: boolean;
+
+    /**
+     * 是否为预览态
+     */
+    isPreview?: boolean;
+
+    /**
+     * 预览态模式下渲染的内容
+     * @param {Array<data>} value 选择值 { label: , value:}
+     */
+    renderPreview?: (data: string | Array<any>, props: any | Array<any>) => React.ReactNode;
+
+    /**
+     * 是否开启虚拟滚动
+     */
+    useVirtual?: boolean;
+
+    /**
+     * 是否关闭本地搜索
+     */
+    filterLocal?: boolean;
+
+    immutable?: boolean;
+
+    /**
+     * 填充到选择框里的值的 key，默认是 value
+     */
+    fillProps?: string;
+
+    /**
+     * 点击文本是否可以勾选
+     */
+    clickToCheck?: boolean;
+
+    /**
+     * 渲染 Select 区域展现内容的方法
+     * @param {Object} item 渲染项
+     * @param {Object[]} itemPaths 渲染项在dataSource内的路径
+     */
+    valueRender?: (item: any, itemPaths: item[]) => React.ReactNode;
+
+    /**
+     * onChange 返回的 value 使用 dataSource 的对象
+     * @en onChange returns the value using the object in dataSource
+     * @skip
+     */
+    useDetailValue?: boolean;
+}
+
+export default class TreeSelect extends React.Component<TreeSelectProps, any> {
+    static Node: typeof TreeNode;
+}

package/types/typography/index.d.ts

@@ -0,0 +1,28 @@
+import { HTMLAttributes, ElementType, Component, ComponentType } from 'react';
+import CommonProps from '../util';
+
+export interface TextProps extends HTMLAttributes<HTMLElement>, CommonProps {
+    delete?: boolean;
+    mark?: boolean;
+    underline?: boolean;
+    strong?: boolean;
+    code?: boolean;
+    component?: ElementType;
+}
+
+export interface TitleProps extends TextProps {}
+
+export interface ParagraphProps extends TextProps {}
+
+export interface TypographyProps extends TextProps {}
+
+export default class Typography extends Component<TypographyProps, any> {
+    static H1: ComponentType<TitleProps>;
+    static H2: ComponentType<TitleProps>;
+    static H3: ComponentType<TitleProps>;
+    static H4: ComponentType<TitleProps>;
+    static H5: ComponentType<TitleProps>;
+    static H6: ComponentType<TitleProps>;
+    static Text: ComponentType<TextProps>;
+    static Paragraph: ComponentType<ParagraphProps>;
+}