Merge pull request #749 from youluna/feat-select-compact

feat(Select): add API compact to make it won't wrap
alibaba-fusion · May 31, 2019 · a8c373a · a8c373a
2 parents 237de55 + d21f8a1
commit a8c373a
Show file tree

Hide file tree

Showing 11 changed files with 209 additions and 91 deletions.
diff --git a/docs/select/demo/multiple.md b/docs/select/demo/multiple.md
@@ -15,7 +15,9 @@ multiple select
 ---
 
 ````jsx
-import { Select } from '@alifd/next';
+import { Select, Balloon } from '@alifd/next';
+
+const { Tooltip } = Balloon;
 
 const dataSource = [
     {value: '10001', label: 'Lucy King'},
@@ -51,16 +53,26 @@ class Demo extends React.Component{
   }
 }
 
+const maxTagPlaceholder = (selectedValues, totalValues) => {
+    const trigger = <span>{`已选择 ${selectedValues.length}/${totalValues.length} 项`}</span>;
+    const labels = selectedValues.map(obj => obj.label);
+
+    return <Tooltip trigger={trigger}>{ labels.join(', ') }</Tooltip>
+}
 
 ReactDOM.render(
     <div>
-        <Select maxTagCount={2} maxTagPlaceholder={(cu, total) => `+${cu}`} mode="multiple" onChange={handleChange} dataSource={dataSource} style={{width: 200}} />
-        &nbsp;&nbsp;&nbsp;&nbsp;
-        <Select maxTagCount={2} mode="multiple" onChange={handleChange} dataSource={dataSource} style={{width: 200}} />
-        &nbsp;&nbsp;&nbsp;&nbsp;
-        <Select hasSelectAll mode="multiple" onChange={handleChange} dataSource={dataSource} style={{width: 200}} />
-        &nbsp;&nbsp;&nbsp;&nbsp;
-        <Demo />
+        <Select mode="multiple" onChange={handleChange} dataSource={dataSource} style={{width: 200}} />
+        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+        受控写法 <Demo /><br /><br />
+        设置最大显示Tag数 (maxTagCount) <br />
+        <Select maxTagCount={2} mode="multiple" onChange={handleChange} dataSource={dataSource} style={{width: 200}} /> <br /><br />
+        设置最大显示Tag数，并自定义超出显示内容 (maxTagCount + maxTagPlaceholder) <br />
+        <Select maxTagCount={2} maxTagPlaceholder={maxTagPlaceholder} mode="multiple" onChange={handleChange} dataSource={dataSource} style={{width: 200}} /><br /><br />
+        设置一行展示 (tagInline) <br />
+        <Select maxTagCount={2} tagInline mode="multiple" onChange={handleChange} dataSource={dataSource} style={{width: 200}} /><br /><br />
+        设置一行展示，并自定义超出显示内容 (tagInline + maxTagPlaceholder) <br />
+        <Select maxTagCount={2} tagInline maxTagPlaceholder={maxTagPlaceholder} mode="multiple" onChange={handleChange} dataSource={dataSource} style={{width: 200}} /><br /><br />
     </div>
 , mountNode);
 ````
diff --git a/docs/select/index.en-us.md b/docs/select/index.en-us.md
@@ -96,7 +96,7 @@ This is because the layer's animation of the overlay is implemented by `classNam
 |cacheValue | dataSource keeps the selected content | Boolean | true |
 |valueRender | Methods for rendering Select to display content <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>** Parameters**:<br>_item_: {Object} Render node's item<br>**return value **:<br>{ReactNode} show content <br> | Function | item => item.label \|\| item.value |
 | searchValue | Controlled search value, generally not set | String | - |
-| maxTagTextLength      | max length of each tag                                                                                                                                                                                                                                               | Number                                 | -                                             |
+| tagInline               | show in one line or not                                                                                                                                                                                                                                                    | Boolean                                | false                                             |
 | maxTagCount           | max count of tag can be show                                                                                                                                                                                                                                               | Number                                 | -                                             |
 | maxTagPlaceholder     | if selected tags' length is over maxTagCount, what to show <br><br>**签名**:<br>Function() => void                                                                                                                                                                                 | Function                               | (selected, total) => `${selected} / ${total}` |
 | onRemove | tag Delete callback <br><br><br>**Signature**:<br>Function(item: object) => void<br>**Parameters**:<br>_item_: {object} Render node's Item | Function | func.noop |

