12.0 support drag side nav (#6340)

* 01 optimize resize bar

* 02 app side panel support resize

* 03 side panel is folded do not support resize

* 04 optimise code

* 05 use localStorage

frontend/src/components/dir-view-mode/dir-column-view.js

@@ -5,6 +5,8 @@ import DirColumnFile from './dir-column-file';
 import DirListView from './dir-list-view';
 import DirGridView from './dir-grid-view';
 import { SIDE_PANEL_FOLDED_WIDTH } from '../../constants';
+import ResizeBar from '../resize-bar';
+import { DRAG_HANDLER_HEIGHT, MAX_SIDE_PANEL_RATE, MIN_SIDE_PANEL_RATE } from '../resize-bar/constants';
 
 const propTypes = {
   isSidePanelFolded: PropTypes.bool,
@@ -73,19 +75,17 @@ const propTypes = {
   isDirentDetailShow: PropTypes.bool.isRequired
 };
 
-const DRAG_HANDLER_HEIGHT = 26;
-
 class DirColumnView extends React.Component {
 
   constructor(props) {
     super(props);
     this.state = {
       inResizing: false,
-      navRate: 0.25,
+      navRate: parseFloat(localStorage.getItem('sf_dir_content_nav_rate') || 0.25),
     };
     this.containerWidth = null;
-    this.resizeRef = null;
-    this.dragHandler = null;
+    this.resizeBarRef = React.createRef();
+    this.dragHandlerRef = React.createRef();
     this.viewModeContainer = React.createRef();
   }
 
@@ -95,7 +95,7 @@ class DirColumnView extends React.Component {
         inResizing: false
       });
     }
-    this.setCookie('navRate', this.state.navRate);
+    localStorage.setItem('sf_dir_content_nav_rate', this.state.navRate);
   };
 
   onResizeMouseDown = () => {
@@ -107,65 +107,24 @@ class DirColumnView extends React.Component {
 
   onResizeMouseMove = (e) => {
     const { isSidePanelFolded } = this.props;
-    let sizeNavWidth = isSidePanelFolded ? SIDE_PANEL_FOLDED_WIDTH + 3 : this.containerWidth / 0.78 * 0.22 + 3;
-
+    let sizeNavWidth = isSidePanelFolded ? SIDE_PANEL_FOLDED_WIDTH + 3 : window.innerWidth - this.containerWidth;
     let rate = (e.nativeEvent.clientX - sizeNavWidth) / this.containerWidth;
-    if (rate < 0.1) {
-      this.setState({
-        inResizing: false,
-        navRate: 0.12,
-      });
-    }
-    else if (rate > 0.4) {
-      this.setState({
-        inResizing: false,
-        navRate: 0.38,
-      });
-    }
-    else {
-      this.setState({
-        navRate: rate
-      });
-    }
+    this.setState({
+      navRate: Math.max(Math.min(rate, MAX_SIDE_PANEL_RATE), MIN_SIDE_PANEL_RATE),
+    });
   };
 
-  onMouseOver = (event) => {
-    if (!this.dragHandler) return;
-    const { top } = this.resizeRef.getBoundingClientRect();
-    const dragHandlerTop = event.pageY - top - DRAG_HANDLER_HEIGHT / 2;
-    this.setDragHandlerTop(dragHandlerTop);
+  onResizeMouseOver = (event) => {
+    if (!this.dragHandlerRef.current) return;
+    const { top } = this.resizeBarRef.current.getBoundingClientRect();
+    const dragHandlerRefTop = event.pageY - top - DRAG_HANDLER_HEIGHT / 2;
+    this.setDragHandlerTop(dragHandlerRefTop);
   };
 
   setDragHandlerTop = (top) => {
-    this.dragHandler.style.top = top + 'px';
+    this.dragHandlerRef.current.style.top = top + 'px';
   };
 
-  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 '';
-  };
-
-  UNSAFE_componentWillMount() {
-    let rate = this.getCookie('navRate');
-    if (rate) {
-      this.setState({
-        navRate: rate,
-      });
-    }
-  }
-
   render() {
     const { currentMode, isTreePanelShown } = this.props;
     const { navRate, inResizing } = this.state;
@@ -198,16 +157,14 @@ class DirColumnView extends React.Component {
               selectedDirentList={this.props.selectedDirentList}
               onItemsMove={this.props.onItemsMove}
             />
-            <div
-              className="dir-content-resize"
-              ref={ref => this.resizeRef = ref}
-              style={{ left: `calc(${navRate ? navRate * 100 + '%' : '25%'} - 1px)` }}
-              onMouseDown={this.onResizeMouseDown}
-              onMouseOver={this.onMouseOver}
-            >
-              <div className="line"></div>
-              <div className="drag-handler" ref={ref => this.dragHandler = ref} style={{ height: DRAG_HANDLER_HEIGHT }}></div>
-            </div>
+            <ResizeBar
+              resizeBarRef={this.resizeBarRef}
+              dragHandlerRef={this.dragHandlerRef}
+              resizeBarStyle={{ left: `calc(${navRate ? navRate * 100 + '%' : '25%'} - 1px)` }}
+              dragHandlerStyle={{ height: DRAG_HANDLER_HEIGHT }}
+              onResizeMouseDown={this.onResizeMouseDown}
+              onResizeMouseOver={this.onResizeMouseOver}
+            />
           </>
         )}
         <div className="dir-content-main" style={{userSelect: select, flex: mainFlex}} onScroll={this.props.isViewFile ? () => {} : this.props.onItemsScroll}>

frontend/src/components/resize-bar/constants.js

@@ -0,0 +1,4 @@
+export const DRAG_HANDLER_HEIGHT = 26;
+export const INIT_SIDE_PANEL_RATE = 0.22;
+export const MAX_SIDE_PANEL_RATE = 0.40;
+export const MIN_SIDE_PANEL_RATE = 0.15;

frontend/src/components/resize-bar/index.css

@@ -0,0 +1,43 @@
+.resize-bar {
+  height: 100%;
+  width: 6px;
+  position: absolute;
+  top: 0;
+  z-index: 8;
+  opacity: 0;
+  transition-duration: .2s;
+  transition-property: opacity;
+}
+
+.resize-bar:hover {
+  opacity: 1;
+  cursor: col-resize;
+}
+
+.resize-bar .resize-bar-line {
+  background-color: #aaa;
+  height: 100%;
+  width: 2px;
+  display: none;
+  user-select: none;
+}
+
+.resize-bar:hover .resize-bar-line {
+  display: block;
+}
+
+.resize-bar .resize-bar-drag-handler {
+  background: #2d7ff9;
+  border-radius: 10px;
+  margin-left: 1px;
+  position: absolute;
+  transform: translate(-50%);
+  width: 6px;
+  display: none;
+  z-index: 1;
+  user-select: none;
+}
+
+.resize-bar:hover .resize-bar-drag-handler {
+  display: block;
+}

frontend/src/components/resize-bar/index.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './index.css';
+
+function ResizeBar(props) {
+  return (
+    <div
+      className="resize-bar"
+      ref={props.resizeBarRef}
+      style={props.resizeBarStyle}
+      onMouseDown={props.onResizeMouseDown}
+      onMouseOver={props.onResizeMouseOver}
+    >
+      <div className="resize-bar-line"></div>
+      <div className="resize-bar-drag-handler" ref={props.dragHandlerRef} style={props.dragHandlerStyle}></div>
+    </div>
+  );
+}
+
+ResizeBar.propTypes = {
+  resizeBarRef: PropTypes.object.isRequired,
+  resizeBarStyle: PropTypes.object.isRequired,
+  dragHandlerRef: PropTypes.object.isRequired,
+  dragHandlerStyle: PropTypes.object.isRequired,
+  onResizeMouseDown: PropTypes.func.isRequired,
+  onResizeMouseOver: PropTypes.func.isRequired,
+};
+
+export default ResizeBar;

frontend/src/components/side-panel.js

@@ -12,6 +12,7 @@ const propTypes = {
   onCloseSidePanel: PropTypes.func,
   tabItemClick: PropTypes.func,
   children: PropTypes.object,
+  style: PropTypes.object,
   isSidePanelFolded: PropTypes.bool,
   toggleFoldSideNav: PropTypes.func
 };
@@ -19,10 +20,12 @@ const propTypes = {
 class SidePanel extends React.Component {
 
   render() {
-    const { children, isSidePanelFolded } = this.props;
-    const style = isSidePanelFolded ? { flexBasis: SIDE_PANEL_FOLDED_WIDTH } : {};
+    const { children, isSidePanelFolded, style } = this.props;
     return (
-      <div className={classnames('side-panel', { 'side-panel-folded': isSidePanelFolded, 'left-zero': !this.props.isSidePanelClosed })} style={style}>
+      <div
+        className={classnames('side-panel', {'side-panel-folded': isSidePanelFolded, 'left-zero': !this.props.isSidePanelClosed})}
+        style={isSidePanelFolded ? { flexBasis: SIDE_PANEL_FOLDED_WIDTH } : style}
+      >
         <MediaQuery query="(max-width: 767.8px)">
           <div className='side-panel-north'>
             <Logo onCloseSidePanel={this.props.onCloseSidePanel} />