@unicom-cloud/ui 0.8.83 → 0.8.84

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

@@ -0,0 +1,192 @@
+import { CSSProperties, HTMLAttributes, MutableRefObject, ReactNode } from 'react';
+import { ColProps, GridResponsiveBreakpoint, RowProps } from '../grid/interface';
+import { PaginationProps } from '../pagination/Pagination';
+import { AvailableVirtualListProps } from '../virtual-list';
+type ListGridProps = {
+    column?: number;
+} & Pick<RowProps, 'gutter' | 'justify' | 'align'> & Pick<ColProps, 'span' | 'offset' | 'order' | 'pull' | 'push' | GridResponsiveBreakpoint>;
+export type ListHandle = {
+    dom: HTMLDivElement;
+    scrollIntoView: (index: number) => void;
+};
+/**
+ * @title List
+ */
+export interface ListProps<T = any> {
+    className?: string | string[];
+    style?: CSSProperties;
+    paginationInFooter?: boolean;
+    height?: number;
+    /**
+     * @zh 指定最外层包裹元素的样式
+     * @en The additional css style to wrapper element
+     */
+    wrapperStyle?: CSSProperties;
+    /**
+     * @zh 指定最外层包裹元素的类名
+     * @en The additional css class to wrapper element
+     */
+    wrapperClassName?: string | string[];
+    /**
+     * @zh 列表渲染数据源，当children存在时，可不传此参数 (dataSource优先级更高）
+     * @en Data source for list rendering. When `children` exist, this parameter can be omitted (`dataSource` has higher priority)
+     */
+    dataSource?: T[];
+    /**
+     * @zh 单个列表渲染函数，当 children 存在时，可不传此参数
+     * @en Customize list item when using dataSource
+     */
+    render?: (item: T, index: number) => ReactNode;
+    /**
+     * @zh 当 dataSource 和 render 存在时，可不传此参数
+     * @en Child element of List. when dataSource and render exist, do not use this parameter
+     */
+    children?: ReactNode;
+    /**
+     * @zh 列表的尺寸
+     * @en Size of List
+     */
+    size?: 'small' | 'default' | 'large';
+    /**
+     * @zh 列表头部
+     * @en List header
+     */
+    header?: ReactNode;
+    /**
+     * @zh 列表底部
+     * @en List footer
+     */
+    footer?: ReactNode;
+    /**
+     * @zh 是否使用分页，也可传入 `Pagination` 的配置
+     * @en Whether to divide into pages, you can also pass in the configuration of `Pagination`
+     */
+    pagination?: boolean | PaginationProps;
+    /**
+     * @zh 是否显示边框
+     * @en Whether to render border
+     * @defaultValue true
+     */
+    bordered?: boolean;
+    /**
+     * @zh 是否显示分割线
+     * @en Whether to render the split under the list item
+     * @defaultValue true
+     */
+    split?: boolean;
+    /**
+     * @zh 列表栅格配置
+     * @en The grid type of list
+     * @version `column` in 2.20.0
+     */
+    grid?: ListGridProps;
+    /**
+     * @zh 是否加载中
+     * @en Whether to show a loading indicator while the contents of the list are being fetched
+     */
+    loading?: boolean;
+    /**
+     * @zh 列表项是否可悬浮
+     * @en Whether list items have hover style
+     * @version 2.9.0
+     */
+    hoverable?: boolean;
+    /**
+     * @zh 滚动至底部触发函数
+     * @en Callback when the list scroll to the bottom
+     */
+    onReachBottom?: (currentPage: number) => void;
+    /**
+     * @zh 触发底部函数的距离阙值
+     * @en The distance threshold to trigger the `onReachBottom`
+     * @defaultValue 0
+     */
+    offsetBottom?: number;
+    /**
+     * @zh 滚动加载数据当前页码
+     * @en To set default current page
+     * @defaultValue 1
+     */
+    defaultCurrent?: number;
+    /**
+     * @zh 节流延时
+     * @en Interval of throttle for `onListScroll`
+     * @defaultValue 500
+     */
+    throttleDelay?: number;
+    /**
+     * @zh 当前列表的引用
+     * @en Reference to the current list
+     * @version 2.20.0
+     */
+    listRef?: MutableRefObject<ListHandle>;
+    /**
+     * @zh 列表滚动回调函数,参数为列表滚动元素，当onReachBottom无法满足需求，可自定义滚动监听函数。
+     * @en Callback when list is scrolling. When onReachBottom cannot meet your usage, can customize scroll monitor function
+     */
+    onListScroll?: (elem: Element) => void;
+    /**
+     * @zh 滚动加载状态时，滚动到底部的提示
+     * @en Set the content to be at the list bottom when you load data during scrolling
+     */
+    scrollLoading?: string | ReactNode;
+    /**
+     * @zh 没有数据的时候显示的元素
+     * @en Content displayed when there is no data
+     */
+    noDataElement?: ReactNode;
+    /**
+     * @zh 传递虚拟列表属性，传入此参数以开启虚拟滚动
+     * @en Pass the virtual-list properties, pass in this parameter to turn on virtual scrolling
+     * @version 2.11.0
+     */
+    virtualListProps?: AvailableVirtualListProps;
+}
+/**
+ * @title List.Item
+ */
+export interface ListItemProps extends HTMLAttributes<HTMLDivElement> {
+    style?: CSSProperties;
+    className?: string;
+    children?: ReactNode;
+    /**
+     * @zh 列表项下方内容（列表操作组）
+     * @en The list operation group of list item
+     */
+    actions?: ReactNode[];
+    /**
+     * @zh 列表最右侧内容，额外内容
+     * @en The extra content of list item which is on the far right
+     */
+    extra?: ReactNode;
+    /**
+     * @zh 列表操作组的位置，默认horizontal，出现在右侧；vertical出现在下方。
+     * @en The position of the list operation group. `horizontal` - right, `vertical` - below.
+     * @defaultValue horizontal
+     */
+    actionLayout?: 'horizontal' | 'vertical';
+}
+/**
+ * @title List.Item.Meta
+ */
+export interface ListItemMetaProps {
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    /**
+     * @zh 列表元素标题
+     * @en The title of list item
+     */
+    title?: ReactNode;
+    /**
+     * @zh 列表元素的图标
+     * @en The avatar of list item
+     */
+    avatar?: ReactNode;
+    /**
+     * @zh 列表元素描述内容
+     * @en The description of list item
+     */
+    description?: ReactNode;
+}
+export {};

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

