@fle-ui/pro-layout/lib/components/pageContainer/index.js

@fle-ui/pro-layout

"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

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

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

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

var _next = require("@fle-ui/next");

var _proHeader = _interopRequireDefault(require("../proHeader"));

var _proFooter = _interopRequireDefault(require("../proFooter"));

var _backTop = _interopRequireDefault(require("../backTop"));

var _proContext = _interopRequireDefault(require("@fle-ui/pro-context"));

require("./index.less");

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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

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 PageContainer = function PageContainer(props) {
  var _classnames;

  var prefixCls = props.prefixCls,
      className = props.className,
      style = props.style,
      _props$margin = props.margin,
      margin = _props$margin === void 0 ? 0 : _props$margin,
      _props$padding = props.padding,
      padding = _props$padding === void 0 ? 0 : _props$padding,
      footer = props.footer,
      backTop = props.backTop,
      breadcrumb = props.breadcrumb,
      isFixed = props.isFixed,
      ghost = props.ghost,
      loading = props.loading,
      lucency = props.lucency,
      minWidth = props.minWidth,
      headerHeight = props.headerHeight,
      footerHeight = props.footerHeight,
      background = props.background,
      spinConfig = props.spinConfig;
  var context = (0, _react.useContext)(_next.ConfigProvider.ConfigContext);
  var getPrefixCls = prefixCls !== null && prefixCls !== void 0 ? prefixCls : context.getPrefixCls('pro');
  var baseClassName = "".concat(getPrefixCls, "-layout-page-container");
  var layoutContext = (0, _react.useContext)(_proContext.default);
  var transformMargin = ghost ? 0 : margin;
  var transformPadding = ghost ? 0 : padding;

  var getBreadcrumbProps = function getBreadcrumbProps() {
    if (!breadcrumb || !layoutContext.breadcrumb) {
      return [];
    }

    if (Array.isArray(breadcrumb)) {
      return breadcrumb;
    }

    if (Array.isArray(layoutContext.breadcrumb)) {
      return layoutContext.breadcrumb;
    }

    return [];
  };

  var breadcrumbList = getBreadcrumbProps();
  var fixedStyle = {};

  if (!!isFixed) {
    var differHeight = transformMargin * 2 + transformPadding * 2 + (layoutContext.offsetTop || 0);

    if (breadcrumbList === null || breadcrumbList === void 0 ? void 0 : breadcrumbList.length) {
      differHeight = differHeight + headerHeight;
    }

    if (!!footer) {
      differHeight = differHeight + footerHeight;
    }

    fixedStyle = {
      height: "calc(100vh - ".concat(differHeight, "px)")
    };
  }

  var realMargin = ghost ? 0 : transformMargin;
  var isBetween = layoutContext.mode === 'between';
  var contentWidth = (minWidth || layoutContext.minWidth) - padding * 2;
  var contentStyle = {
    margin: isBetween ? "".concat(realMargin, "px auto") : realMargin,
    padding: ghost ? 0 : transformPadding,
    background: background
  };

  if (isBetween) {
    contentStyle.width = contentWidth;
  } else {
    contentStyle.minWidth = contentWidth;
  }

  return /*#__PURE__*/_react.default.createElement(_proContext.default.Provider, {
    value: layoutContext
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames2.default)(baseClassName, className),
    style: style
  }, /*#__PURE__*/_react.default.createElement(_proHeader.default, {
    style: {
      height: headerHeight,
      minWidth: minWidth || layoutContext.minWidth
    },
    breadcrumb: breadcrumbList
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames2.default)("".concat(baseClassName, "-content"), (_classnames = {}, _defineProperty(_classnames, "".concat(baseClassName, "-content-ghost"), ghost), _defineProperty(_classnames, "".concat(baseClassName, "-content-fixed"), isFixed), _defineProperty(_classnames, "".concat(baseClassName, "-content-lucency"), lucency), _classnames)),
    style: contentStyle
  }, /*#__PURE__*/_react.default.createElement(_next.Spin, _extends({}, spinConfig, {
    spinning: loading,
    className: "".concat(baseClassName, "-loading"),
    wrapperClassName: "".concat(baseClassName, "-wrapper-loading")
  }), /*#__PURE__*/_react.default.createElement("div", {
    style: fixedStyle
  }, props.children))), footer && /*#__PURE__*/_react.default.createElement(_proFooter.default, {
    style: {
      height: footerHeight,
      minWidth: minWidth || layoutContext.minWidth
    }
  }, footer()), !(!backTop || !layoutContext.backTop) && /*#__PURE__*/_react.default.createElement(_backTop.default, {
    baseClassName: baseClassName
  })));
};

PageContainer.defaultProps = {
  margin: 20,
  padding: 20,
  backTop: 'default',
  breadcrumb: 'default',
  feedback: true,
  loading: false,
  maxWidth: 1240,
  minWidth: 1240,
  footerHeight: 60,
  headerHeight: 54,
  background: '#fff',
  spinConfig: {
    size: 'large'
  }
};
var _default = PageContainer;
exports.default = _default;