@icedesign/demo-layout/lib/Layout.js

DemoLayout

'use strict';

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

var _class, _temp, _initialiseProps; /* eslint no-undef:0, no-unused-expressions:0, array-callback-return:0 */


var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _layout = require('@icedesign/layout');

var _layout2 = _interopRequireDefault(_layout);

var _menu = require('@icedesign/menu');

var _menu2 = _interopRequireDefault(_menu);

var _reactRouter = require('react-router');

var _foundationSymbol = require('foundation-symbol');

var _foundationSymbol2 = _interopRequireDefault(_foundationSymbol);

var _reactContainerQuery = require('react-container-query');

var _enquireJs = require('enquire-js');

var _Header = require('./Header');

var _Header2 = _interopRequireDefault(_Header);

var _Footer = require('./Footer');

var _Footer2 = _interopRequireDefault(_Footer);

var _Logo = require('./Logo');

var _Logo2 = _interopRequireDefault(_Logo);

var _navs = require('./navs');

require('./scss/light.scss');

require('./scss/dark.scss');

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

function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }

var Icon = require('@icedesign/base/lib/icon');

var theme = typeof THEME === 'undefined' ? 'dark' : THEME;

var query = {
  'screen-xs': {
    maxWidth: 720
  },
  'screen-sm': {
    minWidth: 721,
    maxWidth: 1199
  },
  'screen-xl': {
    minWidth: 1200
  }
};

