antui-admin/lib/components/layout/layout.js

admin ui for antd

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _layout = require('antd/lib/layout');

var _layout2 = _interopRequireDefault(_layout);

require('antd/lib/layout/style/css');

var _icon = require('antd/lib/icon');

var _icon2 = _interopRequireDefault(_icon);

require('antd/lib/icon/style/css');

var _row = require('antd/lib/row');

var _row2 = _interopRequireDefault(_row);

require('antd/lib/row/style/css');

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _drawer = require('./drawer');

var _drawer2 = _interopRequireDefault(_drawer);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var Header = _layout2.default.Header,
    Sider = _layout2.default.Sider,
    Content = _layout2.default.Content,
    Footer = _layout2.default.Footer;
/**
 * 页面级整体布局
 */

var LayoutCmpt = function (_Component) {
  (0, _inherits3.default)(LayoutCmpt, _Component);

  function LayoutCmpt() {
    (0, _classCallCheck3.default)(this, LayoutCmpt);
    return (0, _possibleConstructorReturn3.default)(this, (LayoutCmpt.__proto__ || (0, _getPrototypeOf2.default)(LayoutCmpt)).apply(this, arguments));
  }

  (0, _createClass3.default)(LayoutCmpt, [{
    key: 'render',
    value: function render() {
      var _classNames, _classNames2;

      var _props = this.props,
          gutter = _props.gutter,
          embed = _props.embed,
          children = _props.children,
          className = _props.className,
          full = _props.full;

      var _isDrawer = false;
      var _drawerProps = {};
      var nodes = _react.Children.map(children, function (node) {
        if (!node) {
          return null;
        }
        if (node.props && node.type && node.type.__DRAWER) {
          var _node$props = node.props,
              _children = _node$props.children,
              others = (0, _objectWithoutProperties3.default)(_node$props, ['children']);

          _drawerProps = (0, _extends3.default)({}, others, { drawerBody: _children });
          _isDrawer = true;
        }
        if (node.props && node.type && gutter > 0) {
          var style = {};
          if (node.type.__LAYOUT) {
            return (0, _react.cloneElement)(node, { style: (0, _extends3.default)({}, node.props.style, style), gutter: gutter, embed: true });
          } else if (node.type.__HEADER) {
            style = { marginBottom: gutter };
          } else if (node.type.__FOOTER) {
            style = { marginTop: gutter };
          } else if (node.type.__SIDER) {
            style = { marginRight: gutter };
          }
          return (0, _react.cloneElement)(node, { style: (0, _extends3.default)({}, node.props.style, style), gutter: true });
        }
        return node;
      });
      var returnDOM = _isDrawer ? _react2.default.createElement(
        _drawer2.default,
        _drawerProps,
        _react2.default.createElement(
          _layout2.default,
          {
            className: (0, _classnames2.default)("antui-layout", (_classNames = {}, (0, _defineProperty3.default)(_classNames, className, !!className), (0, _defineProperty3.default)(_classNames, 'full', full), _classNames)),
            style: { padding: embed ? 0 : gutter }
          },
          nodes
        )
      ) : _react2.default.createElement(
        _layout2.default,
        {
          className: (0, _classnames2.default)("antui-layout", (_classNames2 = {}, (0, _defineProperty3.default)(_classNames2, className, !!className), (0, _defineProperty3.default)(_classNames2, 'full', full), _classNames2)),
          style: { padding: embed ? 0 : gutter }
        },
        nodes
      );

      return returnDOM;
    }
  }]);
  return LayoutCmpt;
}(_react.Component);

LayoutCmpt.__LAYOUT = true;
LayoutCmpt.propTypes = {
  /** 间隔距离 */
  gutter: _react.PropTypes.number,
  /**
   * 是否全屏宽高, 设置为false为传统流式布局
   */
  full: _react.PropTypes.bool,
  className: _react.PropTypes.string,
  children: _react.PropTypes.node,
  embed: _react.PropTypes.bool
};
LayoutCmpt.defaultProps = {
  gutter: 0,
  full: true
};

