@lemon-fe/components 0.1.144 → 0.1.145

package/es/Layout/index.js

@@ -14,18 +14,48 @@ import React, { useState } from 'react';
 import classNames from 'classnames';
 import { Spin, Tabs } from 'antd';
 import { get } from 'lodash';
+import { Resizable } from 'react-resizable';
 import { PREFIX_CLS } from '../constants';
 import { mapChildren } from '../utils';
 var prefixCls = "".concat(PREFIX_CLS, "-layout");
 function Sider(props) {
+  var _classNames;
   var children = props.children,
     onCollapse = props.onCollapse;
-  var _useState = useState(false),
+  var _useState = useState(242),
     _useState2 = _slicedToArray(_useState, 2),
-    collapsed = _useState2[0],
-    setCollapsed = _useState2[1];
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(prefixCls, "-left"), _defineProperty({}, "".concat(prefixCls, "-left-collapsed"), collapsed))
+    width = _useState2[0],
+    setWidth = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    collapsed = _useState4[0],
+    setCollapsed = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    dragging = _useState6[0],
+    setDragging = _useState6[1];
+  var viewWidth = collapsed ? 0 : width;
+  return /*#__PURE__*/React.createElement(Resizable, {
+    axis: "x",
+    width: width,
+    height: 0,
+    onResizeStart: function onResizeStart() {
+      setDragging(true);
+    },
+    onResizeStop: function onResizeStop() {
+      setDragging(false);
+    },
+    onResize: function onResize(_, data) {
+      setWidth(data.size.width);
+    },
+    handle: /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-left-resizable")
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(prefixCls, "-left"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-left-collapsed"), collapsed), _defineProperty(_classNames, "".concat(prefixCls, "-left-resizing"), dragging), _classNames)),
+    style: {
+      width: viewWidth
+    }
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-left-body")
   }, /*#__PURE__*/React.createElement("div", {
@@ -78,7 +108,7 @@ function Sider(props) {
     strokeLinejoin: "round",
     strokeDasharray: "0,0",
     transform: "translate(2.828427, 2.121320) rotate(-45.000000) translate(-2.828427, -2.121320) "
-  }))))))));
+  })))))))));
 }
 function Content(props) {
   var left = props.left,

package/es/Layout/index.less

@@ -40,29 +40,33 @@
   &-left {
     position: relative;
 
+    &:not(&-resizing) {
+      transition: width 0.2s;
+    }
+
     &-body {
-      width: 242px;
       height: 100%;
       overflow-x: hidden;
-      transition: width 0.2s;
     }
 
     &-content {
       position: relative;
       display: flex;
       flex-direction: column;
-      width: 242px;
       height: 100%;
+    }
 
-      &::after {
-        position: absolute;
-        top: 0;
-        right: 0;
-        width: 1px;
-        height: 100%;
-        background-color: #e6e6e6;
-        content: '';
-      }
+    &-resizable {
+      position: absolute;
+      top: 0;
+      right: -8px;
+      box-sizing: border-box;
+      width: 17px;
+      height: 100%;
+      padding: 0 8px;
+      background-color: #e6e6e6;
+      background-clip: content-box;
+      cursor: col-resize;
     }
 
     &-collapse {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lemon-fe/components",
-  "version": "0.1.144",
+  "version": "0.1.145",
   "description": "> TODO: description",
   "author": "鲁盛杰 <lusj@cnlemon.net>",
   "homepage": "",