@tendaui/react 1.1.4 → 1.1.5

package/es/select-input/type.d.ts

@@ -0,0 +1,243 @@
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+import { InputProps } from '../input';
+import { PopupProps } from '../popup';
+import { TagInputProps, TagInputValue, TagInputChangeContext } from '../tag-input';
+import { TagProps } from '../tag';
+import { PopupVisibleChangeContext } from '../popup';
+import { TNode, TElement, SizeEnum } from '../common';
+import { MouseEvent, KeyboardEvent, ClipboardEvent, FocusEvent, FormEvent, CompositionEvent } from 'react';
+export interface TdSelectInputProps {
+    /**
+     * 是否允许输入
+     * @default false
+     */
+    allowInput?: boolean;
+    /**
+     * 宽度随内容自适应
+     * @default false
+     */
+    autoWidth?: boolean;
+    /**
+     * 自动聚焦
+     * @default false
+     */
+    autofocus?: boolean;
+    /**
+     * 无边框模式
+     * @default false
+     */
+    borderless?: boolean;
+    /**
+     * 是否可清空
+     * @default false
+     */
+    clearable?: boolean;
+    /**
+     * 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 `collapsedItems` 自定义。`value` 表示所有标签值，`collapsedSelectedItems` 表示折叠标签值，`count` 表示折叠的数量，`onClose` 表示移除标签的事件回调
+     */
+    collapsedItems?: TNode<{
+        value: SelectInputValue;
+        collapsedSelectedItems: SelectInputValue;
+        count: number;
+        onClose: (context: {
+            index: number;
+            e?: MouseEvent;
+        }) => void;
+    }>;
+    /**
+     * 是否禁用
+     */
+    disabled?: boolean;
+    /**
+     * 透传 Input 输入框组件全部属性
+     */
+    inputProps?: InputProps;
+    /**
+     * 输入框的值
+     */
+    inputValue?: string;
+    /**
+     * 输入框的值，非受控属性
+     */
+    defaultInputValue?: string;
+    /**
+     * 定义字段别名，示例：`{ label: 'text', value: 'id', children: 'list' }`
+     */
+    keys?: SelectInputKeys;
+    /**
+     * 左侧文本
+     */
+    label?: TNode;
+    /**
+     * 是否处于加载状态
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * 最小折叠数量，用于标签数量过多的情况下折叠选中项，超出该数值的选中项折叠。值为 0 则表示不折叠
+     * @default 0
+     */
+    minCollapsedNum?: number;
+    /**
+     * 是否为多选模式，默认为单选
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * 下拉框内容，可完全自定义
+     */
+    panel?: TNode;
+    /**
+     * 占位符
+     * @default ''
+     */
+    placeholder?: string;
+    /**
+     * 透传 Popup 浮层组件全部属性
+     */
+    popupProps?: PopupProps;
+    /**
+     * 是否显示下拉框
+     */
+    popupVisible?: boolean;
+    /**
+     * 是否显示下拉框，非受控属性
+     */
+    defaultPopupVisible?: boolean;
+    /**
+     * 组件前置图标
+     */
+    prefixIcon?: TElement;
+    /**
+     * 只读状态，值为真会隐藏输入框，且无法打开下拉框
+     * @default false
+     */
+    readonly?: boolean;
+    /**
+     * 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词
+     * @default false
+     */
+    reserveKeyword?: boolean;
+    /**
+     * 组件尺寸
+     * @default medium
+     */
+    size?: SizeEnum;
+    /**
+     * 输入框状态
+     * @default default
+     */
+    status?: 'default' | 'success' | 'warning' | 'error';
+    /**
+     * 后置图标前的后置内容
+     */
+    suffix?: TNode;
+    /**
+     * 组件后置图标
+     */
+    suffixIcon?: TElement;
+    /**
+     * 多选场景下，自定义选中标签的内部内容。注意和 `valueDisplay` 区分，`valueDisplay`  是用来定义全部标签内容，而非某一个标签
+     */
+    tag?: string | TNode<{
+        value: string | number;
+    }>;
+    /**
+     * 透传 TagInput 组件全部属性
+     */
+    tagInputProps?: TagInputProps;
+    /**
+     * 透传 Tag 标签组件全部属性
+     */
+    tagProps?: TagProps;
+    /**
+     * 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式
+     */
+    tips?: TNode;
+    /**
+     * 全部标签值。值为数组表示多个标签，值为非数组表示单个数值
+     */
+    value?: SelectInputValue;
+    /**
+     * 自定义值呈现的全部内容，参数为所有标签的值
+     */
+    valueDisplay?: string | TNode<{
+        value: TagInputValue;
+        onClose: (index: number, item?: any) => void;
+    }>;
+    /**
+     * 失去焦点时触发，`context.inputValue` 表示输入框的值；`context.tagInputValue` 表示标签输入框的值
+     */
+    onBlur?: (value: SelectInputValue, context: SelectInputBlurContext) => void;
+    /**
+     * 清空按钮点击时触发
+     */
+    onClear?: (context: {
+        e: MouseEvent<SVGSVGElement>;
+    }) => void;
+    /**
+     * 按键按下 Enter 时触发
+     */
+    onEnter?: (value: SelectInputValue, context: {
+        e: KeyboardEvent<HTMLDivElement>;
+        inputValue: string;
+        tagInputValue?: TagInputValue;
+    }) => void;
+    /**
+     * 聚焦时触发
+     */
+    onFocus?: (value: SelectInputValue, context: SelectInputFocusContext) => void;
+    /**
+     * 输入框值发生变化时触发，`context.trigger` 表示触发输入框值变化的来源：文本输入触发、清除按钮触发等
+     */
+    onInputChange?: (value: string, context?: SelectInputValueChangeContext) => void;
+    /**
+     * 进入输入框时触发
+     */
+    onMouseenter?: (context: {
+        e: MouseEvent<HTMLDivElement>;
+    }) => void;
+    /**
+     * 离开输入框时触发
+     */
+    onMouseleave?: (context: {
+        e: MouseEvent<HTMLDivElement>;
+    }) => void;
+    /**
+     * 粘贴事件，`pasteValue` 表示粘贴板的内容
+     */
+    onPaste?: (context: {
+        e: ClipboardEvent<HTMLDivElement>;
+        pasteValue: string;
+    }) => void;
+    /**
+     * 下拉框显示或隐藏时触发
+     */
+    onPopupVisibleChange?: (visible: boolean, context: PopupVisibleChangeContext) => void;
+    /**
+     * 值变化时触发，参数 `context.trigger` 表示数据变化的触发来源；`context.index` 指当前变化项的下标；`context.item` 指当前变化项；`context.e` 表示事件参数
+     */
+    onTagChange?: (value: TagInputValue, context: SelectInputChangeContext) => void;
+}
+export interface SelectInputKeys {
+    label?: string;
+    value?: string;
+    children?: string;
+}
+export type SelectInputValue = string | number | boolean | Date | Object | Array<any> | Array<SelectInputValue>;
+export type SelectInputBlurContext = PopupVisibleChangeContext & {
+    inputValue: string;
+    tagInputValue?: TagInputValue;
+};
+export interface SelectInputFocusContext {
+    inputValue: string;
+    tagInputValue?: TagInputValue;
+    e: FocusEvent<HTMLInputElement>;
+}
+export interface SelectInputValueChangeContext {
+    e?: Event | FormEvent<HTMLInputElement> | MouseEvent<HTMLElement | SVGElement> | FocusEvent<HTMLInputElement> | KeyboardEvent<HTMLInputElement> | CompositionEvent<HTMLDivElement>;
+    trigger: 'input' | 'clear' | 'blur' | 'focus' | 'initial' | 'change';
+}
+export type SelectInputChangeContext = TagInputChangeContext;

