@unicom-cloud/ui 0.8.83 → 0.8.85

package/types/pc/date-picker/interface.d.ts

@@ -0,0 +1,518 @@
+import { Dayjs } from 'dayjs';
+import React, { CSSProperties, ReactNode } from 'react';
+import { TimePickerProps } from '../time-picker/interface';
+import { TriggerProps } from '../trigger';
+import { Omit } from '../utils/type';
+export type CalendarValue = number | string | Date | Dayjs;
+export type ShortcutType = {
+    text: ReactNode;
+    value: () => Dayjs | Dayjs[];
+} & Record<string, unknown>;
+export type IconsType = {
+    prev?: ReactNode;
+    prevDouble?: ReactNode;
+    next?: ReactNode;
+    nextDouble?: ReactNode;
+    inputSuffix?: ReactNode;
+};
+export type DisabledTimeProps = {
+    disabledHours?: () => number[];
+    disabledMinutes?: () => number[];
+    disabledSeconds?: () => number[];
+};
+export type DisabledRangeTimeFunc = (current: Dayjs, type: 'start' | 'end') => DisabledTimeProps;
+export type DisabledTimeFunc = (current?: Dayjs) => DisabledTimeProps;
+export type ModeType = 'date' | 'month' | 'week' | 'year' | 'quarter';
+export type PrivateCType = {
+    setPageShowDate?: (d: Dayjs) => void;
+    getHeaderOperations?: (mode?: ModeType) => {
+        onPrev?: () => void;
+        onNext?: () => void;
+        onSuperPrev?: () => void;
+        onSuperNext?: () => void;
+    };
+};
+/**
+ * @title Picker Props
+ */
+export interface PickerProps {
+    style?: CSSProperties;
+    className?: string | string[];
+    /**
+     * @zh 是否禁用
+     * @en Whether to disable
+     */
+    disabled?: boolean | boolean[];
+    /**
+     * @zh 允许清除
+     * @en Allow Clear
+     * @defaultValue true
+     */
+    allowClear?: boolean;
+    /**
+     * @zh 每周的第一天开始于周几，0 - 周日，1 - 周一，以此类推。
+     * @en The first day of the week starts on the day of the week, `0`-Sunday, `1`-Monday, and so on.
+     * @version 2 - 6 in `2.20.0`
+     */
+    dayStartOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * @zh 弹出的框的位置
+     * @en The position of the popup
+     */
+    position?: 'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br';
+    /**
+     * @zh 弹出框挂载的父节点
+     * @en The parent node of the popup
+     * @defaultValue bl
+     */
+    getPopupContainer?: (node: HTMLElement) => Element;
+    /**
+     * @zh 提示文案
+     * @en The placeholder of date input
+     */
+    placeholder?: string | string[];
+    /**
+     * @zh 预设时间范围快捷选择
+     * @en Shortcut selection of preset time range
+     */
+    shortcuts?: ShortcutType[];
+    /**
+     * @zh 预设范围选择放在面板左侧，用于大量预设时间的场景。
+     * @en The preset range selection is placed on the left side of the panel for a large number of scenes with preset time.
+     */
+    shortcutsPlacementLeft?: boolean;
+    /**
+     * @zh 是否是错误状态。(废弃，下个大版本移除，使用 status='error' 替代)
+     * @en Whether the textarea is error.(Deprecated, removed in the next major version, use status='error' instead)
+     * @deprecated
+     */
+    error?: boolean;
+    /**
+     * @zh 状态
+     * @en Status
+     * @version 2.45.0
+     */
+    status?: 'error' | 'warning';
+    /**
+     * @zh 前缀
+     * @en prefix
+     * @version 2.43.0
+     */
+    prefix?: ReactNode;
+    /**
+     * @zh 是否在隐藏的时候销毁 DOM 结构
+     * @en Whether to destroy popup when hidden
+     */
+    unmountOnExit?: boolean;
+    /**
+     * @zh 日期选择器的尺寸
+     * @en The size of input box
+     * @defaultValue default
+     */
+    size?: 'mini' | 'small' | 'default' | 'large';
+    /**
+     * @zh 指定弹框打开或者关闭状态。
+     * @en Whether the popup is visible or not
+     */
+    popupVisible?: boolean;
+    /**
+     * @zh 打开或关闭时的回调
+     * @en Callback when the visibility of the popup is changed
+     */
+    onVisibleChange?: (visible?: boolean) => void;
+    /**
+     * @zh 日历组件值发生改变时的回调
+     * @en Callback when the selected value changes
+     */
+    onChange?: (dateString: string, date: Dayjs) => void;
+    /**
+     * @zh 选中日期发生改变但组件值未改变时的回调
+     * @en Callback when the show date changes but the selected value does not change
+     */
+    onSelect?: (dateString: string, date: Dayjs) => void;
+    /**
+     * @zh 点击清除按钮后的回调
+     * @en Callback when clicking the clear button
+     */
+    onClear?: () => void;
+    /**
+     * @zh 自定义日期单元格的内容。
+     * @en Customize the contents of the date cell.
+     */
+    dateRender?: (currentDate: Dayjs) => ReactNode;
+    /**
+     * @zh 自定义渲染面板
+     * @en Customize the panel node.
+     * @version 2.34.0
+     */
+    panelRender?: (panelNode: ReactNode) => ReactNode;
+    /**
+     * @zh 是否可输入。
+     * @en Whether input box can be entered.
+     * @defaultValue true
+     */
+    editable?: boolean;
+    /**
+     * @zh 可以传入 `Trigger` 组件的参数。
+     * @en The props of the `Trigger` component.
+     */
+    triggerProps?: Partial<TriggerProps>;
+    /**
+     * @zh 点击快捷选择时的回调。
+     * @en Callback when click shortcut selection.
+     */
+    onSelectShortcut?: (shortcut: ShortcutType) => void;
+    /**
+     * @zh 日历分页的图标配置。
+     * @en Icon configuration of panel.
+     * @version 2.20.0
+     */
+    icons?: {
+        prev?: ReactNode;
+        prevDouble?: ReactNode;
+        next?: ReactNode;
+        nextDouble?: ReactNode;
+        inputSuffix?: ReactNode;
+    };
+    /**
+     * @zh
+     * 国际化配置
+     * @en
+     * Internationalization configuration.
+     */
+    locale?: Record<string, unknown>;
+    /**
+     * @zh 范围选择器输入框内的分割符号
+     * @en Separator symbol in the range selector input box
+     */
+    separator?: ReactNode;
+    /**
+     * @zh 不可选取的日期
+     * @en Specify the date that cannot be selected
+     */
+    disabledDate?: (current: Dayjs) => boolean;
+    /**
+     * @zh 额外的页脚
+     * @en Extra footer
+     */
+    extra?: ReactNode;
+    /**
+     * @zh 点击确认按钮的回调
+     * @en Callback when click confirm button
+     */
+    onOk?: (dateString: string, date: Dayjs) => void;
+    /**
+     * @zh 触发元素。
+     * @en Trigger element.
+     * @version 2.9.0
+     */
+    triggerElement?: ReactNode;
+    /**
+     * @zh 默认面板显示的日期
+     * @en Default displayed date of panel
+     */
+    defaultPickerValue?: CalendarValue;
+    /**
+     * @zh 面板显示的日期。
+     * @en Displayed date of panel.
+     * @version 2.9.0
+     */
+    pickerValue?: CalendarValue;
+    /**
+     * @zh 面板日期改变的回调。
+     * @en Callback when date of panel changes.
+     * @version 2.9.0
+     */
+    onPickerValueChange?: (dateString: string, value: Dayjs) => void;
+    /**
+     * @zh 面板隐藏不在当前时间范围的灰色日期
+     * @en The panel hides gray dates that are not in the current time range
+     * @version 2.20.0
+     */
+    hideNotInViewDates?: boolean;
+    /**
+     * @zh 设置时区偏移，如果需要 utc 时间则设置为 0。
+     * @en Set the timezone offset, set to 0 if utc time is required.
+     */
+    utcOffset?: number;
+    /**
+     * @zh 设置时区, 如果设置了 `utcOffset`，则以 `utcOffset` 为准。
+     * @en timezone name, if `utcOffset` is set, `utcOffset` takes effect.
+     */
+    timezone?: string;
+    /**
+     * @zh 原生输入框属性
+     * @en Native input attributes
+     * @version 2.60.0
+     */
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+}
+/**
+ * @title DatePicker
+ * @zh `type CalendarValue = number | string | Date | Dayjs`。
+ * @en `type CalendarValue = number | string | Date | Dayjs`。
+ */
+export interface BaseDatePickerProps {
+    /**
+     * @zh 展示日期的格式，参考[dayjs](https://github.com/iamkun/dayjs)。使用 `string` 时，可以手动键入和编辑日期。使用 `(value: Dayjs) => string` 时，只能在 Picker 中选取日期。
+     * @en Date format, refer to [dayjs](https://github.com/iamkun/dayjs). When using a `string`, manual editing is allowed. When using `(value: Dayjs) => string`, value must be picked from Picker.
+     * @defaultValue YYYY-MM-DD
+     */
+    format?: string | ((value: Dayjs) => string);
+    /**
+     * @zh 默认日期
+     * @en To set default date
+     */
+    defaultValue?: CalendarValue;
+    /**
+     * @zh 日历组件的值
+     * @en To set date
+     */
+    value?: CalendarValue;
+    /**
+     * @zh 是否增加时间选择
+     * @en Whether to show time selection
+     */
+    showTime?: boolean | TimePickerProps;
+    /**
+     * @zh 时间显示的参数，参考 [TimePickerProps](#/pc/time-picker)，作用同 `showTime`。
+     * @en Parameters of TimePicker, refer to [TimePickerProps](#/pc/time-picker), which has the same function as `showTime`.
+     */
+    timepickerProps?: TimePickerProps;
+    /**
+     * @zh 是否显示 `showTime` 时，选择当前时间的按钮。
+     * @en When displaying `showTime`, button to select current time.
+     * @defaultValue true
+     */
+    showNowBtn?: boolean;
+    /**
+     * @zh 不可选取的时间
+     * @en Specify the time that cannot be selected
+     */
+    disabledTime?: (current?: Dayjs) => DisabledTimeProps;
+}
+export type DatePickerProps = BaseDatePickerProps & PickerProps;
+/**
+ * @title WeekPicker
+ */
+export interface BaseWeekPickerProps {
+    /**
+     * @zh 展示日期的格式，参考[dayjs](https://github.com/iamkun/dayjs)
+     * @en Date format, refer to [dayjs](https://github.com/iamkun/dayjs)
+     * @defaultValue gggg-wo
+     */
+    format?: string;
+    /**
+     * @zh 默认日期
+     * @en To set default date
+     */
+    defaultValue?: CalendarValue;
+    /**
+     * @zh 日历组件的值
+     * @en To set date
+     */
+    value?: CalendarValue;
+}
+export type WeekPickerProps = BaseWeekPickerProps & PickerProps;
+/**
+ * @title MonthPicker
+ */
+export interface BaseMonthPickerProps {
+    /**
+     * @zh 展示日期的格式，参考[dayjs](https://github.com/iamkun/dayjs)
+     * @en Date format, refer to [dayjs](https://github.com/iamkun/dayjs)
+     * @defaultValue YYYY-MM
+     */
+    format?: string;
+    /**
+     * @zh 默认日期
+     * @en To set default date
+     */
+    defaultValue?: CalendarValue;
+    /**
+     * @zh 日历组件的值
+     * @en To set date
+     */
+    value?: CalendarValue;
+}
+export type MonthPickerProps = BaseMonthPickerProps & PickerProps;
+/**
+ * @title YearPicker
+ */
+export interface BaseYearPickerProps {
+    /**
+     * @zh 展示日期的格式，参考[dayjs](https://github.com/iamkun/dayjs)
+     * @en Date format, refer to [dayjs](https://github.com/iamkun/dayjs)
+     * @defaultValue YYYY
+     */
+    format?: string;
+    /**
+     * @zh 默认日期
+     * @en To set default date
+     */
+    defaultValue?: CalendarValue;
+    /**
+     * @zh 日历组件的值
+     * @en To set date
+     */
+    value?: CalendarValue;
+}
+export type YearPickerProps = BaseYearPickerProps & PickerProps;
+/**
+ * @title QuarterPicker
+ */
+export interface BaseQuarterPickerProps {
+    /**
+     * @zh 展示日期的格式，参考[dayjs](https://github.com/iamkun/dayjs)
+     * @en Date format, refer to [dayjs](https://github.com/iamkun/dayjs)
+     * @defaultValue YYYY-[Q]Q
+     */
+    format?: string;
+    /**
+     * @zh 默认日期
+     * @en To set default date
+     */
+    defaultValue?: CalendarValue;
+    /**
+     * @zh 日历组件的值
+     * @en To set date
+     */
+    value?: CalendarValue;
+}
+export type QuarterPickerProps = BaseQuarterPickerProps & PickerProps;
+export type TimeRangePickerProps = Omit<TimePickerProps, 'defaultValue'> & {
+    defaultValue?: CalendarValue[];
+};
+/**
+ * @title RangePicker
+ */
+export interface BaseRangePickerProps {
+    /**
+     * @zh 是否禁用
+     * @en Whether to disable input box
+     */
+    disabled?: boolean | boolean[];
+    /**
+     * @zh 展示日期的格式，参考[dayjs](https://github.com/iamkun/dayjs)
+     * @en Date format, refer to [dayjs](https://github.com/iamkun/dayjs)
+     * @defaultValue YYYY-MM-DD
+     * @version string[] in 2.55.0
+     */
+    format?: string | string[];
+    /**
+     * @zh 日历组件值发生改变时的回调
+     * @en Callback when the selected value changes
+     */
+    onChange?: (dateString: string[], date: Dayjs[]) => void;
+    /**
+     * @zh 选中日期发生改变但组件值未改变时的回调
+     * @en Callback when the show value changes but the selected value does not change
+     * @version `extra` in `2.23.0`
+     */
+    onSelect?: (dateString: string[], value: Dayjs[], extra: {
+        type: 'start' | 'end';
+    }) => void;
+    /**
+     * @zh 默认日期
+     * @en To set default date
+     */
+    defaultValue?: CalendarValue[];
+    /**
+     * @zh 日历组件的值
+     * @en To set date
+     */
+    value?: CalendarValue[];
+    /**
+     * @zh 范围选择器的类型，可以是日期、月份。
+     * @en The type of RangePicker
+     * @defaultValue date
+     */
+    mode?: 'date' | 'month' | 'week' | 'year' | 'quarter';
+    /**
+     * @zh 是否增加时间选择，如果传入的是个对象，会把参数传给内置的 TimePicker。
+     * @en Whether to show time selection, if an object is passed in, the parameters will be passed to the built-in TimePicker.
+     */
+    showTime?: boolean | TimeRangePickerProps;
+    /**
+     * @zh 提示文案
+     * @en The placeholder of input
+     */
+    placeholder?: string[];
+    /**
+     * @zh 时间显示的参数，参考 [TimePickerProps](#/pc/time-picker)，作用同 `showTime`。
+     * @en Parameters of TimePicker, refer to [TimePickerProps](#/pc/time-picker), which has the same function as `showTime`.
+     */
+    timepickerProps?: TimePickerProps;
+    /**
+     * @zh 点击确认按钮的回调
+     * @en Callback when click confirm button
+     */
+    onOk?: (dateString: string[], date: Dayjs[]) => void;
+    /**
+     * @zh 不可选取的时间
+     * @en Specify the time that cannot be selected
+     */
+    disabledTime?: (current: Dayjs, type: 'start' | 'end') => DisabledTimeProps;
+    /**
+     * @zh 触发元素。
+     * @en Trigger element.
+     * @version 2.9.0
+     */
+    triggerElement?: ReactNode;
+    /**
+     * @zh 默认面板显示的日期
+     * @en Default displayed date of panel.
+     */
+    defaultPickerValue?: CalendarValue[];
+    /**
+     * @zh 面板显示的日期。
+     * @en Displayed date of panel.
+     * @version 2.9.0
+     */
+    pickerValue?: CalendarValue[];
+    /**
+     * @zh 面板日期改变的回调。
+     * @en Callback when date of panel changes.
+     * @version 2.9.0
+     */
+    onPickerValueChange?: (dateString: string[], value: Dayjs[]) => void;
+    /**
+     * @zh 当重新选择范围的时候，会清空之前的范围重新进行选择
+     * @en When reselect the range, the previous range will be cleared for next selection
+     * @version 2.23.0
+     */
+    clearRangeOnReselect?: boolean;
+    /**
+     * @zh 原生输入框属性
+     * @en Native input attributes
+     * @version 2.60.0
+     */
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>[];
+}
+export type RangePickerProps = BaseRangePickerProps & Omit<PickerProps, 'onChange' | 'onSelect' | 'onOk' | 'defaultPickerValue' | 'pickerValue' | 'onPickerValueChange' | 'inputProps'>;
+export interface ShortcutsProps {
+    prefixCls?: string;
+    shortcuts?: ShortcutType[];
+    onSelectShortcut?: (shortcut: ShortcutType, e: any) => void;
+    onMouseEnterShortcut?: (e: any) => void;
+    onMouseLeaveShortcut?: (e: any) => void;
+    showNowBtn?: boolean;
+    onSelectNow?: () => void;
+    nowText?: ReactNode;
+    showTime?: boolean | TimePickerProps;
+}
+export type DatePickerHandle = {
+    focus: () => void;
+    blur: () => void;
+};
+export type RangePickerHandle = {
+    focus: (index?: number) => void;
+    blur: () => void;
+};
+export interface DatePickerDecorator extends React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<DatePickerHandle>> {
+    MonthPicker: React.ForwardRefExoticComponent<MonthPickerProps & React.RefAttributes<DatePickerHandle>>;
+    YearPicker: React.ForwardRefExoticComponent<YearPickerProps & React.RefAttributes<DatePickerHandle>>;
+    WeekPicker: React.ForwardRefExoticComponent<WeekPickerProps & React.RefAttributes<DatePickerHandle>>;
+    QuarterPicker: React.ForwardRefExoticComponent<QuarterPickerProps & React.RefAttributes<DatePickerHandle>>;
+    RangePicker: React.ForwardRefExoticComponent<RangePickerProps & React.RefAttributes<RangePickerHandle>>;
+}

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

