完善拖拽和优化样式

scss/components/_condition-builder.scss

@@ -5,6 +5,36 @@
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+    padding-bottom: 10px;
+
+    .#{$ns}Button {
+      transition: padding 0.2s;
+
+      svg {
+        width: 10px;
+        height: 10px;
+        top: 0;
+        margin-right: 5px;
+      }
+    }
+
+    &:not(:hover) .#{$ns}CBGroup-toolbarLeft .#{$ns}Button:not(.is-active) {
+      width: 0;
+      padding: 0;
+      overflow: hidden;
+      opacity: 0;
+      margin: 0;
+      border: 0;
+    }
+
+    .#{$ns}CBGroup-toolbarRight {
+      transition: opacity 0.2s;
+      display: flex;
+      align-items: center;
+    }
+    &:not(:hover) .#{$ns}CBGroup-toolbarRight {
+      opacity: 0;
+    }
   }
 
   &-field,
@@ -42,15 +72,19 @@
   @include icon-color();
   cursor: pointer;
   margin-left: auto;
+  transition: opacity 0.2s;
 }
 
 .#{$ns}CBGroupOrItem {
   position: relative;
   margin-left: px2rem(30px);
 
+  & + & {
+    margin-top: px2rem(10px);
+  }
+
   &-body {
     display: flex;
-    margin-top: px2rem(10px);
     padding: 5px 10px;
     border-radius: 5px;
     flex-direction: row;
@@ -61,6 +95,10 @@
     transition: all 0.3s ease-out;
   }
 
+  &-body:not(:hover) .#{$ns}CBDelete {
+    opacity: 0;
+  }
+
   &.is-dragging {
     display: none;
   }

src/components/condition-builder/Group.tsx

@@ -6,6 +6,8 @@ import GroupOrItem from './GroupOrItem';
 import {autobind, guid} from '../../utils/helper';
 import {Config} from './config';
 import {Icon} from '../icons';
+import PopOverContainer from '../PopOverContainer';
+import ListRadios from '../ListRadios';
 
 export interface ConditionGroupProps extends ThemeProps {
   config: Config;
@@ -122,33 +124,49 @@ export class ConditionGroup extends React.Component<ConditionGroupProps> {
       <div className={cx('CBGroup')} data-group-id={value?.id}>
         <div className={cx('CBGroup-toolbar')}>
           <div className={cx('CBGroup-toolbarLeft')}>
-            <Button onClick={this.handleNotClick} size="sm" active={value?.not}>
+            <Button
+              onClick={this.handleNotClick}
+              className="m-r-xs"
+              size="xs"
+              active={value?.not}
+            >
               非
             </Button>
-            <div className={cx('ButtonGroup m-l-xs')}>
+            <div className={cx('ButtonGroup')}>
               <Button
-                size="sm"
+                size="xs"
                 onClick={this.handleConjunctionClick}
                 active={value?.conjunction !== 'or'}
+                level={value?.conjunction !== 'or' ? 'info' : 'default'}
               >
                 并且
               </Button>
               <Button
-                size="sm"
+                size="xs"
                 onClick={this.handleConjunctionClick}
                 active={value?.conjunction === 'or'}
+                level={value?.conjunction === 'or' ? 'info' : 'default'}
               >
                 或者
               </Button>
             </div>
           </div>
           <div className={cx('CBGroup-toolbarRight')}>
-            <Button onClick={this.handleAdd} size="sm" className="m-r-xs">
-              添加条件
-            </Button>
-            <Button onClick={this.handleAddGroup} size="sm" className="m-r-xs">
-              添加条件组
-            </Button>
+            <div className={cx('ButtonGroup')}>
+              <Button onClick={this.handleAdd} size="xs">
+                <Icon icon="plus" className="icon" />
+                添加条件
+              </Button>
+              <Button
+                onClick={this.handleAddGroup}
+                size="xs"
+                className="m-r-xs"
+              >
+                <Icon icon="plus" className="icon" />
+                添加条件组
+              </Button>
+            </div>
+
             {removeable ? (
               <a className={cx('CBDelete')} onClick={onRemove}>
                 <Icon icon="close" className="icon" />

src/components/condition-builder/index.tsx

@@ -5,7 +5,7 @@ import {uncontrollable} from 'uncontrollable';
 import {Fields, ConditionGroupValue, Funcs} from './types';
 import ConditionGroup from './Group';
 import defaultConfig from './config';
-import {autobind, findTreeIndex} from '../../utils/helper';
+import {autobind, findTreeIndex, spliceTree, getTree} from '../../utils/helper';
 import {findDOMNode} from 'react-dom';
 import animtion from '../../utils/Animation';
 
@@ -39,11 +39,9 @@ export class QueryBuilder extends React.Component<QueryBuilderProps> {
 
     e.dataTransfer.setDragImage(item.firstChild as HTMLElement, 0, 0);
 
-    const dom = findDOMNode(this) as HTMLElement;
-
     target.addEventListener('dragend', this.handleDragEnd);
-    dom.addEventListener('dragover', this.handleDragOver);
-    dom.addEventListener('drop', this.handleDragDrop);
+    document.body.addEventListener('dragover', this.handleDragOver);
+    document.body.addEventListener('drop', this.handleDragDrop);
     this.lastX = e.clientX;
     this.lastY = e.clientY;
 
@@ -128,32 +126,41 @@ export class QueryBuilder extends React.Component<QueryBuilderProps> {
 
   @autobind
   handleDragDrop() {
+    const onChange = this.props.onChange;
     const fromId = this.dragTarget.getAttribute('data-id')!;
     const toId = this.host.getAttribute('data-group-id')!;
-    const toIndex =
-      [].slice.call(this.ghost.parentElement!.children).indexOf(this.ghost) - 1;
-    const value = this.props.value!;
+    const children = [].slice.call(this.ghost.parentElement!.children);
+    const idx = children.indexOf(this.dragTarget);
+
+    if (~idx) {
+      children.splice(idx, 1);
+    }
+
+    const toIndex = children.indexOf(this.ghost);
+    let value = this.props.value!;
 
     const indexes = findTreeIndex([value], item => item.id === fromId);
 
     if (indexes) {
-      // model.setOptions(
-      //   spliceTree(model.options, indexes, 1, {
-      //     ...origin,
-      //     ...result
-      //   })
-      // );
+      const origin = getTree([value], indexes.concat())!;
+      [value] = spliceTree([value]!, indexes, 1);
+
+      const indexes2 = findTreeIndex([value], item => item.id === toId);
+
+      if (indexes2) {
+        [value] = spliceTree([value]!, indexes2.concat(toIndex), 0, origin);
+        onChange(value);
+      }
     }
   }
 
   @autobind
   handleDragEnd(e: Event) {
-    const dom = findDOMNode(this) as HTMLElement;
     const target = e.target as HTMLElement;
 
     target.removeEventListener('dragend', this.handleDragEnd);
-    dom.removeEventListener('dragover', this.handleDragOver);
-    dom.removeEventListener('drop', this.handleDragDrop);
+    document.body.removeEventListener('dragover', this.handleDragOver);
+    document.body.removeEventListener('drop', this.handleDragDrop);
 
     this.dragTarget.classList.remove('is-dragging');
     delete this.dragTarget;