From 7c50deb018e994b443a03695079a5b6690753916 Mon Sep 17 00:00:00 2001 From: liaoxuezhi <2betop.cn@gmail.com> Date: Thu, 13 Aug 2020 00:16:32 +0800 Subject: [PATCH] =?UTF-8?q?condition-builder=20=E9=83=A8=E5=88=86=E4=BB=A3?= =?UTF-8?q?=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../condition-builder/ConditionBuilder.tsx | 23 +++++ src/components/condition-builder/config.ts | 36 ++++++++ src/components/condition-builder/types.ts | 85 +++++++++++++++++++ 3 files changed, 144 insertions(+) create mode 100644 src/components/condition-builder/ConditionBuilder.tsx create mode 100644 src/components/condition-builder/config.ts create mode 100644 src/components/condition-builder/types.ts diff --git a/src/components/condition-builder/ConditionBuilder.tsx b/src/components/condition-builder/ConditionBuilder.tsx new file mode 100644 index 000000000..96f977f0b --- /dev/null +++ b/src/components/condition-builder/ConditionBuilder.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import {ThemeProps, themeable} from '../../theme'; +import {LocaleProps, localeable} from '../../locale'; +import {uncontrollable} from 'uncontrollable'; +import {FieldTypes, FieldItem} from './types'; + +export interface QueryBuilderProps extends ThemeProps, LocaleProps { + fields: Array; +} + +export class QueryBuilder extends React.Component { + render() { + return

this is querybuilder component

; + } +} + +export default themeable( + localeable( + uncontrollable(QueryBuilder, { + value: 'onChange' + }) + ) +); diff --git a/src/components/condition-builder/config.ts b/src/components/condition-builder/config.ts new file mode 100644 index 000000000..ad707e809 --- /dev/null +++ b/src/components/condition-builder/config.ts @@ -0,0 +1,36 @@ +import {FieldTypes, OperatorType, Funcs} from './types'; + +export interface BaseFieldConfig { + operations: Array; +} + +export interface Config { + funcs?: Funcs; + maxLevel?: number; +} + +const defaultConfig: Config = { + // fields: [], + + // 函数配置示例 + funcs: [ + // { + // label: '文本', + // children: [ + // { + // type: 'LOWERCASE', + // label: '转小写', + // returnType: 'text', + // args: [ + // { + // type: 'text', + // label: '文本', + // valueTypes: ['raw', 'field'] + // } + // ] + // } + // ] + // } + ] +}; +export default defaultConfig; diff --git a/src/components/condition-builder/types.ts b/src/components/condition-builder/types.ts new file mode 100644 index 000000000..da3f74bb6 --- /dev/null +++ b/src/components/condition-builder/types.ts @@ -0,0 +1,85 @@ +type TypedMap = { + [key: string]: T; +}; + +export type FieldTypes = 'text' | 'number' | 'boolean' | 'date' | 'datetime'; + +export type OperatorType = + | 'equals' + | 'not_equals' + | 'less_than' + | 'less_than_or_equals'; + +export type FieldItem = { + type: 'text'; + operators: Array; +}; + +export type ConditionRightValueLiteral = string | number | object | undefined; +export type ConditionRightValue = + | ConditionRightValueLiteral + | { + type: 'raw'; + value: ConditionRightValueLiteral; + } + | { + type: 'func'; + func: string; + args: Array; + } + | { + type: 'field'; + field: string; + } + | { + type: 'expression'; + field: string; + }; + +export interface ConditionRule { + left: string; + op: OperatorType; + right: ConditionRightValue | Array; +} + +export interface ConditionGroup { + conjunction: 'and' | 'or'; + not?: boolean; + children?: Array; +} + +export interface ConditionValue extends ConditionGroup {} + +interface BaseField { + type: FieldTypes; + label: string; + valueTypes?: Array<'raw' | 'field' | 'func' | 'expression'>; + + // valueTypes 里面配置 func 才有效。 + funcs?: Array; + + defaultValue?: any; +} + +interface TextField extends BaseField { + type: 'text'; +} + +type Field = TextField; + +interface FuncGroup { + label: string; + children: Array; +} + +export interface Func { + type: string; + returnType: FieldTypes; + args: Array; + label: string; +} +export interface FuncArg extends BaseField { + isOptional?: boolean; +} +export type Funcs = Array; +export type Fields = Array;