condition-editor

在线条件编辑器

使用教程

安装

pnpm add condition-editor

## 或者

npm i condition-editor

快速上手

import { ConditionEditor, ConditionGroupInfo } from 'condition-editor';

export default () => {
  const handleChange = (value: ConditionGroupInfo) => {
    console.log('条件配置:', value);
  };
  return (
    <ConditionEditor
      onChange={handleChange}
      renderCondField={({ data, disabled }, onChange) => {
        return (
          <input
            value={data?.value}
            onChange={(e) => {
              const val = e?.target?.value || '';
              onChange({
                ...data,
                value: val,
              });
            }}
            disabled={disabled}
            style={{ width: '120px' }}
            placeholder="请输入"
          />
        );
      }}
      operators={[
        {
          value: 'equal',
          label: '等于',
        },
        {
          label: '不等于',
          value: 'notEqual',
        },
      ]}
    />
  );
};

🔨 API

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[] | ['在上方插入条件','在下方插入条件','插入子级条件','在父级上方插入条件','在父级下方插入条件'] | 否 | | getContainer | 指定编辑器挂载的节点。默认渲染到 body 上 | (() => HTMLElement) \| false \| HTMLElement | ()=>document.body | 否 | | 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 | 节点信息 | { node: ConditionNodeInfo<NodeData>; data: NodeData; disabled: boolean; } | - | 是 | | onChange | 节点数据变更回调 | (data: NodeData) => void | - | 是 | | getContainer | 指定编辑器挂载的节点。来自组件的getContainer配置,并转化为方法传递 | () => HTMLElement | - | 否 | | -- | 返回值 | 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 框架
• √ 支持组件文案扩展
• √ 支持追加到节点前，节点后
• √ 支持创建父级的兄弟节点
• √ 支持自定义编辑器挂载DOM节点
• [x] 支持条件组删除
• [x] 支持同层级拖拽
• [x] 支持多套框架(Antd-Vue、React-Vant 等)

LICENSE

MIT