@lemon-fe/kits 1.0.0-105 → 1.0.0-106

package/es/components/DataGrid/cell-editors/Number.js

@@ -52,7 +52,7 @@ export default /*#__PURE__*/forwardRef(function NumberEditor(props, ref) {
       setValue = _useState2[1];
 
   var elm = useRef(null);
-  var dirty = useRef(false);
+  var dirty = useRef(!!props.charPress);
   useEffect(function () {
     if (elm.current === null) {
       return;

package/es/components/Layout/index.d.ts

@@ -25,7 +25,7 @@ interface Props {
     body?: ReactNode;
     onCollapse?: (collapsed: boolean) => void;
     /**
-     * @description 需要显示tabbar时使用
+     * @deprecated 请自行使用TabBar以及Section处理
      */
     tabs?: Tab[];
     activeKey?: string;

package/es/components/Layout/index.js

@@ -24,6 +24,7 @@ import React, { useState } from 'react';
 import classNames from 'classnames';
 import { Spin, Tabs } from 'antd';
 import { get } from 'lodash';
+import { Resizable } from 'react-resizable';
 import { mapChildren, prefixClassName } from "../utils";
 var prefix = prefixClassName('layout');
 
@@ -32,16 +33,48 @@ var getKey = function getKey(tab) {
 };
 
 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(prefix('left'), _defineProperty({}, prefix("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: prefix('left-resizable')
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: viewWidth
+    },
+    className: classNames(prefix('left'), (_classNames = {}, _defineProperty(_classNames, prefix("left-collapsed"), collapsed), _defineProperty(_classNames, prefix("left-resizing"), dragging), _classNames))
   }, /*#__PURE__*/React.createElement("div", {
     className: prefix("left-body")
   }, /*#__PURE__*/React.createElement("div", {
@@ -94,7 +127,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) {

package/es/components/Layout/index.less

@@ -31,29 +31,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 {
@@ -82,10 +86,6 @@
       }
     }
 
-    &-collapsed &-body {
-      width: 0;
-    }
-
     &-collapsed &-collapse {
       transform: rotateY(180deg);
     }

package/es/components/SiderTree/TreeNodeTitle.js

@@ -76,7 +76,7 @@ export default function TreeNodeTitle(props) {
   }, others || operation.onAdd ? /*#__PURE__*/React.createElement(Popover, {
     overlayClassName: "".concat(prefixCls, "-menu-popover"),
     placement: "bottomLeft",
-    visible: visible,
+    open: visible,
     trigger: "click",
     content: /*#__PURE__*/React.createElement("div", {
       onClick: function onClick() {
@@ -87,7 +87,7 @@ export default function TreeNodeTitle(props) {
         return operation.onAdd(item);
       }
     }, "\u65B0\u589E")) : null, others),
-    onVisibleChange: setVisible
+    onOpenChange: setVisible
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames("".concat(prefixCls, "-title-operators-item"), _defineProperty({}, "".concat(prefixCls, "-title-operators-item-active"), visible)),
     onClick: function onClick() {

package/es/components/SiderTree/index.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 import { type TabsProps, type TreeProps } from 'antd';
 import type { TreeData, OperationType } from './typings';
-interface Props<KeyType> extends Omit<TreeProps, 'onSelect' | 'selectedKeys' | 'defaultSelectedKeys' | 'defaultExpandAll' | 'defaultExpandedKeys' | 'prefixCls'> {
+interface Props<KeyType> extends Omit<TreeProps, 'onSelect' | 'selectedKeys' | 'defaultSelectedKeys' | 'defaultExpandAll' | 'defaultExpandedKeys' | 'prefixCls' | 'height'> {
     data?: TreeData<KeyType>[];
     showSearch?: boolean;
     placeholder?: string;
@@ -15,6 +15,7 @@ interface Props<KeyType> extends Omit<TreeProps, 'onSelect' | 'selectedKeys' | '
     defaultExpandAll?: boolean;
     defaultExpandedKeys?: KeyType[];
     active?: boolean;
+    height?: number | 'auto';
 }
 declare function SiderTreeTabs(props: {
     tabs: {

package/es/components/SiderTree/index.js

@@ -1,5 +1,5 @@
 var _excluded = ["tabs", "children"],
-    _excluded2 = ["data", "showSearch", "placeholder", "onSelect", "filterNode", "operation", "header", "footer"];
+    _excluded2 = ["data", "showSearch", "placeholder", "onSelect", "filterNode", "operation", "header", "footer", "height"];
 
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
@@ -29,11 +29,12 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 import React, { useMemo, useState } from 'react';
 import { useDebounce } from '@lemon-fe/hooks';
+import ResizeObserver from 'rc-resize-observer';
 import { Input, Tabs, Tree } from 'antd';
 import { PREFIX_CLS } from "../../constants";
 import TreeNodeTitle from "./TreeNodeTitle";
 import Icons from "../Icons";
-import { mapChildren } from "../utils";
+import { mapChildren, prefixClassName } from "../utils";
 import empty from "./empty.png";
 
 function SiderTreeTabs(props) {
@@ -57,6 +58,7 @@ function SiderTreeTabs(props) {
   }));
 }
 
+var prefix = prefixClassName('tree');
 export default function SiderTree(props) {
   var _props$data = props.data,
       mData = _props$data === void 0 ? [] : _props$data,
@@ -67,15 +69,19 @@ export default function SiderTree(props) {
       operation = props.operation,
       header = props.header,
       footer = props.footer,
+      heightProp = props.height,
       restProps = _objectWithoutProperties(props, _excluded2);
 
-  var prefixCls = "".concat(PREFIX_CLS, "-tree");
-
   var _useState = useState(''),
       _useState2 = _slicedToArray(_useState, 2),
       keywords = _useState2[0],
       setKeywords = _useState2[1];
 
+  var _useState3 = useState(heightProp !== 'auto' ? heightProp : 0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      height = _useState4[0],
+      setHeight = _useState4[1];
+
   var tree = useMemo(function () {
     var list = mData;
 
@@ -98,7 +104,7 @@ export default function SiderTree(props) {
         title: /*#__PURE__*/React.createElement(TreeNodeTitle, {
           operation: operation,
           node: item,
-          prefixCls: prefixCls
+          prefixCls: prefix()
         })
       }];
     }));
@@ -141,25 +147,21 @@ export default function SiderTree(props) {
     });
   }
 
-  return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-wrapper")
-  }, !!mHeader && /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-header")
-  }, mHeader), /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-body")
-  }, tree.length <= 0 ? /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-empty")
+  var bodyContent = tree.length <= 0 ? /*#__PURE__*/React.createElement("div", {
+    className: prefix('empty')
   }, /*#__PURE__*/React.createElement("img", {
     src: empty
   }), /*#__PURE__*/React.createElement("div", null, "\u6682\u65E0\u6570\u636E")) : /*#__PURE__*/React.createElement(Tree, _extends({
     treeData: tree,
     itemHeight: 28,
     showLine: true,
-    onSelect: function onSelect(selectedKeys, info) {
+    height: height,
+    onSelect: function onSelect(_, info) {
       if (_onSelect) {
         _onSelect(info.node.data, info);
       }
     },
+    blockNode: true,
     switcherIcon: function switcherIcon(_ref) {
       var expanded = _ref.expanded,
           isLeaf = _ref.isLeaf;
@@ -213,8 +215,24 @@ export default function SiderTree(props) {
         d: "M7 3v7H6V3z"
       })));
     }
-  }, restProps))), !!footer && /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-footer")
+  }, restProps));
+  return /*#__PURE__*/React.createElement("div", {
+    className: prefix('wrapper')
+  }, !!mHeader && /*#__PURE__*/React.createElement("div", {
+    className: prefix('header')
+  }, mHeader), heightProp === 'auto' ? /*#__PURE__*/React.createElement(ResizeObserver, {
+    onResize: function onResize(e) {
+      return setHeight(e.height);
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: prefix('body'),
+    style: {
+      flex: 1
+    }
+  }, bodyContent)) : /*#__PURE__*/React.createElement("div", {
+    className: prefix('body')
+  }, bodyContent), !!footer && /*#__PURE__*/React.createElement("div", {
+    className: prefix('footer')
   }, footer));
 }
 SiderTree.Tabs = SiderTreeTabs;

package/es/components/SiderTree/index.less

@@ -74,7 +74,6 @@
       }
 
       &-treenode {
-        display: flex;
         align-items: center;
         height: @treeNodeHeight;
         padding-bottom: 0;
@@ -98,14 +97,15 @@
         align-items: center;
         min-width: 0;
         padding: 0;
+        overflow-x: hidden;
       }
 
       &-switcher {
         position: relative;
         display: flex;
         flex: none;
-        justify-content: center;
         align-items: center;
+        justify-content: center;
         width: @indentWidth;
         height: @treeNodeHeight;
         margin: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lemon-fe/kits",
-  "version": "1.0.0-105",
+  "version": "1.0.0-106",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",
@@ -73,6 +73,7 @@
     "@types/react": "^18.0.18",
     "@types/react-color": "^3.0.6",
     "@types/react-dom": "^18.0.6",
+    "@types/react-resizable": "^3.0.4",
     "@types/react-router": "^5.0.0",
     "@types/react-router-dom": "^5.0.0",
     "@types/shallowequal": "^1.1.1",