@unicom-cloud/ui 0.8.82 → 0.8.84

package/types/pc/tooltip/interface.d.ts

@@ -0,0 +1,92 @@
+import { CSSProperties, ReactNode } from 'react';
+import { TriggerProps } from '../trigger';
+/**
+ * @title Tooltip
+ */
+export interface TooltipProps {
+    style?: CSSProperties;
+    className?: string | string[];
+    /**
+     * @zh 触发方式
+     * @en Trigger mode
+     * @defaultValue hover
+     */
+    trigger?: TriggerProps['trigger'];
+    escToClose?: TriggerProps['escToClose'];
+    /**
+     * @zh 弹出的内容
+     * @en The content shown in popup
+     */
+    content?: ReactNode;
+    /**
+     * @zh 弹出层背景色
+     * @en background color of the popup-layer
+     * @version 2.22.0
+     */
+    color?: string;
+    /**
+     * @zh 弹出框挂载的节点
+     * @en The parent node which the popup will be rendered to.
+     */
+    getPopupContainer?: (node: HTMLElement) => Element;
+    /**
+     * @zh 弹出框的方位，有 12 个方位可供选择
+     * @en The position of the popup relative to the target.
+     * @defaultValue top
+     */
+    position?: 'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br' | 'left' | 'lt' | 'lb' | 'right' | 'rt' | 'rb';
+    /**
+     * @zh 迷你尺寸
+     * @en Whether show mini style
+     */
+    mini?: boolean;
+    prefixCls?: string;
+    /**
+     * @zh 是否在隐藏的时候销毁 DOM 结构
+     * @en Whether to destroy the popup when hidden
+     * @defaultValue true
+     */
+    unmountOnExit?: boolean;
+    /**
+     * @zh 默认的弹出框状态
+     * @en Whether the popup is visible by default
+     */
+    defaultPopupVisible?: boolean;
+    /**
+     * @zh 弹出框是打开还是关闭状态
+     * @en Whether the popup is visible
+     */
+    popupVisible?: boolean;
+    /**
+     * @zh 显示或隐藏时触发的回调
+     * @en Callback when the visibility of the popup is changed
+     */
+    onVisibleChange?: (visible: boolean) => void;
+    /**
+     * @zh 鼠标移入弹出框的话，弹出框会保留而不销毁
+     * @en Whether the popup is visible when the mouse hovers over the popup
+     * @defaultValue true
+     */
+    popupHoverStay?: boolean;
+    /**
+     * @zh 是否在失去焦点的时候关闭弹出框
+     * @en Whether close the popup when the target element losing focus
+     * @defaultValue true
+     */
+    blurToHide?: boolean;
+    /**
+     * @zh 是否禁用弹出
+     * @en Whether disable popup
+     */
+    disabled?: boolean;
+    /**
+     * @zh 可以接受所有 `Trigger` 组件的参数
+     * @en The Props of the `Trigger` component
+     */
+    triggerProps?: Partial<TriggerProps>;
+    /**
+     * @zh 会在打开状态给元素加上一个类，格式为 `${childrenPrefix}-open`。
+     * @en Set an additional class name(`${childrenPrefix}-open`) for the container of the popup.
+     */
+    childrenPrefix?: string;
+}

package/types/pc/transfer/interface.d.ts

