zarm-web/es/layout/Layout.js

基于 React 的桌面端UI库

function _extends() { _extends = Object.assign || 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); }

// eslint-disable-next-line max-classes-per-file
import React, { Component, Children } from 'react';
import classnames from 'classnames';
const defaultPrefixCls = 'ui-layout';

class Layout extends Component {
  render() {
    const {
      prefixCls,
      className,
      children,
      style
    } = this.props;
    let {
      hasSider
    } = this.props;

    if (!hasSider && prefixCls === defaultPrefixCls) {
      Children.forEach(children, child => {
        if ('collapsible' in child.props) {
          hasSider = true;
        }
      });
    }

    const cls = classnames(prefixCls, {
      [className]: !!className,
      [`${prefixCls}-has-sider`]: hasSider
    });
    return React.createElement("div", {
      className: cls,
      style: style
    }, children);
  }

}

Layout.defaultProps = {
  prefixCls: defaultPrefixCls,
  hasSider: false
};
Layout.Header = void 0;
Layout.Sider = void 0;
Layout.Footer = void 0;
Layout.Content = void 0;

const genSubComponent = props => {
  // eslint-disable-next-line react/no-multi-comp
  return class SubComponent extends Component {
    render() {
      const {
        prefixCls
      } = props;
      return React.createElement(Layout, _extends({
        prefixCls: prefixCls
      }, this.props));
    }

  };
};

const Header = genSubComponent({
  prefixCls: 'ui-layout-header'
});
const Content = genSubComponent({
  prefixCls: 'ui-layout-content'
});
const Footer = genSubComponent({
  prefixCls: 'ui-layout-footer'
});
Layout.Header = Header;
Layout.Footer = Footer;
Layout.Content = Content;
export default Layout;