From 377b308f1913413a7af31057932f10a53aa59cf8 Mon Sep 17 00:00:00 2001
From: 2betop <2betop.cn@gmail.com>
Date: Tue, 7 Apr 2020 17:27:51 +0800
Subject: [PATCH] =?UTF-8?q?combo=20=E6=94=AF=E6=8C=81=20placeholder?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 scss/components/form/_combo.scss | 10 ++++++++++
 src/renderers/Form/Combo.tsx     | 12 ++++++++----
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/scss/components/form/_combo.scss b/scss/components/form/_combo.scss
index 0c43f95e1..8b37af070 100644
--- a/scss/components/form/_combo.scss
+++ b/scss/components/form/_combo.scss
@@ -1,4 +1,8 @@
 .#{$ns}Combo {
+  &-placeholder {
+    color: $text--muted-color;
+  }
+
   &-toolbarBtn {
     line-height: $Combo-toolbarBtn-lineHeight;
     height: $Combo-toolbarBtn-height;
@@ -105,6 +109,12 @@
     > .#{$ns}Combo-items {
       margin: (-$Combo--vertical-item-gap * 2) (-$Combo--vertical-item-gap * 2)
         0 (-$Combo--vertical-item-gap * 2);
+
+      > .#{$ns}Combo-placeholder {
+        padding: ($Combo--vertical-item-gap * 2) ($Combo--vertical-item-gap * 2)
+          0 ($Combo--vertical-item-gap * 2);
+        margin-bottom: $Combo--vertical-item-gap * 2;
+      }
     }
 
     .#{$ns}Combo-itemTag {
diff --git a/src/renderers/Form/Combo.tsx b/src/renderers/Form/Combo.tsx
index a45bc7ab3..5ccbbedfc 100644
--- a/src/renderers/Form/Combo.tsx
+++ b/src/renderers/Form/Combo.tsx
@@ -94,7 +94,8 @@ export default class ComboControl extends React.Component<ComboProps> {
     dragIcon: 'glyphicon glyphicon-sort',
     deleteIcon: 'glyphicon glyphicon-remove',
     tabsMode: false,
-    tabsStyle: ''
+    tabsStyle: '',
+    placeholder: '<空>'
   };
   static propsList: Array<string> = [
     'minLength',
@@ -865,7 +866,8 @@ export default class ComboControl extends React.Component<ComboProps> {
       noBorder,
       conditions,
       lazyLoad,
-      changeImmediately
+      changeImmediately,
+      placeholder
     } = this.props;
 
     let controls = this.props.controls;
@@ -890,7 +892,7 @@ export default class ComboControl extends React.Component<ComboProps> {
         )}
       >
         <div className={cx(`Combo-items`)}>
-          {Array.isArray(value)
+          {Array.isArray(value) && value.length
             ? value.map((value, index, thelist) => {
                 const toolbar: Array<any> = [];
 
@@ -1011,7 +1013,9 @@ export default class ComboControl extends React.Component<ComboProps> {
                   </div>
                 );
               })
-            : null}
+            : placeholder ? (
+            <div className={cx(`Combo-placeholder`)}>{placeholder}</div>
+            ) : null}
         </div>
         {!disabled ? (
           <div className={cx(`Combo-toolbar`)}>