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

DemoLayout

'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _img = require('@icedesign/img');

var _img2 = _interopRequireDefault(_img);

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

var _layout2 = _interopRequireDefault(_layout);

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

var _menu2 = _interopRequireDefault(_menu);

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

var _foundationSymbol2 = _interopRequireDefault(_foundationSymbol);

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

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

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

var _Logo2 = _interopRequireDefault(_Logo);

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 Balloon = require('@icedesign/base/lib/balloon');

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

var Header = function (_PureComponent) {
  _inherits(Header, _PureComponent);

  function Header() {
    _classCallCheck(this, Header);

    return _possibleConstructorReturn(this, _PureComponent.apply(this, arguments));
  }

  Header.prototype.render = function render() {
    var _props = this.props,
        width = _props.width,
        theme = _props.theme,
        isMobile = _props.isMobile;


    return _react2.default.createElement(
      _layout2.default.Header,
      {
        theme: theme,
        className: 'ice-design-layout-header',
        style: { width: width }
      },
      _react2.default.createElement(_Logo2.default, null),
      _react2.default.createElement(
        'div',
        {
          className: 'ice-design-layout-header-menu',
          style: { display: 'flex' }
        },
        _navs.headerNavs && _navs.headerNavs.length > 0 ? _react2.default.createElement(
          _menu2.default,
          { mode: 'horizontal', selectedKeys: [] },
          _navs.headerNavs.map(function (nav, idx) {
            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(
              _menu2.default.Item,
              { key: idx },
              _react2.default.createElement(
                _reactRouter.Link,
                linkProps,
                nav.icon ? _react2.default.createElement(_foundationSymbol2.default, { type: nav.icon, size: 'small' }) : null,
                !isMobile ? nav.text : null
              )
            );
          })
        ) : null,
        _react2.default.createElement(
          Balloon,
          {
            trigger: _react2.default.createElement(
              'div',
              {
                className: 'ice-design-header-userpannel',
                style: {
                  marginLeft: 20,
                  display: 'flex',
                  alignItems: 'center',
                  fontSize: 12
                }
              },
              _react2.default.createElement(_img2.default, {
                height: 40,
                width: 40,
                src: 'https://img.alicdn.com/tfs/TB1L6tBXQyWBuNjy0FpXXassXXa-80-80.png',
                style: { marginRight: '12px', borderRadius: 4 }
              }),
              _react2.default.createElement(
                'div',
                { className: 'user-profile' },
                _react2.default.createElement(
                  'span',
                  { className: 'user-name', style: { fontSize: '13px' } },
                  '\u6DD8\u5C0F\u5B9D'
                ),
                _react2.default.createElement('br', null),
                _react2.default.createElement(
                  'span',
                  {
                    className: 'user-department',
                    style: { fontSize: '12px' }
                  },
                  '\u6280\u672F\u90E8'
                )
              ),
              _react2.default.createElement(Icon, {
                type: 'arrow-down-filling',
                size: 'xxs',
                className: 'icon-down'
              })
            ),
            closable: false,
            className: 'user-profile-menu'
          },
          _react2.default.createElement(
            'ul',
            null,
            _react2.default.createElement(
              'li',
              { className: 'user-profile-menu-item' },
              _react2.default.createElement(
                _reactRouter.Link,
                { to: '/' },
                _react2.default.createElement(_foundationSymbol2.default, { type: 'person', size: 'small' }),
                '\u6211\u7684\u4E3B\u9875'
              )
            ),
            _react2.default.createElement(
              'li',
              { className: 'user-profile-menu-item' },
              _react2.default.createElement(
                _reactRouter.Link,
                { to: '/' },
                _react2.default.createElement(_foundationSymbol2.default, { type: 'repair', size: 'small' }),
                '\u8BBE\u7F6E'
              )
            ),
            _react2.default.createElement(
              'li',
              { className: 'user-profile-menu-item' },
              _react2.default.createElement(
                _reactRouter.Link,
                { to: '/' },
                _react2.default.createElement(_foundationSymbol2.default, { type: 'compass', size: 'small' }),
                '\u9000\u51FA'
              )
            )
          )
        )
      )
    );
  };

  return Header;
}(_react.PureComponent);

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