condition-editor
在线条件编辑器
Usage
安装
pnpm add condition-editor
## 或者
npm i condition-editor
组件配置项
ConditionEditorProps
| 属性 | 描述 | 类型 | 默认值 | 必须 |
|---|---|---|---|---|
| disabled | 禁用 | boolean |
- | 否 |
| noCondContent | 禁用或只读状态下，没有条件展示内容 | ReactNode |
- | 否 |
| maxHeight | 最大高度 | string|number |
- | 否 |
| additionText | 首层添加按钮文本 | ReactNode |
"添加条件" | 否 |
| additionProps | 首层添加按钮属性 | ButtonProps | - | 否 |
| relationText | 条件关联关系文本,对应[RelationType.AND, RelationType.OR]的展示文案 |
ReactNode[] |
['并且','或者'] | 否 |
| levelText | 条件级别关系文本,对应[LevelType.Before, LevelType.After, LevelType.Child, LevelType.BeforeParent, LevelType.AfterParent]的展示文案 |
ReactNode[] |
['在上方插入条件','在下方插入条件','插入子级条件','在父级上方插入条件','在父级下方插入条件'] | 否 |
| onBeforeAddition | 新增条件前触发回调，可用于自定义新增项 | onBeforeAddition | - | 否 |
| onAddition | 新增条件后触发回调 | onAddition | - | 否 |
| onBeforeDelete | 删除条件前触发回调,返回false可用于取消删除 |
onBeforeDelete | - | 否 |
| onDelete | 删除条件触发回调 | onDelete | - | 否 |
| renderCondPrefix | 自定义渲染条件前缀文案,默认是当
|
RenderCondFn | - | 否 |
| renderCondField | 自定义渲染过滤字段 | RenderCondFn | - | 否 |
| renderCondOperator | 自定义渲染关联词字段 | RenderCondFn | - | 否 |
| renderCondActions | 自定义渲染条件操作 | RenderCondActionFn | - | 否 |
| operators | 自定义关联词可选项 | OptionItem[] | - | 否 |
| renderCondValue | 自定义渲染过滤值 | RenderCondFn | - | 否 |
| renderCondExtra | 自定义渲染条件后缀文案,默认是时
|
RenderCondFn | - | 否 |
除上述属性外，组件还支持 Antd - Card 除defaultValue和onChange外的其他属性来扩展配置外层容器。
onDelete
| 属性 | 描述 | 类型 | 默认值 | 必须 |
|---|---|---|---|---|
| group | ConditionGroupInfo | - | 是 | |
| key | string |
- | 是 | |
| type | NodeType | - | 是 | |
-- |
返回值 | void |
- | 否 |
onBeforeDelete
| 属性 | 描述 | 类型 | 默认值 | 必须 |
|---|---|---|---|---|
| group | ConditionGroupInfo | - | 是 | |
| info | info |
- | 是 | |
| type | NodeType | - | 是 | |
-- |
返回值 |
Promise<boolean>|boolean|void
|
- | 否 |
info
| 属性 | 描述 | 类型 | 默认值 | 必须 |
|---|---|---|---|---|
| key | string |
- | 是 | |
| index | number |
- | 是 |
onAddition
| 属性 | 描述 | 类型 | 默认值 | 必须 |
|---|---|---|---|---|
| group | ConditionGroupInfo | - | 是 | |
| key | string |
- | 是 | |
| type | LevelType | - | 是 | |
| node | ConditionNodeInfo | - | 是 | |
-- |
返回值 | void |
- | 否 |
onBeforeAddition
| 属性 | 描述 | 类型 | 默认值 | 必须 |
|---|---|---|---|---|
| group | ConditionGroupInfo | - | 是 | |
| key | string |
- | 是 | |
| type | LevelType | - | 是 | |
-- |
返回值 | Promise<NodeData | false> | NodeData | false |
- | 否 |
RenderCondActionFn
| 属性 | 描述 | 类型 | 默认值 | 必须 |
|---|---|---|---|---|
| defaultDom | JSX.Element[] |
- | 是 | |
| info | info |
- | 是 | |
| actions | ConditionActionType |
- | 是 | |
-- |
返回值 | JSX.Element[] |
- | 否 |
info
| 属性 | 描述 | 类型 | 默认值 | 必须 |
|---|---|---|---|---|
| node | ConditionNodeInfo | - | 是 | |
| data | ConditionNodeData | - | 是 | |
| actionClassName | string |
- | 是 |
ConditionActionType
| 属性 | 描述 | 类型 | 默认值 | 必须 |
|---|---|---|---|---|
| add | 添加条件项 | add |
- | 是 |
| delete | 删除条件项 | delete |
- | 是 |
delete
| 属性 | 描述 | 类型 | 默认值 | 必须 |
|---|---|---|---|---|
-- |
返回值 | void |
- | 否 |
add
| 属性 | 描述 | 类型 | 默认值 | 必须 |
|---|---|---|---|---|
| type | LevelType | - | 是 | |
| defaultData | ConditionNodeData | - | 否 | |
-- |
返回值 | void |
- | 否 |
RenderCondFn
| 属性 | 描述 | 类型 | 默认值 | 必须 |
|---|---|---|---|---|
| info | info |
- | 是 | |
| onChange | onChange |
- | 是 | |
-- |
返回值 | ReactNode |
- | 否 |
onChange
| 属性 | 描述 | 类型 | 默认值 | 必须 |
|---|---|---|---|---|
| data | ConditionNodeData | - | 是 | |
-- |
返回值 | void |
- | 否 |
info
| 属性 | 描述 | 类型 | 默认值 | 必须 |
|---|---|---|---|---|
| node | ConditionNodeInfo | - | 是 | |
| data | ConditionNodeData | - | 是 | |
| disabled | boolean |
- | 是 |
ConditionItemProps
| 属性 | 描述 | 类型 | 默认值 | 必须 |
|---|---|---|---|---|
| actionRef | 初始化操作 | React.MutableRefObject| |
- | 否 |
| onAdd | 新增节点点击触发 | onAdd |
- | 否 |
| onDelete | 删除节点点击触发 | onDelete |
- | 否 |
onDelete
| 属性 | 描述 | 类型 | 默认值 | 必须 |
|---|---|---|---|---|
| key | string |
- | 是 | |
-- |
返回值 | void |
- | 否 |
onAdd
| 属性 | 描述 | 类型 | 默认值 | 必须 |
|---|---|---|---|---|
| key | string |
- | 是 | |
| type | LevelType | - | 是 | |
| defaultData | ConditionNodeData | - | 否 | |
-- |
返回值 | void |
- | 否 |
ConditionGroupInfo
| 属性 | 描述 | 类型 | 默认值 | 必须 |
|---|---|---|---|---|
| key | string |
- | 是 | |
| description | string |
- | 否 | |
| type | NodeType.Group |
- | 是 | |
| data | ConditionGroupData | - | 是 | |
| children | [] |
- | 是 |
ConditionNodeInfo
| 属性 | 描述 | 类型 | 默认值 | 必须 |
|---|---|---|---|---|
| key | string |
- | 是 | |
| description | string |
- | 否 | |
| type | NodeType.Item |
- | 是 | |
| data | ConditionNodeData | - | 是 |
ConditionGroupData
| 属性 | 描述 | 类型 | 默认值 | 必须 |
|---|---|---|---|---|
| relation | RelationType | - | 否 |
ConditionNodeData
| 属性 | 描述 | 类型 | 默认值 | 必须 |
|---|---|---|---|---|
| field | string |
- | 否 | |
| operator | string |
- | 否 | |
| value | any |
- | 否 | |
| valueType | string |
- | 否 |
OptionItem
| 属性 | 描述 | 类型 | 默认值 | 必须 |
|---|---|---|---|---|
| label | 选项文本 | React.ReactNode |
- | 是 |
| value | 选项值 | string |
- | 是 |
| disabled | 禁选 | boolean |
- | 否 |
| data | 其他属性 | any |
- | 否 |
ENUM LevelType
| 枚举项 | 描述 | 枚举值 |
|---|---|---|
| LevelType.Before | 在上方插入条件 | before |
| LevelType.After | 在下方插入条件 | after |
| LevelType.Child | 插入子级条件 | child |
| LevelType.BeforeParent | 在父级上方插入条件 | beforeParent |
| LevelType.AfterParent | 在父级下方插入条件 | afterParent |
ENUM NodeType
| 枚举项 | 描述 | 枚举值 |
|---|---|---|
| NodeType.Item | 条件项类别 | item |
| NodeType.Group | 条件组类别 | group |
ENUM RelationType
| 枚举项 | 描述 | 枚举值 |
|---|---|---|
| RelationType.AND | 并且 | and |
| RelationType.OR | 或者 | or |
支持功能
- √ 支持层级创建条件
- √ 支持
TypeScript - √ 支持自定义条件各个部分内容
- √ 支持监听条件新增前后、删除前后事件
- √ 支持空结果
- √ 支持只读(结合描述)
- √ 支持自定义条件项按钮
- √ 支持
Antd框架 - √ 支持组件文案扩展
- √ 支持追加到节点前，节点后
- √ 支持创建父级的兄弟节点
- [x] 支持条件字段验证
- [x] 支持条件组删除
- [x] 支持同层级拖拽
- [x] 支持多套框架(
Antd-Vue、React-Vant等)
LICENSE
MIT