Merge pull request #544 from RickCole21/master

combo拖拽交互优化

scss/_variables.scss

@@ -1184,6 +1184,7 @@ $Combo--vertical-itemToolbar-positionTop: -$Combo--vertical-itemToolbar-height !
 $Combo--vertical-itemToolbar-positionRight: px2rem(5px) !default;
 
 $Combo--horizontal-item-gap: px2rem(5px);
+$Combo--horizontal-dragger-top: px2rem(8px) !default;
 
 // Sub Form
 $SubForm--addBtn-bg: $Button--info-bg !default;

scss/components/form/_combo.scss

@@ -67,6 +67,16 @@
     background: $white;
   }
 
+  &-itemDrager {
+    cursor: move;
+
+    svg {
+      width: px2rem(20px);
+      height: px2rem(20px);
+      top: $Combo--horizontal-dragger-top;
+    }
+  }
+
   &--hor {
     .#{$ns}Combo-item {
       display: flex;
@@ -103,6 +113,14 @@
         opacity: $Button-onDisabled-opacity;
       }
     }
+
+    &.is-draggable .#{$ns}Combo-toolbar {
+      padding-left: px2rem(24px);
+    }
+
+    .#{$ns}Combo-itemDrager {
+      padding: 0 px2rem(6px) 0 0;
+    }
   }
 
   &--ver:not(&--noBorder) {
@@ -183,6 +201,21 @@
         opacity: 1;
       }
     }
+
+    .#{$ns}Combo-itemDrager {
+      position: absolute;
+      top: 0;
+      left: px2rem(-30px);
+    }
+
+    &.is-draggable {
+      .#{$ns}Combo-item {
+        margin-left: px2rem(35px);
+      }
+      .#{$ns}Combo-toolbar {
+        padding-left: px2rem(25px);
+      }
+    }
   }
 
   &-item--dragging {

scss/themes/cxd.scss

@@ -487,6 +487,9 @@ $Card-actions-onHover-bg: white;
 $Card-actions-onHover-color: $primary;
 $Card-actions-onChecked-onHover-bg: $white;
 
+// Combo
+$Combo--horizontal-dragger-top: px2rem(5px);
+
 @import '../variables';
 @import '../mixins';
 @import '../base/reset';

src/components/icons.tsx

@@ -63,6 +63,9 @@ import InfoIcon from '../icons/info.svg';
 // @ts-ignore
 import LocationIcon from '../icons/location.svg';
 
+// @ts-ignore
+import ComboDraggerIcon from '../icons/combo-dragger.svg';
+
 // 兼容原来的用法，后续不直接试用。
 // @ts-ignore
 export const closeIcon = <CloseIcon />;
@@ -125,6 +128,7 @@ registerIcon('back', BackIcon);
 registerIcon('move', MoveIcon);
 registerIcon('info', InfoIcon);
 registerIcon('location', LocationIcon);
+registerIcon('combo-dragger', ComboDraggerIcon);
 
 export function Icon({
   icon,

src/icons/combo-dragger.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1586501480188" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1509" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M469.333333 256a85.333333 85.333333 0 1 1-85.333333-85.333333 85.333333 85.333333 0 0 1 85.333333 85.333333z m-85.333333 170.666667a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m256-341.333334a85.333333 85.333333 0 1 0-85.333333-85.333333 85.333333 85.333333 0 0 0 85.333333 85.333333z m0 85.333334a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z" p-id="1510" data-spm-anchor-id="a313x.7781069.0.i6" class="selected" fill="#999999"></path></svg>

src/renderers/Form/Combo.tsx

@@ -22,6 +22,7 @@ import {dataMapping, resolveVariable} from '../../utils/tpl-builtin';
 import {isEffectiveApi} from '../../utils/api';
 import {Alert2} from '../../components';
 import memoize from 'lodash/memoize';
+import {Icon}from '../../components/icons'
 export interface Condition {
   test: string;
   controls: Array<Schema>;
@@ -91,8 +92,8 @@ export default class ComboControl extends React.Component<ComboProps> {
     addButtonText: '新增',
     canAccessSuperData: false,
     addIcon: 'fa fa-plus',
-    dragIcon: 'glyphicon glyphicon-sort',
+    dragIcon: '',
-    deleteIcon: 'glyphicon glyphicon-remove',
+    deleteIcon: '',
     tabsMode: false,
     tabsStyle: '',
     placeholder: '<空>'
@@ -751,7 +752,7 @@ export default class ComboControl extends React.Component<ComboProps> {
                 data-tooltip="删除"
                 data-position="bottom"
               >
-                <i className={deleteIcon} />
+                {deleteIcon ? <i className={deleteIcon} /> : <Icon icon="close" /> }
               </a>
             );
           }
@@ -888,7 +889,8 @@ export default class ComboControl extends React.Component<ComboProps> {
           `Combo Combo--multi`,
           multiLine ? `Combo--ver` : `Combo--hor`,
           noBorder ? `Combo--noBorder` : '',
-          disabled ? 'is-disabled' : ''
+          disabled ? 'is-disabled' : '',
+          (!disabled && draggable && Array.isArray(value) && value.length > 1) ? 'is-draggable' : '',
         )}
       >
         <div className={cx(`Combo-items`)}>
@@ -896,18 +898,18 @@ export default class ComboControl extends React.Component<ComboProps> {
             ? value.map((value, index, thelist) => {
                 const toolbar: Array<any> = [];
 
-                if (!disabled && draggable && thelist.length > 1) {
+                // if (!disabled && draggable && thelist.length > 1) {
-                  toolbar.push(
+                //   toolbar.push(
-                    <a
+                //     <a
-                      key="drag"
+                //       key="drag"
-                      className={cx(`Combo-toolbarBtn Combo-itemDrager`)}
+                //       className={cx(`Combo-toolbarBtn Combo-itemDrager`)}
-                      data-tooltip="拖拽排序"
+                //       data-tooltip="拖拽排序"
-                      data-position="bottom"
+                //       data-position="bottom"
-                    >
+                //     >
-                      <i className={dragIcon} />
+                //       <i className={dragIcon} />
-                    </a>
+                //     </a>
-                  );
+                //   );
-                }
+                // }
 
                 if (
                   finnalRemovable && // 表达式判断单条是否可删除
@@ -926,7 +928,7 @@ export default class ComboControl extends React.Component<ComboProps> {
                       data-tooltip="删除"
                       data-position="bottom"
                     >
-                      <i className={deleteIcon} />
+                      {deleteIcon ? <i className={deleteIcon} /> : <Icon icon="close" /> }
                     </a>
                   );
                 }
@@ -954,6 +956,17 @@ export default class ComboControl extends React.Component<ComboProps> {
                     className={cx(`Combo-item`)}
                     key={this.keys[index] || (this.keys[index] = guid())}
                   >
+                    {!disabled && draggable && thelist.length > 1 ? (
+                      <div className={cx('Combo-itemDrager')}>
+                        <a
+                          key="drag"
+                          data-tooltip="拖拽排序"
+                          data-position="bottom"
+                        >
+                          {dragIcon ? ( <i className={dragIcon} /> ): <Icon icon="combo-dragger"/> }
+                        </a>
+                      </div>
+                    ): null}
                     {condition && typeSwitchable !== false ? (
                       <div className={cx('Combo-itemTag')}>
                         <label>类型</label>