diff --git a/docs/select/index.md b/docs/select/index.md
diff --git a/src/locale/en-us.js b/src/locale/en-us.js
@@ -72,6 +72,7 @@ export default {
         selectPlaceholder: 'Please Select',
         autoCompletePlaceholder: 'Please Input',
         notFoundContent: 'No Options',
+        maxTagPlaceholder: 'Selected {selected}/{total} Total',
     },
     Table: {
         empty: 'No Data',

diff --git a/src/locale/ja-jp.js b/src/locale/ja-jp.js
@@ -71,6 +71,7 @@ export default {
         selectPlaceholder: '選択',
         autoCompletePlaceholder: '入力',
         notFoundContent: '選択肢なし',
+        maxTagPlaceholder: '選択済み {selected}/{total}',
     },
     Table: {
         empty: 'データなし',

diff --git a/src/locale/zh-cn.js b/src/locale/zh-cn.js
@@ -71,6 +71,7 @@ export default {
         selectPlaceholder: '请选择',
         autoCompletePlaceholder: '请输入',
         notFoundContent: '无选项',
+        maxTagPlaceholder: '已选择 {selected}/{total} 项',
     },
     Table: {
         empty: '没有数据',

diff --git a/src/locale/zh-tw.js b/src/locale/zh-tw.js
@@ -71,6 +71,7 @@ export default {
         selectPlaceholder: '請選擇',
         autoCompletePlaceholder: '請輸入',
         notFoundContent: '無選項',
+        maxTagPlaceholder: '已選擇 {selected}/{total} 項',
     },
     Table: {
         empty: '沒有數據',

diff --git a/src/select/main.scss b/src/select/main.scss
@@ -170,6 +170,29 @@
         }
     }
 
+    &-multiple {
+        .#{$css-prefix}input {
+            height: auto;
+            align-items: start;
+        }
+        #{$select-prefix}-compact {
+            position: relative;
+            white-space: nowrap;
+            #{$select-prefix}-trigger-search {
+                width: auto;
+            }
+            #{$select-prefix}-tag-compact {
+                position: absolute;
+                top: 0;
+                right: 0;
+                z-index: 1;
+                padding: 0 4px 0 16px;
+                color: $color-text1-3;
+                background: linear-gradient(90deg, rgba(255, 255, 255, 0), #FFF 10px);
+            }
+        }
+    }
+
     &-multiple, &-tag {
         #{$select-prefix}-values {
             /* Tag 有 3px 的 margin-bottom，所以包裹 Tag 的容器要作一下处理 */
@@ -195,6 +218,9 @@
             #{$select-prefix}-values {
                 @include select-size($form-element-small-height, $select-s-lineheight);
             }
+            #{$select-prefix}-values-compact {
+                height: $form-element-small-height !important;
+            }
             #{$tag-prefix} {
                 border: 0;
                 @include select-tag-size($select-s-lineheight, -1);
@@ -203,7 +229,7 @@
                     line-height: $select-s-lineheight;
                 }
             }
-            .#{$css-prefix}input-label, .#{$css-prefix}input-control {
+            .#{$css-prefix}input-label, .#{$css-prefix}input-control, #{$select-prefix}-tag-compact {
                 line-height: $form-element-small-height - 2;
             }
         }
@@ -212,10 +238,13 @@
             #{$select-prefix}-values {
                 @include select-size($form-element-medium-height, $select-m-lineheight);
             }
+            #{$select-prefix}-values-compact {
+                height: $form-element-medium-height !important;
+            }
             #{$tag-prefix} {
                 @include select-tag-size($select-m-lineheight);
             }
-            .#{$css-prefix}input-label, .#{$css-prefix}input-control {
+            .#{$css-prefix}input-label, .#{$css-prefix}input-control, #{$select-prefix}-tag-compact {
                 line-height: $form-element-medium-height - 2;
             }
         }
@@ -224,10 +253,13 @@
             #{$select-prefix}-values {
                 @include select-size($form-element-large-height, $select-l-lineheight);
             }
+            #{$select-prefix}-values-compact {
+                height: $form-element-large-height !important;
+            }
             #{$tag-prefix} {
                 @include select-tag-size($select-l-lineheight);
             }
-            .#{$css-prefix}input-label, .#{$css-prefix}input-control {
+            .#{$css-prefix}input-label, .#{$css-prefix}input-control, #{$select-prefix}-tag-compact {
                 line-height: $form-element-large-height - 2;
             }
         }
@@ -421,3 +453,5 @@
         }
     }
 }
+
+@import "./rtl.scss";
diff --git a/src/select/rtl.scss b/src/select/rtl.scss
@@ -0,0 +1,10 @@
+#{$select-prefix}#{$select-prefix}-multiple[dir='rtl'] {
+    #{$select-prefix}-compact {
+        #{$select-prefix}-tag-compact {
+            left: 0;
+            right: auto;
+            padding: 0 16px 0 4px;
+            background: linear-gradient(270deg, rgba(255, 255, 255, 0), #FFF 10px);
+        }
+    }
+}