iglooform 2.3.8 → 2.3.12

package/lib/layout/header.js

@@ -0,0 +1,258 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("antd/es/avatar/style");
+
+var _avatar = _interopRequireDefault(require("antd/es/avatar"));
+
+require("antd/es/space/style");
+
+var _space = _interopRequireDefault(require("antd/es/space"));
+
+require("antd/es/col/style");
+
+var _col = _interopRequireDefault(require("antd/es/col"));
+
+require("antd/es/row/style");
+
+var _row = _interopRequireDefault(require("antd/es/row"));
+
+require("antd/es/badge/style");
+
+var _badge = _interopRequireDefault(require("antd/es/badge"));
+
+require("antd/es/grid/style");
+
+var _grid = _interopRequireDefault(require("antd/es/grid"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _react = require("react");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _typography = _interopRequireDefault(require("../typography"));
+
+var _index = _interopRequireDefault(require("../home-menu/index"));
+
+var _avatar2 = _interopRequireDefault(require("./style/avatar.svg"));
+
+require("./style/index");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(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; }
+
+var LayoutHeader = function LayoutHeader(_ref) {
+  var _ref$menus = _ref.menus,
+      menus = _ref$menus === void 0 ? [] : _ref$menus,
+      _ref$defaultSelected = _ref.defaultSelected,
+      defaultSelected = _ref$defaultSelected === void 0 ? '' : _ref$defaultSelected,
+      selectedKey = _ref.selectedKey,
+      onMenuChange = _ref.onMenuChange,
+      dropMenuConfig = _ref.dropMenuConfig,
+      userName = _ref.userName,
+      _ref$userAvatar = _ref.userAvatar,
+      userAvatar = _ref$userAvatar === void 0 ? _avatar2.default : _ref$userAvatar;
+  var useBreakpoint = _grid.default.useBreakpoint;
+
+  var _useBreakpoint = useBreakpoint(),
+      md = _useBreakpoint.md;
+
+  var _useState = (0, _react.useState)(selectedKey),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectedMenu = _useState2[0],
+      setSelectedMenu = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(defaultSelected),
+      _useState4 = _slicedToArray(_useState3, 2),
+      activeMenu = _useState4[0],
+      setActiveMenu = _useState4[1];
+
+  (0, _react.useEffect)(function () {
+    if (selectedKey) {
+      setSelectedMenu(selectedKey);
+    }
+  }, [selectedKey]);
+
+  var defaultMenuOnClick = function defaultMenuOnClick(menuConfig) {
+    var key = menuConfig.key;
+    setActiveMenu(key);
+  };
+
+  function getMenuDom(activeMenu, menuInfo) {
+    var badge = menuInfo.badge;
+
+    switch (_typeof(badge)) {
+      case 'string':
+        return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [(0, _jsxRuntime.jsx)(_typography.default, Object.assign({
+            className: (0, _classnames.default)({
+              'active-menu': activeMenu === menuInfo.key
+            }),
+            level: activeMenu === menuInfo.key ? 'h4' : 'body1'
+          }, {
+            children: menuInfo.title
+          }), void 0), (0, _jsxRuntime.jsx)(_badge.default, {
+            dot: true,
+            color: '#F52209'
+          }, void 0)]
+        }, void 0);
+
+      case 'number':
+        return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [(0, _jsxRuntime.jsx)(_typography.default, Object.assign({
+            className: (0, _classnames.default)({
+              'active-menu': activeMenu === menuInfo.key
+            }),
+            level: activeMenu === menuInfo.key ? 'h4' : 'body1'
+          }, {
+            children: menuInfo.title
+          }), void 0), (0, _jsxRuntime.jsx)(_badge.default, {
+            count: badge,
+            style: {
+              backgroundColor: '#F52209'
+            }
+          }, void 0)]
+        }, void 0);
+
+      case 'object':
+        return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [(0, _jsxRuntime.jsx)(_typography.default, Object.assign({
+            className: (0, _classnames.default)({
+              'active-menu': activeMenu === menuInfo.key
+            }),
+            level: activeMenu === menuInfo.key ? 'h4' : 'body1'
+          }, {
+            children: menuInfo.title
+          }), void 0), (0, _jsxRuntime.jsx)(_badge.default, Object.assign({}, badge), void 0)]
+        }, void 0);
+
+      case 'undefined':
+        return (0, _jsxRuntime.jsx)(_typography.default, Object.assign({
+          className: (0, _classnames.default)({
+            'active-menu': activeMenu === menuInfo.key
+          }),
+          level: activeMenu === menuInfo.key ? 'h4' : 'body1'
+        }, {
+          children: menuInfo.title
+        }), void 0);
+
+      case 'function':
+        return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [(0, _jsxRuntime.jsx)(_typography.default, Object.assign({
+            className: (0, _classnames.default)({
+              'active-menu': activeMenu === menuInfo.key
+            }),
+            level: activeMenu === menuInfo.key ? 'h4' : 'body1'
+          }, {
+            children: menuInfo.title
+          }), void 0), badge()]
+        }, void 0);
+    }
+  }
+
+  if (md) {
+    return (0, _jsxRuntime.jsx)("div", Object.assign({
+      className: (0, _classnames.default)({
+        'igloo-layout-header': true,
+        'igloo-layout-header-fix': Boolean(menus === null || menus === void 0 ? void 0 : menus.length) || Boolean(dropMenuConfig)
+      })
+    }, {
+      children: (0, _jsxRuntime.jsxs)("div", Object.assign({
+        className: "header-content"
+      }, {
+        children: [(0, _jsxRuntime.jsxs)("div", Object.assign({
+          className: "header-left"
+        }, {
+          children: [(0, _jsxRuntime.jsx)("div", {
+            className: "igloo-logo"
+          }, void 0), Boolean(menus === null || menus === void 0 ? void 0 : menus.length) && (0, _jsxRuntime.jsx)(_row.default, {
+            children: menus.map(function (menu) {
+              return (0, _jsxRuntime.jsx)(_col.default, Object.assign({
+                className: (0, _classnames.default)('menu-item'),
+                onClick: function onClick() {
+                  onMenuChange ? onMenuChange(menu) : defaultMenuOnClick(menu);
+                }
+              }, {
+                children: getMenuDom(selectedMenu || activeMenu, menu)
+              }), menu.key);
+            })
+          }, void 0)]
+        }), void 0), dropMenuConfig && (0, _jsxRuntime.jsxs)(_space.default, Object.assign({
+          size: 8
+        }, {
+          children: [(0, _jsxRuntime.jsx)(_avatar.default, {
+            size: 32,
+            src: userAvatar
+          }, void 0), (0, _jsxRuntime.jsx)(_typography.default, Object.assign({
+            level: "body1",
+            style: {
+              color: '#666666'
+            }
+          }, {
+            children: userName
+          }), void 0), dropMenuConfig && (0, _jsxRuntime.jsx)(_index.default, Object.assign({}, dropMenuConfig), void 0)]
+        }), void 0)]
+      }), void 0)
+    }), void 0);
+  } else {
+    return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [(0, _jsxRuntime.jsxs)("div", Object.assign({
+        className: (0, _classnames.default)({
+          'igloo-layout-header': true,
+          'igloo-layout-header-fix': Boolean(menus === null || menus === void 0 ? void 0 : menus.length) || Boolean(dropMenuConfig)
+        })
+      }, {
+        children: [(0, _jsxRuntime.jsx)("div", {
+          className: "igloo-logo"
+        }, void 0), dropMenuConfig && (0, _jsxRuntime.jsx)(_index.default, Object.assign({
+          userAvatar: userAvatar,
+          userName: userName
+        }, dropMenuConfig), void 0)]
+      }), void 0), Boolean(menus === null || menus === void 0 ? void 0 : menus.length) && (0, _jsxRuntime.jsx)(_row.default, Object.assign({
+        className: "igloo-layout-menu"
+      }, {
+        children: menus.map(function (menu) {
+          var span = 24 / menus.length;
+          return (0, _jsxRuntime.jsx)(_col.default, Object.assign({
+            span: span,
+            className: (0, _classnames.default)('menu-item'),
+            onClick: function onClick() {
+              onMenuChange ? onMenuChange(menu) : defaultMenuOnClick(menu);
+            }
+          }, {
+            children: (0, _jsxRuntime.jsx)("div", Object.assign({
+              style: {
+                display: 'flex',
+                alignItems: 'flex-start'
+              }
+            }, {
+              children: getMenuDom(selectedMenu || activeMenu, menu)
+            }), void 0)
+          }), menu.key);
+        })
+      }), void 0)]
+    }, void 0);
+  }
+};
+
+LayoutHeader.displayName = 'LayoutHeader';
+var _default = LayoutHeader;
+exports.default = _default;

