From c5cfc2046219bc8eee264b13cf33ffadb3912d3c Mon Sep 17 00:00:00 2001
From: Michael An <2331806369@qq.com>
Date: Thu, 28 Feb 2019 14:33:21 +0800
Subject: [PATCH] add resizer (#3010)

---
 .../dir-view-mode/dir-column-nav.js           | 10 ++-
 .../dir-view-mode/dir-column-view.js          | 86 ++++++++++++++++++-
 .../components/dir-view-mode/dir-grid-view.js |  1 -
 frontend/src/css/lib-content-view.css         |  5 ++
 4 files changed, 96 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/dir-view-mode/dir-column-nav.js b/frontend/src/components/dir-view-mode/dir-column-nav.js
index a4b865da6f..3c25f3e599 100644
--- a/frontend/src/components/dir-view-mode/dir-column-nav.js
+++ b/frontend/src/components/dir-view-mode/dir-column-nav.js
@@ -24,6 +24,8 @@ const propTypes = {
   onAddFileNode: PropTypes.func.isRequired,
   onAddFolderNode: PropTypes.func.isRequired,
   repoID: PropTypes.string.isRequired,
+  navRate: PropTypes.number,
+  inResizing: PropTypes.bool.isRequired,
 };
 
 class DirColumnNav extends React.Component {
@@ -143,9 +145,11 @@ class DirColumnNav extends React.Component {
   }
 
   render() {
+    let flex = this.props.navRate ? '0 0 ' + this.props.navRate * 100 + '%' : '0 0 25%';
+    const select = this.props.inResizing ? 'none' : '';
     return (
       <Fragment>
-        <div className="dir-content-nav" role="navigation">
+        <div className="dir-content-nav" role="navigation" style={{flex: (flex), userSelect: select}}>
           {this.props.isTreeDataLoading ? 
             (<Loading/>) :
             (<TreeView
@@ -206,6 +210,10 @@ class DirColumnNav extends React.Component {
   }
 }
 
+DirColumnNav.defaultProps={
+  navRate: 0.25
+};
+
 DirColumnNav.propTypes = propTypes;
 
 export default DirColumnNav;
diff --git a/frontend/src/components/dir-view-mode/dir-column-view.js b/frontend/src/components/dir-view-mode/dir-column-view.js
index 72a1c69b46..cb904f060b 100644
--- a/frontend/src/components/dir-view-mode/dir-column-view.js
+++ b/frontend/src/components/dir-view-mode/dir-column-view.js
@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import DirColumnNav from './dir-column-nav';
 import DirColumnFile from './dir-column-file';
@@ -69,10 +69,85 @@ const propTypes = {
 };
 
 class DirColumnView extends React.Component {
+  
+  constructor(props) {
+    super(props);
+    this.state = {
+      inResizing: false,
+      navRate: 0.25,
+    };
+    this.containerWidth = null;
+  }
+
+  onResizeMouseUp = () => {
+    if (this.state.inResizing) {
+      this.setState({
+        inResizing: false
+      });
+    }
+    this.setCookie('navRate', this.state.navRate);
+  }
+
+  onResizeMouseDown = () => {
+    this.setState({
+      inResizing: true
+    });
+  };
+
+  onResizeMouseMove = (e) => {
+    let sizeNavWidth = this.containerWidth / 0.78 * 0.22 + 3;
+    let rate = (e.nativeEvent.clientX - sizeNavWidth) / this.containerWidth;
+    if (rate < 0.1) {
+      this.setState({
+        inResizing: false,
+        navRate: 0.12,
+      });
+    }
+    else if (rate > 0.9) {
+      this.setState({
+        inResizing: false,
+        navRate: 0.88,
+      });
+    }
+    else {
+      this.setState({
+        navRate: rate
+      });
+    }
+  };
+
+  setCookie = (name, value) => {
+    let cookie = name + '=' + value + ';';
+    document.cookie = cookie;
+  }
+
+  getCookie = (cookiename) => {
+    let name = cookiename + '=';
+    let cookie = document.cookie.split(';');
+    for (let i = 0, len = cookie.length; i < len; i++) {
+      let c = cookie[i].trim();
+      if (c.indexOf(name) == 0) {
+        return c.substring(name.length, c.length) * 1;
+      }
+    }
+    return '';
+  }
+
+  componentDidMount() {
+    this.containerWidth = this.refs.viewModeContainer.clientWidth;
+    let rate = this.getCookie('navRate');
+    if (rate) {
+      this.setState({
+        navRate: rate,
+      });
+    } 
+  }
 
   render() {
+    const onResizeMove = this.state.inResizing ? this.onResizeMouseMove : null;
+    const select = this.state.inResizing ? 'none' : '';
     return (
-      <Fragment>
+      <div className="cur-view-content view-mode-container" onMouseMove={onResizeMove} onMouseUp={this.onResizeMouseUp} ref="viewModeContainer">
         <DirColumnNav 
           currentPath={this.props.path}
           repoPermission={this.props.repoPermission}
@@ -87,8 +162,11 @@ class DirColumnView extends React.Component {
           onRenameNode={this.props.onRenameNode}
           onDeleteNode={this.props.onDeleteNode}
           repoID={this.props.repoID}
+          navRate={this.state.navRate}
+          inResizing={this.state.inResizing}
         />
-        <div className="dir-content-main">
+        <div className="dir-content-resize" onMouseDown={this.onResizeMouseDown}></div>
+        <div className="dir-content-main" style={{userSelect: select}}>
           {this.props.isViewFile ? (
             <DirColumnFile 
               path={this.props.path}
@@ -140,7 +218,7 @@ class DirColumnView extends React.Component {
             />
           )}
         </div>
-      </Fragment>
+      </div>
     );
   }
 }
diff --git a/frontend/src/components/dir-view-mode/dir-grid-view.js b/frontend/src/components/dir-view-mode/dir-grid-view.js
index bb0863f5ad..80cea5a2a5 100644
--- a/frontend/src/components/dir-view-mode/dir-grid-view.js
+++ b/frontend/src/components/dir-view-mode/dir-grid-view.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 const propTypes = {
 
diff --git a/frontend/src/css/lib-content-view.css b/frontend/src/css/lib-content-view.css
index d7d103a31a..f9cec4c368 100644
--- a/frontend/src/css/lib-content-view.css
+++ b/frontend/src/css/lib-content-view.css
@@ -219,3 +219,8 @@
   font-size:12px;
   color: #666;
 }
+
+.dir-content-resize {
+  flex: 0 0 .5%;
+  cursor: ew-resize;
+}
\ No newline at end of file