@flatbiz/antd

import { TAny, TNoopDefine, TPlainObject } from '@flatbiz/utils'; import { ButtonProps, DropdownProps, FormInstance, ModalProps, PopconfirmProps, SpaceProps, TreeProps } from 'antd'; import { ConfigProviderProps } from 'antd/es/config-provider'; import { CSSProperties, DependencyList, ReactElement, ReactNode } from 'react'; export type ButtonWrapperProps = Omit<ButtonProps, "onClick" | "color"> & { /** 当返回 Promise 时，按钮自动loading */ onClick?: (e: React.MouseEvent<HTMLElement>) => 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: 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; } 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">; } export type TRequestStatus = "request-init" | "request-progress" | "request-success" | "request-error" | "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"> & { /** 唯一值，用于缓存数据 */ 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"; /** * 菜单结构类型 tile/平铺 fold/折叠；默认：fold * @deprecated 已过期 4.3.0版本移除，请使用 menus * ``` * 自定义设置 titleRender 后失效 * ``` */ menuLayoutType?: "tile" | "fold"; /** * 获取菜单类别 * @param dataItem * @deprecated 已过期 4.3.0版本移除，请使用 menus * @returns * ``` * 1. menuLayoutType = tile 无效 * 2. 自定义设置 titleRender 后失效 * ``` */ getMenuOptions?: (dataItem: TPlainObject) => DropdownMenuItem[] | ButtonOperateItem[]; /** * 根据 menuLayoutType 类型赋值 * @deprecated 已过期 4.3.0版本移除，请使用 menuOptions */ menuOptions?: { tile?: (dataItem: TPlainObject) => ButtonOperateProps; fold?: (dataItem: TPlainObject) => DropdownMenuItem[]; }; /** * 菜单触发类型，默认：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; }; /** * 树弹框选择器 * ``` * 1. 可通过 treeProps.checkableType 配置多选节点模式（包括返回所有节点、只返回叶子节点、叶子节点&父节点全选只返回父节点），默认只返回叶子节点 * 2. demo: https://fex.qa.tcshuke.com/docs/admin/main/selector/tree * ``` */ export declare const TreeModalSelector: (props: TreeModalSelectorProps) => import("react").JSX.Element; export {};