header-sider-layout/lib/BasicLayout.js

ant-design-pro layout, based on pro-layout, with header and sider layout.

"use strict";

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

require("antd/lib/layout/style");

var _layout = _interopRequireDefault(require("antd/lib/layout"));

require("./BasicLayout.less");

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

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

var _reactDocumentTitle = _interopRequireDefault(require("react-document-title"));

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

var _reactMediaHook = _interopRequireDefault(require("react-media-hook2"));

var _warning = _interopRequireDefault(require("warning"));

var _Header = _interopRequireDefault(require("./Header"));

var _getPageTitle = _interopRequireDefault(require("./getPageTitle"));

var _defaultSettings = _interopRequireDefault(require("./defaultSettings"));

var _locales = _interopRequireDefault(require("./locales"));

var _Footer = _interopRequireDefault(require("./Footer"));

var _RouteContext = _interopRequireDefault(require("./RouteContext"));

var _SiderMenu = _interopRequireDefault(require("./SiderMenu"));

var _getBreadcrumbProps = require("./utils/getBreadcrumbProps");

var _getMenuData2 = _interopRequireDefault(require("./utils/getMenuData"));

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

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_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 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(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(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 = _layout.default.Content;
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 headerRender = function headerRender(props) {
  if (props.headerRender === false) {
    return null;
  }

  return _react.default.createElement(_Header.default, Object.assign({}, props, props.headerMenuProps));
};

var footerRender = function footerRender(props) {
  if (props.footerRender === false) {
    return null;
  }

  if (props.footerRender) {
    return props.footerRender(_objectSpread({}, props), _react.default.createElement(_Footer.default, null));
  }

  return _react.default.createElement(_Footer.default, null);
};

var renderSiderMenu = function renderSiderMenu(props) {
  var layout = props.layout,
      isMobile = props.isMobile,
      menuRender = props.menuRender;

  if (props.menuRender === false) {
    return null;
  }

  if (layout === 'topmenu' && !isMobile) {
    return null;
  }

  if (menuRender) {
    return menuRender(props, _react.default.createElement(_SiderMenu.default, Object.assign({}, props)));
  }

  var menuProps = props.menuProps,
      theme = props.theme;

  var newProps = _objectSpread({}, props, {}, menuProps, {
    theme: layout === 'both' ? 'light' : theme
  });

  return _react.default.createElement(_SiderMenu.default, Object.assign({}, newProps));
};

var defaultPageTitleRender = function defaultPageTitleRender(pageProps, props) {
  var pageTitleRender = props.pageTitleRender;

  if (pageTitleRender === false) {
    return props.title || '';
  }

  if (pageTitleRender) {
    var title = pageTitleRender(pageProps);

    if (typeof title === 'string') {
      return title;
    }

    (0, _warning.default)(typeof title === 'string', 'pro-layout: renderPageTitle return value should be a string');
  }

  return (0, _getPageTitle.default)(pageProps);
};

function useCollapsed(collapsed, onCollapse) {
  (0, _warning.default)(collapsed === undefined === (onCollapse === undefined), 'pro-layout: onCollapse and collapsed should exist simultaneously');

  var _useState = (0, _react.useState)(false),
      _useState2 = _slicedToArray(_useState, 2),
      nativeCollapsed = _useState2[0],
      setCollapsed = _useState2[1];

  if (collapsed !== undefined && onCollapse) {
    return [collapsed, onCollapse];
  }

  if (collapsed !== undefined && !onCollapse) {
    return [collapsed, undefined];
  }

  if (collapsed === undefined && onCollapse) {
    return [undefined, onCollapse];
  }

  return [nativeCollapsed, setCollapsed];
}

var getPaddingLeft = function getPaddingLeft(hasLeftPadding, collapsed, siderWidth) {
  if (hasLeftPadding) {
    return collapsed ? 80 : siderWidth;
  }

  return undefined;
};

var BasicLayout = function BasicLayout(props) {
  var children = props.children,
      propsOnCollapse = props.onCollapse,
      _props$location = props.location,
      location = _props$location === void 0 ? {
    pathname: '/'
  } : _props$location,
      fixedHeader = props.fixedHeader,
      fixSiderbar = props.fixSiderbar,
      navTheme = props.navTheme,
      PropsLayout = props.layout,
      _props$route = props.route,
      route = _props$route === void 0 ? {
    routes: []
  } : _props$route,
      _props$siderWidth = props.siderWidth,
      siderWidth = _props$siderWidth === void 0 ? 256 : _props$siderWidth,
      menu = props.menu,
      menuDataRender = props.menuDataRender,
      headerMenuData = props.headerMenuData;

  var formatMessage = function formatMessage(_ref) {
    var id = _ref.id,
        defaultMessage = _ref.defaultMessage,
        rest = _objectWithoutProperties(_ref, ["id", "defaultMessage"]);

    if (props.formatMessage) {
      return props.formatMessage(_objectSpread({
        id: id,
        defaultMessage: defaultMessage
      }, rest));
    }

    var locales = (0, _locales.default)();

    if (locales[id]) {
      return locales[id];
    }

    if (defaultMessage) {
      return defaultMessage;
    }

    return id;
  };

  var _route$routes = route.routes,
      routes = _route$routes === void 0 ? [] : _route$routes;

  var _getMenuData = (0, _getMenuData2.default)(routes, menu, formatMessage, menuDataRender),
      breadcrumb = _getMenuData.breadcrumb,
      menuData = _getMenuData.menuData;
  /**
   * init variables
   */


  var isMobile = (0, _reactMediaHook.default)({
    id: 'BasicLayout',
    query: '(max-width: 599px)',
    targetWindow: window || {
      matchMedia: function matchMedia() {
        return true;
      }
    }
  })[0] && !props.disableMobile; // If it is a fix menu, calculate padding
  // don't need padding in phone mode

  var hasLeftPadding = fixSiderbar && PropsLayout !== 'topmenu' && !isMobile;
  var isBoth = PropsLayout === 'both'; // whether to close the menu

  var _useCollapsed = useCollapsed(props.collapsed, propsOnCollapse),
      _useCollapsed2 = _slicedToArray(_useCollapsed, 2),
      collapsed = _useCollapsed2[0],
      onCollapse = _useCollapsed2[1]; // Splicing parameters, adding menuData and formatMessage in props


  var defaultProps = _objectSpread({}, props, {
    formatMessage: formatMessage,
    breadcrumb: breadcrumb
  }); // gen page title


  var pageTitle = defaultPageTitleRender(_objectSpread({
    pathname: location.pathname
  }, defaultProps), props); // gen breadcrumbProps, parameter for pageHeader

  var breadcrumbProps = (0, _getBreadcrumbProps.getBreadcrumbProps)(_objectSpread({}, props, {
    breadcrumb: breadcrumb
  }));
  var containerClass = (0, _classnames.default)({
    'ant-pro-basicLayout-both-nav': isBoth,
    'ant-pro-both-nav-fixed-header': isBoth && fixedHeader
  });
  return _react.default.createElement(_reactDocumentTitle.default, {
    title: pageTitle
  }, _react.default.createElement(_reactContainerQuery.ContainerQuery, {
    query: query
  }, function (params) {
    return _react.default.createElement("div", {
      className: (0, _classnames.default)(params, 'ant-design-pro', 'basicLayout')
    }, _react.default.createElement(_layout.default, null, isBoth ? headerRender(_objectSpread({}, defaultProps, {
      menuData: headerMenuData || menuData,
      isMobile: isMobile,
      collapsed: collapsed,
      onCollapse: onCollapse
    })) : renderSiderMenu(_objectSpread({}, defaultProps, {
      menuData: menuData,
      onCollapse: onCollapse,
      isMobile: isMobile,
      theme: navTheme,
      collapsed: collapsed
    })), _react.default.createElement(_layout.default, {
      className: containerClass
    }, isBoth && renderSiderMenu(_objectSpread({}, defaultProps, {
      menuData: menuData,
      onCollapse: onCollapse,
      isMobile: isMobile,
      theme: navTheme,
      collapsed: collapsed
    })), _react.default.createElement(_layout.default, {
      style: {
        paddingLeft: getPaddingLeft(!!hasLeftPadding, collapsed, siderWidth),
        minHeight: isBoth ? 'calc(100vh - 64px)' : '100vh'
      }
    }, !isBoth && headerRender(_objectSpread({}, defaultProps, {
      menuData: headerMenuData || menuData,
      isMobile: isMobile,
      collapsed: collapsed,
      onCollapse: onCollapse
    })), _react.default.createElement(Content, {
      className: "ant-pro-basicLayout-content",
      style: !fixedHeader || isBoth ? {
        paddingTop: 0
      } : {}
    }, _react.default.createElement(_RouteContext.default.Provider, {
      value: _objectSpread({
        breadcrumb: breadcrumbProps
      }, props, {
        menuData: menuData,
        isMobile: isMobile,
        collapsed: collapsed,
        title: pageTitle.split('-')[0].trim()
      })
    }, children)), footerRender(_objectSpread({
      isMobile: isMobile,
      collapsed: collapsed
    }, defaultProps))))));
  }));
};

BasicLayout.defaultProps = _objectSpread({
  logo: 'https://gw.alipayobjects.com/zos/antfincdn/PmY%24TNNDBI/logo.svg'
}, _defaultSettings.default, {
  location: (0, _utils.isBrowser)() ? window.location : undefined
});
var _default = BasicLayout;
exports.default = _default;