package/lib/layout/index.d.ts

@@ -4,7 +4,7 @@ import './style';
 interface Menu {
     title: string;
     key: string;
-    badge?: 'dot' | number | BadgeProps | (() => any);
+    badge?: 'dot' | number | string | BadgeProps | (() => any) | string;
 }
 interface Info {
     title: string;
@@ -14,30 +14,38 @@ interface Action {
     title: string;
     onClick?: () => void;
 }
-interface ILayout {
+interface HeaderConfig {
+    menus?: Menu[];
+    defaultSelected?: string;
+    selectedKey?: string;
+    onMenuChange?: (menuItem: any) => any;
+    dropMenuConfig?: {
+        customInfos: Info[];
+        actions: Action[];
+    };
+    userName?: string;
+    userAvatar?: string;
+}
+interface FooterConfig {
+    companyInfoRender?: () => any;
+    copyRightRender?: (origin: ReactNode) => any;
+    tel?: string;
+    email?: string;
+    workTime?: any;
+    address?: string;
+}
+interface layoutType {
     className?: string;
     style?: CSSProperties;
-    headerConfig?: {
-        menus?: Menu[];
-        defaultSelected?: string;
-        selectedKey?: string;
-        onMenuChange?: (mentItem: any) => any;
-        dropMenuConfig?: {
-            customInfos: Info[];
-            actions: Action[];
-        };
-        userName?: string;
-        userAvatar?: string;
-    };
-    footerConfig?: {
-        companyInfoRender?: () => any;
-        copyRightRender?: (origin: ReactNode) => any;
-        tel?: string;
-        email?: string;
-        workTime?: any;
-        address?: string;
-    };
     withFixedPanel?: boolean;
+    headerConfig?: HeaderConfig;
+    footerConfig?: FooterConfig;
+}
+declare type HeaderFunction = (props: HeaderConfig) => any;
+declare type FooterFunction = (props: FooterConfig) => any;
+interface ILayout extends FC<layoutType> {
+    Header: HeaderFunction;
+    Footer: FooterFunction;
 }
-declare const Layout: FC<ILayout>;
+declare const Layout: ILayout;
 export default Layout;