@lemon-fe/components 0.0.1 → 0.0.2

package/es/BaseTable/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseTableProps as Props } from './typings';
 declare function BaseTable<T extends Record<string, any>>(props: Props<T>): JSX.Element;
 declare namespace BaseTable {

package/es/DurationPicker/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { Moment } from 'moment';
 import type { RangePickerProps } from 'antd/lib/date-picker';
 declare type Value = {

package/es/EditableTable/EditableTableFormItem.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FormItemProps } from 'antd';
 import { EditableTableProps } from './typings';
 declare type Props<T> = Pick<FormItemProps, 'name' | 'label' | 'labelCol' | 'wrapperCol' | 'className' | 'required' | 'style' | 'colon'> & EditableTableProps<T>;

package/es/Filter/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { ComponentOption, FilterProps } from './typings';
 declare function Filter<T extends Record<string, any> = Record<string, any>>(props: FilterProps<T>): JSX.Element;
 declare namespace Filter {

package/es/MainFramework/components/Menu/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { MenuItem } from '../../typings';
 interface Props {
     data: MenuItem[];

package/es/MainFramework/components/Menu/index.js

@@ -12,10 +12,33 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import React, { useMemo, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import classNames from 'classnames';
 import { useDebounce } from '@lemon-fe/hooks';
 import { PREFIX_CLS as prefixCls } from '../../../constants';
+var drawerIcon = /*#__PURE__*/React.createElement("svg", {
+  width: "20",
+  height: "20",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React.createElement("g", {
+  fill: "none",
+  fillRule: "evenodd"
+}, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("g", {
+  fill: "currentColor"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M4.75,5 L15.25,5 C15.6642136,5 16,5.33578644 16,5.75 C16,6.16421356 15.6642136,6.5 15.25,6.5 L4.75,6.5 C4.33578644,6.5 4,6.16421356 4,5.75 C4,5.33578644 4.33578644,5 4.75,5 Z",
+  opacity: ".7",
+  transform: "translate(-274.000000, -586.000000) translate(274.000000, 586.000000)"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M4.75,9 L15.25,9 C15.6642136,9 16,9.33578644 16,9.75 C16,10.1642136 15.6642136,10.5 15.25,10.5 L4.75,10.5 C4.33578644,10.5 4,10.1642136 4,9.75 C4,9.33578644 4.33578644,9 4.75,9 Z",
+  opacity: ".7",
+  transform: "translate(-274.000000, -586.000000) translate(274.000000, 586.000000)"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M4.75,13 L15.25,13 C15.6642136,13 16,13.3357864 16,13.75 C16,14.1642136 15.6642136,14.5 15.25,14.5 L4.75,14.5 C4.33578644,14.5 4,14.1642136 4,13.75 C4,13.3357864 4.33578644,13 4.75,13 Z",
+  opacity: ".7",
+  transform: "translate(-274.000000, -586.000000) translate(274.000000, 586.000000)"
+})))));
 export default function Menu(props) {
   var menus = props.data,
       onClick = props.onClick;
@@ -27,16 +50,22 @@ export default function Menu(props) {
       setPopover = _useState2[1];
 
   var popup = useRef(null);
+  var drawer = useRef(null);
 
   var _useState3 = useState(false),
       _useState4 = _slicedToArray(_useState3, 2),
       collapsed = _useState4[0],
       setCollapsed = _useState4[1];
 
-  var _useState5 = useState(0),
+  var _useState5 = useState(false),
       _useState6 = _slicedToArray(_useState5, 2),
-      top = _useState6[0],
-      setTop = _useState6[1];
+      visible = _useState6[0],
+      setVisible = _useState6[1];
+
+  var _useState7 = useState(0),
+      _useState8 = _slicedToArray(_useState7, 2),
+      top = _useState8[0],
+      setTop = _useState8[1];
 
   var activeMenu = useMemo(function () {
     var check = function check(path) {
@@ -54,7 +83,10 @@ export default function Menu(props) {
           topPath = _menus$i.path;
 
       if (check(topPath)) {
-        return i;
+        return {
+          path: [i],
+          key: topPath
+        };
       }
 
       for (var j = 0; j < subMenus.length; j += 1) {
@@ -64,12 +96,18 @@ export default function Menu(props) {
             items = _subMenus$j$children === void 0 ? [] : _subMenus$j$children;
 
         if (check(subPath)) {
-          return i;
+          return {
+            path: [i, j],
+            key: subPath
+          };
         }
 
         for (var k = 0; k < items.length; k += 1) {
           if (check(items[k].path)) {
-            return i;
+            return {
+              path: [i, j, k],
+              key: items[k].path
+            };
           }
         }
       }
@@ -88,13 +126,6 @@ export default function Menu(props) {
     }
   };
 
-  var handleClick = function handleClick(item) {
-    if (item.path) {
-      setPopover(null);
-      onClick(item);
-    }
-  };
-
   var handleMouseEnter = useDebounce(openMenu, 200);
 
   var toggleMenu = function toggleMenu() {
@@ -120,16 +151,119 @@ export default function Menu(props) {
     }
   };
 
+  useEffect(function () {
+    if (!visible) {
+      return;
+    }
+
+    var target = drawer.current;
+
+    if (target !== null) {
+      var handler = function handler(e) {
+        if (!target.contains(e.target)) {
+          closeDrawer();
+        }
+      };
+
+      requestAnimationFrame(function () {
+        window.addEventListener('click', handler);
+      });
+      return function () {
+        window.removeEventListener('click', handler);
+      };
+    }
+  }, [visible]);
+
+  var openDrawer = function openDrawer() {
+    setVisible(true);
+    setTimeout(function () {
+      var _drawer$current;
+
+      (_drawer$current = drawer.current) === null || _drawer$current === void 0 ? void 0 : _drawer$current.classList.add('animated');
+    }, 16);
+  };
+
+  var closeDrawer = function closeDrawer() {
+    if (drawer.current) {
+      drawer.current.classList.remove('animated');
+
+      var handler = function handler() {
+        var _drawer$current2;
+
+        (_drawer$current2 = drawer.current) === null || _drawer$current2 === void 0 ? void 0 : _drawer$current2.removeEventListener('transitionend', handler);
+        setVisible(false);
+      };
+
+      drawer.current.addEventListener('transitionend', handler);
+    }
+  };
+
+  var handleClick = function handleClick(item) {
+    if (item.path) {
+      onClick(item);
+      closeDrawer();
+      closeMenu();
+    }
+  };
+
   var renderItem = function renderItem(item, index) {
     return /*#__PURE__*/React.createElement("div", {
       key: index,
-      className: "".concat(prefixCls, "-menu-item"),
+      className: classNames("".concat(prefixCls, "-menu-item"), _defineProperty({}, "".concat(prefixCls, "-menu-active"), activeMenu !== undefined && activeMenu.key === item.path)),
       onClick: function onClick() {
         return handleClick(item);
       }
     }, item.name);
   };
 
+  var renderDrawerItems = function renderDrawerItems() {
+    var cols = [[], [], []];
+    menus.forEach(function (item, index) {
+      cols[index % 3].push(item);
+    });
+    return cols.map(function (items) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-menu-drawer-col")
+      }, items.map(function (item) {
+        var list = [/*#__PURE__*/React.createElement("div", {
+          className: "".concat(prefixCls, "-menu-drawer-1"),
+          key: item.name,
+          onClick: function onClick() {
+            return handleClick(item);
+          }
+        }, item.name)];
+
+        if (item.children) {
+          item.children.forEach(function (subItem) {
+            list.push( /*#__PURE__*/React.createElement("div", {
+              className: "".concat(prefixCls, "-menu-drawer-2"),
+              key: subItem.name,
+              onClick: function onClick() {
+                return handleClick(subItem);
+              }
+            }, subItem.name));
+
+            if (subItem.children) {
+              subItem.children.forEach(function (child) {
+                list.push( /*#__PURE__*/React.createElement("div", {
+                  className: classNames("".concat(prefixCls, "-menu-drawer-3"), _defineProperty({}, "".concat(prefixCls, "-menu-active"), activeMenu !== undefined && activeMenu.key === child.path)),
+                  key: child.name,
+                  onClick: function onClick() {
+                    return handleClick(child);
+                  }
+                }, child.name));
+              });
+            }
+          });
+        }
+
+        return /*#__PURE__*/React.createElement("div", {
+          className: "".concat(prefixCls, "-menu-drawer-block")
+        }, /*#__PURE__*/React.createElement("div", null, list));
+      }));
+    });
+  };
+
   return /*#__PURE__*/React.createElement("div", {
     className: classNames("".concat(prefixCls, "-menu"), _defineProperty({}, "".concat(prefixCls, "-menu-collapsed"), collapsed))
   }, /*#__PURE__*/React.createElement("div", {
@@ -171,7 +305,7 @@ export default function Menu(props) {
   }), /*#__PURE__*/React.createElement("path", {
     d: "M15,10 C15,10.4142136 14.6642136,10.75 14.25,10.75 L5,10.75 L5,10.75 L5,9.25 L14.25,9.25 C14.6642136,9.25 15,9.58578644 15,10 Z",
     fill: "currentColor",
-    "fill-rule": "nonzero",
+    fillRule: "nonzero",
     transform: "translate(-274.000000, -57.000000) translate(284.000000, 67.000000) scale(-1, 1) translate(-284.000000, -67.000000) translate(274.000000, 57.000000)"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M11.7426212,6.79290128 L5.32842371,6.79290128 L5.32842371,13.2070987",
@@ -182,11 +316,11 @@ export default function Menu(props) {
     strokeDasharray: "0,0",
     transform: "translate(-274.000000, -57.000000) translate(284.000000, 67.000000) scale(-1, 1) translate(-284.000000, -67.000000) translate(274.000000, 57.000000) translate(8.535522, 10.000000) rotate(-45.000000) translate(-8.535522, -10.000000)"
   })))))), menus.map(function (item, index) {
-    var _classNames2;
+    var _classNames4;
 
     return /*#__PURE__*/React.createElement("div", {
       key: index,
-      className: classNames("".concat(prefixCls, "-menu-top-item"), (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-menu-top-item-active"), index === activeMenu), _defineProperty(_classNames2, "".concat(prefixCls, "-menu-top-item-popover-active"), item === popover), _classNames2)),
+      className: classNames("".concat(prefixCls, "-menu-top-item"), (_classNames4 = {}, _defineProperty(_classNames4, "".concat(prefixCls, "-menu-top-item-active"), activeMenu !== undefined && activeMenu.path[0] === index), _defineProperty(_classNames4, "".concat(prefixCls, "-menu-top-item-popover-active"), item === popover), _classNames4)),
       onClick: function onClick() {
         return handleClick(item);
       },
@@ -199,5 +333,50 @@ export default function Menu(props) {
     }), /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-menu-title")
     }, item.name));
-  })));
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-gutter")
+  }), collapsed ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-top-item"),
+    onClick: openDrawer
+  }, drawerIcon) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-label")
+  }, "\u6CA1\u6709\u627E\u5230\u60F3\u8981\u7684\u529F\u80FD?"), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-more"),
+    onClick: openDrawer
+  }, drawerIcon, /*#__PURE__*/React.createElement("span", null, "\u67E5\u770B\u5168\u90E8")))), visible && /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-drawer"),
+    ref: drawer
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-drawer-header")
+  }, /*#__PURE__*/React.createElement("div", null, "\u67E5\u770B\u5168\u90E8"), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-drawer-close"),
+    onClick: closeDrawer
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "16",
+    height: "16",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd",
+    opacity: ".7"
+  }, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("g", {
+    transform: "translate(-1880.000000, -20.000000) translate(1880.000000, 20.000000)",
+    fill: "currentColor"
+  }, /*#__PURE__*/React.createElement("rect", {
+    transform: "translate(8.000000, 8.000000) rotate(-45.000000) translate(-8.000000, -8.000000)",
+    x: "7.25",
+    y: "1",
+    width: "1.5",
+    height: "14",
+    rx: ".75"
+  }), /*#__PURE__*/React.createElement("rect", {
+    transform: "translate(8.000000, 8.000000) scale(-1, 1) rotate(-45.000000) translate(-8.000000, -8.000000)",
+    x: "7.25",
+    y: "1",
+    width: "1.5",
+    height: "14",
+    rx: ".75"
+  }))))))), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-drawer-body")
+  }, renderDrawerItems())), document.body));
 }

