amis-ui 1.0.0-beta.0

package/src/components/condition-builder/Item.tsx

@@ -0,0 +1,427 @@
+import React from 'react';
+import {findDOMNode} from 'react-dom';
+import {
+  Fields,
+  ConditionRule,
+  ConditionGroupValue,
+  Funcs,
+  ExpressionFunc,
+  Func,
+  Field,
+  FieldSimple,
+  ExpressionField,
+  OperatorType,
+  ExpressionComplex
+} from './types';
+import {
+  ThemeProps,
+  themeable,
+  utils,
+  autobind,
+  localeable,
+  LocaleProps,
+  findTree,
+  noop
+} from 'amis-core';
+import {Icon} from '../icons';
+
+import Expression from './Expression';
+import {Config, OperationMap} from './config';
+import PopOverContainer from '../PopOverContainer';
+import GroupedSelection from '../GroupedSelection';
+import ResultBox from '../ResultBox';
+
+import {FormulaPickerProps} from '../formula/Picker';
+import type {PlainObject} from 'amis-core/dist/types';
+
+const option2value = (item: any) => item.value;
+
+export interface ConditionItemProps extends ThemeProps, LocaleProps {
+  config: Config;
+  fields: Fields;
+  funcs?: Funcs;
+  index?: number;
+  value: ConditionRule;
+  data?: any;
+  disabled?: boolean;
+  searchable?: boolean;
+  onChange: (value: ConditionRule, index?: number) => void;
+  fieldClassName?: string;
+  formula?: FormulaPickerProps;
+  popOverContainer?: any;
+  renderEtrValue?: any;
+}
+
+export class ConditionItem extends React.Component<ConditionItemProps> {
+  @autobind
+  handleLeftFieldSelect(field: any) {
+    const value = {...this.props.value};
+    const onChange = this.props.onChange;
+    value.left = field;
+    onChange(value, this.props.index);
+  }
+
+  @autobind
+  handleLeftInputTypeChange(type: 'func' | 'field') {
+    const value = {...this.props.value};
+    const onChange = this.props.onChange;
+
+    if (type === 'func') {
+      value.left = {type: 'func'};
+    } else {
+      value.left = '';
+    }
+
+    onChange(value, this.props.index);
+  }
+
+  @autobind
+  handleLeftChange(leftValue: any) {
+    const value = {
+      ...this.props.value,
+      left: leftValue,
+      op: undefined,
+      right: undefined
+    };
+    const onChange = this.props.onChange;
+
+    onChange(value, this.props.index);
+  }
+
+  @autobind
+  handleOperatorChange(op: OperatorType) {
+    const value = {...this.props.value, op: op, right: undefined};
+    this.props.onChange(value, this.props.index);
+  }
+
+  @autobind
+  handleRightChange(rightValue: any) {
+    const value = {...this.props.value, right: rightValue};
+    const onChange = this.props.onChange;
+
+    onChange(value, this.props.index);
+  }
+
+  handleRightSubChange(
+    isCustom: boolean,
+    index: number | string,
+    rightValue: any
+  ) {
+    let origin;
+    if (isCustom) {
+      origin = Object.assign({}, this.props.value?.right) as PlainObject;
+      origin[index] = rightValue;
+    } else {
+      origin = Array.isArray(this.props.value?.right)
+        ? this.props.value.right.concat()
+        : [];
+      origin[index as number] = rightValue;
+    }
+
+    const value = {...this.props.value, right: origin};
+    const onChange = this.props.onChange;
+
+    onChange(value, this.props.index);
+  }
+
+  renderLeft() {
+    const {
+      value,
+      fields,
+      funcs,
+      config,
+      disabled,
+      fieldClassName,
+      searchable,
+      popOverContainer
+    } = this.props;
+    return (
+      <Expression
+        config={config}
+        funcs={funcs}
+        value={value.left}
+        fieldClassName={fieldClassName}
+        onChange={this.handleLeftChange}
+        fields={fields}
+        disabled={disabled}
+        searchable={searchable}
+        popOverContainer={popOverContainer}
+        allowedTypes={
+          ['field', 'func'].filter(
+            type => type === 'field' || type === 'func'
+          ) as any
+        }
+      />
+    );
+  }
+
+  renderOperator() {
+    const {
+      funcs,
+      config,
+      fields,
+      value,
+      classnames: cx,
+      disabled,
+      popOverContainer
+    } = this.props;
+    const left = value?.left;
+    let operators: any[] = [];
+
+    if ((left as ExpressionFunc)?.type === 'func') {
+      const func: Func = findTree(
+        funcs!,
+        (i: Func) => i.type === (left as ExpressionFunc).func
+      ) as Func;
+
+      if (func) {
+        operators = config.types[func.returnType]?.operators;
+      }
+    } else if ((left as ExpressionField)?.type === 'field') {
+      const field: FieldSimple = findTree(
+        fields,
+        (i: FieldSimple) => i.name === (left as ExpressionField).field
+      ) as FieldSimple;
+
+      if (field) {
+        operators = field.operators || config.types[field.type]?.operators;
+      }
+    }
+
+    if (Array.isArray(operators) && operators.length) {
+      const __ = this.props.translate;
+      const options = operators.map(operator => {
+        if (typeof operator === 'string') {
+          return {
+            label: __(OperationMap[operator as keyof typeof OperationMap]),
+            value: operator
+          };
+        } else {
+          return operator;
+        }
+      });
+      return (
+        <PopOverContainer
+          popOverContainer={popOverContainer || (() => findDOMNode(this))}
+          popOverRender={({onClose}) => (
+            <GroupedSelection
+              onClick={onClose}
+              option2value={option2value}
+              onChange={this.handleOperatorChange}
+              options={options}
+              value={value.op}
+              multiple={false}
+            />
+          )}
+        >
+          {({onClick, isOpened, ref}) => (
+            <div className={cx('CBGroup-operator')}>
+              <ResultBox
+                className={cx(
+                  'CBGroup-operatorInput',
+                  isOpened ? 'is-active' : ''
+                )}
+                ref={ref}
+                allowInput={false}
+                result={
+                  __(OperationMap[value?.op as keyof typeof OperationMap]) ||
+                  options.find(option => option.value === value.op)?.label
+                }
+                onResultChange={noop}
+                onResultClick={onClick}
+                disabled={disabled}
+                placeholder={__('Condition.cond_placeholder')}
+              >
+                <span className={cx('CBGroup-operatorCaret')}>
+                  <Icon icon="caret" className="icon" />
+                </span>
+              </ResultBox>
+            </div>
+          )}
+        </PopOverContainer>
+      );
+    }
+
+    return null;
+  }
+
+  renderRight() {
+    const {value, funcs, fields} = this.props;
+
+    if (!value?.op) {
+      return null;
+    }
+
+    const left = value?.left;
+    let leftType = '';
+
+    if ((left as ExpressionFunc)?.type === 'func') {
+      const func: Func = findTree(
+        funcs!,
+        (i: Func) => i.type === (left as ExpressionFunc).func
+      ) as Func;
+
+      if (func) {
+        leftType = func.returnType;
+      }
+    } else if ((left as ExpressionField)?.type === 'field') {
+      const field: FieldSimple = findTree(
+        fields,
+        (i: FieldSimple) => i.name === (left as ExpressionField).field
+      ) as FieldSimple;
+
+      if (field) {
+        leftType = field.type;
+      }
+    }
+
+    if (leftType) {
+      return this.renderRightWidgets(leftType, value.op!);
+    }
+
+    return null;
+  }
+
+  renderRightWidgets(type: string, op: OperatorType) {
+    const {
+      funcs,
+      value,
+      data,
+      fields,
+      config,
+      classnames: cx,
+      disabled,
+      formula,
+      popOverContainer,
+      renderEtrValue
+    } = this.props;
+    let field = {
+      ...config.types[type],
+      type
+    } as FieldSimple;
+
+    let option;
+
+    if ((value?.left as ExpressionField)?.type === 'field') {
+      const leftField: FieldSimple = findTree(
+        fields,
+        (i: FieldSimple) => i.name === (value?.left as ExpressionField).field
+      ) as FieldSimple;
+
+      if (leftField) {
+        field = {
+          ...field,
+          ...leftField
+        };
+        option = field.operators?.find(
+          option => typeof option !== 'string' && option?.value === op
+        );
+      }
+    }
+
+    if (op === 'is_empty' || op === 'is_not_empty') {
+      return null;
+    } else if (op === 'between' || op === 'not_between') {
+      return (
+        <>
+          <Expression
+            config={config}
+            funcs={funcs}
+            valueField={field}
+            value={(value.right as Array<ExpressionComplex>)?.[0]}
+            data={data}
+            onChange={this.handleRightSubChange.bind(this, false, 0)}
+            fields={fields}
+            allowedTypes={
+              field?.valueTypes ||
+              config.valueTypes || ['value', 'field', 'func', 'formula']
+            }
+            disabled={disabled}
+            formula={formula}
+            popOverContainer={popOverContainer}
+            renderEtrValue={renderEtrValue}
+          />
+
+          <span className={cx('CBSeprator')}>~</span>
+
+          <Expression
+            config={config}
+            funcs={funcs}
+            valueField={field}
+            value={(value.right as Array<ExpressionComplex>)?.[1]}
+            data={data}
+            onChange={this.handleRightSubChange.bind(this, false, 1)}
+            fields={fields}
+            allowedTypes={
+              field?.valueTypes ||
+              config.valueTypes || ['value', 'field', 'func', 'formula']
+            }
+            disabled={disabled}
+            formula={formula}
+            popOverContainer={popOverContainer}
+            renderEtrValue={renderEtrValue}
+          />
+        </>
+      );
+    } else if (option && typeof option !== 'string' && option.values) {
+      return option.values.map((schema, i) => {
+        return (
+          <span key={i}>
+            <Expression
+              config={config}
+              op={op}
+              funcs={funcs}
+              valueField={schema}
+              value={value.right}
+              data={data}
+              onChange={this.handleRightSubChange.bind(this, true, schema.name)}
+              fields={fields}
+              allowedTypes={
+                field?.valueTypes ||
+                config.valueTypes || ['value', 'field', 'func', 'formula']
+              }
+              disabled={disabled}
+              formula={formula}
+              popOverContainer={popOverContainer}
+              renderEtrValue={renderEtrValue}
+            />
+          </span>
+        );
+      });
+    }
+    return (
+      <Expression
+        config={config}
+        op={op}
+        funcs={funcs}
+        valueField={field}
+        value={value.right}
+        data={data}
+        onChange={this.handleRightChange}
+        fields={fields}
+        allowedTypes={
+          field?.valueTypes ||
+          config.valueTypes || ['value', 'field', 'func', 'formula']
+        }
+        disabled={disabled}
+        formula={formula}
+        popOverContainer={popOverContainer}
+        renderEtrValue={renderEtrValue}
+      />
+    );
+  }
+
+  render() {
+    const {classnames: cx} = this.props;
+
+    return (
+      <div className={cx('CBItem')}>
+        {this.renderLeft()}
+        {this.renderOperator()}
+        {this.renderRight()}
+      </div>
+    );
+  }
+}
+
+export default themeable(localeable(ConditionItem));

