@tendaui/react 1.1.4 → 1.1.5

package/es/select/PopupContent.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import { TdSelectProps, SelectValue, SelectValueChangeTrigger } from "./type";
+interface SelectPopupProps extends Pick<TdSelectProps, "value" | "size" | "multiple" | "empty" | "options" | "max" | "loadingText" | "loading" | "valueType" | "keys" | "panelTopContent" | "panelBottomContent" | "scroll"> {
+    onChange?: (value: SelectValue, context?: {
+        label?: string | number;
+        value?: SelectValue;
+        restData?: Record<string, unknown>;
+        e: React.MouseEvent<HTMLLIElement>;
+        trigger: SelectValueChangeTrigger;
+    }) => void;
+    /**
+     * 是否展示popup
+     */
+    showPopup: boolean;
+    /**
+     * 控制popup展示的函数
+     */
+    setShowPopup: (show: boolean) => void;
+    children?: React.ReactNode;
+    onCheckAllChange?: (checkAll: boolean, e: React.MouseEvent<HTMLLIElement>) => void;
+    getPopupInstance?: () => HTMLDivElement;
+}
+declare const PopupContent: React.ForwardRefExoticComponent<SelectPopupProps & React.RefAttributes<HTMLDivElement>>;
+export default PopupContent;

package/es/select/Select.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { TdSelectProps, SelectOption } from "./type";
+import { StyledProps } from "../common";
+export interface SelectProps<T = SelectOption> extends TdSelectProps<T>, StyledProps {
+    children?: React.ReactNode;
+    onMouseEnter?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onMouseLeave?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+}
+declare const Select: React.FunctionComponent<SelectProps<SelectOption> & React.RefAttributes<HTMLDivElement>> & {
+    Option: React.FC<import("./Option").SelectOptionProps>;
+    OptionGroup: React.FC<import("./OptionGroup").SelectGOptionGroupProps>;
+};
+export default Select;

package/es/select/defaultProps.d.ts

@@ -0,0 +1,4 @@
+import { TdSelectProps, TdOptionProps, TdOptionGroupProps } from "./type";
+export declare const selectDefaultProps: TdSelectProps;
+export declare const optionDefaultProps: TdOptionProps;
+export declare const optionGroupDefaultProps: TdOptionGroupProps;

package/es/select/hooks/useOptions.d.ts

@@ -0,0 +1,16 @@
+import React, { ReactNode } from "react";
+import type { SelectKeysType, SelectOption, SelectOptionGroup, SelectValue } from "../type";
+import { type ValueToOption } from "../utils/helper";
+export declare function isSelectOptionGroup(option: SelectOption): option is SelectOptionGroup;
+type OptionValueType = SelectValue<SelectOption>;
+declare function UseOptions(keys: SelectKeysType, options: SelectOption[], children: ReactNode, valueType: "object" | "value", value: OptionValueType, reserveKeyword: boolean): {
+    currentOptions: SelectOption[];
+    setCurrentOptions: React.Dispatch<React.SetStateAction<SelectOption[]>>;
+    tmpPropOptions: SelectOption[];
+    setTmpPropOptions: React.Dispatch<React.SetStateAction<SelectOption[]>>;
+    valueToOption: ValueToOption;
+    setValueToOption: React.Dispatch<React.SetStateAction<ValueToOption>>;
+    selectedOptions: SelectOption[];
+    setSelectedOptions: React.Dispatch<React.SetStateAction<SelectOption[]>>;
+};
+export default UseOptions;

package/es/select/hooks/usePanelVirtualScroll.d.ts

@@ -0,0 +1,24 @@
+import { MutableRefObject, CSSProperties } from "react";
+import { TdSelectProps } from "../type";
+import { SizeEnum } from "../../common";
+interface PanelVirtualScroll {
+    scroll?: TdSelectProps["scroll"];
+    popupContentRef: MutableRefObject<HTMLDivElement>;
+    options: TdSelectProps["options"];
+    size: SizeEnum;
+}
+declare const usePanelVirtualScroll: ({ popupContentRef, scroll, options, size }: PanelVirtualScroll) => {
+    scrollHeight: number;
+    translateY: number;
+    visibleData: unknown[];
+    handleRowMounted: (rowData: {
+        ref: HTMLElement;
+        data: {
+            __VIRTUAL_SCROLL_INDEX: number;
+        };
+    }) => void;
+    isVirtual: boolean;
+    cursorStyle: CSSProperties;
+    panelStyle: CSSProperties;
+};
+export default usePanelVirtualScroll;

