@ccs-design/rc-pro/lib/CcsBasicLayout/dumi.js

ccs design basic react component

"use strict";

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); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireWildcard(require("react"));

var _antd = require("antd");

var _umi = require("umi");

var _ = _interopRequireDefault(require("./404"));

var _icons = require("@ant-design/icons");

var _header = _interopRequireDefault(require("./header"));

var _context2 = require("./context");

var _menu = _interopRequireDefault(require("./menu"));

var _utils = require("../utils");

var _classnames = _interopRequireDefault(require("classnames"));

var _reactContainerQuery = require("react-container-query");

var _zh_CN = _interopRequireDefault(require("antd/lib/locale-provider/zh_CN"));

require("./index.less");

var _2 = require("..");

var _ahooks = require("ahooks");

var _3 = require(".");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }

function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }

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 _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; }

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }

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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

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; }

var Content = _antd.Layout.Content,
    Sider = _antd.Layout.Sider;
var query = {
  'screen-xs': {
    maxWidth: 575
  },
  'screen-sm': {
    minWidth: 576,
    maxWidth: 767
  },
  'screen-md': {
    minWidth: 768,
    maxWidth: 991
  },
  'screen-lg': {
    minWidth: 992,
    maxWidth: 1199
  },
  'screen-xl': {
    minWidth: 1200,
    maxWidth: 1599
  },
  'screen-xxl': {
    minWidth: 1600
  }
};
var RouteHistorys = []; // 获取菜单列表（鉴权用）

var getMenus = function getMenus() {
  var menus = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
  var parents = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
  return menus.reduce(function (keys, item) {
    keys.push(_objectSpread(_objectSpread({}, item), {}, {
      parents: parents
    }));

    if (item.nodeData.menuType === 0) {
      return keys.concat(getMenus(item.children, [].concat(_toConsumableArray(parents), [{
        key: item.nodeId,
        url: item.nodeData.menuUrl,
        name: item.nodeData.menuName
      }])));
    }

    return keys;
  }, []);
};

var tabPages = [];
/**
 * 布局
 * @param BasicLayoutType
 */

