@aliretail/react-materials-components/es/PageLayout/Layout/index.js

B 端物料组件库

import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import * as React from 'react';
import cls from 'classnames';
import { getElementArea, getElementWrapper } from "../factory";
import { COMPONENT_NAME } from "../factory/static";

function getTopOffset(target) {
  if (target) {
    var _target$getBoundingCl;

    var offsetScreenTop = target === null || target === void 0 ? void 0 : (_target$getBoundingCl = target.getBoundingClientRect()) === null || _target$getBoundingCl === void 0 ? void 0 : _target$getBoundingCl.top;
    return offsetScreenTop;
  }

  return undefined;
}

var PageLayout = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(PageLayout, _React$Component);

  function PageLayout() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;

    _this.getRenderContent = function () {
      var children = React.Children.toArray(_this.props.children);
      return children.reduce(function (collect, child) {
        var area = getElementArea(child);

        if (!area) {
          var _this$props;

          if ((_this$props = _this.props) !== null && _this$props !== void 0 && _this$props.getNonStrictArea && _this.props.getNonStrictArea(child)) {
            area = _this.props.getNonStrictArea(child);
          } // 非严格模式下均渲染至content中 严格模式下非指定的布局组件，不渲染


          if (!area) {
            if (!_this.props.isStrictMode) {
              area = 'content';
            } else {
              return collect;
            }
          }
        }

        var Wrapper = getElementWrapper(child);
        var content = /*#__PURE__*/React.createElement(Wrapper, {
          key: child.key
        }, child);

        if (!collect[area]) {
          collect[area] = [];
        }

        collect[area].push(content);
        return collect;
      }, {});
    };

    return _this;
  }

  var _proto = PageLayout.prototype;

  _proto.componentDidMount = function componentDidMount() {
    var mode = this.props.mode; // 填充屏幕剩余高度

    if (mode === 'fillInScreen') {
      var offsetScreenTop = getTopOffset(this === null || this === void 0 ? void 0 : this.container);

      if (typeof offsetScreenTop !== 'undefined') {
        var _this$container$style, _this$container;

        var style = (_this$container$style = this === null || this === void 0 ? void 0 : (_this$container = this.container) === null || _this$container === void 0 ? void 0 : _this$container.style) !== null && _this$container$style !== void 0 ? _this$container$style : {};
        style.minHeight = "calc(100vh - " + offsetScreenTop + "px)";
      }
    } // 左侧侧边栏固定，内容区域滚动


    if (mode === 'leftFixed' || mode === 'fixed') {
      var _offsetScreenTop = getTopOffset(this === null || this === void 0 ? void 0 : this.container);

      if (typeof _offsetScreenTop !== 'undefined') {
        var _this$container$style2, _this$container2;

        var _style = (_this$container$style2 = this === null || this === void 0 ? void 0 : (_this$container2 = this.container) === null || _this$container2 === void 0 ? void 0 : _this$container2.style) !== null && _this$container$style2 !== void 0 ? _this$container$style2 : {};

        _style.height = "calc(100vh - " + _offsetScreenTop + "px)";
      }
    }
  };

  /**
   * 判断是否需要将 container 至少占满屏幕
   */
  _proto.isSetContainerFull = function isSetContainerFull(content) {
    var mode = this.props.mode;
    return mode === 'fixed' && content.length === 1;
  };

  _proto.render = function render() {
    var _this2 = this;

    var _this$props2 = this.props,
        mode = _this$props2.mode,
        containerClassName = _this$props2.containerClassName,
        style = _this$props2.style,
        leftSize = _this$props2.leftSize,
        horizontalDivider = _this$props2.horizontalDivider,
        leftWidth = _this$props2.leftWidth;

    var _this$getRenderConten = this.getRenderContent(),
        left = _this$getRenderConten.left,
        nav = _this$getRenderConten.nav,
        content = _this$getRenderConten.content,
        footer = _this$getRenderConten.footer;

    var leftStyle = {};

    if (leftWidth) {
      leftStyle.width = leftWidth + "px";
    }

    return /*#__PURE__*/React.createElement("div", {
      ref: function ref(_ref) {
        _this2.container = _ref;
      },
      className: cls('aliretail-layout', mode, {
        'with-left': left
      }, "divider-" + horizontalDivider, {
        'aliretail-layout-full': this.isSetContainerFull(content)
      }),
      style: style,
      "data-name": COMPONENT_NAME
    }, nav && /*#__PURE__*/React.createElement("div", {
      className: "aliretail-layout-nav",
      "data-name": COMPONENT_NAME + "Nav"
    }, nav), /*#__PURE__*/React.createElement("div", {
      className: "aliretail-layout-wrap"
    }, left && /*#__PURE__*/React.createElement("div", {
      className: cls('aliretail-layout-left', leftSize),
      "data-name": COMPONENT_NAME + "Left",
      style: leftStyle
    }, left), /*#__PURE__*/React.createElement("div", {
      className: cls('aliretail-layout-inner', containerClassName)
    }, /*#__PURE__*/React.createElement("div", {
      className: cls('aliretail-layout-content')
    }, content))), footer && /*#__PURE__*/React.createElement("div", {
      className: "aliretail-layout-footer",
      "data-name": COMPONENT_NAME + "Footer"
    }, footer));
  };

  return PageLayout;
}(React.Component);

PageLayout.defaultProps = {
  mode: 'normal',
  horizontalDivider: 'space',
  isStrictMode: true,
  leftSize: 'small',
  getNonStrictArea: function getNonStrictArea() {
    return '';
  }
};
export { PageLayout as default };