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)