@flatbiz/antd
Version:
484 lines (481 loc) • 16 kB
TypeScript
import { TAny, TNoopDefine, TPlainObject } from '@flatbiz/utils';
import { ButtonProps, DropdownProps, FormInstance, ModalProps, PopconfirmProps, SpaceProps, TreeProps } from 'antd';
import { ConfigProviderProps } from 'antd/lib/config-provider/index.js';
import { CSSProperties, DependencyList, ReactElement, ReactNode } from 'react';
export type ButtonWrapperProps = Omit<ButtonProps, "onClick" | "color"> & {
/** 当返回 Promise 时，按钮自动loading */
onClick?: (e: React.MouseEvent) => Promise<TAny> | void;
/** 重复点击间隙，单位毫秒 默认值：500 */
debounceDuration?: number;
/** 基于GLOBAL中elemAclLimits按钮权限列表，控制按钮显示、隐藏 */
permission?: string;
/** 是否隐藏按钮 */
hidden?: boolean;
/** loading 显示位置，默认值：left */
loadingPosition?: "left" | "center";
/** 移除按钮内边距，一般用于 type=link 类型下 */
removeGap?: boolean;
color?: string;
};
export type TLocale = "en" | "zh-cn";
export type TFbaLocale = {
TreeWrapper?: {
/** 数据加载异常默认文案 */
requestError?: string;
};
FbaDialogModal?: {
cancelText?: string;
};
};
export type ConfigProviderWrapperProps = Omit<ConfigProviderProps, "locale"> & {
locale?: TLocale;
/** 自定义国际化数据 */
customLocaleMessage?: Partial<TFbaLocale>;
/** 同 fbaHooks.useCopyRemoveSpace[ignoreClass] */
copyOperateIgnoreClass?: string[];
};
export type DialogModalProps = Omit<ModalProps, "onOk" | "onCancel" | "getContainer" | "open" | "open" | "okButtonProps" | "cancelButtonProps" | "footer"> & {
/**
* 内置尺寸，根据比例固定高度、宽度，默认：无
* ```
* 1. 如果自定义了width、bodyHeight属性，size中的height、width将对应失效
* 2. 不传、传null值可取消内置尺寸
* ```
*/
size?: "small" | "middle" | "large" | null;
onOk?: (form: FormInstance, e: React.MouseEvent<HTMLElement>) => void | Promise<void>;
onCancel?: (form: FormInstance, e: React.MouseEvent<HTMLElement>) => void | Promise<void>;
/**
* content只在第一次弹起时，执行一次
*/
content: string | ReactElement | ((form: FormInstance, operate: {
onClose: TNoopDefine;
}) => ReactElement);
configProviderProps?: ConfigProviderWrapperProps;
okHidden?: boolean;
cancelHidden?: boolean;
okButtonProps?: Omit<ButtonWrapperProps, "hidden" | "children" | "onClick">;
cancelButtonProps?: Omit<ButtonWrapperProps, "hidden" | "children" | "onClick">;
/**
* 设置modal body height 为当前窗口height的百分比，例如：30
* @deprecated 已失效，可通过size属性设置
* ```
* 1. 最大值：80
* 1. 设置bodyStyle.height 后，bodyHeightPercent失效
* ```
*/
bodyHeightPercent?: number;
titleExtra?: ReactElement;
/**
* null则隐藏footer
* ```
* extraData 为外部通过 useDialogModal.rerenderFooter 重新渲染footer携带的数据
* ```
*/
footer?: null | ReactElement | ReactElement[] | ((form: FormInstance, extraData?: TPlainObject) => ReactElement);
/** 内容高度，为styles.body.height快捷配置，优先级低于styles.body.height */
bodyHeight?: number;
};
export interface DropdownMenuItem extends Omit<ButtonProps, "color"> {
text?: string | ReactElement;
color?: string;
onClick?: (event: React.MouseEvent<HTMLElement>) => void | Promise<void>;
permission?: string;
needConfirm?: boolean;
confirmMessage?: ReactNode;
hidden?: boolean;
confirmModalProps?: DialogModalProps;
stopPropagation?: boolean;
}
export interface DropdownMenuWrapperProps extends Omit<DropdownProps, "menu"> {
menuList: Array<DropdownMenuItem | null>;
/** dropdown 设置弹框根节点在body下 */
isFixed?: boolean;
}
export interface ButtonOperateItem extends ButtonWrapperProps {
/** hover 提示文字，isFold=true无效 */
hoverTips?: string | ReactElement;
/** hover 提示类型 默认：'tooltip' */
tipsType?: "popover" | "tooltip";
/** 按钮文案 */
text?: string | ReactElement;
/** 自定义按钮颜色 */
color?: string;
/** 是否需要二次弹框确认 */
needConfirm?: boolean;
/** 二次弹框确认文案 */
confirmMessage?: ReactNode;
popconfirmProps?: Pick<PopconfirmProps, "placement" | "okText" | "cancelText" | "trigger">;
/** 是否折叠合拢 */
isFold?: boolean;
confirmModalProps?: DialogModalProps;
/** 是否显示按钮，优先级高于 hidden */
show?: boolean;
}
export interface ButtonOperateProps {
className?: string;
style?: CSSProperties;
/**
* 如果数组中元素为ReactElement类型
* 1. 一般为antd Button组件，如果组件存在属性hidden=true、v-hidden=true，则会隐藏
* 2. 可配置 v-permission 权限值，例如 v-permission="add"
* 3. 任何confirm、disabled等状态在外部控制
* 3. 不支持fold效果
*/
operateList: Array<ButtonOperateItem | null | ReactElement>;
/** 是否换行，默认true */
wrap?: boolean;
/** 隐藏图标Icon */
foldIcon?: ReactElement;
/** 按钮之间是否添加分隔符 */
split?: boolean;
/** 多个按钮的包装组件Space属性 */
spaceProps?: SpaceProps;
/** 间距，默认：10；split=true配置下无效（可通过spaceProps设置间距） */
gap?: number;
/** 折叠合拢属性 */
dropdownMenuProps?: Omit<DropdownMenuWrapperProps, "menuList">;
/**
* 按钮布局尺寸
* ```
* 1. 设置为small后，gap、split 配置失效
* ```
*/
size?: "small" | "default";
}
export type TRequestStatus = "request-init" | "request-progress" | "request-success" | "request-error" | "request-search-keyword-empty" | "no-dependencies-params";
export type TRequestStatusProps = {
status?: TRequestStatus;
errorButton?: ReactElement;
messageConfig?: Partial<Record<TRequestStatus, string>>;
loading?: boolean;
};
export type TreeWrapperValue = string | number | Array<string | number> | TPlainObject<string | number> | Array<TPlainObject<string | number>>;
export type TreeServiceConfig = {
params?: TPlainObject;
requiredParamsKeys?: string[];
onRequest?: (params?: TAny) => TAny;
/**
* 响应数据适配器
*/
onRequestResultAdapter?: (respData: TAny) => TPlainObject[];
};
export type TreeLoadDataServiceConfig = {
getParams?: (dataItem: TPlainObject) => TPlainObject;
onRequest: (params: TPlainObject) => TAny;
/**
* 响应数据适配器
*/
onRequestResultAdapter?: (respData: TAny) => TPlainObject[];
};
export type TreeWrapperProps = Omit<TreeProps, "treeData" | "onExpand" | "selectedKeys" | "checkedKeys" | "onCheck" | "onSelect" | "fieldNames" | "multiple" | "loadData" | "icon" | "defaultCheckedKeys" | "defaultExpandParent" | "defaultSelectedKeys"> & {
/**
* 设置请求唯一值
* ```
* 1. 设置后，如果请求入参不变，不会重复请求接口，直接使用上次缓存数据
* ```
*/
modelKey?: string;
/**
* 字段映射
* ```
* 默认值：
* label = 'label'
* value = 'value'
* children = 'children'
*
* 如果未设置list，则说明接口返回数据为数组
* 如果返回数据存在多级，可通过设置 list='a.b.list'
* ```
*/
fieldNames?: {
label?: string;
value?: string;
children?: string;
list?: string;
};
/**
* useEffect依赖项数组，用于重新发起获取接口数据
*/
effectDependencyList?: DependencyList;
/**
* 请求服务需求的数据，当设置`selectorTreeList`后无效果
*/
serviceConfig?: TreeServiceConfig;
/**
* 是否开启异步加载
*/
loadDataFlag?: boolean;
/**
* 异步加载数据配置
* ```
* 1. 会通过fieldNames配置label、value、children进行转义
* 2. fieldNames.list 配置在此处无效
* ```
*/
loadDataServiceConfig?: TreeLoadDataServiceConfig;
/**
* 当设置selectorTreeList后，serviceConfig将失效
* ```
* 1. 不支持异步数据，异步使用serviceConfig方式
* ```
*/
selectorTreeList?: TPlainObject[];
/**
* 通过服务获取数据后回调，当设置`selectorList`后无效果
* ```
* 相同modelKey，同时发起多个渲染时，只有第一个会执行 onSelectorTreeListChange 回调
* ```
*/
onSelectorTreeListChange?: (dataList: TPlainObject[]) => void;
/** 接口响应数据变更 */
onRequestResponseChange?: (data: TAny) => void;
onChange?: (selectedKey?: TreeWrapperValue, operateNodeData?: TPlainObject[] | TPlainObject, operateAllNodeDataList?: TPlainObject[], extraData?: TPlainObject) => void;
/**
* 搜索关键字，打开tree折叠过滤关键字
*/
searchValue?: string;
/**
* checkable模式下，onChange是否返回父节点，默认值true
* @description 已过期，请使用 checkableType 配置
* ```
* 注意：checkStrictly = true，checkableResponseParentNode配置失效
* ```
*/
checkableResponseParentNode?: boolean;
/**
* 节点选择类型（默认值：'2'）, 多选时有效
* ```
* '1' 表示返回所有选中的节点（包含父节点和叶子节点）
* '2' 表示只返回叶子节点
* '3' 表示当叶子节点全选时，返回父节点，不返回下面的叶子节点
*
* 注意：checkStrictly = true，checkableType配置失效
* ```
*/
checkableType?: "1" | "2" | "3";
/**
* 菜单触发类型，默认：click
* ```
* 自定义设置 titleRender 后失效
* ```
*/
menuTriggerType?: "click" | "hover";
menus?: (dataItem: any) => ButtonOperateProps;
showSearch?: boolean;
onSearchValueChange?: (searchValue?: string) => void;
searchPlaceholder?: string;
searchStyle?: CSSProperties;
icon?: (data: {
isParent: boolean;
isLeaf: boolean;
[key: string]: TAny;
}) => ReactElement;
/**
* 状态文案配置
*/
requestMessageConfig?: TRequestStatusProps["messageConfig"];
/**
* value格式
*```
* 1. string 、number
* 2. Array<string | number>
* 3. lableInValue = true，根据labelInValueFieldNames配置格式
* 4. lableInValue = true，Array<labelInValueFieldNames配置>
* ```
*/
value?: TreeWrapperValue;
/**
* 选择的节点数据，是否包含label信息
* ```
* 默认选择的节点只有value数据
* ```
*/
labelInValue?: boolean;
/**
* ```
* @deprecated 废弃
* lableInValue = true，onChange输出数据字段名称，默认：{ label: string; value: string|number }
* ```
*/
labelInValueFieldNames?: {
label: string;
value: string;
};
/**
* 禁用状态是否可选，默认值true
* 当dateItem中包含 disabled 则数据为禁用状态
*/
disabledCanUse?: boolean;
/** treeItem数据适配器 */
treeItemDataAdapter?: (dataItem: TPlainObject) => TPlainObject;
/** 搜索位置额外元素 */
searchExtraElement?: ReactElement;
/** 有唯一跟节点时，初始化是否展开，默认值：false */
initRootExpand?: boolean;
/** 搜素过滤方式，高亮 | 过滤；默认：filter */
searchResultType?: "highlight" | "filter";
/**
* 拖拽节点处理，自定义onDrop事件后，失效
* ```
* 参数
* 1. parentId 拖拽结束位置父节点ID
* 2. id 当前拖拽节点ID
* 3. index 拖拽结束位置所在数组下标
* ```
*/
onDropNodeHandle?: (result: {
parentId?: string | number;
id: string | number;
index: number;
}) => void;
/**
* 拖拽排序前判断，如果返回 true，可排序，其他不可排序
* ```
* 可用于需要权限控制判断
* ```
*/
onDropPrev?: (info: any) => boolean;
/**
* 标签渲染
* ```
* 1. 自定义设置 titleRender 后失效
* 2. 与titleRender的区别
* a. 设置 labelRender 后，menuLayout有效
* b. 设置 titleRender 后，menuLayout失效
* ```
*/
labelRender?: (nodeData: TPlainObject) => ReactElement;
/**
* 自定义搜索规则
*/
customSearchRule?: (nodeData: TPlainObject, searchValue?: string) => boolean;
/**
* 点击父节点 是否切换折叠
* ```
* 1. 设置 titleRender 后，此配置失效
* ```
*/
clickParentNodeToggleExpand?: boolean;
/**
* 禁用节点选中
* ```
* 1. checkable = true，此配置失效
* 2. 在未设置节点 disabled 属性情况下，满足此配置不会触发onChange事件
* ```
*/
disableNodeSelect?: (item: TPlainObject) => boolean;
/**
* 是否必选，最后一个不能取消
* ```
* 1. 设置 checkable = true 时无效
* ```
*/
required?: boolean;
/**
* 在第一次渲染value时，主动执行一次onChange
* ```
* 1. 设置labelInValue = true 时有效
* 2. 不考虑子父节点的关系
* ```
*/
executeOnChangeInRenderFirstValue?: boolean;
};
export type TreeModelSelectItem = {
label: string;
value: string | number;
};
export type TreeModelSelectValue = TreeModelSelectItem[] | Array<TreeModelSelectItem["value"]> | TreeModelSelectItem["value"];
export type TreeModalContentProps = {
/** 是否多选，默认值：true */
isMultiple?: boolean;
forceRender?: boolean;
/**
* 内置尺寸，根据比例固定高度、宽度，默认：large
*/
size?: "small" | "middle" | "large";
/** 字段映射 */
fieldNames?: {
label?: string;
value?: string;
children?: string;
};
/**
* 接口调用
* @deprecated 已过期，使用 serviceConfig
*/
onRequest?: () => Promise<TPlainObject[]>;
serviceConfig?: {
params?: TPlainObject;
requiredParamsKeys?: string[];
onRequest?: (params?: TAny) => TAny;
};
value?: TreeModelSelectValue;
onChange?: (values?: TreeModelSelectItem[]) => void;
textConfig: {
title: string;
/** 选择为空提示，例如：请选择 */
placeholder?: string;
/** 选择数量提示，例如：已选择{total}位用户 */
selectQuantityPrompt?: string;
};
onDataSourceChange?: (treeDataList: TPlainObject[], mapData: TPlainObject) => void;
treeProps?: Pick<TreeWrapperProps, "showSearch" | "searchResultType" | "searchPlaceholder" | "searchValue" | "loadDataFlag" | "loadDataServiceConfig" | "icon" | "disabledCanUse" | "treeItemDataAdapter" | "searchExtraElement" | "initRootExpand" | "searchResultType" | "labelRender" | "customSearchRule" | "checkableType" | "checkStrictly" | "defaultExpandAll" | "clickParentNodeToggleExpand" | "disableNodeSelect">;
};
export type TreeModalProps = TreeModalContentProps & {
children: ReactElement & {
onClick?: (e: any) => void | Promise<void>;
};
modalClassName?: string;
modalWidth?: number;
modalBodyHeight?: number;
disabled?: boolean;
};
export type TreeModalSelectorProps = Omit<TreeModalProps, "children" | "forceRender" | "onChange"> & {
placeholder?: string;
/**
* 1. 可指定数量
* 2. 可设置 responsive，一行自适应显示
*/
maxTagCount?: number | "responsive";
/** 是否返回label+value模式 */
labelInValue?: boolean;
onChange?: (values?: TreeModelSelectItem[] | TreeModelSelectItem) => void;
/** 最大选择数量 */
maxCount?: number;
/** 超过最大选择数量提示文本 */
overMaxCountMsg?: string;
disabled?: boolean;
allowClear?: boolean;
};
export type TreeModalSelectorApi = {
getDataSourceMap: () => {
treeDataList: TPlainObject[];
dataSourceMap: TPlainObject;
};
};
/**
* 树弹框选择器
* ```
* 1. 可通过 treeProps.checkableType 配置多选节点模式（包括返回所有节点、只返回叶子节点、叶子节点&父节点全选只返回父节点），默认只返回叶子节点
* 2. demo: https://fex.qa.tcshuke.com/docs/admin/main/selector/tree
* ```
*/
export declare const TreeModalSelector: import("react").ForwardRefExoticComponent<Omit<TreeModalProps, "children" | "forceRender" | "onChange"> & {
placeholder?: string;
/**
* 1. 可指定数量
* 2. 可设置 responsive，一行自适应显示
*/
maxTagCount?: number | "responsive";
/** 是否返回label+value模式 */
labelInValue?: boolean;
onChange?: (values?: TreeModelSelectItem[] | TreeModelSelectItem) => void;
/** 最大选择数量 */
maxCount?: number;
/** 超过最大选择数量提示文本 */
overMaxCountMsg?: string;
disabled?: boolean;
allowClear?: boolean;
} & import("react").RefAttributes<TreeModalSelectorApi>>;
export {};