var HeaderAsideFooterResponsiveLayout = (_temp = _class = function (_Component) {
  _inherits(HeaderAsideFooterResponsiveLayout, _Component);

  function HeaderAsideFooterResponsiveLayout(props) {
    _classCallCheck(this, HeaderAsideFooterResponsiveLayout);

    var _this = _possibleConstructorReturn(this, _Component.call(this, props));

    _initialiseProps.call(_this);

    var openKeys = _this.getOpenKeys();
    _this.state = {
      collapse: false,
      openDrawer: false,
      isScreen: undefined,
      openKeys: openKeys
    };
    _this.openKeysCache = openKeys;
    return _this;
  }

  HeaderAsideFooterResponsiveLayout.prototype.componentDidMount = function componentDidMount() {
    this.enquireScreenRegister();
  };

  // 当前打开的菜单项


  HeaderAsideFooterResponsiveLayout.prototype.render = function render() {
    var _this2 = this;

    var _props$location = this.props.location,
        location = _props$location === undefined ? {} : _props$location;
    var pathname = location.pathname;


    return _react2.default.createElement(
      _reactContainerQuery.ContainerQuery,
      { query: query },
      function (params) {
        return _react2.default.createElement(
          'div',
          { className: (0, _classnames2.default)(params) },
          _react2.default.createElement(
            _layout2.default,
            {
              style: { minHeight: '100vh' },
              className: (0, _classnames2.default)('ice-design-header-aside-footer-responsive-layout-' + theme, {
                'ice-design-layout': true
              })
            },
            _react2.default.createElement(_Header2.default, {
              theme: theme,
              isMobile: _this2.state.isScreen !== 'isDesktop' ? true : undefined
            }),
            _react2.default.createElement(
              _layout2.default.Section,
              null,
              _this2.state.isScreen === 'isMobile' && _react2.default.createElement(
                'a',
                { className: 'menu-btn', onClick: _this2.toggleMenu },
                _react2.default.createElement(Icon, { type: 'category', size: 'small' })
              ),
              _this2.state.openDrawer && _react2.default.createElement('div', { className: 'open-drawer-bg', onClick: _this2.toggleMenu }),
              _react2.default.createElement(
                _layout2.default.Aside,
                {
                  width: 'auto',
                  theme: theme,
                  className: (0, _classnames2.default)('ice-design-layout-aside', {
                    'open-drawer': _this2.state.openDrawer
                  })
                },
                _this2.state.isScreen !== 'isMobile' && _react2.default.createElement(
                  'a',
                  { className: 'collapse-btn', onClick: _this2.toggleCollapse },
                  _react2.default.createElement(Icon, {
                    type: _this2.state.collapse ? 'arrow-right' : 'arrow-left',
                    size: 'small'
                  })
                ),
                _this2.state.isScreen === 'isMobile' && _react2.default.createElement(_Logo2.default, null),
                _react2.default.createElement(
                  _menu2.default,
                  {
                    style: { width: _this2.state.collapse ? 60 : 200 },
                    inlineCollapsed: _this2.state.collapse,
                    mode: 'inline',
                    selectedKeys: [pathname],
                    openKeys: _this2.state.openKeys,
                    defaultSelectedKeys: [pathname],
                    onOpenChange: _this2.onOpenChange,
                    onClick: _this2.onMenuClick
                  },
                  _navs.asideNavs && _navs.asideNavs.length > 0 && _navs.asideNavs.map(function (nav, index) {
                    if (nav.children && nav.children.length > 0) {
                      return _react2.default.createElement(
                        _menu.SubMenu,
                        {
                          key: index,
                          title: _react2.default.createElement(
                            'span',
                            null,
                            nav.icon ? _react2.default.createElement(_foundationSymbol2.default, {
                              size: 'small',
                              type: nav.icon
                            }) : null,
                            _react2.default.createElement(
                              'span',
                              { className: 'ice-menu-collapse-hide' },
                              nav.text
                            )
                          )
                        },
                        nav.children.map(function (item) {
                          var linkProps = {};
                          if (item.newWindow) {
                            linkProps.href = item.to;
                            linkProps.target = '_blank';
                          } else if (item.external) {
                            linkProps.href = item.to;
                          } else {
                            linkProps.to = item.to;
                          }

                          return _react2.default.createElement(
                            _menu.Item,
                            { key: item.to },
                            _react2.default.createElement(
                              _reactRouter.Link,
                              linkProps,
                              item.text
                            )
                          );
                        })
                      );
                    }

                    var linkProps = {};
                    if (nav.newWindow) {
                      linkProps.href = nav.to;
                      linkProps.target = '_blank';
                    } else if (nav.external) {
                      linkProps.href = nav.to;
                    } else {
                      linkProps.to = nav.to;
                    }

                    return _react2.default.createElement(
                      _menu.Item,
                      { key: nav.to },
                      _react2.default.createElement(
                        _reactRouter.Link,
                        linkProps,
                        _react2.default.createElement(
                          'span',
                          null,
                          nav.icon ? _react2.default.createElement(_foundationSymbol2.default, {
                            size: 'small',
                            type: nav.icon
                          }) : null,
                          _react2.default.createElement(
                            'span',
                            { className: 'ice-menu-collapse-hide' },
                            nav.text
                          )
                        )
                      )
                    );
                  })
                )
              ),
              _react2.default.createElement(
                _layout2.default.Main,
                null,
                _this2.props.children
              )
            ),
            _react2.default.createElement(_Footer2.default, null)
          )
        );
      }
    );
  };

  return HeaderAsideFooterResponsiveLayout;
}(_react.Component), _class.propTypes = {}, _class.defaultProps = {}, _initialiseProps = function _initialiseProps() {
  var _this3 = this;

  this.enquireScreenRegister = function () {
    var isMobile = 'screen and (max-width: 720px)';
    var isTablet = 'screen and (min-width: 721px) and (max-width: 1199px)';
    var isDesktop = 'screen and (min-width: 1200px)';

    _enquireJs.enquire.register(isMobile, _this3.enquireScreenHandle('isMobile'));
    _enquireJs.enquire.register(isTablet, _this3.enquireScreenHandle('isTablet'));
    _enquireJs.enquire.register(isDesktop, _this3.enquireScreenHandle('isDesktop'));
  };

  this.enquireScreenHandle = function (type) {
    var collapse = void 0;
    if (type === 'isMobile') {
      collapse = false;
    } else if (type === 'isTablet') {
      collapse = true;
    } else {
      collapse = _this3.state.collapse;
    }

    var handler = {
      match: function match() {
        _this3.setState({
          isScreen: type,
          collapse: collapse
        });
      },
      unmatch: function unmatch() {
        // handler unmatched
      }
    };

    return handler;
  };

  this.toggleCollapse = function () {
    var collapse = _this3.state.collapse;

    var openKeys = !collapse ? [] : _this3.openKeysCache;

    _this3.setState({
      collapse: !collapse,
      openKeys: openKeys
    });
  };

  this.toggleMenu = function () {
    var openDrawer = _this3.state.openDrawer;

    _this3.setState({
      openDrawer: !openDrawer
    });
  };

  this.onOpenChange = function (openKeys) {
    _this3.setState({
      openKeys: openKeys
    });
    _this3.openKeysCache = openKeys;
  };

  this.onMenuClick = function () {
    _this3.toggleMenu();
  };

  this.getOpenKeys = function () {
    var routes = _this3.props.routes;

    if (!routes) return [];
    var matched = routes[0].path;
    var openKeys = [];

    _navs.asideNavs && _navs.asideNavs.length > 0 && _navs.asideNavs.map(function (item, index) {
      if (item.to === matched) {
        openKeys = ['' + index];
      }
    });

    return openKeys;
  };
}, _temp);
exports.default = HeaderAsideFooterResponsiveLayout;
module.exports = exports['default'];