From a9f1cbd62bb1c5242b55ca1c21892cef8ef03fd0 Mon Sep 17 00:00:00 2001
From: Dreamacro <305009791@qq.com>
Date: Sun, 16 Dec 2018 22:16:27 +0800
Subject: [PATCH] Chore: improve group select

---
 src/components/Tags/index.tsx                 | 59 ++++++++++++++-----
 src/components/Tags/style.scss                | 17 +++++-
 .../Proxies/components/Group/index.tsx        | 15 ++++-
 .../Proxies/components/Group/style.scss       | 14 ++++-
 4 files changed, 84 insertions(+), 21 deletions(-)

diff --git a/src/components/Tags/index.tsx b/src/components/Tags/index.tsx
index 89268b3..2c228f5 100644
--- a/src/components/Tags/index.tsx
+++ b/src/components/Tags/index.tsx
@@ -6,28 +6,57 @@ import './style.scss'
 interface TagsProps extends BaseComponentProps {
     data: Set<string>
     onClick: (name: string) => void
-    selected: string
+    select: string
+    rowHeight: number
 }
 
-export class Tags extends React.Component<TagsProps, {}> {
+interface TagsState {
+    extend: boolean
+    showExtend: boolean
+    ulRef: React.RefObject<HTMLUListElement>
+}
+
+export class Tags extends React.Component<TagsProps, TagsState> {
+    state: TagsState = {
+        extend: false,
+        showExtend: true,
+        ulRef: React.createRef<HTMLUListElement>()
+    }
+
+    toggleExtend = () => {
+        this.setState({ extend: !this.state.extend })
+    }
+
+    componentDidMount () {
+        this.setState({ showExtend: this.state.ulRef.current.offsetHeight > 30 })
+    }
+
     render () {
-        const { className, data, onClick, selected } = this.props
+        const { className, data, onClick, select } = this.props
+        const { extend } = this.state
+        const rowHeight = this.state.extend ? 'auto' : this.props.rowHeight
 
         const tags = [...data]
-        .sort()
-        .map(t => {
-            const tagClass = classnames({ 'tags-selected': selected === t })
-            return (
-                <li className={tagClass} key={t} onClick={() => onClick(t)}>
-                    { t }
-                </li>
-            )
-        })
+            .sort()
+            .map(t => {
+                const tagClass = classnames({ 'tags-selected': select === t })
+                return (
+                    <li className={tagClass} key={t} onClick={() => onClick(t)}>
+                        { t }
+                    </li>
+                )
+            })
 
         return (
-            <ul className={classnames('tags', className)}>
-                { tags }
-            </ul>
+            <div className={classnames('tags-container', className)} style={{ height: rowHeight }}>
+                <ul ref={this.state.ulRef} className={classnames('tags', { extend })}>
+                    { tags }
+                </ul>
+                {
+                    this.state.showExtend &&
+                    <span className="tags-entend" onClick={this.toggleExtend}>{ this.state.extend ? '收起' : '展开' }</span>
+                }
+            </div>
         )
     }
 }
diff --git a/src/components/Tags/style.scss b/src/components/Tags/style.scss
index 34404db..b9e48d7 100644
--- a/src/components/Tags/style.scss
+++ b/src/components/Tags/style.scss
@@ -4,12 +4,19 @@ $height: 22px;
 $add-height: 25px;
 $delete-height: 22px;
 
+.tags-container {
+    display: flex;
+    align-items: flex-start;
+    overflow-y: hidden;
+}
+
 .tags {
     display: flex;
+    flex: 1;
     align-items: center;
     list-style: none;
     flex-wrap: wrap;
-    padding: 3px 4px;
+    box-sizing: content-box;
 
     li {
         position: relative;
@@ -31,3 +38,11 @@ $delete-height: 22px;
         color: #fff;
     }
 }
+
+.tags-entend {
+    height: 30px;
+    line-height: 30px;
+    padding: 0 10px;
+    user-select: none;
+    cursor: pointer;
+}
diff --git a/src/containers/Proxies/components/Group/index.tsx b/src/containers/Proxies/components/Group/index.tsx
index 5594ab6..9eb00ff 100644
--- a/src/containers/Proxies/components/Group/index.tsx
+++ b/src/containers/Proxies/components/Group/index.tsx
@@ -24,9 +24,18 @@ export class Group extends React.Component<GroupProps, {}> {
         const proxies = new Set(config.all)
         return (
             <div className="proxy-group">
-                <span className="proxy-group-name">{ config.name }</span>
-                <span className="proxy-group-type">{ config.type }</span>
-                <Tags className="proxy-group-tags" data={proxies} onClick={this.handleChangeProxySelected} selected={config.now} />
+                <div className="proxy-group-part">
+                    <span className="proxy-group-name">{ config.name }</span>
+                    <span className="proxy-group-type">{ config.type }</span>
+                </div>
+                <div className="proxy-group-tags-container">
+                    <Tags
+                        className="proxy-group-tags"
+                        data={proxies}
+                        onClick={this.handleChangeProxySelected}
+                        select={config.now}
+                        rowHeight={30} />
+                </div>
             </div>
         )
     }
diff --git a/src/containers/Proxies/components/Group/style.scss b/src/containers/Proxies/components/Group/style.scss
index 6cf424b..7ad0e4c 100644
--- a/src/containers/Proxies/components/Group/style.scss
+++ b/src/containers/Proxies/components/Group/style.scss
@@ -2,12 +2,17 @@
 
 .proxy-group {
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     font-size: 14px;
-    padding: 12px 0;
     color: $color-black-light;
 }
 
+.proxy-group-part {
+    display: flex;
+    align-items: center;
+    height: 60px;
+}
+
 .proxy-group-name {
     display: flex;
     padding: 0 20px;
@@ -15,6 +20,7 @@
 }
 
 .proxy-group-type {
+    display: block;
     height: 24px;
     line-height: 24px;
     width: 80px;
@@ -36,6 +42,10 @@
     }
 }
 
+.proxy-group-tags-container {
+    padding: 15px 0;
+}
+
 .proxy-group-tags {
     flex: 1;
     margin-left: 30px;