@lemon-fe/components 0.0.32 → 0.1.0

package/es/Layout/index.less

@@ -3,48 +3,92 @@
   display: flex;
   flex-direction: column;
   min-height: 100%;
+  padding: 0 @space;
   background: #f2f2f2;
 
   &-header {
-    padding: (@space - 3) @space 0;
-
-    .@{prefixCls}-actions {
-      display: inline-flex;
-      align-items: center;
-      height: 22px;
-    }
+    padding: @space 0;
   }
 
   &-content {
     display: flex;
     flex: 1;
-    padding: @space;
-  }
+    background-color: #fff;
+    background-clip: content-box;
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
 
-  &-header + &-content {
-    padding-top: @space - 3;
+    &:first-child {
+      margin-top: @space;
+    }
   }
 
   &-left {
-    display: flex;
-    flex: 0 0 242px;
-    flex-direction: column;
-    min-width: 0;
-    margin-right: @space;
-    overflow: auto;
-  }
+    position: relative;
 
-  &-main {
-    flex: 1;
-    min-width: 0;
+    &-body {
+      width: 242px;
+      height: 100%;
+      overflow-x: hidden;
+      transition: width 0.2s;
+    }
 
-    & > .@{prefixCls}-section:not(:first-child) {
-      margin-top: @space;
+    &-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: '';
+      }
     }
 