package/es/select/index.d.ts

@@ -0,0 +1,8 @@
+import "./style/index.js";
+export type { SelectProps } from "./Select";
+export * from "./type";
+export declare const Select: import("react").FunctionComponent<import("./Select").SelectProps<import("./type").SelectOption> & import("react").RefAttributes<HTMLDivElement>> & {
+    Option: import("react").FC<import("./Option").SelectOptionProps>;
+    OptionGroup: import("react").FC<import("./OptionGroup").SelectGOptionGroupProps>;
+};
+export default Select;

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

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

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

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

package/es/select/type.d.ts

@@ -0,0 +1,344 @@
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+import { InputProps } from '../input';
+import { PopupProps } from '../popup';
+import { SelectInputProps } from '../select-input';
+import { TagInputProps } from '../tag-input';
+import { TagProps } from '../tag';
+import { SelectInputValueChangeContext } from '../select-input';
+import { PopupVisibleChangeContext } from '../popup';
+import { PlainObject, TNode, TElement, SizeEnum, InfinityScroll } from '../common';
+import { MouseEvent, KeyboardEvent, FocusEvent } from 'react';
+export interface TdSelectProps<T extends SelectOption = SelectOption> {
+    /**
+     * 宽度随内容自适应
+     * @default false
+     */
+    autoWidth?: boolean;
+    /**
+     * 自动聚焦
+     * @default false
+     */
+    autofocus?: boolean;
+    /**
+     * 无边框模式
+     * @default false
+     */
+    borderless?: boolean;
+    /**
+     * 是否可以清空选项
+     * @default false
+     */
+    clearable?: boolean;
+    /**
+     * 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedSelectedItems` 表示折叠的标签，泛型 `T` 继承 `SelectOption`，表示选项数据；`count` 表示折叠的数量, `onClose` 表示移除标签
+     */
+    collapsedItems?: TNode<{
+        value: T[];
+        collapsedSelectedItems: T[];
+        count: number;
+        onClose: (context: {
+            index: number;
+            e?: MouseEvent;
+        }) => void;
+    }>;
+    /**
+     * 是否允许用户创建新条目，需配合 filterable 使用
+     * @default false
+     */
+    creatable?: boolean;
+    /**
+     * 是否禁用组件
+     */
+    disabled?: boolean;
+    /**
+     * 当下拉列表为空时显示的内容
+     */
+    empty?: TNode;
+    /**
+     * 自定义搜索规则，用于对现有数据进行搜索，判断是否过滤某一项数据。参数 `filterWords` 表示搜索词，`option`表示单个选项内容，返回值为 `true` 保留该选项，返回值为 `false` 则隐藏该选项。使用该方法时无需设置 `filterable`
+     */
+    filter?: (filterWords: string, option: T) => boolean | Promise<boolean>;
+    /**
+     * 是否可搜索，默认搜索规则不区分大小写，全文本任意位置匹配。如果默认搜索规则不符合业务需求，可以更为使用 `filter` 自定义过滤规则
+     */
+    filterable?: boolean;
+    /**
+     * 透传 Input 输入框组件的全部属性
+     */
+    inputProps?: InputProps;
+    /**
+     * 输入框的值
+     */
+    inputValue?: string;
+    /**
+     * 输入框的值，非受控属性
+     */
+    defaultInputValue?: string;
+    /**
+     * 用来定义 value / label / disabled 在 `options` 中对应的字段别名
+     */
+    keys?: SelectKeysType;
+    /**
+     * 左侧文本
+     */
+    label?: TNode;
+    /**
+     * 是否为加载状态
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * 远程加载时显示的文字，支持自定义。如加上超链接
+     */
+    loadingText?: TNode;
+    /**
+     * 用于控制多选数量，值为 0 则不限制
+     * @default 0
+     */
+    max?: number;
+    /**
+     * 最小折叠数量，用于多选情况下折叠选中项，超出该数值的选中项折叠。值为 0 则表示不折叠
+     * @default 0
+     */
+    minCollapsedNum?: number;
+    /**
+     * 是否允许多选
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * 数据化配置选项内容
+     */
+    options?: Array<T>;
+    /**
+     * 下拉选项布局方式，有纵向排列和横向排列两种，默认纵向排列
+     * @default vertical
+     */
+    optionsLayout?: 'vertical' | 'horizontal';
+    /**
+     * 面板内的底部内容
+     */
+    panelBottomContent?: TNode;
+    /**
+     * 面板内的顶部内容
+     */
+    panelTopContent?: TNode;
+    /**
+     * 占位符
+     */
+    placeholder?: string;
+    /**
+     * 透传给 popup 组件的全部属性
+     */
+    popupProps?: PopupProps;
+    /**
+     * 是否显示下拉框
+     */
+    popupVisible?: boolean;
+    /**
+     * 是否显示下拉框，非受控属性
+     */
+    defaultPopupVisible?: boolean;
+    /**
+     * 组件前置图标
+     */
+    prefixIcon?: TElement;
+    /**
+     * 只读状态，值为真会隐藏输入框，且无法打开下拉框
+     * @default false
+     */
+    readonly?: boolean;
+    /**
+     * 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词
+     * @default false
+     */
+    reserveKeyword?: boolean;
+    /**
+     * 懒加载和虚拟滚动。为保证组件收益最大化，当数据量小于阈值 `scroll.threshold` 时，无论虚拟滚动的配置是否存在，组件内部都不会开启虚拟滚动，`scroll.threshold` 默认为 `100`
+     */
+    scroll?: InfinityScroll;
+    /**
+     * 透传 SelectInput 筛选器输入框组件的全部属性
+     */
+    selectInputProps?: SelectInputProps;
+    /**
+     * 是否显示右侧箭头，默认显示
+     * @default true
+     */
+    showArrow?: boolean;
+    /**
+     * 组件尺寸
+     * @default medium
+     */
+    size?: SizeEnum;
+    /**
+     * 输入框状态
+     * @default default
+     */
+    status?: 'default' | 'success' | 'warning' | 'error';
+    /**
+     * 后置图标前的后置内容
+     */
+    suffix?: TNode;
+    /**
+     * 组件后置图标
+     */
+    suffixIcon?: TElement;
+    /**
+     * 透传 TagInput 标签输入框组件的全部属性
+     */
+    tagInputProps?: TagInputProps;
+    /**
+     * 透传 Tag 标签组件全部属性
+     */
+    tagProps?: TagProps;
+    /**
+     * 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式
+     */
+    tips?: TNode;
+    /**
+     * 选中值
+     */
+    value?: SelectValue;
+    /**
+     * 选中值，非受控属性
+     */
+    defaultValue?: SelectValue;
+    /**
+     * 自定义选中项呈现的内容
+     */
+    valueDisplay?: string | TNode<{
+        value: SelectValue;
+        onClose: (index: number) => void;
+        displayValue?: SelectValue;
+    }>;
+    /**
+     * 用于控制选中值的类型。假设数据选项为：`[{ label: '姓名', value: 'name' }]`，value 表示值仅返回数据选项中的 value， object 表示值返回全部数据。
+     * @default value
+     */
+    valueType?: 'value' | 'object';
+    /**
+     * 输入框失去焦点时触发
+     */
+    onBlur?: (context: {
+        value: SelectValue;
+        e: FocusEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>;
+    }) => void;
+    /**
+     * 选中值变化时触发。`context.trigger` 表示触发变化的来源；`context.selectedOptions` 表示选中值的完整对象，数组长度一定和 `value` 相同；`context.option` 表示当前操作的选项，不一定存在
+     */
+    onChange?: (value: SelectValue, context: {
+        option?: T;
+        selectedOptions: T[];
+        trigger: SelectValueChangeTrigger;
+        e?: MouseEvent<SVGElement | HTMLDivElement | HTMLLIElement> | KeyboardEvent<HTMLInputElement>;
+    }) => void;
+    /**
+     * 点击清除按钮时触发
+     */
+    onClear?: (context: {
+        e: MouseEvent<HTMLDivElement>;
+    }) => void;
+    /**
+     * 当选择新创建的条目时触发
+     */
+    onCreate?: (value: string | number) => void;
+    /**
+     * 回车键按下时触发。`inputValue` 表示输入框的值，`value` 表示选中值
+     */
+    onEnter?: (context: {
+        inputValue: string;
+        e: KeyboardEvent<HTMLDivElement>;
+        value: SelectValue;
+    }) => void;
+    /**
+     * 输入框获得焦点时触发
+     */
+    onFocus?: (context: {
+        value: SelectValue;
+        e: FocusEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>;
+    }) => void;
+    /**
+     * 输入框值发生变化时触发，`context.trigger` 表示触发输入框值变化的来源：文本输入触发、清除按钮触发、失去焦点等
+     */
+    onInputChange?: (value: string, context?: SelectInputValueChangeContext) => void;
+    /**
+     * 下拉框显示或隐藏时触发
+     */
+    onPopupVisibleChange?: (visible: boolean, context: PopupVisibleChangeContext) => void;
+    /**
+     * 多选模式下，选中数据被移除时触发
+     */
+    onRemove?: (options: SelectRemoveContext<T>) => void;
+    /**
+     * 输入值变化时，触发搜索事件。主要用于远程搜索新数据
+     */
+    onSearch?: (filterWords: string, context: {
+        e: KeyboardEvent<HTMLDivElement>;
+    }) => void;
+}
+export interface TdOptionProps {
+    /**
+     * 当前选项是否为全选，全选可以在顶部，也可以在底部。点击当前选项会选中禁用态除外的全部选项，即使是分组选择器也会选中全部选项
+     * @default false
+     */
+    checkAll?: boolean;
+    /**
+     * 用于定义复杂的选项内容，同 content
+     */
+    children?: TNode;
+    /**
+     * 用于定义复杂的选项内容
+     */
+    content?: TNode;
+    /**
+     * 是否禁用该选项
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 选项名称
+     * @default ''
+     */
+    label?: string;
+    /**
+     * 选项标题，在选项过长时hover选项展示
+     * @default ''
+     */
+    title?: string;
+    /**
+     * 选项值
+     */
+    value?: string | number;
+}
+export interface TdOptionGroupProps {
+    /**
+     * 是否显示分隔线
+     * @default true
+     */
+    divider?: boolean;
+    /**
+     * 分组别名
+     * @default ''
+     */
+    label?: string;
+}
+export interface SelectKeysType {
+    value?: string;
+    label?: string;
+    disabled?: string;
+}
+export type SelectValue<T extends SelectOption = SelectOption> = string | number | boolean | T | Array<SelectValue<T>>;
+export type SelectValueChangeTrigger = 'clear' | 'tag-remove' | 'backspace' | 'check' | 'uncheck' | 'default';
+export interface SelectRemoveContext<T> {
+    value: SelectValue;
+    data: T;
+    e: MouseEvent<HTMLDivElement | HTMLLIElement> | KeyboardEvent<HTMLDivElement>;
+}
+export type SelectOption = TdOptionProps | SelectOptionGroup | PlainObject;
+export interface SelectOptionGroup extends TdOptionGroupProps {
+    group: string;
+    children: Array<TdOptionProps>;
+}

