@unicom-cloud/ui 0.8.83 → 0.8.85

package/types/pc/resize-box/interface.d.ts

@@ -0,0 +1,264 @@
+import { CSSProperties, ReactNode } from 'react';
+/**
+ * @title ResizeBox
+ */
+export interface ResizeBoxProps {
+    style?: CSSProperties;
+    className?: string | string[];
+    /**
+     * @zh 宽度，受控属性
+     * @en The width of ResizeBox
+     * @version 2.7.0
+     */
+    width?: number;
+    /**
+     * @zh 高度，受控属性
+     * @en The height of ResizeBox
+     * @version 2.7.0
+     */
+    height?: number;
+    /**
+     * @zh 伸缩框的 html 标签
+     * @en The html tag of ResizeBox
+     * @defaultValue div
+     */
+    component?: string;
+    /**
+     * @zh 可以进行伸缩的边，有上、下、左、右可以使用，默认是右方向。
+     * @en The edges can be Resize, It can be `up`, `down`, `left`, `right`
+     * @defaultValue ['right']
+     */
+    directions?: Array<'left' | 'right' | 'top' | 'bottom'>;
+    /**
+     * @zh 定制伸缩杆的图标，四个方向都支持定制。
+     * @en Custom the icon of Split,All four directions are supported
+     * @defaultValue {}
+     */
+    resizeIcons?: {
+        top?: ReactNode;
+        bottom?: ReactNode;
+        left?: ReactNode;
+        right?: ReactNode;
+    };
+    /**
+     * @zh 定制伸缩杆的内容，四个方向都支持定制。
+     * @en Custom the content of Split,All four directions are supported
+     * @defaultValue {}
+     */
+    resizeTriggers?: {
+        top?: ReactNode;
+        bottom?: ReactNode;
+        left?: ReactNode;
+        right?: ReactNode;
+    };
+    /**
+     * @zh 开始拖拽之前的回调
+     * @en Callback when the start of resize.
+     */
+    onMovingStart?: () => void;
+    /**
+     * @zh 拖拽中的回调
+     * @en Callback when resizing
+     * @version `size` in `2.7.0`
+     */
+    onMoving?: (e: MouseEvent, size: {
+        width: number;
+        height: number;
+    }) => void;
+    /**
+     * @zh 拖拽结束之后的回调
+     * @en Callback when the end of resize
+     */
+    onMovingEnd?: () => void;
+}
+/**
+ * @title ResizeBox.Split
+ */
+export interface SplitProps {
+    style?: CSSProperties;
+    className?: string | string[];
+    /**
+     * @zh 分割框的 html 标签
+     * @en The html tag of Split
+     * @defaultValue div
+     */
+    component?: string;
+    /**
+     * @zh 分割方向分为水平 `horizontal` 和垂直 `vertical`，默认是水平分割
+     * @en The direction of Split. It can be `horizontal` and `vertical`
+     * @defaultValue horizontal
+     * @version `reverse` in `2.35.0`
+     */
+    direction?: 'horizontal' | 'vertical' | 'horizontal-reverse' | 'vertical-reverse';
+    /**
+     * @zh 定制伸缩杆的图标
+     * @en Custom the icon of Split
+     */
+    icon?: ReactNode;
+    /**
+     * @zh 定制伸缩杆的内容
+     * @en Custom the content of Split
+     */
+    trigger?: ReactNode;
+    /**
+     * @zh 分割的大小，可以是 0~1 代表百分比，或具体数值的像素，如 300px
+     * @en Split size. It can be 0~1 representing a percentage, or a specific number of pixels, ex 300px
+     * @defaultValue 0.5
+     */
+    size?: number | string;
+    /**
+     * @zh 最小阈值
+     * @en Minimum threshold
+     */
+    min?: number | string;
+    /**
+     * @zh 最大阈值
+     * @en Maximum threshold
+     */
+    max?: number | string;
+    /**
+     * @zh 面板，[firstPane, secondPane]
+     * @en panes,[firstPane, secondPane]
+     */
+    panes: ReactNode[];
+    /**
+     * @zh 禁用
+     * @en Whether the split is disabled
+     */
+    disabled?: boolean;
+    /**
+     * @zh 开始拖拽之前的回调
+     * @en Callback when the start of resize
+     */
+    onMovingStart?: () => void;
+    /**
+     * @zh 拖拽中的回调
+     * @en Callback when moving
+     * @version `size` in `2.14.0`
+     */
+    onMoving?: (e: MouseEvent, size: number | string) => void;
+    /**
+     * @zh 拖拽结束之后的回调
+     * @en Callback when the end of resize
+     */
+    onMovingEnd?: () => void;
+    /**
+     * @zh 面板大小变化的回调
+     * @en Callback when pane resized
+     * @version 2.25.0
+     */
+    onPaneResize?: (paneContainers: HTMLElement[]) => void;
+}
+/**
+ * @title ResizeBox.SplitGroup in `2.27.0`
+ */
+export interface SplitGroupProps {
+    style?: CSSProperties;
+    className?: string | string[];
+    /**
+     * @zh 分割框的 html 标签
+     * @en The html tag of SplitGroup
+     * @defaultValue div
+     */
+    component?: string;
+    /**
+     * @zh 分割方向分为水平 `horizontal` 和垂直 `vertical`，默认是水平分割
+     * @en The direction of Split. It can be `horizontal` and `vertical`
+     * @defaultValue horizontal
+     */
+    direction?: 'horizontal' | 'vertical';
+    /**
+     * @zh 定制伸缩杆的图标
+     * @en Custom the icon of Split
+     */
+    icon?: ReactNode;
+    /**
+     * @zh 面板
+     * @en panes
+     */
+    panes: SplitGroupPane[];
+    /**
+     * @zh 开始拖拽之前的回调
+     * @en Callback when the start of resize
+     */
+    onMovingStart?: (activeIndex: number) => void;
+    /**
+     * @zh 拖拽中的回调, `size` 参数是各个面板占的像素值
+     * @en Callback when moving
+     */
+    onMoving?: (e: MouseEvent, size: string[], activeIndex: number) => void;
+    /**
+     * @zh 拖拽结束之后的回调
+     * @en Callback when the end of resize
+     */
+    onMovingEnd?: (activeIndex: number) => void;
+    /**
+     * @zh 面板大小变化的回调
+     * @en Callback when pane resized
+     */
+    onPaneResize?: (paneContainers: HTMLElement[]) => void;
+}
+/**
+ * @title ResizeBox.SplitGroup.CollapsedConfig
+ */
+export interface CollapsedConfig {
+    /**
+     * @zh 快速折叠按钮的icon
+     * @en Quick collapse button icon
+     */
+    icon?: ReactNode;
+    /**
+     * @zh 点击快速折叠的回调
+     * @en Click the callback for quick folding
+     */
+    onClick?: (e: any, collapsed: any, activeIndex: any, direction: 'prev' | 'next') => void;
+}
+/**
+ * @title ResizeBox.SplitGroup.Pane
+ */
+export interface SplitGroupPane {
+    /**
+     * @zh 当前面板的内容
+     * @en The contents of the current panel
+     */
+    content: ReactNode;
+    /**
+     * @zh 分割的大小，可以是 0~1 代表百分比，或具体数值的像素，如 300px
+     * @en The size of the segmentation can be 0~1 representing a percentage, or a pixel with a specific value, such as 300px
+     */
+    size?: number | string;
+    /**
+     * @zh 最小阈值，优先级比 `max`高，并且会影响相邻面板的阈值。
+     * @en Maximum threshold, The priority is higher than `max` and will affect the threshold of adjacent panels.
+     */
+    min?: number | string;
+    /**
+     * @zh 最大阈值
+     * @en Minimum threshold
+     */
+    max?: number | string;
+    /**
+     * @zh 禁用，将不会展示伸缩杆。
+     * @en disabled, the split bar will not be displayed
+     */
+    disabled?: boolean;
+    /**
+     * @zh 是否支持快速折叠;
+     * @en Whether to support fast collapsed
+     */
+    collapsible?: boolean | {
+        prev?: boolean | CollapsedConfig;
+        next?: boolean | CollapsedConfig;
+    };
+    /**
+     * @zh 是否支持拖拽伸缩
+     * @en Whether to support drag and drop
+     * @defaultValue true
+     */
+    resizable?: boolean;
+    /**
+     * @zh 定制伸缩杆内容, 参数分别表示向前快速收缩、拖拽伸缩触发器、向后快速收缩的触发器
+     * @en Customize the content of the Split
+     */
+    trigger?: (prevNode: ReactNode, resizeNode: ReactNode, nextNode: ReactNode) => ReactNode;
+}

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