var ExtendsCmpt = function (_Component2) {
  (0, _inherits3.default)(ExtendsCmpt, _Component2);

  function ExtendsCmpt() {
    var _ref;

    var _temp, _this2, _ret;

    (0, _classCallCheck3.default)(this, ExtendsCmpt);

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

    return _ret = (_temp = (_this2 = (0, _possibleConstructorReturn3.default)(this, (_ref = ExtendsCmpt.__proto__ || (0, _getPrototypeOf2.default)(ExtendsCmpt)).call.apply(_ref, [this].concat(args))), _this2), _this2._getClassName = function (type) {
      var _ref2;

      return _ref2 = {}, (0, _defineProperty3.default)(_ref2, 'antui-layout-' + type, true), (0, _defineProperty3.default)(_ref2, 'antui-layout-gutter', _this2.props.gutter), _ref2;
    }, _temp), (0, _possibleConstructorReturn3.default)(_this2, _ret);
  }

  return ExtendsCmpt;
}(_react.Component);

ExtendsCmpt.propTypes = {
  gutter: _react.PropTypes.bool

};
ExtendsCmpt.defaultProps = {
  gutter: false
};

var HeaderCmpt = function (_ExtendsCmpt) {
  (0, _inherits3.default)(HeaderCmpt, _ExtendsCmpt);

  function HeaderCmpt() {
    (0, _classCallCheck3.default)(this, HeaderCmpt);
    return (0, _possibleConstructorReturn3.default)(this, (HeaderCmpt.__proto__ || (0, _getPrototypeOf2.default)(HeaderCmpt)).apply(this, arguments));
  }

  (0, _createClass3.default)(HeaderCmpt, [{
    key: 'render',
    value: function render() {
      var _props2 = this.props,
          children = _props2.children,
          justify = _props2.justify,
          align = _props2.align,
          gutter = _props2.gutter,
          transparent = _props2.transparent,
          size = _props2.size,
          border = _props2.border,
          style = _props2.style,
          className = _props2.className;


      var headerClass = (0, _classnames2.default)(className, (0, _extends3.default)({}, this._getClassName('header'), {
        'antui-layout-header-top': border === 'top',
        'antui-layout-header-bottom': border === 'bottom',
        'antui-layout-gutter': gutter && !transparent,
        'antui-layout-header-transparent': transparent,
        'antui-layout-header-small': size === 'small'
      }));
      return _react2.default.createElement(
        Header,
        { className: headerClass, style: style },
        justify || align ? _react2.default.createElement(
          _row2.default,
          { type: 'flex', justify: justify, align: align },
          children
        ) : _react2.default.createElement(
          _row2.default,
          null,
          children
        )
      );
    }
  }]);
  return HeaderCmpt;
}(ExtendsCmpt);

HeaderCmpt.__HEADER = true;
HeaderCmpt.propTypes = {
  border: _react.PropTypes.string,
  justify: _react.PropTypes.string,
  align: _react.PropTypes.string,
  size: _react.PropTypes.string,
  transparent: _react.PropTypes.bool
};
HeaderCmpt.defaultProps = {
  transparent: false
};

var SiderCmpt = function (_ExtendsCmpt2) {
  (0, _inherits3.default)(SiderCmpt, _ExtendsCmpt2);

  function SiderCmpt(props) {
    (0, _classCallCheck3.default)(this, SiderCmpt);

    var _this4 = (0, _possibleConstructorReturn3.default)(this, (SiderCmpt.__proto__ || (0, _getPrototypeOf2.default)(SiderCmpt)).call(this, props));

    _this4.toggle = function () {
      _this4.setState({
        collapsed: !_this4.state.collapsed
      });
    };

    _this4.state = {
      collapsed: false
    };
    return _this4;
  }

  (0, _createClass3.default)(SiderCmpt, [{
    key: 'render',
    value: function render() {
      var _props3 = this.props,
          children = _props3.children,
          gutter = _props3.gutter,
          className = _props3.className,
          others = (0, _objectWithoutProperties3.default)(_props3, ['children', 'gutter', 'className']);

      return _react2.default.createElement(
        Sider,
        (0, _extends3.default)({ className: (0, _classnames2.default)(className, this._getClassName('sider')) }, others, { collapsedWidth: 0, trigger: null, collapsed: this.state.collapsed }),
        this.props.collapsible ? _react2.default.createElement(
          'span',
          { className: 'antui-layout-sider-trigger', onClick: this.toggle },
          _react2.default.createElement(_icon2.default, { type: this.state.collapsed ? 'right' : 'left' })
        ) : null,
        this.state.collapsed ? null : children
      );
    }
  }]);
  return SiderCmpt;
}(ExtendsCmpt);