package/src/components/condition-builder/Value.tsx

@@ -0,0 +1,162 @@
+import React from 'react';
+import {FieldSimple, OperatorType} from './types';
+import {ThemeProps, themeable, localeable, LocaleProps} from 'amis-core';
+import InputBox from '../InputBox';
+import NumberInput from '../NumberInput';
+import DatePicker from '../DatePicker';
+import {SelectWithRemoteOptions as Select} from '../Select';
+import Switch from '../Switch';
+import {FormulaPicker, FormulaPickerProps} from '../formula/Picker';
+
+export interface ValueProps extends ThemeProps, LocaleProps {
+  value: any;
+  data?: any;
+  onChange: (value: any) => void;
+  field: FieldSimple;
+  op?: OperatorType;
+  disabled?: boolean;
+  formula?: FormulaPickerProps;
+  popOverContainer?: any;
+  renderEtrValue?: any;
+}
+
+export class Value extends React.Component<ValueProps> {
+  render() {
+    let {
+      classnames: cx,
+      field,
+      value,
+      onChange,
+      op,
+      translate: __,
+      data,
+      disabled,
+      formula,
+      popOverContainer,
+      renderEtrValue
+    } = this.props;
+    let input: JSX.Element | undefined = undefined;
+    if (formula) {
+      // 如果配置了 formula 字段，则所有的输入变为 formula 形式
+      formula = Object.assign(formula, {
+        translate: __,
+        classnames: cx,
+        data,
+        value: value ?? field.defaultValue,
+        onChange,
+        disabled
+      });
+      input = <FormulaPicker {...formula} />;
+    } else if (field.type === 'text') {
+      input = (
+        <InputBox
+          value={value ?? field.defaultValue}
+          onChange={onChange}
+          placeholder={__(field.placeholder)}
+          disabled={disabled}
+        />
+      );
+    } else if (field.type === 'number') {
+      input = (
+        <NumberInput
+          placeholder={__(field.placeholder) || __('NumberInput.placeholder')}
+          step={field.step}
+          min={field.minimum}
+          max={field.maximum}
+          precision={field.precision}
+          value={value ?? field.defaultValue}
+          onChange={onChange}
+          disabled={disabled}
+        />
+      );
+    } else if (field.type === 'date') {
+      input = (
+        <DatePicker
+          placeholder={__(field.placeholder) || __('Date.placeholder')}
+          format={field.format || 'YYYY-MM-DD'}
+          inputFormat={field.inputFormat || 'YYYY-MM-DD'}
+          value={value ?? field.defaultValue}
+          onChange={onChange}
+          timeFormat=""
+          disabled={disabled}
+          popOverContainer={popOverContainer}
+        />
+      );
+    } else if (field.type === 'time') {
+      input = (
+        <DatePicker
+          viewMode="time"
+          placeholder={__(field.placeholder) || __('Time.placeholder')}
+          format={field.format || 'HH:mm'}
+          inputFormat={field.inputFormat || 'HH:mm'}
+          value={value ?? field.defaultValue}
+          onChange={onChange}
+          dateFormat=""
+          timeFormat={field.format || 'HH:mm'}
+          disabled={disabled}
+          popOverContainer={popOverContainer}
+        />
+      );
+    } else if (field.type === 'datetime') {
+      input = (
+        <DatePicker
+          placeholder={__(field.placeholder) || 'Time.placeholder'}
+          format={field.format || ''}
+          inputFormat={field.inputFormat || 'YYYY-MM-DD HH:mm'}
+          value={value ?? field.defaultValue}
+          onChange={onChange}
+          timeFormat={field.timeFormat || 'HH:mm'}
+          disabled={disabled}
+          popOverContainer={popOverContainer}
+        />
+      );
+    } else if (field.type === 'select') {
+      const autoComplete = field.autoComplete;
+
+      input = (
+        <Select
+          simpleValue
+          options={field.options!}
+          source={field.source}
+          autoComplete={autoComplete}
+          searchable={field.searchable}
+          value={value ?? field.defaultValue ?? ''}
+          data={data}
+          onChange={onChange}
+          multiple={op === 'select_any_in' || op === 'select_not_any_in'}
+          disabled={disabled}
+          popOverContainer={popOverContainer}
+        />
+      );
+    } else if (field.type === 'boolean') {
+      input = (
+        <Switch
+          value={value ?? field.defaultValue}
+          onChange={onChange}
+          disabled={disabled}
+        />
+      );
+    } else if (field.type === 'custom') {
+      input = renderEtrValue
+        ? renderEtrValue(field.value, {
+            data,
+            onChange,
+            value: value ?? field.defaultValue
+          })
+        : null;
+    } else {
+      const res = value ?? (field as any).defaultValue;
+      input = renderEtrValue
+        ? renderEtrValue(field, {
+            data,
+            onChange,
+            value: res ? res[(field as any).name] : res
+          })
+        : null;
+    }
+
+    return <div className={cx('CBValue')}>{input}</div>;
+  }
+}
+
+export default themeable(localeable(Value));