@@ -0,0 +1,225 @@
+import { CSSProperties, DragEvent, ReactNode } from 'react';
+import { InputProps } from '../input';
+import { PaginationProps } from '../pagination';
+import { AvailableVirtualListProps } from '../virtual-list';
+export type TransferItem = {
+    key: string;
+    value: string;
+    disabled?: boolean;
+};
+export type TransferListType = 'source' | 'target';
+type TransferListTitle = string | ((params: {
+    countTotal: number;
+    countSelected: number;
+    clear: () => void;
+    checkbox: ReactNode;
+    searchInput: ReactNode;
+}) => ReactNode);
+interface TransferPropsWithArrayType {
+    /**
+     * @zh 搜索框默认提示文字，通过数组为左右列表传入不同属性
+     * @en Placeholder of search box, pass in different properties for lists through array
+     * @version Array format in '2.40.0'
+     */
+    searchPlaceholder?: string | string[];
+    /**
+     * @zh 左右两栏是否显示搜索框，通过数组为左右列表传入不同属性
+     * @en Whether to display the search box in columns, pass in different properties for lists through array
+     * @version Array format in '2.40.0'
+     */
+    showSearch?: boolean | InputProps | Array<boolean | InputProps>;
+    /**
+     * @zh 左右两栏是否显示底部重置按钮，通过数组为左右列表传入不同属性
+     * @en Whether to display the reset-button in columns, pass in different properties for lists through array
+     * @version ReactNode in `2.11.0`, array format in '2.40.0'
+     */
+    showFooter?: boolean | ReactNode | Array<boolean | ReactNode>;
+    /**
+     * @zh 是否使用分页，也可传入 `Pagination` 的配置，通过数组为左右列表传入不同属性
+     * @en Whether to divide into pages, you can also pass in the configuration of `Pagination`, pass in different properties for lists through array
+     * @version Array format in '2.40.0'
+     */
+    pagination?: boolean | PaginationProps | Array<boolean | PaginationProps>;
+    /**
+     * @zh 左右两栏框的样式，通过数组为左右列表传入不同属性
+     * @en The additional css style of columns, pass in different properties for lists through array
+     * @version Array format in '2.40.0'
+     */
+    listStyle?: CSSProperties | CSSProperties[];
+}
+/**
+ * @title Transfer
+ */
+export interface TransferProps extends TransferPropsWithArrayType {
+    prefixCls?: string;
+    style?: CSSProperties;
+    className?: string | string[];
+    /**
+     * @zh 自定义列表渲染函数
+     * @en Customize render list
+     */
+    children?: (props: TransferCustomListProps) => ReactNode;
+    /**
+     * @zh 穿梭框数据源，其中一部分会被渲染到左边一栏，targetKeys 中指定的除外
+     * @en Used for setting the source data
+     */
+    dataSource?: TransferItem[];
+    /**
+     * @zh 默认的 `targetKeys`
+     * @en Initial set of keys of items that are listed on the target column
+     * @defaultValue []
+     */
+    defaultTargetKeys?: string[];
+    /**
+     * @zh 默认的 `selectKeys`
+     * @en Initial set of keys of selected items
+     * @defaultValue []
+     */
+    defaultSelectedKeys?: string[];
+    /**
+     * @zh 渲染到右边一栏数据的 key 集合
+     * @en Set of keys of items that are listed on the target column
+     */
+    targetKeys?: string[];
+    /**
+     * @zh 当前应该有哪些项被选中
+     * @en Set of keys of selected items
+     */
+    selectedKeys?: string[];
+    /**
+     * @zh 穿梭框左右栏标题数组。(函数写法 `2.18.0` 开始支持)
+     * @en Title list of Transfer columns. (`2.18.0` began to support function)
+     * @defaultValue ['Source', 'Target']
+     */
+    titleTexts?: Array<TransferListTitle>;
+    /**
+     * @zh 穿梭按钮的文案数组，顺序从上至下
+     * @en Texts of buttons that are used to transfer item
+     */
+    operationTexts?: string[] | ReactNode[];
+    /**
+     * @zh 禁用穿梭框
+     * @en Whether is disabled
+     */
+    disabled?: boolean;
+    /**
+     * @zh 单向
+     * @en Whether to allow only one-way movement
+     */
+    oneWay?: boolean;
+    /**
+     * @zh 简单模式
+     * @en Whether to automatically move an item when it is selected
+     * @version `retainSelectedItems` in '2.21.0'
+     */
+    simple?: boolean | {
+        retainSelectedItems?: boolean;
+    };
+    /**
+     * @zh 列表内条目是否可拖拽
+     * @en Whether the items in the list can be dragged
+     */
+    draggable?: boolean;
+    /**
+     * @zh 穿梭中间操作部分的样式
+     * @en The additional css style of operation buttons
+     */
+    operationStyle?: CSSProperties;
+    /**
+     * @zh 传递虚拟滚动属性。
+     * @en Pass properties used by VirtualList.
+     * @version 2.42.0
+     */
+    virtualListProps?: AvailableVirtualListProps;
+    /**
+     * @zh 每行数据渲染函数
+     * @en A function to generate the item shown on a column.
+     */
+    render?: (item: TransferItem) => any;
+    /**
+     * @zh 搜索框筛选算法
+     * @en A function to determine whether an item should show in search result list
+     * @defaultValue (inputValue, item) => item.value.indexOf(inputValue) !== -1
+     */
+    filterOption?: (inputValue: string, item: TransferItem) => boolean;
+    /**
+     * @zh 选中项在两栏之间转移时的回调
+     * @en Callback when the transfer between columns is complete
+     */
+    onChange?: (newTargetKeys: string[], direction: 'source' | 'target', moveKeys: string[]) => void;
+    /**
+     * @zh 数据项选中状态发生改变的回调
+     * @en Callback when selected items are changed
+     */
+    onSelectChange?: (leftSelectedKeys: string[], rightSelectedKeys: string[]) => void;
+    /**
+     * @zh 搜索框输入进行搜索时回调函数
+     * @en Callback when value of search box is changed
+     */
+    onSearch?: (value: string, type?: 'source' | 'target') => void;
+    /**
+     * @zh 点击重置按钮后的回调
+     * @en Callback when reset-button is clicked
+     */
+    onResetData?: () => void;
+    /**
+     * @zh 节点开始拖拽的回调
+     * @en Callback when user start to drag a transfer item
+     */
+    onDragStart?: (e: DragEvent<HTMLSpanElement>, item: TransferItem) => void;
+    /**
+     * @zh 节点结束拖拽的回调
+     * @en Callback when the user has finished dragging a transfer item
+     */
+    onDragEnd?: (e: DragEvent<HTMLSpanElement>, item: TransferItem) => void;
+    /**
+     * @zh 节点离开可释放目标上时的回调
+     * @en Callback when a draggable item leaves a valid drop target
+     */
+    onDragLeave?: (e: DragEvent<HTMLSpanElement>, item: TransferItem) => void;
+    /**
+     * @zh 节点被拖拽至可释放目标上时的回调
+     * @en Callback when a draggable item is being dragged over a valid drop target
+     */
+    onDragOver?: (e: DragEvent<HTMLSpanElement>, item: TransferItem) => void;
+    /**
+     * @zh 节点在可释放目标上释放时的回调
+     * @en Callback when draggable item is dropped in a `<div>` element
+     */
+    onDrop?: (info: {
+        e: DragEvent<HTMLSpanElement>;
+        dragItem: TransferItem;
+        dropItem: TransferItem;
+        dropPosition: number;
+    }) => void;
+}
+export interface TransferListProps extends Pick<TransferProps, 'prefixCls' | 'style' | 'className' | 'dataSource' | 'disabled' | 'draggable' | 'render' | 'filterOption' | 'virtualListProps' | 'onSearch' | 'onResetData' | 'onDragStart' | 'onDragEnd' | 'onDragLeave' | 'onDragOver' | 'onDrop'> {
+    searchPlaceholder?: string;
+    showSearch?: boolean | InputProps;
+    showFooter?: boolean | ReactNode;
+    pagination?: boolean | PaginationProps;
+    title: TransferListTitle;
+    allowClear: boolean;
+    selectedKeys: string[];
+    validKeys: string[];
+    selectedDisabledKeys: string[];
+    listType: TransferListType;
+    handleSelect: (newSelectKeys: string[]) => void;
+    handleRemove: (removeKeys: string[]) => void;
+    renderList: (props: TransferCustomListProps) => ReactNode;
+    renderHeaderUnit: (countSelected: any, countAll: any) => ReactNode;
+}
+export interface TransferCustomListProps extends Pick<TransferListProps, 'disabled' | 'listType' | 'selectedKeys' | 'validKeys' | 'selectedDisabledKeys'> {
+    filteredItems: TransferItem[];
+    onItemSelect: (key: string, selected: boolean) => void;
+    onItemRemove: (key: string) => void;
+    onItemSelectAll: (keys: string[], selected: boolean) => void;
+}
+export interface TransferItemProps extends Pick<TransferListProps, 'prefixCls' | 'className' | 'render' | 'disabled' | 'draggable' | 'allowClear' | 'selectedKeys' | 'onDragStart' | 'onDragEnd' | 'onDragLeave' | 'onDragOver'> {
+    item: TransferItem;
+    droppable: boolean;
+    onItemSelect: (key: string, selected: boolean) => void;
+    onItemRemove: (key: string) => void;
+    onDrop?: (e: DragEvent<HTMLSpanElement>, item: TransferItem, dropPosition: number) => void;
+}
+export {};