package/es/MainFramework/components/Menu/index.less

@@ -1,3 +1,7 @@
+.transition() {
+  transition: background-color 0.2s;
+}
+
 .@{prefixCls}-menu {
   flex: 0 0 200px;
   min-width: 0;
@@ -14,6 +18,7 @@
     box-sizing: border-box;
     width: 100%;
     padding: 16px 0;
+    white-space: nowrap;
     background: #f2f2f2;
   }
 
@@ -45,15 +50,13 @@
     padding: 0 16px;
   }
 
-  &-collapsed &-title {
-    display: none;
-  }
-
   &-collapsed &-popup {
     left: 52px;
   }
 
   &-top-item {
+    display: flex;
+    align-items: center;
     box-sizing: border-box;
     height: 44px;
     margin: 0 12px;
@@ -61,10 +64,9 @@
     overflow: hidden;
     color: #333;
     font-size: 14px;
-    line-height: 44px;
     border-radius: 8px;
     cursor: pointer;
-    transition: background-color 0.2s;
+    .transition();
 
     &:hover,
     &-popover-active {
@@ -89,12 +91,10 @@
   }
 
   &-icon {
-    display: inline-block;
     width: 20px;
     height: 20px;
     margin-right: 8px;
     font-size: 16px;
-    vertical-align: middle;
     opacity: 0.7;
   }
 
@@ -103,11 +103,9 @@
   }
 
   &-title {
-    display: inline-block;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
-    vertical-align: middle;
   }
 
   &-popup {
@@ -120,6 +118,7 @@
     &-body {
       position: relative;
       z-index: 1;
+      display: flex;
       margin-left: 4px;
       padding: 8px;
       background: #f9f9f9;
@@ -128,7 +127,7 @@
         0 6px 16px -8px rgba(0, 0, 0, 0.08);
       transform: translate3d(-40px, 0, 0);
       opacity: 0;
-      transition: all 0.3s;
+      transition: all 0.2s;
     }
 
     &.animated &-body {
@@ -161,8 +160,7 @@
     width: 120px;
     height: 40px;
     padding: 0 16px;
-    color: #979797;
-    font-weight: 600;
+    color: rgba(51, 51, 51, 0.5);
     font-size: 14px;
     line-height: 40px;
   }
@@ -175,12 +173,12 @@
     width: 120px;
     height: 40px;
     padding: 0 16px;
-    color: rgba(51, 51, 51, 0.85);
+    color: rgba(51, 51, 51, 1);
     font-size: 14px;
     line-height: 40px;
     border-radius: 8px;
     cursor: pointer;
-    transition: background-color 0.2s;
+    .transition();
 
     &:hover {
       background-color: #e6e6e6;
@@ -202,4 +200,144 @@
       display: block;
     }
   }