@@ -0,0 +1,92 @@
+import { ReactNode } from 'react';
+import { TextAreaProps } from '../input';
+import { TriggerProps } from '../trigger';
+/**
+ * @title Mentions
+ */
+export interface MentionsProps extends Omit<TextAreaProps, 'prefix' | 'maxLength'> {
+    maxLength?: number;
+    children?: ReactNode;
+    /**
+     * @zh 输入框的值
+     * @en To set value
+     */
+    value?: string;
+    /**
+     * @zh 输入框默认值
+     * @en To set default value
+     */
+    defaultValue?: string;
+    /**
+     * @zh 下拉框可选项
+     * @en Options of dropdown
+     */
+    options?: (string | number | {
+        label: ReactNode | string;
+        value: string | number;
+        disabled?: boolean;
+    })[];
+    /**
+     * @zh 触发关键字
+     * @en Set trigger prefix keyword
+     * @defaultValue `@`
+     */
+    prefix?: string | string[];
+    /**
+     * @zh 选中项前后分隔符
+     * @en Set split string before and after selected mention
+     */
+    split?: string;
+    /**
+     * @zh 弹出框是否与输入框对齐
+     * @en Whether the popup is aligned with the input
+     * @defaultValue true
+     */
+    alignTextarea?: boolean;
+    /**
+     * @zh 下拉框的弹出位置
+     * @en Position of dropdown
+     * @defaultValue bl
+     */
+    position?: 'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br';
+    /**
+     * @zh 可以接受所有 Trigger 组件的 Props
+     * @en All `Trigger` component props
+     */
+    triggerProps?: Partial<TriggerProps>;
+    /**
+     * @zh 下拉列表没有数据时显示的内容
+     * @en The content displayed when there is no data
+     */
+    notFoundContent?: ReactNode;
+    /**
+     * @zh 弹出框挂载的父节点
+     * @en Set the mount HTML node for suggestions
+     */
+    getPopupContainer?: (node: HTMLElement) => HTMLElement;
+    /**
+     * @zh 是否根据输入的值筛选数据，可传入函数自定义过滤逻辑。
+     * @en Customize filter option logic
+     */
+    filterOption?: false | ((inputValue: string, option: any) => boolean);
+    /**
+     * @zh 输入改变时的回调
+     * @en Callback when input value is changed
+     */
+    onChange?: (value: string) => void;
+    /**
+     * @zh 搜索时的回调
+     * @en Callback on search
+     */
+    onSearch?: (text: string, prefix: string) => void;
+    /**
+     * @zh 聚焦时的回调
+     * @en Trigger when mentions get focus
+     */
+    onFocus?: (e: any) => void;
+    /**
+     * @zh 失焦时的回调
+     * @en Trigger when mentions lose focus
+     */
+    onBlur?: (e: any) => void;
+}