package/es/select/utils/helper.d.ts

@@ -0,0 +1,18 @@
+import { ReactElement } from "react";
+import { SelectValue, TdOptionProps, SelectKeysType, TdSelectProps, SelectOption, SelectOptionGroup } from "../type";
+export declare function isSelectOptionGroup(option: SelectOption): option is SelectOptionGroup;
+export type ValueToOption = {
+    [value: string | number]: TdOptionProps;
+};
+export declare const getValueToOption: (children: ReactElement, options: SelectOption[], keys: SelectKeysType) => ValueToOption;
+export declare const getLabel: (children: ReactElement, value: SelectValue<TdOptionProps>, options: TdOptionProps[], keys: SelectKeysType) => string;
+export declare const getMultipleTags: (values: SelectValue[], keys: SelectKeysType) => {
+    label: any;
+    value: any;
+}[];
+export declare const getSelectValueArr: (values: SelectValue | SelectValue[], activeValue: SelectValue, selected?: boolean, valueType?: TdSelectProps["valueType"], keys?: SelectKeysType, objVal?: SelectValue) => (string | number | boolean | import("../../common").PlainObject | TdOptionProps | SelectOptionGroup | SelectValue<SelectOption>[])[];
+export declare const getSelectedOptions: (value: SelectValue, multiple: TdSelectProps["multiple"], valueType: TdSelectProps["valueType"], keys: SelectKeysType, valueToOption: ValueToOption, selectedValue?: SelectValue) => {
+    currentSelectedOptions: any[];
+    currentOption: SelectOption;
+    allSelectedValue: SelectValue[];
+};

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