var DumiLayout = function DumiLayout(_ref) {
  var logo = _ref.logo,
      history = _ref.history,
      children = _ref.children,
      dispatch = _ref.dispatch,
      location = _ref.location,
      userDetail = _ref.userDetail,
      headerExtra = _ref.headerExtra,
      layoutConfig = _ref.layoutConfig,
      renderHeader = _ref.renderHeader,
      userOverlayMenu = _ref.userOverlayMenu,
      renderChildrenMenu = _ref.renderChildrenMenu;

  var _ref2 = location || {},
      pathname = _ref2.pathname;

  var _ref3 = userDetail || {},
      _ref3$menuData = _ref3.menuData,
      menuData = _ref3$menuData === void 0 ? [] : _ref3$menuData;

  var menus = (0, _react.useMemo)(function () {
    return getMenus(menuData).filter(function (t) {
      var _t$nodeData;

      return ((_t$nodeData = t.nodeData) === null || _t$nodeData === void 0 ? void 0 : _t$nodeData.menuType) === 1;
    });
  }, []);

  var _ref4 = layoutConfig || {},
      IsDark = _ref4.IsDark,
      AppName = _ref4.AppName,
      IsCompact = _ref4.IsCompact,
      IsTabsPage = _ref4.IsTabsPage,
      LayoutMode = _ref4.LayoutMode,
      MenuCollapsed = _ref4.MenuCollapsed,
      _ref4$MenuExpandWidth = _ref4.MenuExpandWidth,
      MenuExpandWidth = _ref4$MenuExpandWidth === void 0 ? 208 : _ref4$MenuExpandWidth,
      _ref4$MenuCollapsedWi = _ref4.MenuCollapsedWidth,
      MenuCollapsedWidth = _ref4$MenuCollapsedWi === void 0 ? 48 : _ref4$MenuCollapsedWi;

  var appNameHex = (0, _react.useMemo)(function () {
    return (0, _3.stringToHex)(AppName);
  }, []);

  function getLocalStorage(key) {
    try {
      return localStorage.getItem("".concat(key, "_").concat(appNameHex));
    } catch (error) {
      return false;
    }
  }

  function setLocalStorage(state) {
    try {
      var key = state.key,
          value = state.value;
      localStorage.setItem("".concat(key, "_").concat(appNameHex), value);
    } catch (error) {
      /* continue regardless of error */
    }
  }

  var _useState = (0, _react.useState)(getLocalStorage('_LAYOUT') || LayoutMode || 'left'),
      _useState2 = _slicedToArray(_useState, 2),
      layout = _useState2[0],
      setLayout = _useState2[1];

  var _useState3 = (0, _react.useState)(MenuCollapsed || getLocalStorage('_COLLAPSED') === 'true'),
      _useState4 = _slicedToArray(_useState3, 2),
      collapsed = _useState4[0],
      setCollapsed = _useState4[1];

  var hasPage = tabPages.find(function (page) {
    return page.key === pathname;
  }) || {
    key: pathname,
    title: '',
    content: undefined,
    top: 0
  };
  var title = '未知';

  var content = function content() {
    return /*#__PURE__*/_react.default.createElement(_.default, null);
  }; // clear tabs


  (0, _react.useEffect)(function () {
    return function () {
      tabPages = [];
    };
  }, []);
  (0, _ahooks.useUpdateEffect)(function () {
    if (hasPage === null || hasPage === void 0 ? void 0 : hasPage.content) {
      var _document$scrollingEl;

      (_document$scrollingEl = document.scrollingElement) === null || _document$scrollingEl === void 0 ? void 0 : _document$scrollingEl.scrollTo(0, hasPage.top);
    }
  }, [pathname]);

  var onScroll = function onScroll(e) {
    var scrollTop = e.target.scrollingElement.scrollTop;
    hasPage.top = scrollTop;
  }; // listener document scroll


  (0, _ahooks.useEventListener)('scroll', onScroll, {
    target: document
  }); // add theme class

  (0, _react.useLayoutEffect)(function () {
    var body = document.getElementsByTagName('body');

    if (body && body.length > 0) {
      body[0].classList.add(IsDark ? 'dark-theme' : 'default-theme');

      if (IsCompact) {
        body[0].classList.add('compact-theme');
      }
    }
  }, []); // coolapsed change

  var onChangeCollapsed = function onChangeCollapsed() {
    setCollapsed(!collapsed);
    setLocalStorage({
      key: '_COLLAPSED',
      value: !collapsed
    });
  }; // layou change


  var onChangeLayout = function onChangeLayout(e) {
    setLayout(e);
    setLocalStorage({
      key: '_LAYOUT',
      value: e
    });
  };

  var curMenu = (0, _react.useMemo)(function () {
    var menu = menus.find(function (m) {
      return m.nodeData.menuUrl === pathname;
    }); // add document title

    if ((0, _umi.isBrowser)() && menu) {
      setTimeout(function () {
        document.title = "".concat(AppName, " - ").concat(menu.nodeName);
      }, 10);
    } // save history route


    var saveHistory = /*#__PURE__*/function () {
      var _ref5 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
        var index;
        return regeneratorRuntime.wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                if (RouteHistorys.length) {
                  _context.next = 7;
                  break;
                }

                _context.next = 3;
                return (0, _utils.getStroage)('_ROUTE_HISTORY');

              case 3:
                _context.t0 = _context.sent;

                if (_context.t0) {
                  _context.next = 6;
                  break;
                }

                _context.t0 = [];

              case 6:
                RouteHistorys = _context.t0;

              case 7:
                index = RouteHistorys.findIndex(function (h) {
                  return h.pathName === pathname;
                });

                if (index > -1) {
                  RouteHistorys.splice(index, 1);
                }

                RouteHistorys.unshift({
                  pathName: pathname,
                  menuName: (menu === null || menu === void 0 ? void 0 : menu.nodeData.menuName) || '',
                  time: new Date()
                });
                (0, _utils.setStroage)('_ROUTE_HISTORY', RouteHistorys);

              case 11:
              case "end":
                return _context.stop();
            }
          }
        }, _callee);
      }));

      return function saveHistory() {
        return _ref5.apply(this, arguments);
      };
    }();

    if (menu) saveHistory();
    return menu;
  }, [pathname]); // cache page

  if (!(hasPage === null || hasPage === void 0 ? void 0 : hasPage.content) && IsTabsPage) {
    if (curMenu) {
      title = curMenu.nodeName;
      content = children === null || children === void 0 ? void 0 : children.props.children;
    }

    hasPage.title = title;
    hasPage.content = content;
    tabPages.push(hasPage);
  } // tab close


  var onEdit = function onEdit() {
    return;
  }; // tab extra


  var operations = function operations() {
    // close other or close all tabs
    var onClose = function onClose() {
      return;
    };

    var closeMenu = /*#__PURE__*/_react.default.createElement(_antd.Menu, null, /*#__PURE__*/_react.default.createElement(_antd.Menu.Item, {
      key: "1"
    }, /*#__PURE__*/_react.default.createElement("a", {
      onClick: function onClick() {
        return onClose();
      }
    }, "\u5173\u95ED\u5176\u4ED6\u6807\u7B7E")), /*#__PURE__*/_react.default.createElement(_antd.Menu.Item, {
      key: "2"
    }, /*#__PURE__*/_react.default.createElement("a", {
      onClick: function onClick() {
        return onClose();
      }
    }, "\u5173\u95ED\u6240\u6709\u6807\u7B7E")));

    return /*#__PURE__*/_react.default.createElement(_antd.Dropdown, {
      overlay: closeMenu
    }, /*#__PURE__*/_react.default.createElement("a", {
      className: "ant-dropdown-link",
      onClick: function onClick(e) {
        return e.preventDefault();
      },
      style: {
        paddingRight: 16
      }
    }, "\u5173\u95ED ", /*#__PURE__*/_react.default.createElement(_icons.DownOutlined, null)));
  }; // left menu


  var renderSiderMenu = layout === 'left' ? /*#__PURE__*/_react.default.createElement(Sider, {
    theme: IsDark ? 'dark' : 'light',
    width: MenuExpandWidth,
    collapsedWidth: MenuCollapsedWidth,
    collapsed: collapsed,
    className: "".concat(_3.classPrefix, "-siderbar")
  }, /*#__PURE__*/_react.default.createElement(_menu.default, {
    mode: "inline",
    theme: "light",
    menus: menus,
    menuData: menuData,
    location: location,
    collapsed: collapsed,
    layoutConfig: layoutConfig,
    renderChildrenMenu: renderChildrenMenu
  }), !MenuCollapsed ? /*#__PURE__*/_react.default.createElement("div", {
    className: "".concat(_3.classPrefix, "-trigger"),
    style: {
      paddingLeft: 16
    }
  }, /*#__PURE__*/_react.default.createElement("span", {
    onClick: onChangeCollapsed
  }, collapsed ? /*#__PURE__*/_react.default.createElement(_icons.MenuUnfoldOutlined, null) : /*#__PURE__*/_react.default.createElement(_icons.MenuFoldOutlined, null))) : null) : null;
  var skeletonNum = [1, 2, 3, 4, 5, 6];

  var skeletons = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
    style: {
      background: '#fff',
      padding: 16,
      textAlign: 'right'
    }
  }, /*#__PURE__*/_react.default.createElement(_antd.Space, null, /*#__PURE__*/_react.default.createElement(_antd.Skeleton.Button, {
    active: false,
    size: "small"
  }), /*#__PURE__*/_react.default.createElement(_antd.Skeleton.Avatar, {
    active: false,
    size: "small"
  }), /*#__PURE__*/_react.default.createElement(_antd.Skeleton.Input, {
    style: {
      width: 200
    },
    active: false,
    size: "small"
  }))), children ? /*#__PURE__*/_react.default.createElement("div", {
    style: {
      margin: 10
    }
  }, children) : skeletonNum.map(function (e) {
    return /*#__PURE__*/_react.default.createElement(_2.CcsProGrid, {
      key: e
    }, /*#__PURE__*/_react.default.createElement(_2.CcsProGrid.Col, {
      colSpan: "50%",
      style: {
        padding: 16
      }
    }, /*#__PURE__*/_react.default.createElement(_antd.Skeleton, {
      avatar: true,
      paragraph: {
        rows: 3
      }
    })), /*#__PURE__*/_react.default.createElement(_2.CcsProGrid.Col, {
      colSpan: "50%",
      style: {
        padding: 16
      }
    }, /*#__PURE__*/_react.default.createElement(_antd.Skeleton, {
      avatar: true,
      paragraph: {
        rows: 3
      }
    })));
  })); // render tabs page


  var renderTabsPage = /*#__PURE__*/_react.default.createElement(_antd.Tabs, {
    onEdit: onEdit,
    hideAdd: true,
    tabBarGutter: 0,
    size: 'small',
    onChange: undefined,
    activeKey: undefined,
    type: 'editable-card',
    className: "".concat(_3.classPrefix, "-card-container"),
    tabBarExtraContent: operations(),
    tabBarStyle: {
      marginBottom: 0,
      left: [0, MenuCollapsedWidth, MenuExpandWidth][[layout === 'top', collapsed, !collapsed].findIndex(function (e) {
        return e;
      })],
      background: IsDark ? undefined : '#f0f2f5'
    },
    style: {
      overflow: 'unset'
    }
  }, ");", children ? children : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.Tabs.TabPane, {
    tab: '工作台',
    key: "1"
  }, skeletons), /*#__PURE__*/_react.default.createElement(_antd.Tabs.TabPane, {
    tab: '菜单管理',
    key: "2"
  }, skeletons), /*#__PURE__*/_react.default.createElement(_antd.Tabs.TabPane, {
    tab: '用户管理',
    key: "3"
  }, skeletons))); // render one page


  var renderPage = function renderPage() {
    return skeletons;
  };

  var contextValue = (0, _react.useMemo)(function () {
    return _objectSpread({
      layout: layout,
      collapsed: collapsed,
      userDetail: userDetail,
      dispatch: dispatch
    }, layoutConfig);
  }, [layout, collapsed, userDetail === null || userDetail === void 0 ? void 0 : userDetail.loginId]);
  return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
    locale: _zh_CN.default
  }, /*#__PURE__*/_react.default.createElement(_reactContainerQuery.ContainerQuery, {
    query: query
  }, function (screen) {
    return /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _classnames.default)('ccs-bl', screen, layout === 'top' ? "".concat(_3.classPrefix, "-top") : "".concat(_3.classPrefix, "-left"))
    }, /*#__PURE__*/_react.default.createElement(_context2.GlobalContext.Provider, {
      value: contextValue
    }, /*#__PURE__*/_react.default.createElement(_antd.Layout, {
      style: {
        minHeight: '100vh',
        flexDirection: 'row'
      }
    }, layout === 'left' ? /*#__PURE__*/_react.default.createElement("div", {
      style: {
        width: collapsed ? MenuCollapsedWidth : MenuExpandWidth,
        transition: 'width 0.3s'
      }
    }) : null, renderSiderMenu, /*#__PURE__*/_react.default.createElement(_antd.Layout, {
      style: {
        width: 0
      }
    }, /*#__PURE__*/_react.default.createElement("div", {
      style: {
        height: 48
      }
    }), renderHeader ? renderHeader({
      logo: logo,
      menuData: menuData,
      menus: menus,
      layout: layout,
      location: location
    }) : /*#__PURE__*/_react.default.createElement(_header.default, {
      logo: logo,
      menus: menus,
      layout: layout,
      history: history,
      menuData: menuData,
      location: location,
      userDetail: userDetail,
      headerExtra: headerExtra,
      layoutConfig: layoutConfig,
      userOverlayMenu: userOverlayMenu,
      onChangeLayout: onChangeLayout,
      renderChildrenMenu: renderChildrenMenu
    }), /*#__PURE__*/_react.default.createElement(Content, null, IsTabsPage ? renderTabsPage : renderPage())))));
  }));
};

var _default = DumiLayout;
exports.default = _default;