package/es/slider/Slider.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { StyledProps } from "../common";
+import type { SliderValue, TdSliderProps } from "./type";
+export interface SliderProps<T extends SliderValue = SliderValue> extends TdSliderProps<T>, StyledProps {
+}
+declare const _default: <T extends SliderValue = SliderValue>(props: SliderProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement;
+export default _default;

package/es/slider/SliderHandleButton.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { type MouseCallback } from "../hooks/useMouseEvent";
+interface SliderHandleButtonProps {
+    onChange: (event: MouseCallback) => void;
+    classPrefix: string;
+    style: React.CSSProperties;
+    hideTips: boolean;
+    toolTipProps?: any;
+}
+declare const SliderHandleButton: React.FC<SliderHandleButtonProps>;
+export default SliderHandleButton;

package/es/slider/defaultProps.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+import { TdSliderProps } from "./type";
+export declare const sliderDefaultProps: TdSliderProps;

package/es/slider/index.d.ts

@@ -0,0 +1,5 @@
+import "./style/index.js";
+export type { SliderProps } from "./Slider";
+export * from "./type";
+export declare const Slider: <T extends import("./type").SliderValue = import("./type").SliderValue>(props: import("./Slider").SliderProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement;
+export default Slider;

package/es/slider/style/css.d.ts

@@ -0,0 +1 @@
+export {};

package/es/slider/style/index.d.ts

@@ -0,0 +1 @@
+export {};

package/es/slider/type.d.ts

@@ -0,0 +1,78 @@
+import { InputNumberProps } from "../input-number";
+import { TNode } from "../common";
+import React from "react";
+export interface TooltipProps {
+    content?: string | React.ReactNode;
+    [key: string]: any;
+}
+export interface TdSliderProps<T = SliderValue> {
+    /**
+     * 是否禁用组件
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 用于控制数字输入框组件，值为 false 表示不显示数字输入框；值为 true 表示呈现默认数字输入框；值类型为 Object 表示透传属性到数字输入框组件
+     * @default false
+     */
+    inputNumberProps?: boolean | InputNumberProps<number>;
+    /**
+     * 滑块当前值文本。<br />值为 true 显示默认文案；值为 false 不显示滑块当前值文本；<br />值为 `${value}%` 则表示组件会根据占位符渲染文案；<br />值类型为函数时，参数 `value` 标识滑块值，参数 `position=start` 表示范围滑块的起始值，参数 `position=end` 表示范围滑块的终点值
+     * @default true
+     */
+    label?: string | boolean | TNode<{
+        value: SliderValue;
+        position?: "start" | "end";
+    }>;
+    /**
+     * 滑块布局方向
+     * @default horizontal
+     */
+    layout?: "vertical" | "horizontal";
+    /**
+     * 刻度标记，示例：[0, 10, 40, 200] 或者 `{ 10: (val) => val + '%', 50: (h) => <button>50</button> }`
+     */
+    marks?: Array<number> | SliderMarks;
+    /**
+     * 滑块范围最大值
+     * @default 100
+     */
+    max?: number;
+    /**
+     * 滑块范围最小值
+     * @default 0
+     */
+    min?: number;
+    /**
+     * 双游标滑块
+     * @default false
+     */
+    range?: boolean;
+    /**
+     * 步长
+     * @default 1
+     */
+    step?: number;
+    /**
+     * 透传提示组件属性
+     */
+    tooltipProps?: TooltipProps;
+    /**
+     * 滑块值
+     */
+    value?: SliderValue;
+    /**
+     * 滑块值，非受控属性
+     */
+    defaultValue?: SliderValue;
+    /**
+     * 滑块值变化时触发
+     */
+    onChange?: (value: T) => void;
+}
+export interface SliderMarks {
+    [mark: number]: string | TNode<{
+        value: number;
+    }>;
+}
+export type SliderValue = number | Array<number>;

package/es/style/index.d.ts

@@ -0,0 +1 @@
+export {};

package/es/switch/Switch.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { StyledProps } from "../common";
+import { SwitchValue, TdSwitchProps } from "./type";
+export type SwitchChangeEventHandler = (value: boolean, event: React.MouseEvent<HTMLButtonElement>) => void;
+export type SwitchClickEventHandler = SwitchChangeEventHandler;
+export interface SwitchProps<T extends SwitchValue = SwitchValue> extends TdSwitchProps<T>, StyledProps {
+}
+declare const _default: <T extends SwitchValue = SwitchValue>(props: SwitchProps<T> & React.RefAttributes<HTMLButtonElement>) => React.ReactElement;
+export default _default;

package/es/switch/defaultProps.d.ts

@@ -0,0 +1,2 @@
+import { TdSwitchProps } from "./type";
+export declare const switchDefaultProps: TdSwitchProps;

package/es/switch/index.d.ts

@@ -0,0 +1,4 @@
+import "./style/index";
+export * from "./type";
+export declare const Switch: <T extends import("./type").SwitchValue = import("./type").SwitchValue>(props: import("./Switch").SwitchProps<T> & React.RefAttributes<HTMLButtonElement>) => React.ReactElement;
+export default Switch;

package/es/switch/style/css.d.ts

@@ -0,0 +1 @@
+export {};

package/es/switch/style/index.d.ts

@@ -0,0 +1 @@
+export {};

package/es/switch/type.d.ts

@@ -0,0 +1,48 @@
+import { TNode } from "../common";
+import { MouseEvent } from "react";
+export interface TdSwitchProps<T = SwitchValue> {
+    /**
+     * Switch 切换状态前的回调方法，常用于需要发起异步请求的场景，返回值支持布尔和 Promise 类型，返回`false`或 Promise reject不继续执行change，否则则继续执行。
+     */
+    beforeChange?: () => boolean | Promise<boolean>;
+    /**
+     * 用于自定义开关的值，[打开时的值，关闭时的值]。默认为 [true, false]。示例：[1, 0]、['open', 'close']
+     */
+    customValue?: Array<SwitchValue>;
+    /**
+     * 是否禁用组件，默认为 false
+     */
+    disabled?: boolean;
+    /**
+     * 开关内容，[开启时内容，关闭时内容]。示例：['开', '关'] 或 (value) => value ? '开' : '关'
+     * @default []
+     */
+    label?: Array<string | TNode> | TNode<{
+        value: SwitchValue;
+    }>;
+    /**
+     * 是否处于加载中状态
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * 开关尺寸
+     * @default medium
+     */
+    size?: "small" | "medium" | "large";
+    /**
+     * 开关值
+     */
+    value?: T;
+    /**
+     * 开关值，非受控属性
+     */
+    defaultValue?: T;
+    /**
+     * 数据发生变化时触发
+     */
+    onChange?: (value: T, context: {
+        e: MouseEvent;
+    }) => void;
+}
+export type SwitchValue = string | number | boolean;

package/es/tab/TabBar.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface TabBarProps {
+    tabPosition: string;
+    activeId: string | number;
+    containerRef: React.MutableRefObject<HTMLDivElement>;
+    navsWrapRef: React.MutableRefObject<HTMLDivElement>;
+}
+declare const TabBar: React.FC<TabBarProps>;
+export default TabBar;

package/es/tab/TabNav.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { TdTabsProps, TdTabPanelProps, TabValue } from "./type";
+export interface TabNavProps extends TdTabsProps {
+    itemList: TdTabPanelProps[];
+    activeValue: TabValue;
+    size?: "medium" | "large";
+    children?: React.ReactNode;
+}
+declare const TabNav: React.FC<TabNavProps>;
+export default TabNav;

package/es/tab/TabNavItem.d.ts

@@ -0,0 +1,15 @@
+import React, { MouseEvent } from "react";
+import type { StyledProps } from "../common";
+import type { TdTabPanelProps, TdTabsProps } from "./type";
+export interface TabNavItemProps extends TdTabPanelProps, StyledProps {
+    isActive: boolean;
+    onClick: (e: MouseEvent) => void;
+    theme: "normal" | "card";
+    placement: string;
+    size?: "medium" | "large";
+    index: number;
+    innerRef(ref: HTMLElement): void;
+    onTabRemove: TdTabsProps["onRemove"];
+}
+declare const TabNavItem: React.FC<TabNavItemProps>;
+export default TabNavItem;

package/es/tab/TabPanel.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { TdTabPanelProps } from "./type";
+import { StyledProps } from "../common";
+export interface TabPanelProps extends TdTabPanelProps, StyledProps {
+    children?: React.ReactNode;
+    isActive?: boolean;
+}
+declare const TabPanel: React.FC<TabPanelProps>;
+export default TabPanel;

package/es/tab/Tabs.d.ts

@@ -0,0 +1,10 @@
+import { TdTabsProps } from "./type";
+import React from "react";
+import { StyledProps } from "../common";
+export interface TabsProps extends TdTabsProps, StyledProps {
+    children?: React.ReactNode;
+}
+declare const Tabs: React.FunctionComponent<TabsProps & React.RefAttributes<HTMLDivElement>> & {
+    TabPanel: React.FC<import("./TabPanel").TabPanelProps>;
+};
+export default Tabs;

package/es/tab/defaultProps.d.ts

@@ -0,0 +1,3 @@
+import { TdTabsProps, TdTabPanelProps } from "./type";
+export declare const tabsDefaultProps: TdTabsProps;
+export declare const tabPanelDefaultProps: TdTabPanelProps;

package/es/tab/index.d.ts

@@ -0,0 +1,8 @@
+import TabPanel from "./TabPanel";
+import "./style/index";
+export * from "./type";
+export declare const Tabs: import("react").FunctionComponent<import("./Tabs").TabsProps & import("react").RefAttributes<HTMLDivElement>> & {
+    TabPanel: import("react").FC<import("./TabPanel").TabPanelProps>;
+};
+export { TabPanel };
+export default Tabs;

package/es/tab/style/index.d.ts

@@ -0,0 +1 @@
+export {};

package/es/tab/type.d.ts

@@ -0,0 +1,130 @@
+import { TNode } from "../common";
+import { MouseEvent } from "react";
+export interface TdTabsProps {
+    /**
+     * 选项卡右侧的操作区域
+     */
+    action?: TNode;
+    /**
+     * 选项卡是否可增加
+     * @default false
+     */
+    addable?: boolean;
+    /**
+     * 是否禁用选项卡
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 是否开启拖拽调整顺序
+     * @default false
+     */
+    dragSort?: boolean;
+    /**
+     * 选项卡列表
+     */
+    list?: Array<TdTabPanelProps>;
+    /**
+     * 选项卡位置
+     * @default top
+     */
+    placement?: "left" | "top" | "bottom" | "right";
+    /**
+     * Tab较多的时候，选中滑块滚动最终停留的位置
+     * @default auto
+     */
+    scrollPosition?: "auto" | "start" | "center" | "end";
+    /**
+     * 组件尺寸
+     * @default medium
+     */
+    size?: "medium" | "large";
+    /**
+     * 选项卡风格，包含 默认风格 和 卡片风格两种
+     * @default normal
+     */
+    theme?: "normal" | "card";
+    /**
+     * 激活的选项卡值
+     */
+    value?: TabValue;
+    /**
+     * 激活的选项卡值，非受控属性
+     */
+    defaultValue?: TabValue;
+    /**
+     * 添加选项卡时触发
+     */
+    onAdd?: (context: {
+        e: MouseEvent<HTMLDivElement>;
+    }) => void;
+    /**
+     * 激活的选项卡发生变化时触发
+     */
+    onChange?: (value: TabValue) => void;
+    /**
+     * 拖拽排序时触发
+     */
+    onDragSort?: (context: TabsDragSortContext) => void;
+    /**
+     * 删除选项卡时触发
+     */
+    onRemove?: (options: {
+        value: TabValue;
+        index: number;
+        e: MouseEvent<HTMLSpanElement>;
+    }) => void;
+}
+export interface TdTabPanelProps {
+    /**
+     * 选项卡内容隐藏时是否销毁
+     * @default true
+     */
+    destroyOnHide?: boolean;
+    /**
+     * 是否禁用当前选项卡
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 选项卡组件开启允许拖动排序时，当前选项卡是否允许拖动
+     * @default true
+     */
+    draggable?: boolean;
+    /**
+     * 选项卡名称，可自定义选项卡导航内容
+     */
+    label?: TNode;
+    /**
+     * 是否启用选项卡懒加载
+     * @default false
+     */
+    lazy?: boolean;
+    /**
+     * 用于自定义选项卡面板内容
+     */
+    panel?: TNode;
+    /**
+     * 当前选项卡是否允许移除
+     * @default false
+     */
+    removable?: boolean;
+    /**
+     * 选项卡的值，唯一标识
+     */
+    value?: TabValue;
+    /**
+     * 点击删除按钮时触发
+     */
+    onRemove?: (options: {
+        value: TabValue;
+        e: MouseEvent<HTMLSpanElement>;
+    }) => void;
+}
+export type TabValue = string | number;
+export interface TabsDragSortContext {
+    currentIndex: number;
+    current: TabValue;
+    targetIndex: number;
+    target: TabValue;
+}

package/es/tab/useTabClass.d.ts

@@ -0,0 +1,8 @@
+export declare const useTabClass: () => {
+    tdTabsClassPrefix: string;
+    tdTabPanelClassPrefix: string;
+    tdClassGenerator: (append: string) => string;
+    tdTabsClassGenerator: (append: string) => string;
+    tdTabPanelClassGenerator: (append: string) => string;
+    tdSizeClassGenerator: (size: "medium" | "large") => string;
+};