@@ -0,0 +1,11 @@
+import React from "react";
+import { PopupRef } from "../popup";
+import { TdSelectInputProps } from "./type";
+import { StyledProps } from "../common";
+import { InputRef } from "../input";
+export interface SelectInputProps extends TdSelectInputProps, StyledProps {
+    updateScrollTop?: (content: HTMLDivElement) => void;
+    options?: unknown[];
+}
+declare const SelectInput: React.ForwardRefExoticComponent<SelectInputProps & React.RefAttributes<Partial<PopupRef & InputRef>>>;
+export default SelectInput;

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

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

package/es/select-input/hook/useMultiple.d.ts

@@ -0,0 +1,23 @@
+import React, { MouseEvent } from "react";
+import { TdSelectInputProps } from "../type";
+import { SelectInputCommonProperties } from "../interface";
+import { InputRef } from "../../input";
+import { StyledProps } from "../../common";
+export interface RenderSelectMultipleParams {
+    commonInputProps: SelectInputCommonProperties;
+    onInnerClear: (context: {
+        e: MouseEvent<SVGElement>;
+    }) => void;
+    popupVisible: boolean;
+    allowInput: boolean;
+}
+export interface SelectInputProps extends TdSelectInputProps, StyledProps {
+    options?: unknown[];
+}
+export default function useMultiple(props: SelectInputProps): {
+    tags: any[];
+    tPlaceholder: string;
+    tagInputRef: React.MutableRefObject<InputRef>;
+    multipleInputValue: string;
+    renderSelectMultiple: (p: RenderSelectMultipleParams) => React.JSX.Element;
+};

