Merge pull request #566 from RickCole21/master

nested-select多选显示优化、样式优化

scss/components/form/_nested-select.scss

@@ -41,6 +41,26 @@
     background: $Form-select-onHover-bg;
   }
 
+  &--multi {
+    .#{$ns}Select-value {
+      position: static;
+      user-select: none;
+      line-height: $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px);
+      display: inline-block;
+      vertical-align: middle;
+      font-size: $Form-selectValue-fontSize;
+      color: $Form-selectValue-color;
+      background: $Form-selectValue-bg;
+      border: px2rem(1px) solid $Form-selectValue-borderColor;
+      border-radius: px2rem(2px);
+      margin-right: $gap-xs;
+      margin-bottom: $gap-xs;
+    }
+    .#{$ns}Select-valueLabel {
+      padding: 0 $gap-xs;
+    }
+  }
+
   &-placeholder {
     color: $Form-select-placeholderColor;
     line-height: $Form-input-lineHeight;
@@ -52,12 +72,6 @@
     flex-grow: 1;
   }
 
-  .#{$ns}Select-arrow {
-    position: absolute;
-    right: 0;
-    top: px2rem(10px);
-  }
-
   &-clear {
     padding: px2rem(3px);
     cursor: pointer;
@@ -95,7 +109,7 @@
   }
 
   &-menu {
-    min-width: px2rem(160px);
+    min-width: px2rem(120px);
     max-height: px2rem(300px);
     background: $Form-select-menu-bg;
     color: $Form-select-menu-color;
@@ -147,3 +161,17 @@
     }
   }
 }
+
+// 需要能撑开
+@include media-breakpoint-up(sm) {
+  .#{$ns}Form-control--sizeXs > .#{$ns}NestedSelect,
+  .#{$ns}Form-control--sizeSm > .#{$ns}NestedSelect,
+  .#{$ns}Form-control--sizeMd > .#{$ns}NestedSelect,
+  .#{$ns}Form-control--sizeLg > .#{$ns}NestedSelect {
+    display: inline-flex !important;
+
+    .#{$ns}Select-valueWrap {
+      width: 0; // ! 没有这个会撑开。
+    }
+  }
+}

src/renderers/Cards.tsx

@@ -752,7 +752,8 @@ export default class Cards extends React.Component<GridProps, object> {
       checkOnItemClick,
       masonryLayout,
       itemsClassName,
-      classnames: cx
+      classnames: cx,
+      data
     } = this.props;
 
     this.renderedToolbars = []; // 用来记录哪些 toolbar 已经渲染了，已经渲染了就不重复渲染了。
@@ -838,7 +839,9 @@ export default class Cards extends React.Component<GridProps, object> {
             })}
           </div>
         ) : (
-          <div className={cx('Cards-placeholder')}>{placeholder}</div>
+          <div className={cx('Cards-placeholder')}>
+            {filter(placeholder, data)}
+          </div>
         )}
 
         {footer}

src/renderers/Form/NestedSelect.tsx

@@ -67,19 +67,75 @@ export default class NestedSelectControl extends React.Component<
     });
   }
 