SiderCmpt.__SIDER = true;
SiderCmpt.__ANT_LAYOUT_SIDER = true;
SiderCmpt.propTypes = {
  collapsible: _react.PropTypes.bool,
  width: _react.PropTypes.number
};
SiderCmpt.defaultProps = {
  collapsible: false,
  width: 200
};

var ContentCmpt = function (_ExtendsCmpt3) {
  (0, _inherits3.default)(ContentCmpt, _ExtendsCmpt3);

  function ContentCmpt() {
    (0, _classCallCheck3.default)(this, ContentCmpt);
    return (0, _possibleConstructorReturn3.default)(this, (ContentCmpt.__proto__ || (0, _getPrototypeOf2.default)(ContentCmpt)).apply(this, arguments));
  }

  (0, _createClass3.default)(ContentCmpt, [{
    key: 'render',
    value: function render() {
      var _props4 = this.props,
          children = _props4.children,
          padding = _props4.padding,
          style = _props4.style,
          className = _props4.className;

      return _react2.default.createElement(
        Content,
        { className: (0, _classnames2.default)(className, this._getClassName('content')), style: (0, _extends3.default)({}, style, { padding: padding }) },
        children
      );
    }
  }]);
  return ContentCmpt;
}(ExtendsCmpt);

ContentCmpt.__CONTENT = true;
ContentCmpt.propTypes = {
  padding: _react.PropTypes.oneOfType([_react.PropTypes.number, _react.PropTypes.string])
};
ContentCmpt.defaultProps = {
  padding: 0
};

var FooterCmpt = function (_ExtendsCmpt4) {
  (0, _inherits3.default)(FooterCmpt, _ExtendsCmpt4);

  function FooterCmpt() {
    (0, _classCallCheck3.default)(this, FooterCmpt);
    return (0, _possibleConstructorReturn3.default)(this, (FooterCmpt.__proto__ || (0, _getPrototypeOf2.default)(FooterCmpt)).apply(this, arguments));
  }

  (0, _createClass3.default)(FooterCmpt, [{
    key: 'render',
    value: function render() {
      var _props5 = this.props,
          children = _props5.children,
          justify = _props5.justify,
          align = _props5.align,
          border = _props5.border,
          size = _props5.size,
          style = _props5.style,
          className = _props5.className;

      var footerClass = (0, _classnames2.default)(className, (0, _extends3.default)({}, this._getClassName('footer'), {
        'antui-layout-footer-top': border === 'top',
        'antui-layout-footer-bottom': border === 'bottom',
        'antui-layout-footer-small': size === 'small'
      }));
      return _react2.default.createElement(
        Footer,
        { className: footerClass, style: style },
        justify || align ? _react2.default.createElement(
          _row2.default,
          { type: 'flex', justify: justify, align: align },
          children
        ) : _react2.default.createElement(
          _row2.default,
          null,
          children
        )
      );
    }
  }]);
  return FooterCmpt;
}(ExtendsCmpt);

FooterCmpt.__FOOTER = true;
FooterCmpt.propTypes = {
  border: _react.PropTypes.string,
  justify: _react.PropTypes.string,
  align: _react.PropTypes.string,
  size: _react.PropTypes.string
};

var DrawerCmpt = function (_Component3) {
  (0, _inherits3.default)(DrawerCmpt, _Component3);

  function DrawerCmpt() {
    (0, _classCallCheck3.default)(this, DrawerCmpt);
    return (0, _possibleConstructorReturn3.default)(this, (DrawerCmpt.__proto__ || (0, _getPrototypeOf2.default)(DrawerCmpt)).apply(this, arguments));
  }

  (0, _createClass3.default)(DrawerCmpt, [{
    key: 'render',
    value: function render() {
      return null;
    }
  }]);
  return DrawerCmpt;
}(_react.Component);

DrawerCmpt.__DRAWER = true;


LayoutCmpt.Header = HeaderCmpt;
LayoutCmpt.Sider = SiderCmpt;
LayoutCmpt.Content = ContentCmpt;
LayoutCmpt.Footer = FooterCmpt;
LayoutCmpt.Drawer = DrawerCmpt;

exports.default = LayoutCmpt;
module.exports = exports['default'];