condition-editor
Version:
311 lines (243 loc) • 19.7 kB
Markdown
# condition-editor
[](https://npmjs.org/package/condition-editor)
[](https://npmjs.org/package/condition-editor)
在线条件编辑器
## 使用教程
### 安装
```bash
pnpm add condition-editor
## 或者
npm i condition-editor
```
### 快速上手
```tsx
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](#https://4x.ant.design/components/button-cn/#API) | - | 否 |
| 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](#onbeforeaddition) | - | 否 |
| onAddition | 新增条件后触发回调 | [onAddition](#onaddition) | - | 否 |
| onBeforeDelete | 删除条件前触发回调,返回`false`可用于取消删除 | [onBeforeDelete](#onbeforedelete) | - | 否 |
| onDelete | 删除条件触发回调 | [onDelete](#ondelete) | - | 否 |
| renderCondPrefix | 自定义渲染条件前缀文案,默认是`当` | [RenderCondFn](#rendercondfn) | - | 否 |
| renderCondField | 自定义渲染过滤字段 | [RenderCondFn](#rendercondfn) | - | 否 |
| renderCondOperator | 自定义渲染关联词字段 | [RenderCondFn](#rendercondfn) | - | 否 |
| renderCondActions | 自定义渲染条件操作 | [RenderCondActionFn](#rendercondactionfn) | - | 否 |
| operators | 自定义关联词可选项 | [OptionItem](#optionitem)[] | - | 否 |
| renderCondValue | 自定义渲染过滤值 | [RenderCondFn](#rendercondfn) | - | 否 |
| renderCondExtra | 自定义渲染条件后缀文案,默认是`时` | [RenderCondFn](#rendercondfn) | - | 否 |
除上述属性外，组件还支持 [`Antd - Card`](#https://4x.ant.design/components/card-cn/#API) 除`defaultValue`和`onChange`外的其他属性来扩展配置外层容器。
### onDelete
| 属性 | 描述 | 类型 | 默认值 | 必须 |
| ----- | ------ | ----------------------------------------- | ------ | ---- |
| group | | [ConditionGroupInfo](#conditiongroupinfo) | - | 是 |
| key | | `string` | - | 是 |
| type | | [NodeType](#nodetype) | - | 是 |
| `--` | 返回值 | `void` | - | 否 |
### onBeforeDelete
| 属性 | 描述 | 类型 | 默认值 | 必须 |
| ----- | ------ | ----------------------------------------- | ------ | ---- |
| group | | [ConditionGroupInfo](#conditiongroupinfo) | - | 是 |
| info | | `info` | - | 是 |
| type | | [NodeType](#nodetype) | - | 是 |
| `--` | 返回值 | `Promise<boolean>`\|`boolean`\|`void` | - | 否 |
### info
| 属性 | 描述 | 类型 | 默认值 | 必须 |
| ----- | ---- | -------- | ------ | ---- |
| key | | `string` | - | 是 |
| index | | `number` | - | 是 |
### onAddition
| 属性 | 描述 | 类型 | 默认值 | 必须 |
| ----- | ------ | ----------------------------------------- | ------ | ---- |
| group | | [ConditionGroupInfo](#conditiongroupinfo) | - | 是 |
| key | | `string` | - | 是 |
| type | | [LevelType](#leveltype) | - | 是 |
| node | | [ConditionNodeInfo](#conditionnodeinfo) | - | 是 |
| `--` | 返回值 | `void` | - | 否 |
### onBeforeAddition
| 属性 | 描述 | 类型 | 默认值 | 必须 |
| ----- | ------ | ------------------------------------------------- | ------ | ---- |
| group | | [ConditionGroupInfo](#conditiongroupinfo) | - | 是 |
| key | | `string` | - | 是 |
| type | | [LevelType](#leveltype) | - | 是 |
| `--` | 返回值 | `Promise<NodeData \| false> \| NodeData \| false` | - | 否 |
### RenderCondActionFn
| 属性 | 描述 | 类型 | 默认值 | 必须 |
| ---------- | ------ | --------------------- | ------ | ---- |
| defaultDom | | `JSX.Element[]` | - | 是 |
| info | | `info` | - | 是 |
| actions | | `ConditionActionType` | - | 是 |
| `--` | 返回值 | `JSX.Element[]` | - | 否 |
### info
| 属性 | 描述 | 类型 | 默认值 | 必须 |
| --------------- | ---- | --------------------------------------- | ------ | ---- |
| node | | [ConditionNodeInfo](#conditionnodeinfo) | - | 是 |
| data | | [ConditionNodeData](#conditionnodedata) | - | 是 |
| actionClassName | | `string` | - | 是 |
### ConditionActionType
| 属性 | 描述 | 类型 | 默认值 | 必须 |
| ------ | ---------- | -------- | ------ | ---- |
| add | 添加条件项 | `add` | - | 是 |
| delete | 删除条件项 | `delete` | - | 是 |
### delete
| 属性 | 描述 | 类型 | 默认值 | 必须 |
| ---- | ------ | ------ | ------ | ---- |
| `--` | 返回值 | `void` | - | 否 |
### add
| 属性 | 描述 | 类型 | 默认值 | 必须 |
| ----------- | ------ | --------------------------------------- | ------ | ---- |
| type | | [LevelType](#leveltype) | - | 是 |
| defaultData | | [ConditionNodeData](#conditionnodedata) | - | 否 |
| `--` | 返回值 | `void` | - | 否 |
### RenderCondFn
| 属性 | 描述 | 类型 | 默认值 | 必须 |
| ------------ | --------------------------------------------------------------------- | --------------------------------------------------------------------------- | ------ | ---- |
| info | 节点信息 | `{ node: ConditionNodeInfo<NodeData>; data: NodeData; disabled: boolean; }` | - | 是 |
| onChange | 节点数据变更回调 | `(data: NodeData) => void` | - | 是 |
| getContainer | 指定`编辑器`挂载的节点。来自组件的`getContainer`配置,并转化为方法传递 | `() => HTMLElement` | - | 否 |
| `--` | 返回值 | `ReactNode` | - | 否 |
### onChange
| 属性 | 描述 | 类型 | 默认值 | 必须 |
| ---- | ------ | --------------------------------------- | ------ | ---- |
| data | | [ConditionNodeData](#conditionnodedata) | - | 是 |
| `--` | 返回值 | `void` | - | 否 |
### info
| 属性 | 描述 | 类型 | 默认值 | 必须 |
| -------- | ---- | --------------------------------------- | ------ | ---- |
| node | | [ConditionNodeInfo](#conditionnodeinfo) | - | 是 |
| data | | [ConditionNodeData](#conditionnodedata) | - | 是 |
| disabled | | `boolean` | - | 是 |
### ConditionItemProps
| 属性 | 描述 | 类型 | 默认值 | 必须 |
| --------- | ---------------- | -------------------------- | ------ | ---- |
| actionRef | 初始化操作 | `React.MutableRefObject\|` | - | 否 |
| onAdd | 新增节点点击触发 | `onAdd` | - | 否 |
| onDelete | 删除节点点击触发 | `onDelete` | - | 否 |
### onDelete
| 属性 | 描述 | 类型 | 默认值 | 必须 |
| ---- | ------ | -------- | ------ | ---- |
| key | | `string` | - | 是 |
| `--` | 返回值 | `void` | - | 否 |
### onAdd
| 属性 | 描述 | 类型 | 默认值 | 必须 |
| ----------- | ------ | --------------------------------------- | ------ | ---- |
| key | | `string` | - | 是 |
| type | | [LevelType](#leveltype) | - | 是 |
| defaultData | | [ConditionNodeData](#conditionnodedata) | - | 否 |
| `--` | 返回值 | `void` | - | 否 |
### ConditionGroupInfo
| 属性 | 描述 | 类型 | 默认值 | 必须 |
| ----------- | ---- | ----------------------------------------- | ------ | ---- |
| key | | `string` | - | 是 |
| description | | `string` | - | 否 |
| type | | `NodeType.Group` | - | 是 |
| data | | [ConditionGroupData](#conditiongroupdata) | - | 是 |
| children | | `[]` | - | 是 |
### ConditionNodeInfo
| 属性 | 描述 | 类型 | 默认值 | 必须 |
| ----------- | ---- | --------------------------------------- | ------ | ---- |
| key | | `string` | - | 是 |
| description | | `string` | - | 否 |
| type | | `NodeType.Item` | - | 是 |
| data | | [ConditionNodeData](#conditionnodedata) | - | 是 |
### ConditionGroupData
| 属性 | 描述 | 类型 | 默认值 | 必须 |
| -------- | ---- | ----------------------------- | ------ | ---- |
| relation | | [RelationType](#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