Feat condition builder (#3392)

* 处理某些特殊情况下会传入空字符串导致无法识别值的问题

* 修复空字符串不能识别导致出错的问题

* select 支持不换行模式

* 解决长列表出现双滚动条的问题

* 大赛广告

* 大赛广告

* 大赛广告

* 大赛广告

* 大赛广告

* 大赛广告

* 大赛广告

* 大赛广告

* 大赛广告

* 大赛广告

* List 不再下发"-" 作为空值

* condition-builder 支持简单模式

* condition-builder 支持简单模式

Co-authored-by: panzheng <panzheng@baidu.com>

examples/components/Page/Form.jsx

@@ -12,7 +12,6 @@ export default {
           type: 'input-text',
           name: 'name'
         },
-
         {
           label: 'Email',
           type: 'input-email',

scss/components/_condition-builder.scss

@@ -112,6 +112,17 @@
         display: none;
       }
     }
+
+    &.simple {
+      margin-left: 0;
+      &:before {
+        display: none;
+      }
+
+      &:after {
+        display: none;
+      }
+    }
   }
 }
 

src/components/condition-builder/Group.tsx

@@ -9,6 +9,7 @@ import {Icon} from '../icons';
 import {localeable, LocaleProps} from '../../locale';
 
 export interface ConditionGroupProps extends ThemeProps, LocaleProps {
+  builderMode?: 'simple' | 'full';
   config: Config;
   value?: ConditionGroupValue;
   fields: Fields;
@@ -114,6 +115,7 @@ export class ConditionGroup extends React.Component<ConditionGroupProps> {
 
   render() {
     const {
+      builderMode,
       classnames: cx,
       fieldClassName,
       value,
@@ -129,55 +131,64 @@ export class ConditionGroup extends React.Component<ConditionGroupProps> {
       searchable,
       translate: __
     } = this.props;
-
     return (
       <div className={cx('CBGroup')} data-group-id={value?.id}>
         <div className={cx('CBGroup-toolbar')}>
-          <div className={cx('CBGroup-toolbarCondition')}>
-            {showNot ? (
-              <Button
-                onClick={this.handleNotClick}
-                className="m-r-xs"
-                size="xs"
-                active={value?.not}
-                disabled={disabled}
-              >
-                {__('Condition.not')}
-              </Button>
-            ) : null}
-            <div className={cx('ButtonGroup')}>
-              <Button
-                size="xs"
-                onClick={this.handleConjunctionClick}
-                active={value?.conjunction !== 'or'}
-                disabled={disabled}
-              >
-                {__('Condition.and')}
-              </Button>
-              <Button
-                size="xs"
-                onClick={this.handleConjunctionClick}
-                active={value?.conjunction === 'or'}
-                disabled={disabled}
-              >
-                {__('Condition.or')}
-              </Button>
+          {builderMode === 'simple' ? null : (
+            <div className={cx('CBGroup-toolbarCondition')}>
+              {showNot ? (
+                <Button
+                  onClick={this.handleNotClick}
+                  className="m-r-xs"
+                  size="xs"
+                  active={value?.not}
+                  disabled={disabled}
+                >
+                  {__('Condition.not')}
+                </Button>
+              ) : null}
+              <div className={cx('ButtonGroup')}>
+                <Button
+                  size="xs"
+                  onClick={this.handleConjunctionClick}
+                  active={value?.conjunction !== 'or'}
+                  disabled={disabled}
+                >
+                  {__('Condition.and')}
+                </Button>
+                <Button
+                  size="xs"
+                  onClick={this.handleConjunctionClick}
+                  active={value?.conjunction === 'or'}
+                  disabled={disabled}
+                >
+                  {__('Condition.or')}
+                </Button>
+              </div>
             </div>
-          </div>
-          <div className={cx('CBGroup-toolbarConditionAdd')}>
+          )}
+          <div
+            className={cx(
+              `CBGroup-toolbarConditionAdd${
+                builderMode === 'simple' ? '-simple' : ''
+              }`
+            )}
+          >
             <div className={cx('ButtonGroup')}>
               <Button onClick={this.handleAdd} size="xs" disabled={disabled}>
                 <Icon icon="plus" className="icon" />
                 {__('Condition.add_cond')}
               </Button>
-              <Button
-                onClick={this.handleAddGroup}
-                size="xs"
-                disabled={disabled}
-              >
-                <Icon icon="plus-cicle" className="icon" />
-                {__('Condition.add_cond_group')}
-              </Button>
+              {builderMode === 'simple' ? null : (
+                <Button
+                  onClick={this.handleAddGroup}
+                  size="xs"
+                  disabled={disabled}
+                >
+                  <Icon icon="plus-cicle" className="icon" />
+                  {__('Condition.add_cond_group')}
+                </Button>
+              )}
             </div>
           </div>
           {removeable ? (
@@ -186,7 +197,6 @@ export class ConditionGroup extends React.Component<ConditionGroupProps> {
             </a>
           ) : null}
         </div>
-
         <div className={cx('CBGroup-body')}>
           {Array.isArray(value?.children) && value!.children.length ? (
             value!.children.map((item, index) => (
@@ -205,10 +215,17 @@ export class ConditionGroup extends React.Component<ConditionGroupProps> {
                 data={data}
                 disabled={disabled}
                 searchable={searchable}
+                builderMode={builderMode}
               />
             ))
           ) : (
-            <div className={cx('CBGroup-placeholder')}>
+            <div
+              className={cx(
+                `CBGroup-placeholder ${
+                  builderMode === 'simple' ? 'simple' : ''
+                }`
+              )}
+            >
               {__('Condition.blank')}
             </div>
           )}

src/components/condition-builder/GroupOrItem.tsx

@@ -8,6 +8,7 @@ import ConditionGroup from './Group';
 import ConditionItem from './Item';
 
 export interface CBGroupOrItemProps extends ThemeProps {
+  builderMode?: 'simple' | 'full';
   config: Config;
   value?: ConditionGroupValue;
   fields: Fields;
@@ -37,6 +38,7 @@ export class CBGroupOrItem extends React.Component<CBGroupOrItemProps> {
 
   render() {
     const {
+      builderMode,
       classnames: cx,
       fieldClassName,
       value,
@@ -51,7 +53,12 @@ export class CBGroupOrItem extends React.Component<CBGroupOrItemProps> {
     } = this.props;
 
     return (
-      <div className={cx('CBGroupOrItem')} data-id={value?.id}>
+      <div
+        className={cx(
+          `CBGroupOrItem${builderMode === 'simple' ? '-simple' : ''}`
+        )}
+        data-id={value?.id}
+      >
         <div className={cx('CBGroupOrItem-body')}>
           {draggable ? (
             <a

src/components/condition-builder/index.tsx

@@ -17,6 +17,7 @@ import {findDOMNode} from 'react-dom';
 import animtion from '../../utils/Animation';
 
 export interface ConditionBuilderProps extends ThemeProps, LocaleProps {
+  builderMode?: 'simple' | 'full'; // 简单模式｜完整模式
   fields: Fields;
   funcs?: Funcs;
   showNot?: boolean;
@@ -203,7 +204,8 @@ export class QueryBuilder extends React.Component<ConditionBuilderProps> {
       showNot,
       data,
       disabled,
-      searchable
+      searchable,
+      builderMode
     } = this.props;
 
     const normalizedValue = Array.isArray(value?.children)
@@ -224,6 +226,7 @@ export class QueryBuilder extends React.Component<ConditionBuilderProps> {
 
     return (
       <ConditionGroup
+        builderMode={builderMode}
         config={this.config}
         funcs={funcs || this.config.funcs}
         fields={fields || this.config.fields}

src/renderers/Pagination.tsx

@@ -280,9 +280,9 @@ export default class Pagination extends React.Component<
   }
 
   render() {
-    const {mode} = this.props;
+    const {builderMode} = this.props;
 
-    return mode === 'simple' ? this.renderSimple() : this.renderNormal();
+    return builderMode === 'simple' ? this.renderSimple() : this.renderNormal();
   }
 }