From 2a11d9ac932967b88b963af28ebd0ae1e4afc7a4 Mon Sep 17 00:00:00 2001
From: jim <wasd2144@hotmail.com>
Date: Sat, 3 Mar 2018 12:28:20 +0800
Subject: [PATCH] fix review warning

---
 src/routes/UserProfile/Userinfo/Info.js   | 39 +++++++++++++++++++++--
 src/routes/UserProfile/Userinfo/Info.less |  8 +++++
 2 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/src/routes/UserProfile/Userinfo/Info.js b/src/routes/UserProfile/Userinfo/Info.js
index d8b6edd7..ad6cdca5 100644
--- a/src/routes/UserProfile/Userinfo/Info.js
+++ b/src/routes/UserProfile/Userinfo/Info.js
@@ -25,8 +25,16 @@ export default class Info extends Component {
     key = menuMap[key] ? key : 'base';
     this.state = {
       selectKey: key,
+      mode: 'inline',
     };
   }
+  componentDidMount() {
+    window.addEventListener('resize', this.resize);
+    this.resize();
+  }
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.resize);
+  }
   getmenu = () => {
     return Object.keys(menuMap).map(item => (
       <Item key={item}>{menuMap[item]}</Item>
@@ -41,16 +49,37 @@ export default class Info extends Component {
       selectKey: key,
     });
   };
+  resize = () => {
+    if (!this.main) {
+      return;
+    }
+    let mode = 'inline';
+    const { offsetWidth } = this.main;
+    if (this.main.offsetWidth < 641 && offsetWidth > 400) {
+      mode = 'horizontal';
+    }
+    if (window.innerWidth < 768 && offsetWidth > 400) {
+      mode = 'horizontal';
+    }
+    this.setState({
+      mode,
+    });
+  };
   render() {
     const { match, routerData, currentUser } = this.props;
     if (!currentUser.userid) {
       return '';
     }
     return (
-      <div className={styles.main}>
+      <div
+        className={styles.main}
+        ref={(ref) => {
+          this.main = ref;
+        }}
+      >
         <div className={styles.leftmenu}>
           <Menu
-            mode="inline"
+            mode={this.state.mode}
             selectedKeys={[this.state.selectKey]}
             onClick={this.selectKey}
           >
@@ -70,7 +99,11 @@ export default class Info extends Component {
                 exact={item.exact}
               />
             ))}
-            <Redirect exact from="/user-profile/userinfo" to="/user-profile/userinfo/base" />
+            <Redirect
+              exact
+              from="/user-profile/userinfo"
+              to="/user-profile/userinfo/base"
+            />
             <Redirect to="/exception/404" />
           </Switch>
         </div>
diff --git a/src/routes/UserProfile/Userinfo/Info.less b/src/routes/UserProfile/Userinfo/Info.less
index 8d24f53a..9f1e6bda 100644
--- a/src/routes/UserProfile/Userinfo/Info.less
+++ b/src/routes/UserProfile/Userinfo/Info.less
@@ -15,6 +15,9 @@
       .ant-menu-inline {
         border: none;
       }
+      .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
+        font-weight: bold;
+      }
     }
   }
   .right {
@@ -31,6 +34,11 @@
       margin-bottom: 12px;
     }
   }
+  :global {
+    .ant-list-split .ant-list-item:last-child {
+      border-bottom: 1px solid #e8e8e8;
+    }
+  }
 }
 :global {
   .ant-list-item-meta {
-- 
GitLab