@@ -0,0 +1,35 @@
+import { CSSProperties, ReactNode } from 'react';
+export type ResultStatus = null | 'success' | 'error' | 'info' | 'warning' | '404' | '403' | '500';
+/**
+ * @title Result
+ */
+export interface ResultProps {
+    className?: string | string[];
+    style?: CSSProperties;
+    /**
+     * @zh 标题文字
+     * @en The title
+     */
+    title?: ReactNode;
+    /**
+     * @zh 子标题文字
+     * @en The subTitle
+     */
+    subTitle?: ReactNode;
+    /**
+     * @zh 不同状态，传入 null 时，需要通过 `icon` 属性设置图标，并且默认没有背景色以及图标颜色
+     * @en The result status, if `null` the icon and the background color will not be displayed. [example](/react/en-US/component/result#custom-icon)
+     * @defaultValue info
+     */
+    status?: 'success' | 'error' | 'info' | 'warning' | '404' | '403' | '500' | null;
+    /**
+     * @zh 自定义图标
+     * @en Customize the icon
+     */
+    icon?: ReactNode;
+    /**
+     * @zh 额外内容
+     * @en The operating area
+     */
+    extra?: ReactNode;
+}

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

@@ -0,0 +1,321 @@
+import { Options as ScrollIntoViewOptions } from '@unicom-cloud/scroll-into-view-if-needed';
+import { CSSProperties, HTMLAttributes, PropsWithChildren, ReactElement, ReactNode } from 'react';
+import { SelectViewCommonProps } from '../select-view';
+import { TriggerProps } from '../trigger';
+import { AvailableVirtualListProps } from '../virtual-list';
+export type OptionsType = SelectProps['options'];
+export type InputValueChangeReason = 'manual' | 'optionChecked' | 'optionListHide' | 'tokenSeparator';
+export interface OptionInfo extends PropsWithChildren<OptionProps> {
+    child?: ReactElement;
+    _valid: boolean;
+    _index: number;
+    _origin: 'children' | 'options' | 'userCreatedOptions' | 'userCreatingOption';
+}
+export type LabeledValue = {
+    value: string | number;
+    label: ReactNode;
+};
+export type SelectInnerStateValue = string | number | string[] | number[];
+/**
+ * @title Select
+ */
+export interface SelectProps extends SelectViewCommonProps {
+    /**
+     * @zh 选择框的默认值
+     * @en To set default value
+     */
+    defaultValue?: string | string[] | number | number[] | LabeledValue | LabeledValue[];
+    /**
+     * @zh 选择器的值（受控模式）
+     * @en To set value
+     */
+    value?: string | string[] | number | number[] | LabeledValue | LabeledValue[];
+    /**
+     * @zh 输入框的值（受控模式）
+     * @en To set input value
+     */
+    inputValue?: string;
+    /**
+     * @zh 是否开启多选模式或标签模式 (**`tags` 推荐使用 `mode: multiple; allowCreate: true` 替代，下一大版本将移除此模式**)
+     * @en Set mode of Select(**`tags` recommends using `mode: multiple; allowCreate: true` instead, this mode will be removed in the next major version**)
+     */
+    mode?: 'multiple' | 'tags';
+    /**
+     * @zh 是否开启全选选项，仅在多选模式时才生效
+     * 潘启宝添加
+     */
+    allowCheckAll?: boolean;
+    /**
+     * @zh 指定可选项
+     * @en Select options
+     * @version `extra` in 2.2.0
+     */
+    options?: (string | number | {
+        label: ReactNode | string;
+        value: string | number;
+        disabled?: boolean;
+        extra?: any;
+    })[];
+    /**
+     * @zh 设置 `onChange` 回调中 `value` 的格式。默认是string，设置为true时候，value格式为： { label: string, value: string }
+     * @en Whether to embed label in value, turn the format of value from string to `{ value: string, label: ReactNode }`
+     */
+    labelInValue?: boolean;
+    /**
+     * @zh 是否根据输入的值筛选数据。如果传入函数的话，接收 `inputValue` 和 `option` 两个参数，当option符合筛选条件时，返回 `true`，反之返回 `false`。
+     * @en If it's true, filter options by input value. If it's a function, filter options base on the function.
+     * @defaultValue true
+     */
+    filterOption?: boolean | ((inputValue: string, option: ReactElement, optionRaw: object | undefined | null) => boolean);
+    /**
+     * @zh
+     * 定制回显内容。返回值将会显示在下拉框内。若 `value` 对应的 `Option` 不存在，则第一个参数是 null
+     * @en
+     * Customize the content that will be displayed in the Select.
+     * If the `Option` corresponding to `value` does not exist, the first parameter will be `null`
+     */
+    renderFormat?: (option: OptionInfo | null, value: string | number | LabeledValue) => ReactNode;
+    /**
+     * @zh 是否默认高亮第一个选项
+     * @en Whether to highlight the first option by default
+     * @defaultValue true
+     */
+    defaultActiveFirstOption?: boolean;
+    /**
+     * @zh 是否允许通过输入创建新的选项。
+     * @en Whether to allow new options to be created by input.
+     * @version 2.13.0, `{ formatter }` in 2.54.0
+     */
+    allowCreate?: boolean | {
+        formatter: (inputValue: string, creating: boolean) => SelectProps['options'][number];
+    };
+    /**
+     * @zh 是否在隐藏的时候销毁 DOM 结构
+     * @en Whether to destroy the DOM when hiding
+     * @defaultValue true
+     */
+    unmountOnExit?: boolean;
+    /**
+     * @zh 下拉框是否默认打开。
+     * @en Whether to show dropdown by default.
+     * @version 2.14.0
+     */
+    defaultPopupVisible?: boolean;
+    /**
+     * @zh 控制下拉框是否打开。
+     * @en Whether to show dropdown.
+     * @version 2.6.0
+     */
+    popupVisible?: boolean;
+    /**
+     * @zh 没有数据时显示的内容
+     * @en Specify content to show when no result matches.
+     */
+    notFoundContent?: ReactNode;
+    /**
+     * @zh 在多选模式下自动分词的分隔符。
+     * @en Separator used to tokenize on `multiple` mode.
+     */
+    tokenSeparators?: string[];
+    /**
+     * @zh 弹出框挂载的父节点。
+     * @en To set the container of the dropdown.
+     */
+    getPopupContainer?: (node: HTMLElement) => Element;
+    /**
+     * @zh 触发方式。
+     * @en The trigger mode which executes the dropdown action.
+     * @defaultValue click
+     */
+    trigger?: TriggerProps['trigger'];
+    /**
+     * @zh 自定义触发元素。
+     * @en The trigger element which executes the dropdown action.
+     * @version `() => ReactNode` in 2.31.0
+     */
+    triggerElement?: ReactNode | ((params: {
+        value: any;
+        option: OptionInfo | OptionInfo[];
+    }) => ReactNode);
+    /**
+     * @zh 可以接受所有 `Trigger` 的 `Props`
+     * @en Pass all `Trigger` component properties
+     */
+    triggerProps?: Partial<TriggerProps>;
+    /**
+     * @zh 自定义弹出内容。
+     * @en Customize dropdown content
+     */
+    dropdownRender?: (menu: ReactNode) => ReactNode;
+    /**
+     * @zh 下拉列表的样式。
+     * @en The style of dropdown menu.
+     */
+    dropdownMenuStyle?: CSSProperties;
+    /**
+     * @zh 下拉列表的类。
+     * @en The className of dropdown menu.
+     */
+    dropdownMenuClassName?: string | string[];
+    /**
+     * @zh 传递虚拟滚动属性。
+     * @en Pass properties used by VirtualList.
+     * @version 2.1.0
+     */
+    virtualListProps?: AvailableVirtualListProps;
+    /**
+     * @zh 点击选择框的回调
+     * @en Callback when select an option or input value change.
+     */
+    onChange?: (value: any, option: OptionInfo | OptionInfo[]) => void;
+    /**
+     * @zh 选中选项时触发的回调，(只在 `multiple` 模式下触发)。
+     * @en Called when an option is selected. Only called for `multiple` mode.
+     * @version 2.52.0
+     */
+    onSelect?: (value: string | number | LabeledValue, option: OptionInfo) => void;
+    /**
+     * @zh 取消选中的时候触发的回调，(只在 `multiple` 模式下触发)。
+     * @en Called when an option is deselected. Only called for `multiple` mode.
+     */
+    onDeselect?: (value: string | number | LabeledValue, option: OptionInfo) => void;
+    /**
+     * @zh 点击清除时触发，参数是当前下拉框的展开状态。
+     * @en Called when clear
+     */
+    onClear?: (visible: boolean) => void;
+    /**
+     * @zh 搜索时的回调
+     * @en Callback when input changed
+     */
+    onSearch?: (value: string, reason: InputValueChangeReason) => void;
+    /**
+     * @zh 获得焦点时的回调
+     * @en Callback when get focus
+     */
+    onFocus?: (e: any) => void;
+    /**
+     * @zh 失去焦点时的回调
+     * @en Callback when lose focus
+     */
+    onBlur?: (e: any) => void;
+    /**
+     * @zh 下拉框的滚动监听函数，参数为滚动元素。
+     * @en Callback when dropdown scrolls.
+     */
+    onPopupScroll?: (elem: any) => void;
+    /**
+     * @zh 下拉框收起展开时触发
+     * @en Callback when visibility of dropdown is changed.
+     */
+    onVisibleChange?: (visible: boolean) => void;
+    /**
+     * @zh 输入框文本改变的回调。
+     * @en Callback when the value of input is changed.
+     * @version 2.3.0
+     */
+    onInputValueChange?: (value: string, reason: InputValueChangeReason) => void;
+    /**
+     * @zh 输入框文本粘贴的回调。
+     * @en Callback when the you paste text in input box.
+     * @version 2.9.0
+     */
+    onPaste?: (e: any) => void;
+}
+/**
+ * @title Select.Option
+ */
+export interface OptionProps extends Omit<HTMLAttributes<HTMLLIElement>, 'className'> {
+    _key?: any;
+    style?: CSSProperties;
+    children?: ReactNode;
+    prefixCls?: string;
+    rtl?: boolean;
+    className?: string | string[];
+    wrapperClassName?: string | string[];
+    /**
+     * @zh 是否禁用
+     * @en Whether the option is disabled
+     */
+    disabled?: boolean;
+    /**
+     * @zh 默认根据此属性值进行筛选
+     * @en Value of this Option
+     */
+    value: string | number;
+    /**
+     * @zh 携带任意自定义数据。
+     * @en Any data you want to pass to Option.
+     * @version 2.2.0
+     */
+    extra?: any;
+    isSelectOption?: boolean;
+    _isMultipleMode?: boolean;
+    _isUserCreatedOption?: boolean;
+    _isUserCreatingOption?: boolean;
+    _valueActive?: OptionProps['value'];
+    _valueSelect?: SelectInnerStateValue;
+    _onClick?: (value: OptionProps['value'], disabled: boolean) => void;
+    _onMouseEnter?: (value: OptionProps['value']) => void;
+    _onMouseLeave?: () => void;
+}
+/**
+ * @title Select.OptGroup
+ */
+export interface OptGroupProps extends HTMLAttributes<HTMLLIElement> {
+    _key?: any;
+    children?: ReactNode;
+    prefixCls?: string;
+    /**
+     * @zh 组名
+     * @en Name of Group
+     */
+    label?: ReactNode;
+    isSelectOptGroup?: boolean;
+}
+/**
+ * @title Select Reference Type
+ */
+export type SelectHandle = {
+    /**
+     * @zh DOM 节点
+     * @en DOM
+     */
+    dom: HTMLDivElement;
+    /**
+     * @zh 使选择框聚焦
+     * @en Focus Select
+     */
+    focus: () => void;
+    /**
+     * @zh 使选择框失焦
+     * @en Blur Select
+     */
+    blur: () => void;
+    /**
+     * @zh 鼠标快捷操作的处理函数
+     * @en Processor of mouse shortcut operation
+     */
+    hotkeyHandler: (event: KeyboardEvent) => void;
+    /**
+     * @zh 处于悬浮态的选项的值
+     * @en The value of active option
+     */
+    activeOptionValue: OptionProps['value'];
+    /**
+     * @zh 获得选项信息的列表
+     * @en Get the list of option info
+     */
+    getOptionInfoList: () => OptionInfo[];
+    /**
+     * @zh 根据选项值获得对应的选项信息
+     * @en Get the option info by its value
+     */
+    getOptionInfoByValue: (value: OptionProps['value']) => OptionInfo;
+    /**
+     * @zh 将下拉列表滚动至指定选项
+     * @en Scroll the drop-down list to the specified option
+     * @version 2.46.0
+     */
+    scrollIntoView: (value: OptionProps['value'], options?: ScrollIntoViewOptions) => void;
+};