package/types/{menu → pc/menu}/context.d.ts

@@ -5,7 +5,7 @@ export type HotkeyInfo = {
     type: 'sibling' | 'generation' | 'enter';
 };
 export type ResetHotkeyInfo = (activeKey?: string) => void;
-declare const MenuContext: import("react").Context<Pick<MenuProps, "collapse" | "icons" | "mode" | "triggerProps" | "inDropdown" | "tooltipProps" | "theme" | "levelIndent" | "selectedKeys" | "openKeys" | "autoScrollIntoView" | "scrollConfig"> & {
+declare const MenuContext: import("react").Context<Pick<MenuProps, "theme" | "collapse" | "mode" | "icons" | "triggerProps" | "inDropdown" | "tooltipProps" | "levelIndent" | "selectedKeys" | "openKeys" | "autoScrollIntoView" | "scrollConfig"> & {
     id?: string;
     prefixCls?: string;
     onClickMenuItem?: (key: string, e: any) => void;

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

@@ -0,0 +1,233 @@
+import React, { CSSProperties, HTMLAttributes, ReactNode } from 'react';
+import type { TooltipProps } from '../tooltip';
+import { TriggerProps } from '../trigger';
+/**
+ * @title Menu
+ */
+export interface MenuProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
+    children?: ReactNode;
+    style?: CSSProperties;
+    prefixCls?: string;
+    className?: string | string[];
+    isMenu?: boolean;
+    inDropdown?: boolean;
+    /**
+     * @zh 菜单风格
+     * @en Theme of Menu
+     * @defaultValue light
+     */
+    theme?: 'light' | 'dark';
+    /**
+     * @zh 菜单类型，目前支持垂直（vertical）、水平菜单（horizontal）、弹出（pop）
+     * @en Mode of Menu
+     * @defaultValue vertical
+     */
+    mode?: 'vertical' | 'horizontal' | 'pop' | 'popButton';
+    /**
+     * @zh 层级之间的缩进量
+     * @en Indentation between levels
+     */
+    levelIndent?: number;
+    /**
+     * @zh 用于定制图标
+     * @en Customize icons
+     */
+    icons?: {
+        horizontalArrowDown?: ReactNode | null;
+        popArrowRight?: ReactNode | null;
+        collapseDefault?: ReactNode | null;
+        collapseActive?: ReactNode | null;
+    };
+    /**
+     * @zh 默认展开所有多级菜单
+     * @en Whether to expand all multi-level menus by default
+     */
+    autoOpen?: boolean;
+    /**
+     * @zh 是否水平折叠收起菜单
+     * @en Whether to collapse the menu horizontally
+     */
+    collapse?: boolean;
+    /**
+     * @zh 开启手风琴效果
+     * @en Whether to render as Accordion
+     */
+    accordion?: boolean;
+    /**
+     * @zh 菜单选项是否可选
+     * @en Whether is the menu item selectable
+     * @defaultValue true
+     */
+    selectable?: boolean;
+    /**
+     * @zh 水平菜单是否自动溢出省略
+     * @en Whether the horizontal menu automatically collapses when it overflows
+     * @defaultValue true
+     * @version 2.24.0
+     */
+    ellipsis?: boolean | {
+        text?: ReactNode;
+    };
+    /**
+     * @zh 是否自动滚动选中项目到可见区域
+     * @en Whether to automatically scroll the selected item to the visible area
+     */
+    autoScrollIntoView?: boolean;
+    /**
+     * @zh 是否内置折叠按钮
+     * @en Whether built-in folding button
+     */
+    hasCollapseButton?: boolean;
+    /**
+     * @zh 初始选中的菜单项 key 数组
+     * @en The initially selected menu item's key array
+     */
+    defaultSelectedKeys?: string[];
+    /**
+     * @zh 初始展开的子菜单 key 数组
+     * @en The initially opened menu item's key array
+     */
+    defaultOpenKeys?: string[];
+    /**
+     * @zh 选中的菜单项 key 数组（受控模式）
+     * @en Selected menu item's key array
+     */
+    selectedKeys?: string[];
+    /**
+     * @zh 展开的子菜单 key 数组（受控模式）
+     * @en Opened menu item's key array
+     */
+    openKeys?: string[];
+    /**
+     * @zh 点击菜单项的回调
+     * @en Click menu item callback
+     * @version `event` in 2.15.0, `keyPath` in 2.19.0
+     */
+    onClickMenuItem?: (key: string, event: any, keyPath: string[]) => any;
+    /**
+     * @zh 点击子菜单标题的回调
+     * @en Callback when click sub menu
+     * @version `keyPath` in 2.19.0
+     */
+    onClickSubMenu?: (key: string, openKeys: string[], keyPath: string[]) => void;
+    /**
+     * @zh 折叠状态改变时的回调
+     * @en Callback when menu collapse status changed
+     */
+    onCollapseChange?: (collapse: boolean) => void;
+    /**
+     * @zh 水平菜单自动超出省略发生变化时的回调
+     * @en Callback when horizontal-menu ellipsis status changed
+     * @version 2.57.0
+     */
+    onEllipsisChange?: (status: {
+        lastVisibleIndex: number;
+        overflowNodes: ReactNode[];
+    }) => void;
+    /**
+     * @zh
+     * 滚动到可见区域的配置项，接收所有[scroll-into-view-if-needed](https://github.com/stipsan/scroll-into-view-if-needed)的参数
+     * @en
+     * Scroll to the configuration item in the visible area and receive all the parameters of
+     * [scroll-into-view-if-needed](https://github.com/stipsan/scroll-into-view-if-needed)
+     */
+    scrollConfig?: {
+        [key: string]: any;
+    };
+    /**
+     * @zh 弹出模式下可接受所有 `Trigger` 的 `Props`
+     * @en Pass all `Trigger` component properties
+     */
+    triggerProps?: Partial<TriggerProps>;
+    /**
+     * @zh 弹出模式下可接受所有 `ToolTip` 的 `Props`
+     * @en Pass all `Tooltip` component properties
+     */
+    tooltipProps?: Partial<TooltipProps>;
+}
+/**
+ * @title Menu.SubMenu
+ */
+export interface MenuSubMenuProps extends Omit<HTMLAttributes<HTMLElement>, 'title' | 'className'> {
+    children?: ReactNode;
+    style?: CSSProperties;
+    className?: string | string[];
+    level?: number;
+    _key?: string;
+    /**
+     * @zh 子菜单的标题
+     * @en Title of the subMenu
+     */
+    title?: string | ReactNode;
+    /**
+     * @zh 唯一标志
+     * @en Unique ID of the subMenu
+     */
+    key: string;
+    /**
+     * @zh 是否将多级菜单头也作为一个菜单项，支持点击选中等状态。
+     * @en Whether to use the subMenu header as a menu item which can be selected
+     */
+    selectable?: boolean;
+    /**
+     * @zh 是否强制使用弹出模式，`level` 表示当前子菜单的层级
+     * @en Whether to force the use of popup mode, parameter `level` indicates the level of current subMenu.
+     * @version 2.8.0
+     */
+    popup?: boolean | ((level: number) => boolean);
+    /**
+     * @zh 弹出模式下可接受所有 `Trigger` 的 `Props`
+     * @en Pass all `Trigger` component properties
+     * @version 2.19.0
+     */
+    triggerProps?: Partial<TriggerProps>;
+}
+/**
+ * @title Menu.ItemGroup
+ */
+export interface MenuItemGroupProps {
+    children?: ReactNode;
+    style?: CSSProperties;
+    className?: string | string[];
+    level?: number;
+    _key?: string;
+    /**
+     * @zh 菜单组的标题
+     * @en Title of the menu item group
+     */
+    title?: string | ReactNode;
+}
+/**
+ * @title Menu.Item
+ */
+export interface MenuItemProps extends Omit<HTMLAttributes<HTMLElement>, 'className'> {
+    children?: ReactNode;
+    style?: CSSProperties;
+    className?: string | string[];
+    level?: number;
+    _key?: string;
+    onClick?: (e: any) => void;
+    /**
+     * @zh 唯一标志
+     * @en Unique ID of the menu item
+     */
+    key: string;
+    /**
+     * @zh 菜单项禁止选中
+     * @en Whether the item is disabled
+     */
+    disabled?: boolean;
+    /**
+     * @zh 配置最外层标签，可以是 html 标签或是组件
+     * @en Configure the outermost label, which can be a html label or a component
+     * @defaultValue div
+     * @version 2.16.0
+     */
+    wrapper?: string | React.FC<any> | React.ComponentClass<any>;
+    /**
+     * @zh 菜单折叠时，指定在 Tooltip 中展示的菜单项节点
+     * @en Set the menu item displayed in Tooltip when menu is collapsed
+     * @version 2.51.0
+     */
+    renderItemInTooltip?: () => ReactNode;
+}

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

@@ -0,0 +1,84 @@
+import { CSSProperties, ReactNode } from 'react';
+import { MessageType } from '.';
+/**
+ * @title Message
+ */
+export interface MessageProps {
+    style?: CSSProperties;
+    className?: string | string[];
+    /**
+     * @zh 消息弹出动画的类名，见 react-transition-group 的 `classNames`
+     * @en ClassNames of react-transition-group of the message pop-up animation, see `classNames`
+     */
+    transitionClassNames?: string;
+    /**
+     * @zh 动画持续时间，见 react-transition-group 的 `timeout`
+     * @en timeout of `react-transition-group` of the message pop-up animation, see `timeout`
+     * @defaultValue {enter: 100, exit: 300}
+     * @version 2.43.0
+     */
+    transitionTimeout?: {
+        enter?: number;
+        exit?: number;
+    };
+    /**
+     * @zh 消息内容
+     * @en Message content
+     */
+    content: ReactNode | string;
+    /**
+     * @zh 是否显示图标
+     * @en Whether to show the icon
+     * @defaultValue true
+     */
+    showIcon?: boolean;
+    /**
+     * @zh 自定义图标
+     * @en Custom icon
+     */
+    icon?: ReactNode;
+    /**
+     * @zh 自动关闭的时间，单位为 `ms`
+     * @en Automatic shutdown time, the unit is `ms`
+     * @defaultValue 3000
+     */
+    duration?: number;
+    /**
+     * @zh 关闭时的回调
+     * @en Callback when close
+     */
+    onClose?: () => void;
+    /**
+     * @zh 当前消息的唯一标识，可以用来更新消息
+     * @en The unique identifier of the current message, which can be used to update the message
+     */
+    id?: string;
+    /**
+     * @zh 消息的位置，分为 `top` 上方和 `bottom` 下方
+     * @en The position of the message
+     */
+    position?: 'top' | 'bottom';
+    /**
+     * @zh 是否显示关闭按钮
+     * @en Whether to show the close button
+     * @defaultValue true
+     */
+    closable?: boolean;
+    /**
+     * @zh 自定义右上角关闭按钮
+     * @en Custom the close button on top-right of the drawer dialog
+     * @version 2.50.0
+     */
+    closeIcon?: ReactNode;
+    type?: string;
+}
+type messageHookFunction = (config: MessageProps | string) => MessageType;
+export type MessageHookReturnType = {
+    info?: messageHookFunction;
+    success?: messageHookFunction;
+    warning?: messageHookFunction;
+    error?: messageHookFunction;
+    loading?: messageHookFunction;
+    normal?: messageHookFunction;
+};
+export {};