+  removeItem(index: number, e?: React.MouseEvent<HTMLElement>) {
+    let {
+      onChange,
+      selectedOptions,
+      disabled,
+      joinValues,
+      valueField,
+      extractValue,
+      delimiter,
+      value
+    } = this.props;
+
+    if (disabled) {
+      return;
+    }
+
+    e && e.stopPropagation();
+
+    selectedOptions.splice(index, 1);
+
+    if (joinValues) {
+      value = (selectedOptions as Options)
+        .map(item => item[valueField || 'value'])
+        .join(delimiter || ',');
+    } else if (extractValue) {
+      value = (selectedOptions as Options).map(
+        item => item[valueField || 'value']
+      );
+    }
+
+    onChange(value);
+  }
+
   renderValue() {
-    const {multiple, classnames: cx, selectedOptions, labelField} = this.props;
-    const len = Array.isArray(selectedOptions) ? selectedOptions.length : 0;
-    return (
-      <div className={cx('NestedSelect-valueWrap')} onClick={this.open}>
-        {len > 0 ? (
-          <div className={cx('NestedSelect-value')}>
-            {multiple
-              ? `已选择 ${len} 项`
-              : selectedOptions[0][labelField || 'label']}
-          </div>
-        ) : null}
-      </div>
+    const {
+      multiple,
+      classnames: cx,
+      selectedOptions,
+      labelField,
+      placeholder,
+      disabled
+    } = this.props;
+
+    if (!(selectedOptions && selectedOptions.length > 0)) {
+      return (
+        <div className={cx('NestedSelect-placeholder')}>{placeholder}</div>
+      );
+    }
+
+    return selectedOptions.map((item, index) =>
+      multiple ? (
+        <div className={cx('Select-value')} key={index}>
+          <span
+            className={cx('Select-valueIcon', {
+              'is-disabled': disabled || item.disabled
+            })}
+            onClick={this.removeItem.bind(this, index)}
+          >
+            ×
+          </span>
+          <span className={cx('Select-valueLabel')}>
+            {item[labelField || 'label']}
+          </span>
+        </div>
+      ) : (
+        <div className={cx('Select-value')} key={index}>
+          {item[labelField || 'label']}
+        </div>
+      )
     );
   }
 
@@ -364,11 +420,14 @@ export default class NestedSelectControl extends React.Component<
           <div
             key={index}
             className={cx('NestedSelect-menu')}
-            style={{minWidth: this.target.offsetWidth}}
+            style={{width: this.target.offsetWidth}}
           >
             {index === 0 ? searchInput : null}
             {multiple && index === 0 ? (
-              <div className={cx('NestedSelect-option', 'checkall')}>
+              <div
+                className={cx('NestedSelect-option', 'checkall')}
+                onMouseEnter={this.onMouseEnterAll}
+              >
                 <Checkbox
                   onChange={this.handleCheck.bind(this, options)}
                   checked={partialChecked}
@@ -422,6 +481,13 @@ export default class NestedSelectControl extends React.Component<
     );
   }
 
+  @autobind
+  onMouseEnterAll() {
+    this.setState({
+      stack: [this.props.options]
+    });
+  }
+
   onMouseEnter(option: Option, index: number, e: MouseEvent) {
     let {stack} = this.state;
     let {cascade, multiple, selectedOptions} = this.props;
@@ -442,7 +508,7 @@ export default class NestedSelectControl extends React.Component<
       stack[index] && stack.splice(index, 1);
     }
 
-    this.setState({stack});
+    this.setState({stack: stack.slice(0, index + 1)});
   }
 
   renderOuter() {
@@ -479,33 +545,23 @@ export default class NestedSelectControl extends React.Component<
   }
 
   render() {
-    const {
-      className,
-      disabled,
-      placeholder,
-      selectedOptions,
-      classnames: cx
-    } = this.props;
+    const {className, disabled, classnames: cx, multiple} = this.props;
 
     return (
-      <div className={cx('NestedSelectControl')}>
+      <div className={cx('NestedSelectControl', className)}>
         <div
-          className={cx(
-            'NestedSelect',
-            {
-              'is-opened': this.state.isOpened,
-              'is-disabled': disabled
-            },
-            className
-          )}
+          className={cx('NestedSelect', {
+            [`NestedSelect--multi`]: multiple,
+            'is-opened': this.state.isOpened,
+            'is-disabled': disabled
+          })}
           onClick={this.open}
           ref={this.domRef}
         >
-          {!(selectedOptions && selectedOptions.length > 0) ? (
-            <div className={cx('NestedSelect-placeholder')}>{placeholder}</div>
-          ) : null}
+          <div className={cx('NestedSelect-valueWrap')} onClick={this.open}>
+            {this.renderValue()}
+          </div>
 
-          {this.renderValue()}
           {this.renderClear()}
 
           <span className={cx('Select-arrow')} />