condition-editor
Version:
226 lines (225 loc) • 8.07 kB
TypeScript
import { FieldValueProps, NativeProps, OptionItem } from "../types";
import { ButtonProps, CardProps } from 'antd';
import { ReactNode } from 'react';
/**
* @enum 条件级别关系
*/
export declare enum LevelType {
Child = "child",
Before = "before",
After = "after",
BeforeParent = "beforeParent",
AfterParent = "afterParent"
}
/**
* @enum 条件节点类型
*/
export declare enum NodeType {
Item = "item",
Group = "group"
}
/**
* @enum 条件关联关系
*/
export declare enum RelationType {
AND = "and",
OR = "or"
}
export type ConditionNodeData = {
field?: string;
operator?: string;
value?: any;
valueType?: string;
[propName: string]: any;
};
export type ConditionGroupData = {
relation?: RelationType;
[propName: string]: any;
};
export type ConditionNodeInfo<NodeData extends ConditionNodeData> = {
key: string;
description?: string;
type: NodeType.Item;
data: NodeData;
};
export type ConditionGroupInfo<NodeData extends ConditionNodeData = ConditionNodeData, GroupData extends ConditionGroupData = ConditionGroupData> = {
key: string;
description?: string;
type: NodeType.Group;
data: ConditionGroupData;
children: (ConditionNodeInfo<NodeData> | ConditionGroupInfo<NodeData, GroupData>)[];
};
export type ConditionItemProps<NodeData extends ConditionNodeData> = {
/**
* @description 字段受控值
*/
value: ConditionNodeInfo<NodeData>;
/**
* @description 字段受控值改变触发
*/
onChange: (value: ConditionNodeInfo<NodeData>) => void;
/**
* @description 节点层级深度
*/
depth: number;
/**
* @description 初始化操作
*/
actionRef?: React.MutableRefObject<ConditionActionType<NodeData> | undefined> | ((actionRef: ConditionActionType<NodeData>) => void);
/**
* @method 新增节点点击触发
*/
onAdd?: (key: string, type: LevelType, defaultData?: NodeData) => void;
/**
* @method 删除节点点击触发
*/
onDelete?: (key: string) => void;
};
export type ConditionGroupProps<NodeData extends ConditionNodeData = ConditionNodeData, GroupData extends ConditionGroupData = ConditionGroupData> = NativeProps & {
/**
* @description 字段受控值
*/
value: ConditionGroupInfo<NodeData, GroupData>;
/**
* @description 字段受控值改变触发
*/
onChange: (value: ConditionGroupInfo<NodeData, GroupData>) => void;
/**
* @description 父节点对象
*/
parentNode?: ConditionGroupInfo<NodeData, GroupData>;
/**
* @description 向父节点添加对象
*/
onAddParent?: (key: string, type: LevelType.After | LevelType.Before, defaultData?: NodeData) => void;
/**
* @description 节点层级深度
*/
depth: number;
};
/**
* @method 自定义渲染部件函数
* @param info 节点信息
* @param onChange 节点数据变更回调
* @param getContainer 指定`编辑器`挂载的节点。来自组件的`getContainer`配置,并转化为方法传递。
*/
export type RenderCondFn<NodeData extends ConditionNodeData> = (info: {
node: ConditionNodeInfo<NodeData>;
data: NodeData;
disabled: boolean;
}, onChange: (data: NodeData) => void, getContainer?: () => HTMLElement) => ReactNode;
export type ConditionActionType<NodeData extends ConditionNodeData> = {
/**
* @description 添加条件项
*/
add: (type: LevelType, defaultData?: NodeData) => void;
/**
* @description 删除条件项
*/
delete: () => void;
};
export type RenderCondActionFn<NodeData extends ConditionNodeData> = (defaultDom: JSX.Element[], info: {
node: ConditionNodeInfo<NodeData>;
data: NodeData;
actionClassName: string;
}, actions: ConditionActionType<NodeData>) => JSX.Element[];
export interface ConditionEditorProps<NodeData extends ConditionNodeData = ConditionNodeData, GroupData extends ConditionGroupData = ConditionGroupData> extends FieldValueProps<ConditionGroupInfo<NodeData, GroupData>>, Omit<CardProps, 'defaultValue' | 'onChange'> {
/**
* @description 禁用
* @default false
*/
disabled?: boolean;
/**
* @description 禁用或只读状态下，没有条件展示内容
*/
noCondContent?: ReactNode;
/**
* @description 最大高度
*/
maxHeight?: string | number;
/**
* @description 首层添加按钮文本
* @default "添加条件"
*/
additionText?: ReactNode;
/**
* @description 首层添加按钮属性
*/
additionProps?: ButtonProps;
/**
* @description 条件关联关系文本
* @description 对应[`RelationType.AND`, `RelationType.OR`]的展示文案
* @default ['并且','或者']
*/
relationText?: ReactNode[];
/**
* @description 条件级别关系文本
* @description 对应[`LevelType.Before`, `LevelType.After`, `LevelType.Child`, `LevelType.BeforeParent`, `LevelType.AfterParent`]的展示文案
* @default ['在上方插入条件','在下方插入条件','插入子级条件','在父级上方插入条件','在父级下方插入条件']
*/
levelText?: ReactNode[];
/**
* @description 指定`编辑器`挂载的节点。默认渲染到 `body` 上
* @description 为符合 `React 18 concurrent` 标准，`getContainer`需要始终返回唯一`dom`节点
* @description 若为`false`，则挂载在编辑器上
* @default `()=>document.body`
*/
getContainer?: (() => HTMLElement) | false | HTMLElement;
/**
* @description 新增条件前触发回调，可用于自定义新增项
*/
onBeforeAddition?: (group: ConditionGroupInfo<NodeData, GroupData>, key: string, type: LevelType) => Promise<NodeData | false> | NodeData | false;
/**
* @description 新增条件后触发回调
*/
onAddition?: (group: ConditionGroupInfo<NodeData, GroupData>, key: string, type: LevelType, node: ConditionNodeInfo<NodeData>) => void;
/**
* @description 删除条件前触发回调,返回`false`可用于取消删除
*/
onBeforeDelete?: (group: ConditionGroupInfo<NodeData, GroupData>, info: {
key: string;
index: number;
}, type: NodeType) => Promise<boolean> | boolean | void;
/**
* @description 删除条件触发回调
*/
onDelete?: (group: ConditionGroupInfo<NodeData, GroupData>, key: string, type: NodeType) => void;
/**
* @method 自定义渲染条件前缀文案
* @default `当`
*/
renderCondPrefix?: RenderCondFn<NodeData>;
/**
* @method 自定义渲染过滤字段
*/
renderCondField?: RenderCondFn<NodeData>;
/**
* @description 自定义渲染关联词字段
*/
renderCondOperator?: RenderCondFn<NodeData>;
/**
* @description 自定义渲染条件操作
*/
renderCondActions?: RenderCondActionFn<NodeData>;
/**
* @description 自定义关联词可选项
*/
operators?: OptionItem[];
/**
* @description 自定义渲染过滤值
*/
renderCondValue?: RenderCondFn<NodeData>;
/**
* @method 自定义渲染条件后缀文案
* @default `时`
*/
renderCondExtra?: RenderCondFn<NodeData>;
}
export type ConditionEditorContextProps<NodeData extends ConditionNodeData = ConditionNodeData, GroupData extends ConditionGroupData = ConditionGroupData> = Pick<ConditionEditorProps<NodeData, GroupData>, 'disabled' | 'relationText' | 'levelText' | 'renderCondField' | 'renderCondOperator' | 'operators' | 'renderCondValue' | 'renderCondPrefix' | 'renderCondExtra' | 'renderCondActions' | 'onBeforeAddition' | 'onAddition' | 'onBeforeDelete' | 'onDelete'> & {
/**
* 指定`编辑器`挂载的节点。来自组件的`getContainer`配置,并转化为方法传递。
* @description 为符合 `React 18 concurrent` 标准，`getContainer`需要始终返回唯一`dom`节点
* @default `()=>document.body`
*/
getContainer?: () => HTMLElement;
};