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

@fle-ui/pro-layout

import "@fle-ui/next/es/spin/style";
import _Spin from "@fle-ui/next/es/spin";
import "@fle-ui/next/es/config-provider/style";
import _ConfigProvider from "@fle-ui/next/es/config-provider";

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

import React, { useContext } from 'react';
import classnames from 'classnames';
import ProHeader from '../proHeader';
import ProFooter from '../proFooter';
import BackTop from '../backTop';
import LayoutContextConfigProvider from '@fle-ui/pro-context';
import './index.less';

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 = useContext(_ConfigProvider.ConfigContext);
  var getPrefixCls = prefixCls !== null && prefixCls !== void 0 ? prefixCls : context.getPrefixCls('pro');
  var baseClassName = "".concat(getPrefixCls, "-layout-page-container");
  var layoutContext = useContext(LayoutContextConfigProvider);
  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.createElement(LayoutContextConfigProvider.Provider, {
    value: layoutContext
  }, /*#__PURE__*/React.createElement("div", {
    className: classnames(baseClassName, className),
    style: style
  }, /*#__PURE__*/React.createElement(ProHeader, {
    style: {
      height: headerHeight,
      minWidth: minWidth || layoutContext.minWidth
    },
    breadcrumb: breadcrumbList
  }), /*#__PURE__*/React.createElement("div", {
    className: classnames("".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.createElement(_Spin, _extends({}, spinConfig, {
    spinning: loading,
    className: "".concat(baseClassName, "-loading"),
    wrapperClassName: "".concat(baseClassName, "-wrapper-loading")
  }), /*#__PURE__*/React.createElement("div", {
    style: fixedStyle
  }, props.children))), footer && /*#__PURE__*/React.createElement(ProFooter, {
    style: {
      height: footerHeight,
      minWidth: minWidth || layoutContext.minWidth
    }
  }, footer()), !(!backTop || !layoutContext.backTop) && /*#__PURE__*/React.createElement(BackTop, {
    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'
  }
};
export default PageContainer;