-    & > .@{prefixCls}-section-with-actions:not(:first-child) {
-      margin-top: @space / 2;
+    &-collapse {
+      position: absolute;
+      top: 16px;
+      right: 0;
+      z-index: 100;
+      box-sizing: border-box;
+      width: 16px;
+      height: 32px;
+      font-size: 14px;
+      line-height: 32px;
+      text-align: center;
+      text-decoration: underline overline;
+      background-color: #fff;
+      border: 1px solid #e6e6e6;
+      border-right: none;
+      border-top-left-radius: 4px;
+      border-bottom-left-radius: 4px;
+      transform-origin: 100% 50%;
+      cursor: pointer;
+      transition: transform 0.3s;
+
+      &:hover {
+        color: @primary-color;
+      }
     }
+
+    &-collapsed &-body {
+      width: 0;
+    }
+
+    &-collapsed &-collapse {
+      transform: rotateY(180deg);
+    }
+  }
+
+  &-main {
+    flex: 1;
+    min-width: 0;
   }
 
   &-footer {

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

@@ -1,24 +1,6 @@
 .@{prefixCls}-nav-menu {
   &-pop {
-    padding-top: 0 !important;
-
-    .ant-popover-arrow {
-      display: none;
-    }
-
-    .ant-popover-inner {
-      position: relative;
-      width: 160px;
-      padding: 8px 0;
-      border-radius: 8px;
-      border-image: linear-gradient(147deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1;
-      box-shadow: 0 12px 48px 16px rgba(0, 0, 0, 0.03), 0 9px 28px 0 rgba(0, 0, 0, 0.05),
-        0 6px 16px -8px rgba(0, 0, 0, 0.08);
-    }
-
-    .ant-popover-inner-content {
-      padding: 0;
-    }
+    .popover(160px);
   }
 
   &-tabs {
@@ -26,19 +8,7 @@
   }
 
   &-tab {
-    position: relative;
-    box-sizing: border-box;
-    width: 100%;
-    height: 36px;
-    padding: 0 16px;
-    overflow: hidden;
-    color: #333;
-    font-size: 14px;
-    line-height: 36px;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    cursor: pointer;
-    transition: background-color 0.2s;
+    .popoverItem();
 
     &:hover {
       background-color: #eee;

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

@@ -167,7 +167,7 @@
 
       & > span {
         margin-top: 24px;
-        color: #333333;
+        color: #333;
         font-weight: 400;
         font-size: 14px;
         line-height: 22px;
@@ -263,7 +263,7 @@
 
   &-other-title {
     margin: 0 0 8px 16px;
-    color: #000000;
+    color: #000;
     font-weight: 400;
     font-size: 14px;
     line-height: 22px;

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

@@ -21,40 +21,10 @@
   line-height: 1;
 
   &-tab {
-    position: relative;
-    width: 100%;
-    height: 36px;
-    color: #333;
-    font-size: 14px;
-    line-height: 36px;
-    text-align: center;
-    cursor: pointer;
-    transition: background-color 0.2s;
-
-    &:hover {
-      background-color: #eee;
-    }
+    .popoverItem();
   }
 
   &-pop {
-    padding-top: 0 !important;
-
-    .ant-popover-arrow {
-      display: none;
-    }
-
-    .ant-popover-inner {
-      position: relative;
-      width: 120px;
-      padding: 8px 0;
-      border-radius: 8px;
-      border-image: linear-gradient(147deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1;
-      box-shadow: 0 12px 48px 16px rgba(0, 0, 0, 0.03), 0 9px 28px 0 rgba(0, 0, 0, 0.05),
-        0 6px 16px -8px rgba(0, 0, 0, 0.08);
-    }
-
-    .ant-popover-inner-content {
-      padding: 0;
-    }
+    .popover();
   }
 }

package/es/Portal/index.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+declare type ContentType = ReactNode | null;
+declare function PortalHost(props: {
+    children: ContentType;
+}): JSX.Element;
+declare function Portal(props: {
+    children?: ContentType;
+}): JSX.Element | null;
+declare namespace Portal {
+    var Host: typeof PortalHost;
+}
+export default Portal;

package/es/Portal/index.js

@@ -0,0 +1,72 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React from 'react';
+import { createContext, memo, useContext, useEffect, useMemo, useState } from 'react';
+import { uniqueId } from 'lodash';
+var Slot = /*#__PURE__*/memo(function Content(props) {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, props.children);
+});
+var Context = /*#__PURE__*/createContext(null);
+
+function PortalHost(props) {
+  var children = props.children;
+
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      content = _useState2[0],
+      setContent = _useState2[1];
+
+  var portal = useMemo(function () {
+    return {
+      add: function add(key, node) {
+        setContent({
+          key: key,
+          node: node
+        });
+      },
+      clear: function clear(key) {
+        setContent(function (prev) {
+          if ((prev === null || prev === void 0 ? void 0 : prev.key) === key) {
+            return null;
+          }
+
+          return prev;
+        });
+      }
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(Context.Provider, {
+    value: portal
+  }, /*#__PURE__*/React.createElement(Slot, null, content ? content.node : null), /*#__PURE__*/React.createElement(Slot, null, children));
+}
+
+function Portal(props) {
+  var _props$children = props.children,
+      children = _props$children === void 0 ? null : _props$children;
+  var portal = useContext(Context);
+  var key = useMemo(function () {
+    return uniqueId('portal-');
+  }, []);
+  useEffect(function () {
+    if (portal !== null) {
+      portal.add(key, children);
+      return function () {
+        portal.clear(key);
+      };
+    }
+  }, [portal, key, children]);
+  return portal ? null : /*#__PURE__*/React.createElement(React.Fragment, null, children);
+}
+
+Portal.Host = PortalHost;
+export default Portal;

package/es/Section/TabBar.d.ts

@@ -0,0 +1,12 @@
+import type { MouseEvent } from 'react';
+interface Props {
+    prefixCls: string;
+    tabs: {
+        title?: string;
+        key: string;
+    }[];
+    activeKey?: string;
+    onTabClick: (key: string, index: number, e: MouseEvent) => void;
+}
+export default function TabBar(props: Props): JSX.Element;
+export {};

package/es/Section/TabBar.js

@@ -0,0 +1,48 @@
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React, { useEffect, useState } from 'react';
+import classNames from 'classnames';
+export default function TabBar(props) {
+  var prefixCls = props.prefixCls,
+      tabs = props.tabs,
+      onTabClick = props.onTabClick,
+      activeKey = props.activeKey;
+
+  var getKey = function getKey() {
+    return activeKey || (tabs.length > 0 ? tabs[0].key : undefined);
+  };
+
+  var _useState = useState(getKey()),
+      _useState2 = _slicedToArray(_useState, 2),
+      key = _useState2[0],
+      setKey = _useState2[1];
+
+  useEffect(function () {
+    setKey(getKey());
+  }, [activeKey]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-tab")
+  }, tabs.map(function (_, index) {
+    var tab = tabs[index];
+    return /*#__PURE__*/React.createElement("div", {
+      key: tab.key,
+      className: classNames("".concat(prefixCls, "-tab-item"), _defineProperty({}, "".concat(prefixCls, "-tab-item-active"), key === tab.key)),
+      onClick: function onClick(e) {
+        setKey(tab.key);
+        onTabClick(tab.key, index, e);
+      }
+    }, tab.title);
+  }));
+}

package/es/Section/index.js

@@ -7,7 +7,9 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 import React from 'react';
 import classNames from 'classnames';
 import { Tabs } from 'antd';
+import { mapChildren } from '../utils';
 import { PREFIX_CLS } from '../constants';
+import TabBar from './TabBar';
 export default function Section(props) {
   var _classNames;
 
@@ -22,7 +24,7 @@ export default function Section(props) {
       actions = props.actions,
       flex = props.flex,
       activeKey = props.activeKey,
-      onTabClick = props.onTabClick;
+      _onTabClick = props.onTabClick;
   var prefixCls = PREFIX_CLS + '-section';
   var containerStyle = style;
 
@@ -30,69 +32,36 @@ export default function Section(props) {
     containerStyle = _objectSpread({
       flex: typeof flex === 'number' ? flex : 1
     }, containerStyle);
-  } // 不使用Children.map的原因是由于它会给子节点生成一个key与tabs的activeTabKey无法对应
-
-
-  var mapChildren = function mapChildren(children, cb) {
-    var nodes = [];
-
-    if (Array.isArray(children)) {
-      nodes = children;
-    } else {
-      nodes = [children];
-    }
-
-    return nodes.filter(function (item) {
-      return item !== null;
-    }).map(cb);
-  };
+  }
 
   var hasActions = !!actions;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(prefixCls, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-").concat(type), !!type), _defineProperty(_classNames, "".concat(prefixCls, "-flex"), !!flex), _defineProperty(_classNames, "".concat(prefixCls, "-with-actions"), hasActions), _classNames), className),
+    className: classNames(prefixCls, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-").concat(type), !!type), _defineProperty(_classNames, "".concat(prefixCls, "-flex"), !!flex), _classNames), className),
     style: containerStyle
-  }, !!title || hasActions ? /*#__PURE__*/React.createElement("div", {
+  }, title || hasActions ? /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-header")
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-title")
-  }, title), actions) : null, tabs !== undefined && tabs.length > 0 ? /*#__PURE__*/React.createElement(Tabs, {
+  }, title), actions) : null, tabs !== undefined && tabs.length > 0 ? Array.isArray(children) && children.length > 1 ? /*#__PURE__*/React.createElement(Tabs, {
     activeKey: activeKey,
-    onTabClick: onTabClick,
+    onTabClick: _onTabClick,
     renderTabBar: function renderTabBar(tabProps) {
-      var activeKey = tabProps.activeKey,
-          onTabClick = tabProps.onTabClick;
-      var active = tabs.findIndex(function (item) {
-        return item.key === activeKey;
-      });
-      return /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-tab")
-      }, tabs.map(function (_, index) {
-        var _classNames2;
-
-        var tab = tabs[index];
-        var key = tab.key;
-        return /*#__PURE__*/React.createElement("div", {
-          key: key,
-          className: classNames("".concat(prefixCls, "-tab-item"), (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-tab-item-active"), active === index), _defineProperty(_classNames2, "".concat(prefixCls, "-tab-item-active-left"), index === active - 1), _defineProperty(_classNames2, "".concat(prefixCls, "-tab-item-active-right"), index === active + 1), _classNames2)),
-          onClick: function onClick(e) {
-            if (key !== null) {
-              onTabClick(key, e);
-            }
+      var mKey = tabProps.activeKey,
+          mClick = tabProps.onTabClick;
+      return /*#__PURE__*/React.createElement(TabBar, {
+        activeKey: mKey,
+        tabs: tabs,
+        prefixCls: prefixCls,
+        onTabClick: function onTabClick(key, index, e) {
+          mClick(key, e);
 
-            if (key !== activeKey) {
-              if (onTabChange) {
-                onTabChange(tab.key, index);
-              }
+          if (key !== mKey) {
+            if (onTabChange) {
+              onTabChange(key, index);
             }
           }
-        }, /*#__PURE__*/React.createElement("div", {
-          className: "".concat(prefixCls, "-tab-item-arc-left")
-        }), /*#__PURE__*/React.createElement("div", {
-          className: "".concat(prefixCls, "-tab-item-content")
-        }, tab.title), /*#__PURE__*/React.createElement("div", {
-          className: "".concat(prefixCls, "-tab-item-arc-right")
-        }));
-      }));
+        }
+      });
     }
   }, mapChildren(children, function (child, index) {
     var _tabs$index = tabs[index],
@@ -104,7 +73,23 @@ export default function Section(props) {
       className: "".concat(prefixCls, "-body"),
       style: bodyStyle
     }, child);
-  })) : /*#__PURE__*/React.createElement("div", {
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TabBar, {
+    activeKey: activeKey,
+    tabs: tabs,
+    prefixCls: prefixCls,
+    onTabClick: function onTabClick(key, index, e) {
+      if (_onTabClick) {
+        _onTabClick(key, e);
+      }
+
+      if (key !== activeKey && onTabChange) {
+        onTabChange(key, index);
+      }
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-body"),
+    style: bodyStyle
+  }, children)) : /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-body"),
     style: bodyStyle
   }, children));