package/src/components/condition-builder/config.ts

@@ -0,0 +1,133 @@
+import {FieldTypes, OperatorType, Funcs, Fields, Type} from './types';
+
+export interface BaseFieldConfig {
+  operations: Array<OperatorType>;
+}
+
+export interface Config {
+  valueTypes?: Array<'value' | 'field' | 'func' | 'formula'>;
+  fields?: Fields;
+  funcs?: Funcs;
+  maxLevel?: number; // 还没实现
+
+  // todo 起码需要支持 formula 组件可以自定义。
+
+  // todo 很多还不能配置。
+  types: {
+    [propName: string]: Type;
+  };
+}
+
+export const OperationMap = {
+  equal: 'Condition.equal',
+  not_equal: 'Condition.not_equal',
+  less: 'Condition.less',
+  less_or_equal: 'Condition.less_or_equal',
+  greater: 'Condition.greater',
+  greater_or_equal: 'Condition.greater_or_equal',
+  between: 'Condition.between',
+  not_between: 'Condition.not_between',
+  is_empty: 'Condition.is_empty',
+  is_not_empty: 'Condition.is_not_empty',
+  like: 'Condition.like',
+  not_like: 'Condition.not_like',
+  starts_with: 'Condition.starts_with',
+  ends_with: 'Condition.ends_with',
+  select_equals: 'Condition.select_equals',
+  select_not_equals: 'Condition.select_not_equals',
+  select_any_in: 'Condition.select_any_in',
+  select_not_any_in: 'Condition.select_not_any_in'
+};
+
+const defaultConfig: Config = {
+  valueTypes: ['value'],
+  types: {
+    text: {
+      placeholder: 'Condition.placeholder',
+      defaultOp: 'equal',
+      operators: [
+        'equal',
+        'not_equal',
+        'is_empty',
+        'is_not_empty',
+        'like',
+        'not_like',
+        'starts_with',
+        'ends_with'
+      ]
+    },
+    number: {
+      operators: [
+        'equal',
+        'not_equal',
+        'less',
+        'less_or_equal',
+        'greater',
+        'greater_or_equal',
+        'between',
+        'not_between',
+        'is_empty',
+        'is_not_empty'
+      ]
+    },
+    date: {
+      operators: [
+        'equal',
+        'not_equal',
+        'less',
+        'less_or_equal',
+        'greater',
+        'greater_or_equal',
+        'between',
+        'not_between',
+        'is_empty',
+        'is_not_empty'
+      ]
+    },
+
+    time: {
+      operators: [
+        'equal',
+        'not_equal',
+        'less',
+        'less_or_equal',
+        'greater',
+        'greater_or_equal',
+        'between',
+        'not_between',
+        'is_empty',
+        'is_not_empty'
+      ]
+    },
+
+    datetime: {
+      operators: [
+        'equal',
+        'not_equal',
+        'less',
+        'less_or_equal',
+        'greater',
+        'greater_or_equal',
+        'between',
+        'not_between',
+        'is_empty',
+        'is_not_empty'
+      ]
+    },
+
+    select: {
+      operators: [
+        'select_equals',
+        'select_not_equals',
+        'select_any_in',
+        'select_not_any_in'
+      ],
+      valueTypes: ['value']
+    },
+
+    boolean: {
+      operators: ['equal', 'not_equal']
+    }
+  }
+};
+export default defaultConfig;