+
+  &-gutter {
+    height: 1px;
+    margin: 12px 0 16px 12px;
+    background-color: rgba(196, 196, 196, 0.2);
+  }
+
+  &-collapsed &-gutter {
+    margin: 0 12px;
+  }
+
+  &-label {
+    margin: 0 0 12px 12px;
+    color: rgba(0, 0, 0, 0.5);
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  &-more {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: 107px;
+    height: 36px;
+    margin-left: 12px;
+    color: rgba(5, 96, 253, 1);
+    font-size: 14px;
+    text-align: center;
+    background-color: #fff;
+    border: 1px solid rgba(5, 96, 253, 1);
+    border-radius: 4px;
+    cursor: pointer;
+    user-select: none;
+    .transition();
+
+    &:hover {
+      background-color: rgba(222, 234, 255, 1);
+    }
+
+    & > span {
+      margin-left: 8px;
+    }
+  }
+
+  &-drawer {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 10;
+    width: 740px;
+    height: 100vh;
+    background-color: #fff;
+    box-shadow: 0 12px 48px 16px rgba(0, 0, 0, 0.03), 0 9px 28px 0 rgba(0, 0, 0, 0.05),
+      0px 6px 16px -8px rgba(0, 0, 0, 0.08);
+    transform: translate3d(60px, 0, 0);
+    opacity: 0;
+    transition: all 0.2s;
+
+    &.animated {
+      transform: translate3d(0, 0, 0);
+      opacity: 1;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 56px;
+      padding: 0 24px;
+      color: #333;
+      font-weight: 500;
+      font-size: 16px;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+    }
+
+    &-body {
+      display: flex;
+      padding: 16px;
+      overflow-x: hidden;
+      overflow-y: auto;
+    }
+
+    &-col {
+      width: 33.33333333%;
+    }
+
+    .item() {
+      height: 44px;
+      padding: 0 16px;
+      font-size: 14px;
+      line-height: 44px;
+    }
+
+    &-1 {
+      color: rgba(51, 51, 51, 1);
+      font-weight: 500;
+      .item();
+    }
+
+    &-2 {
+      color: rgba(51, 51, 51, 0.5);
+      font-weight: 500;
+      .item();
+    }
+
+    &-3 {
+      color: rgba(51, 51, 51, 1);
+      cursor: pointer;
+      .item();
+      .transition();
+
+      &:hover {
+        color: rgba(5, 96, 253, 1);
+        background-color: rgba(238, 238, 238, 1);
+      }
+    }
+
+    &-block {
+      padding: 8px;
+
+      & > div {
+        background-color: rgba(238, 238, 238, 0.5);
+        border-radius: 8px;
+      }
+    }
+
+    &-close {
+      cursor: pointer;
+
+      &:hover {
+        color: rgba(5, 96, 253, 1);
+      }
+    }
+  }
+
+  &-active {
+    color: rgba(5, 96, 253, 1);
+  }
 }

package/es/MainFramework/components/TabBar/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export default function TabBar<T extends {
     title: string;
 }>(props: {

package/es/SiderTree/TreeNodeTitle.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { OperationType, TreeData } from './typings';
 interface Props<T> {
     node: TreeData<T>;

package/es/Table/index.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type { TableProps } from './typings';
 export default function Table<RecordType extends Record<string, any>>(props: TableProps<RecordType>): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lemon-fe/components",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "> TODO: description",
   "author": "鲁盛杰 <lusj@cnlemon.net>",
   "homepage": "",
@@ -13,7 +13,7 @@
     "test": "echo \"Error: run tests from root\" && exit 1"
   },
   "dependencies": {
-    "@lemon-fe/hooks": "^0.0.1",
+    "@lemon-fe/hooks": "^0.0.2",
     "antd": "^4.17.0",
     "classnames": "^2.2.6",
     "lodash": "^4.17.21",
@@ -35,5 +35,6 @@
     "@types/color-string": "^1.5.2",
     "@types/lodash": "^4.14.179",
     "@types/react-resizable": "^1.7.4"
-  }
+  },
+  "gitHead": "fb99301b92d7fce50677a82ba546bf4309b33413"
 }