package/types/pc/select/util.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { OptionInfo, OptionProps, SelectInnerStateValue, SelectProps } from './interface';
+export type OptionInfoMap = Map<OptionProps['value'], OptionInfo>;
+declare function preventDefaultEvent(e: any): void;
+declare function isEmpty(value: any, isMultiple: boolean): boolean;
+declare function getValidValue(value: any, isMultiple: boolean, labelInValue: boolean): SelectInnerStateValue;
+declare function isSelectOption(child: any): boolean;
+declare function isSelectOptGroup(child: any): boolean;
+declare function flatChildren({ children, options, filterOption, }: Pick<SelectProps, 'children' | 'options' | 'filterOption'>, { inputValue, userCreatedOptions, userCreatingOption, prefixCls, }: {
+    inputValue: string;
+    userCreatedOptions?: SelectProps['options'];
+    userCreatingOption?: SelectProps['options'][number];
+    prefixCls: string;
+}, { optionInfoMap, optionValueList, customNodeCount, }?: {
+    optionInfoMap?: OptionInfoMap;
+    optionValueList?: Array<OptionProps['value']>;
+    customNodeCount?: number;
+}): {
+    childrenList: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
+    optionInfoMap: OptionInfoMap;
+    optionValueList: (string | number)[];
+    optionIndexListForArrowKey: number[];
+    hasOptGroup: boolean;
+    hasComplexLabelInOptions: boolean;
+};
+export { flatChildren, getValidValue, isEmpty, isSelectOptGroup, isSelectOption, preventDefaultEvent, };