@@ -0,0 +1,79 @@
+import React, { CSSProperties, ReactNode } from 'react';
+export type DataType = {
+    key?: React.Key;
+    label?: ReactNode;
+    value?: ReactNode;
+    span?: number;
+}[];
+/**
+ * @title Descriptions
+ */
+export interface DescriptionsProps {
+    style?: CSSProperties;
+    className?: string | string[];
+    /**
+     * @zh 显示标签的单元格的样式
+     * @en Style of label
+     */
+    labelStyle?: CSSProperties;
+    /**
+     * @zh 显示值的单元格的样式
+     * @en Style of value
+     */
+    valueStyle?: CSSProperties;
+    /**
+     * @zh 描述列表的数据
+     * @en Data of the description
+     */
+    data?: DataType;
+    /**
+     * @zh
+     * 一行放置几列数据，一个数据为一列。支持配置 `column` 为数字或者对象，配置对象格式时，
+     * 支持配置为 `{ xs: 1, md: 2, lg: 3 }` 这种形式来支持响应式排列
+     * @en Number of data columns in a row, with one data counted as one column. Can be set with a number or object.
+     * Use object format such as `{ xs: 1, md: 2, lg: 3 }` for responsive arrangement
+     * @defaultValue 3
+     */
+    column?: number | {
+        xs?: number;
+        sm?: number;
+        md?: number;
+        lg?: number;
+        xl?: number;
+        xxl?: number;
+        xxxl?: number;
+    };
+    /**
+     * @zh 标题
+     * @en Title of the description
+     */
+    title?: ReactNode;
+    /**
+     * @zh 标签文字后显示的内容，一般配置为 ` :`
+     * @en The content displayed after the label text, generally configured as `:`
+     */
+    colon?: ReactNode;
+    /**
+     * @zh 是否显示边框
+     * @en Whether to display the border
+     */
+    border?: boolean;
+    /**
+     * @zh 排列方式
+     * @en Layout arrangement
+     * @defaultValue horizontal
+     */
+    layout?: 'horizontal' | 'vertical' | 'inline-horizontal' | 'inline-vertical';
+    /**
+     * @zh 描述列表的尺寸，如不指定默认为 `default`
+     * @en Size of the list
+     */
+    size?: 'mini' | 'small' | 'medium' | 'default' | 'large';
+    /**
+     * @zh 描述中表格样式的 `layout-fixed`，当设置成 `fixed` 时，宽度会均分。
+     * @en The `layout-fixed` of the table style in the description. The width will be evenly distributed when it's set to `fixed`.
+     * @defaultValue auto
+     * @version 2.6.0
+     */
+    tableLayout?: 'auto' | 'fixed';
+}