package/types/pc/tree/interface.d.ts

@@ -0,0 +1,354 @@
+import { CSSProperties, DragEvent, PropsWithChildren, ReactElement, ReactNode } from 'react';
+import { TreeNodeProps } from '.';
+import { AvailableVirtualListProps } from '../virtual-list';
+import TreeNode from './Node';
+export type NodeInstance = ReactElement<PropsWithChildren<NodeProps>, typeof TreeNode>;
+export type FakeNodeInstance = {
+    key: string;
+    props: TreeNodeProps;
+};
+export type SHOW_ALL = 'all';
+export type SHOW_PARENT = 'parent';
+export type SHOW_CHILD = 'child';
+export type ActionOnClick = 'select' | 'check' | 'expand';
+export interface TreeState {
+    treeData?: TreeProps['treeData'];
+    nodeList?: NodeProps[];
+    shouldUpdate?: boolean;
+    selectedKeys?: string[];
+    checkedKeys?: string[];
+    expandedKeys?: string[];
+    loadedKeys?: string[];
+    loadingKeys?: string[];
+    halfCheckedKeys?: string[];
+    currentExpandKeys?: string[];
+}
+export type FieldNamesType = {
+    key?: string;
+    title?: string;
+    disabled?: string;
+    children?: string;
+    isLeaf?: string;
+    disableCheckbox?: string;
+    checkable?: string;
+};
+export type TreeDataType = NodeProps & {
+    key?: string;
+    _index?: number;
+    children?: TreeDataType[];
+    [key: string]: any;
+};
+export type AllowDrop = (options: {
+    dropNode: NodeInstance;
+    dragNode: NodeInstance | null;
+    dropPosition: number;
+}) => boolean;
+/**
+ * @title Tree
+ */
+export interface TreeProps {
+    style?: CSSProperties;
+    className?: string | string[];
+    height?: number;
+    /**
+     * @zh 不同尺寸
+     * @en To set size
+     */
+    size?: 'mini' | 'small' | 'default' | 'large';
+    /**
+     * @zh 是否节点占据一行
+     * @en Whether to occupy the remaining horizontal space
+     */
+    blockNode?: boolean;
+    /**
+     * @zh 是否自动展开父节点
+     * @en Whether to automatically expand the parent node
+     * @defaultValue true
+     */
+    autoExpandParent?: boolean;
+    /**
+     * @zh 是否支持多选
+     * @en Whether to support multiple selection
+     */
+    multiple?: boolean;
+    /**
+     * @zh 是否在节点前添加选框
+     * @en Whether to add a checkbox before the node
+     */
+    checkable?: boolean;
+    /**
+     * @zh 是否可拖拽
+     * @en Whether the node can be dragged
+     */
+    draggable?: boolean;
+    /**
+     * @zh 是否开启展开收起的节点动画。
+     * @en
+     * @defaultValue true
+     */
+    animation?: boolean;
+    /**
+     * @zh 是否允许拖拽时放置在该节点。 (`dragNode` in `2.23.0`)
+     * @en Whether to allow dropping on node. (`dragNode` in `2.23.0`)
+     * @defaultValue () => true
+     * @version 2.7.0
+     */
+    allowDrop?: AllowDrop;
+    /**
+     * @zh 是否可以选择
+     * @en Whether can be selected
+     * @defaultValue true
+     */
+    selectable?: boolean;
+    /**
+     * @zh 是否取消父子节点关联
+     * @en Whether to cancel the parent-child association
+     */
+    checkStrictly?: boolean;
+    /**
+     * @zh
+     * 定制回填方式 <br/> all: 返回所有选中的节点  <br/> parent: 父子节点都选中时只返回父节点 <br/> child: 只返回子节点
+     * @en
+     * Customize the return value <br/> all: Return all selected nodes  <br/> parent:
+     * Only return the parent node when both parent and child nodes are selected <br/> child: Return only child nodes
+     * @defaultValue all
+     */
+    checkedStrategy?: SHOW_ALL | SHOW_PARENT | SHOW_CHILD;
+    /**
+     * @zh 默认选中的树节点
+     * @en The key of node selected by default
+     */
+    defaultSelectedKeys?: string[];
+    /**
+     * @zh 选中的树节点。（受控）
+     * @en The key of the selected node(controlled)
+     */
+    selectedKeys?: string[];
+    /**
+     * @zh 默认选中复选框的树节点
+     * @en The key of node checked by default
+     */
+    defaultCheckedKeys?: string[];
+    /**
+     * @zh 选中复选框的树节点。（受控）
+     * @en The key of the checked node(controlled)
+     */
+    checkedKeys?: string[];
+    /**
+     * @zh 半选状态的节点.仅在 checkable 且 checkStrictly 时生效
+     * @en the keys of half checked
+     * @version 2.27.0
+     */
+    halfCheckedKeys?: string[];
+    /**
+     * @zh 默认展开的节点。
+     * @en The key of node expanded by default
+     */
+    defaultExpandedKeys?: string[];
+    /**
+     * @zh 展开的节点，(受控)。
+     * @en The key of the expanded node (controlled)
+     */
+    expandedKeys?: string[];
+    /**
+     * @zh 可以通过传入`treeData`,生成对应的树结构
+     * @en The tree structure can be generated by passing in `treeData`
+     */
+    treeData?: TreeDataType[];
+    /**
+     * @zh 指定 key，title，isLeaf，disabled，children 对应的字段
+     * @en Custom field name for key, title, isLeaf, disabled and children
+     * @version 2.11.0
+     */
+    fieldNames?: FieldNamesType;
+    /**
+     * @zh 定制节点图标
+     * @en Customize node icon
+     * @defaultValue FieldNamesType
+     * @version 2.9.0
+     */
+    icons?: ((nodeProps: NodeProps) => {
+        dragIcon?: ReactNode;
+        switcherIcon?: ReactNode;
+        loadingIcon?: ReactNode;
+    }) | {
+        dragIcon?: ReactNode;
+        switcherIcon?: ReactNode;
+        loadingIcon?: ReactNode;
+    };
+    /**
+     * @zh 传递虚拟列表属性，传入此参数以开启虚拟滚动
+     * @en Pass the virtual-list properties, pass in this parameter to turn on virtual scrolling
+     * @version 2.11.0
+     */
+    virtualListProps?: AvailableVirtualListProps;
+    /**
+     * @zh 渲染额外节点
+     * @en Render additional node
+     */
+    renderExtra?: (props: NodeProps) => ReactNode;
+    /**
+     * @zh 自定义 title 的渲染
+     * @en Customize title rendering
+     */
+    renderTitle?: (props: NodeProps) => ReactNode;
+    /**
+     * @zh 是否展示连接线
+     * @en Whether to display the connection line
+     */
+    showLine?: boolean;
+    /**
+     * @zh 点击节点时对应的操作，可以是选中，复选选中，展开/收起
+     * @en The action when click node
+     * @version select
+     */
+    actionOnClick?: ActionOnClick | ActionOnClick[];
+    /**
+     * @zh 异步加载数据的回调，返回一个 `Promise`。
+     * @en Callback when loaded data asynchronously, returning a `Promise`.
+     */
+    loadMore?: (node: NodeInstance) => Promise<void>;
+    /**
+     * @zh 点击树节点的回调
+     * @en Callback when selected node
+     */
+    onSelect?: (selectedKeys: string[], extra: {
+        selected: boolean;
+        selectedNodes: NodeInstance[];
+        node: NodeInstance;
+        e: Event;
+    }) => void;
+    /**
+     * @zh 点击树节点的回调（不分条件）
+     */
+    onSelect_?: (node: NodeProps) => void;
+    /**
+     * @zh 点击树节点复选框的回调
+     * @en Callback when checked node
+     */
+    onCheck?: (checkedKeys: string[], extra: {
+        node: NodeInstance;
+        checkedNodes: NodeInstance[];
+        checked: boolean;
+        halfCheckedKeys: string[];
+        halfCheckedNodes: NodeInstance[];
+        e: Event;
+    }) => void;
+    /**
+     * @zh 点击展开/关闭的回调
+     * @en Callback when expanded or collapsed node
+     */
+    onExpand?: (expandedKeys: string[], exra?: {
+        expanded: boolean;
+        node: NodeInstance;
+        expandedNodes: NodeInstance[];
+    }) => void;
+    /**
+     * @zh 节点开始拖拽的回调
+     * @en Callback when the node starts dragging
+     */
+    onDragStart?: (e: DragEvent<HTMLSpanElement>, node: NodeInstance) => void;
+    /**
+     * @zh 节点结束拖拽的回调
+     * @en Callback when the node ends drag
+     */
+    onDragEnd?: (e: DragEvent<HTMLSpanElement>, node: NodeInstance) => void;
+    /**
+     * @zh 节点被拖拽至可释放目标上时的回调
+     * @en Callback when the node is dragged onto a valid target
+     */
+    onDragOver?: (e: DragEvent<HTMLSpanElement>, node: NodeInstance) => void;
+    /**
+     * @zh 节点离开可释放目标上时的回调
+     * @en Callback when the node leaves a valid target
+     */
+    onDragLeave?: (e: DragEvent<HTMLSpanElement>, node: NodeInstance) => void;
+    /**
+     * @zh 节点在可释放目标上释放时的回调
+     * @en Callback when the node is dropped on the valid target
+     */
+    onDrop?: (info: {
+        e: DragEvent<HTMLSpanElement>;
+        dragNode: NodeInstance | null;
+        dropNode: NodeInstance | null;
+        dropPosition: number;
+    }) => void;
+    filterNode?: (node: NodeProps) => boolean;
+    children?: ReactNode;
+    onMouseDown?: (e: any) => void;
+    __PqbAdapterMode__?: boolean;
+}
+/**
+ * @title Tree.Node
+ */
+export interface NodeProps {
+    style?: CSSProperties;
+    className?: string | string[];
+    blockNode?: boolean;
+    /**
+     * @zh 该节点显示的标题
+     * @en Title for node
+     */
+    title?: string | ReactNode;
+    /**
+     * @zh 是否允许选中
+     * @en Whether it can be selected
+     * @defaultValue true
+     */
+    selectable?: boolean;
+    /**
+     * @zh 是否禁用节点
+     * @en Whether to disable node
+     */
+    disabled?: boolean;
+    /**
+     * @zh 是否禁用复选框
+     * @en Whether to disable check
+     */
+    disableCheckbox?: boolean;
+    /**
+     * @zh 该节点个性化显示的图标
+     * @en Custom icon
+     */
+    icon?: ReactNode;
+    /**
+     * @zh 是否显示多选框
+     * @en Whether to show checkbox
+     */
+    checkable?: boolean;
+    /**
+     * @zh 是否是叶子节点。动态加载时有效
+     * @en Is it a leaf node. Effective when loading dynamically
+     */
+    isLeaf?: boolean;
+    /**
+     * @zh 定制节点图标，优先级高于 Tree。同时设置 Tree 上的 icons 属性时候，将会进行合并。
+     * @en Customize node icons, it have higher priority than Tree. When the icons property on the Tree is set at the same time, will be merged.
+     */
+    icons?: TreeProps['icons'];
+    /**
+     * @zh 当前节点是否可拖拽
+     * @en Whether the current node can be dragged
+     */
+    draggable?: boolean;
+    showLine?: boolean;
+    checked?: boolean;
+    selected?: boolean;
+    parentKey?: string;
+    pathParentKeys?: string[];
+    indeterminated?: boolean;
+    _key?: string;
+    _level?: number;
+    _lineless?: boolean[];
+    visible?: boolean;
+    selectedKeys?: string[];
+    checkedKeys?: string[];
+    expandedKeys?: string[];
+    loading?: boolean;
+    loaded?: boolean;
+    autoExpandParent?: boolean;
+    expanded?: boolean;
+    childrenData?: NodeProps[];
+    dataRef?: TreeDataType;
+    loadMore?: (node: NodeProps) => void;
+}