package/es/select-input/hook/useOverlayInnerStyle.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { TdSelectInputProps } from "../type";
+import { PopupVisibleChangeContext } from "../../popup";
+export type overlayStyleProps = Pick<TdSelectInputProps, "popupProps" | "autoWidth" | "readonly" | "onPopupVisibleChange" | "disabled" | "allowInput" | "popupVisible" | "defaultPopupVisible">;
+export default function useOverlayInnerStyle(props: overlayStyleProps, extra?: {
+    afterHidePopups?: (ctx: PopupVisibleChangeContext) => void;
+}): {
+    tOverlayInnerStyle: React.CSSProperties | ((triggerElement: HTMLElement, popupElement: HTMLElement) => import("../../common").Styles);
+    innerPopupVisible: boolean;
+    onInnerPopupVisibleChange: (visible: boolean, context: PopupVisibleChangeContext) => void;
+};

package/es/select-input/hook/useSingle.d.ts

@@ -0,0 +1,16 @@
+import React, { MouseEvent } from "react";
+import { SelectInputCommonProperties } from "../interface";
+import { TdSelectInputProps } from "../type";
+import { InputRef } from "../../input";
+export interface RenderSelectSingleInputParams {
+    tPlaceholder: string;
+}
+export default function useSingle(props: TdSelectInputProps): {
+    inputRef: React.MutableRefObject<InputRef>;
+    commonInputProps: SelectInputCommonProperties;
+    singleInputValue: string;
+    onInnerClear: (context: {
+        e: MouseEvent<SVGSVGElement>;
+    }) => void;
+    renderSelectSingle: (popupVisible: boolean) => React.JSX.Element;
+};

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

@@ -0,0 +1,5 @@
+import "./style/index.js";
+export type { SelectInputProps } from "./SelectInput";
+export * from "./type";
+export declare const SelectInput: import("react").ForwardRefExoticComponent<import("./SelectInput").SelectInputProps & import("react").RefAttributes<Partial<import("..").PopupRef & import("..").InputRef>>>;
+export default SelectInput;

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

@@ -0,0 +1,17 @@
+import { TdSelectInputProps } from "./type";
+export interface SelectInputCommonProperties {
+    status?: TdSelectInputProps["status"];
+    tips?: TdSelectInputProps["tips"];
+    clearable?: TdSelectInputProps["clearable"];
+    disabled?: TdSelectInputProps["disabled"];
+    label?: TdSelectInputProps["label"];
+    placeholder?: TdSelectInputProps["placeholder"];
+    readonly?: TdSelectInputProps["readonly"];
+    suffix?: TdSelectInputProps["suffix"];
+    suffixIcon?: TdSelectInputProps["suffixIcon"];
+    size?: TdSelectInputProps["size"];
+    onPaste?: TdSelectInputProps["onPaste"];
+    onEnter?: TdSelectInputProps["onEnter"];
+    onMouseenter?: TdSelectInputProps["onMouseenter"];
+    onMouseleave?: TdSelectInputProps["onMouseleave"];
+}

package/es/select-input/style/css.d.ts

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

package/es/select-input/style/index.d.ts

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