@flatbiz/antd
Version:
140 lines (137 loc) • 5.26 kB
TypeScript
import { TAny, TPlainObject } from '@flatbiz/utils';
import { TreeSelectProps } from 'antd';
import { DependencyList, ReactElement } from 'react';
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 TreeSelectorWrapperValue = string | number | Array<string | number> | TPlainObject<string | number> | Array<TPlainObject<string | number>>;
export type TreeSelectorServiceConfig = {
params?: TPlainObject;
requiredParamsKeys?: string[];
onRequest?: (params?: TAny) => TAny;
/**
* 响应数据适配器
*/
onRequestResultAdapter?: (respData: TAny) => TPlainObject[];
};
export type TreeSelectorWrapperProps = Omit<TreeSelectProps, "treeExpandedKeys" | "treeData" | "loading" | "onTreeExpand" | "onChange" | "value" | "fieldNames" | "defaultValue" | "treeDataSimpleMode" | "onSearch"> & {
modelKey: string;
fieldNames?: {
/**
* 1. list 为 onRequest 返回数据中列表key值,可多级取值,例如: 'a.b.c'
* 2. 配置 serviceConfig.onRequestResultAdapter 后此配置失效
*/
list?: string;
label?: string;
value?: string;
children?: string;
disabled?: string;
};
/**
* useEffect依赖项数组,用于重新发起获取接口数据
*/
effectDependencyList?: DependencyList;
/**
* 请求服务需求的数据,当设置`treeSelectorList`后无效果
*/
serviceConfig?: TreeSelectorServiceConfig;
/**
* 当设置treeSelectorList后,serviceConfig 将失效
*/
treeSelectorList?: TreeSelectProps["treeData"];
/**
* treeSelectorList发生变更时触发
*/
onTreeSelectorListChange?: (treeSelectorList?: TreeSelectProps["treeData"]) => void;
/**
* 通过服务获取数据异常回调,当设置`treeSelectorList`后无效果
*/
onTreeSelectorRequestError?: (error: Error) => void;
/**
* 添加全部选项
* ```
* 1. showAllOption = true,添加默认全部选项(value值为空字符串)
* 2. 可自定义全部选项,例如:{ label: '全部', value: 'all' }
* 3. 自定义字段会通过fieldNames转换后使用
* 4. 多选操作时,最好不要设置全部选项
* ```
*/
showAllOption?: true | TPlainObject<string | number>;
/**
* 1. 当 treeCheckable = true && treeCheckStrictly = true,如果选择的数据中含有父节点,selectedValue、selectedList返回数据包含父节点
* 2. 当 treeCheckable = true && treeCheckStrictly = false,selectedValue、selectedList返回的数据不包含父节点
* 3. 当 treeCheckable = false,节点选择没有级联关系,selectedValue、selectedList返回的数据就是实际选择
* 4. selectAllDataList 返回的数据都包含父节点
* 5. 使用 onTreeItemAdapter 拼接label数据后,选中回填数据也是拼接后的
* 6. triggerInfo 当前操作节点数据
*/
onChange?: (selectedValue?: TreeSelectorWrapperValue, selectedData?: TPlainObject[] | TPlainObject, triggerInfo?: TPlainObject) => void;
/**
* tree item 数据适配器,返回的数据会通过fieldNames配置取数据
* ```
* 1. 可用于设置disabled状态
* onTreeItemDataAdapter: (dataItem) => {
* if(dataItem.xx === xx){
* dataItem['disabled] = true;
* }
* return dataItem;
* }
* 2. 可设置label数据显示
* ```
*/
onTreeItemDataAdapter?: (dataItem: TPlainObject) => TPlainObject;
/** 自定义异常提示文案 */
requestMessageConfig?: TRequestStatusProps["messageConfig"];
/**
* value格式
*```
* 1. string 、number
* 2. Array<string | number>
* 3. lableInValue = true,根据labelInValueFieldNames配置格式
* 4. lableInValue = true,Array<labelInValueFieldNames配置>
* ```
*/
value?: TreeSelectorWrapperValue;
/**
* treeCheckStrictly checkable 状态下节点选择完全受控(父子节点选中状态不再关联),
* 会使得 labelInValue 强制为 true
*/
labelInValue?: boolean;
/**
* @deprecated 已弃用
* ```
* lableInValue = true,onChange输出数据字段名称,默认:{ label: string; value: string|number }
* ```
*/
labelInValueFieldNames?: {
label: string;
value: string;
};
/**
* treeCheckStrictly = true模式下有效,点击父节点是否选中所有子节点,默认值:true
*/
selectedParentCheckedAllChildrenList?: boolean;
/** 有唯一跟节点时,初始化是否展开,默认值:false */
initRootExpand?: boolean;
/**
* 在第一次渲染value时,主动执行一次onChange
* ```
* 1. 设置labelInValue = true 时有效
* 2. 不考虑子父节点的关系
* ```
*/
executeOnChangeInRenderFirstValue?: boolean;
};
/**
* 树选择器包装组件,由于过度封装,部分antd TreeSelect原始功能不支持,不满足情况的请使用antd TreeSelect实现
* ```
* 1. 当设置treeSelectorList属性后,serviceConfig、onTreeSelectorListChange将失效
* 2. 父节点默认不返回,需要返回请设置showCheckedStrategy
* ```
*/
export declare const TreeSelectorWrapper: (props: TreeSelectorWrapperProps) => import("react").JSX.Element;
export {};