package/types/pc/development/index.d.ts

@@ -0,0 +1,2 @@
+export default Development;
+declare const Development: import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<any>>;

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

@@ -0,0 +1,21 @@
+import { CSSProperties, ReactNode } from 'react';
+/**
+ * @title Divider
+ */
+export interface DividerProps {
+    children?: ReactNode;
+    style?: CSSProperties;
+    className?: string | string[];
+    /**
+     * @zh 分割线的类型，是水平还是竖直，分别对应 `horizontal` 和 `vertical`
+     * @en Two types are available: `horizontal` and `vertical`
+     * @defaultValue horizontal
+     */
+    type?: 'horizontal' | 'vertical';
+    /**
+     * @zh 分割线文字的位置
+     * @en The position of description content in Divider
+     * @defaultValue center
+     */
+    orientation?: 'left' | 'right' | 'center';
+}

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

@@ -0,0 +1,24 @@
+import { CSSProperties, ReactNode } from 'react';
+export type DragStatus = 'none' | 'dragged' | 'dragging';
+export type DragPosition = 'left' | 'right' | 'top' | 'bottom';
+export interface DraggableItemProps extends Pick<DraggableProps, 'direction'> {
+    style?: CSSProperties;
+    prefixCls: string | undefined;
+    children?: ReactNode;
+    /** Weather allow to drag  */
+    disabled?: boolean;
+    /** Weather allow to drop on it */
+    droppable?: boolean;
+    onDragStart?: (e: any) => void;
+    onDragEnd?: (e: any) => void;
+    onDragLeave?: (e: any) => void;
+    onDragOver?: (e: any) => void;
+    onDrop?: (e: any, dropPosition: DragPosition) => void;
+}
+export interface DraggableProps {
+    children?: ReactNode;
+    direction?: 'horizontal' | 'vertical';
+    className?: string | string[];
+    itemWrapperStyle?: CSSProperties;
+    onIndexChange?: (index: number, prevIndex: number) => void;
+}