@flatbiz/antd 4.5.26 → 5.0.0

package/dist/tree-wrapper/index.d.ts

@@ -0,0 +1,384 @@
+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, ForwardRefExoticComponent, ReactElement, RefAttributes } 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?: string;
+	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?: string;
+	popconfirmProps?: Pick<PopconfirmProps, "placement" | "okText" | "cancelText" | "trigger">;
+	/** 是否折叠合拢 */
+	isFold?: boolean;
+	confirmModalProps?: DialogModalProps;
+}
+export interface ButtonOperateProps {
+	className?: string;
+	style?: CSSProperties;
+	/**
+	 * 如果数组中元素为ReactElement类型
+	 * 1. 一般为antd Button组件，如果组件存在属性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
+	 * 1. checkStrictly = true，模式下失效
+	 */
+	checkableResponseParentNode?: boolean;
+	/**
+	 * 菜单结构类型 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;
+};
+export type TreeWrapperRefApi = {
+	onClearSelectorList: () => void;
+	getTreeDataList: () => TreeProps["treeData"];
+	onChangeExpandedKeys: (expandedKeys: Array<string | number>) => void;
+	/** 选择所有 */
+	onSelectAll: () => void;
+	/** 取消选择所有 */
+	onCancelSelectAll: () => void;
+	/** 展开所有 */
+	onExpandedAll: () => void;
+	/** 取消展开所有 */
+	onCancelExpandedAll: () => void;
+};
+/**
+ * Tree包装组件，默认返回父节点，可配置不返回
+ * @param props
+ * @returns
+ * ```
+ * 1. treeNode内置字段说明（如需要相关功能，可在接口中添加固定字段）
+ *    a. disabled 禁掉响应
+ *    b. isLeaf  设置为叶子节点 (设置了 loadData 时有效)。为 false 时会强制将其作为父节点
+ *    c. disableCheckbox  checkable模式下，treeNode复选框是否可选
+ * 2. 当设置selectorTreeList属性后，serviceConfig将失效
+ * 3. checkable=true，为多选模式
+ * 4. 设置value后，组件显示受控
+ * 5. 设置loadDataFlag=true，会动态获取children，当treeNode中包含isLeaf=true字段，表示为叶子节点，没有children了
+ * 6. 内置 onDrop 事件已处理数组排序，通过 onDropNodeHandle 事件可获取操作节点排序数据；自定义onDrop后，内置onDrop失效
+ * ```
+ */
+export declare const TreeWrapper: ForwardRefExoticComponent<TreeWrapperProps & RefAttributes<TreeWrapperRefApi>> & {
+	getTreeDataList: (modelKey: string) => TPlainObject[];
+};
+
+export {};