diff --git a/examples/react-guide-app/src/App.tsx b/examples/react-guide-app/src/App.tsx
index f06babd..7b9021c 100755
--- a/examples/react-guide-app/src/App.tsx
+++ b/examples/react-guide-app/src/App.tsx
@@ -15,6 +15,12 @@ const GlobalStyle = createGlobalStyle`
.GlobalStyle.styled {}
`
+const selfOperators = [
+ { label: '大于', value: '>' },
+ { label: '小于', value: '<' },
+ { label: '等于', value: '==' },
+]
+
export default function App () {
const [content, setContent] = useState(MOCK_CONTENT)
return <>
@@ -22,6 +28,7 @@ export default function App () {
setContent(nextContent)}
+ // operators={selfOperators}
// maxDepth={2}
/>
diff --git a/src/RuleEditor.tsx b/src/RuleEditor.tsx
index 78bc441..24ded95 100644
--- a/src/RuleEditor.tsx
+++ b/src/RuleEditor.tsx
@@ -2,13 +2,14 @@ import React, { useContext, useEffect, useState } from 'react'
import { Box, Button, Icon } from '@alifd/next'
import { EXPRESSION_TYPE_DATASOURCE, OPERATOR_TYPE_MAP, uuid } from './shared'
import { RuleEditorContext, tree2map, ModelAndField, RuleGroupNodeRelationColumn, WidthAutoSelect, RuleGroupNodeBodyColumnWrapper, fixContent, RuleGroupNodeWrapper, RuleGroupNodeRelationColumnWrapper, RuleConditionNodeWrapper, OperatorSelect, LiteralSetter } from './RuleEditorParts'
-import { IRuleConditionNode, IRuleGroupNode, IRelation, IRuleModel, IRuleNodeType, IExpressionType } from './types'
+import { IRuleConditionNode, IRuleGroupNode, IRelation, IRuleModel, IRuleNodeType, IExpressionType, INextRecord } from './types'
// Program Expression left right operator
// Rule / condition
function RuleConditionNode ({ node, depth = 0 } :{ node: IRuleConditionNode; depth?: number; }) {
- const { models, mapped, onChange, maxDepth } = useContext(RuleEditorContext)
+ const { models, mapped, onChange, maxDepth, operators } = useContext(RuleEditorContext)
const { left, right, operator } = node
+ const OperatorMap = operators || OPERATOR_TYPE_MAP['*']
return
@@ -17,7 +18,7 @@ function RuleConditionNode ({ node, depth = 0 } :{ node: IRuleConditionNode; dep
{/* 2. 操作符 */}
{
node.operator = value
onChange()
@@ -153,11 +154,12 @@ function RuleGroupNode ({ node, depth = 0, hasBackground, hasBorder }: { node: I
interface IRuleEditorProps {
models: IRuleModel[];
content: IRuleGroupNode;
+ operators?: INextRecord[];
maxDepth?: number;
onChange?: (content: IRuleGroupNode) => void;
}
-export default ({ models: remoteModels, content: remoteContent, maxDepth, onChange } : IRuleEditorProps) => {
+export default ({ models: remoteModels, content: remoteContent, operators: remoteOperators, maxDepth, onChange } : IRuleEditorProps) => {
const [content, setContent] = useState(remoteContent)
useEffect(() => {
const { content: nextContent, changed } = fixContent(content)
@@ -177,6 +179,7 @@ export default ({ models: remoteModels, content: remoteContent, maxDepth, onChan
setContent({ ...content })
if (onChange) onChange({ ...content })
},
+ operators: remoteOperators,
maxDepth
}}
>
diff --git a/src/RuleEditorParts.tsx b/src/RuleEditorParts.tsx
index 0633e64..d9b6892 100644
--- a/src/RuleEditorParts.tsx
+++ b/src/RuleEditorParts.tsx
@@ -1,6 +1,6 @@
import styled, { css } from 'styled-components'
import { Box, Button, DatePicker, Input, NumberPicker, Range, Select, Switch, TimePicker } from '@alifd/next'
-import { IRuleGroupNode, IRuleConditionNode, IRuleField, IMemberExpression, IRuleModel, IRelation, IRuleNodeType, IExpressionType } from './types/index'
+import { IRuleGroupNode, IRuleConditionNode, IRuleField, IMemberExpression, IRuleModel, IRelation, IRuleNodeType, IExpressionType, INextRecord } from './types/index'
import React, { createContext, ReactNode, useContext, useEffect, useState } from 'react'
import { uuid } from './shared'
import moment from 'moment'
@@ -55,6 +55,7 @@ interface IRuleEditorContext {
[id: string]: IRuleConditionNode | IRuleGroupNode
};
onChange: (nextContent?: any) => void;
+ operators?: INextRecord[];
maxDepth?: number;
}
export const RuleEditorContext = createContext(undefined)