@alifd/next/lib/nav/nav.js

'use strict';

exports.__esModule = true;

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

var _extends3 = _interopRequireDefault(_extends2);

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

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

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

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

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

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

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

var _inherits3 = _interopRequireDefault(_inherits2);

var _class, _temp;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _configProvider = require('../config-provider');

var _configProvider2 = _interopRequireDefault(_configProvider);

var _menu = require('../menu');

var _menu2 = _interopRequireDefault(_menu);

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

/**
 * Nav
 * @description 继承自 `Menu` 的能力请查看 `Menu` 文档
 */
var Nav = (_temp = _class = function (_Component) {
  (0, _inherits3.default)(Nav, _Component);

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

    var _this = (0, _possibleConstructorReturn3.default)(this, _Component.call(this, props));

    _this.getMenuRef = _this.getMenuRef.bind(_this);
    return _this;
  }

  Nav.prototype.getChildContext = function getChildContext() {
    var _props = this.props,
        prefix = _props.prefix,
        direction = _props.direction,
        mode = _props.mode,
        iconOnly = _props.iconOnly,
        iconOnlyWidth = _props.iconOnlyWidth,
        iconTextOnly = _props.iconTextOnly,
        hasTooltip = _props.hasTooltip,
        hasArrow = _props.hasArrow;
    var isCollapse = this.context.isCollapse;


    return {
      prefix: prefix,
      mode: direction === 'hoz' ? 'popup' : mode,
      iconOnly: 'iconOnly' in this.props ? iconOnly : isCollapse,
      iconOnlyWidth: 'iconOnlyWidth' in this.props ? iconOnlyWidth : undefined,
      iconTextOnly: iconTextOnly,
      hasTooltip: hasTooltip,
      hasArrow: hasArrow
    };
  };

  Nav.prototype.getMenuRef = function getMenuRef(ref) {
    this.menu = ref;
  };

  Nav.prototype.render = function render() {
    var _classNames, _classNames2;

    // eslint-disable-next-line
    var _props2 = this.props,
        prefix = _props2.prefix,
        className = _props2.className,
        style = _props2.style,
        children = _props2.children,
        type = _props2.type,
        direction = _props2.direction,
        activeDirection = _props2.activeDirection,
        mode = _props2.mode,
        triggerType = _props2.triggerType,
        inlineIndent = _props2.inlineIndent,
        openMode = _props2.openMode,
        popupAlign = _props2.popupAlign,
        popupClassName = _props2.popupClassName,
        iconOnly = _props2.iconOnly,
        iconOnlyWidth = _props2.iconOnlyWidth,
        iconTextOnly = _props2.iconTextOnly,
        hasArrow = _props2.hasArrow,
        hasTooltip = _props2.hasTooltip,
        embeddable = _props2.embeddable,
        _popupProps = _props2.popupProps,
        rtl = _props2.rtl,
        others = (0, _objectWithoutProperties3.default)(_props2, ['prefix', 'className', 'style', 'children', 'type', 'direction', 'activeDirection', 'mode', 'triggerType', 'inlineIndent', 'openMode', 'popupAlign', 'popupClassName', 'iconOnly', 'iconOnlyWidth', 'iconTextOnly', 'hasArrow', 'hasTooltip', 'embeddable', 'popupProps', 'rtl']);
    var isCollapse = this.context.isCollapse;


    var newIconOnly = 'iconOnly' in this.props ? iconOnly : isCollapse;

    var realActiveDirection = activeDirection;
    if (realActiveDirection && (direction === 'hoz' && (realActiveDirection === 'left' || realActiveDirection === 'right') || direction === 'ver' && (realActiveDirection === 'top' || realActiveDirection === 'bottom'))) {
      realActiveDirection = null;
    }

    if (!newIconOnly && realActiveDirection === undefined) {
      realActiveDirection = direction === 'hoz' ? 'bottom' : type === 'line' ? 'right' : 'left';
    }

    var cls = (0, _classnames2.default)((_classNames = {}, _classNames[prefix + 'nav'] = true, _classNames['' + prefix + type] = type, _classNames[prefix + 'active'] = realActiveDirection, _classNames['' + prefix + realActiveDirection] = realActiveDirection, _classNames[prefix + 'icon-only'] = newIconOnly, _classNames[prefix + 'icon-only-text'] = newIconOnly && iconTextOnly, _classNames[prefix + 'custom-icon-only-width'] = newIconOnly && 'iconOnlyWidth' in this.props, _classNames[prefix + 'no-arrow'] = !hasArrow, _classNames[prefix + 'nav-embeddable'] = embeddable, _classNames[className] = !!className, _classNames));
    var newStyle = newIconOnly ? (0, _extends3.default)({}, style, { width: iconOnlyWidth || 58 }) : style;

    var props = {
      prefix: prefix,
      direction: direction,
      openMode: openMode,
      triggerType: triggerType,
      mode: direction === 'hoz' ? 'popup' : mode,
      popupAlign: direction === 'hoz' ? 'follow' : popupAlign,
      inlineIndent: newIconOnly ? 0 : inlineIndent,
      hasSelectedIcon: false,
      popupAutoWidth: true,
      selectMode: 'single',
      itemClassName: prefix + 'nav-item',
      popupClassName: (0, _classnames2.default)((_classNames2 = {}, _classNames2[cls.replace(prefix + 'icon-only', '').replace(prefix + 'nav-embeddable', '')] = mode === 'popup', _classNames2[prefix + 'icon-only'] = newIconOnly && mode === 'inline', _classNames2[popupClassName] = !!popupClassName, _classNames2)),
      popupProps: function popupProps() {
        return (0, _extends3.default)({}, _popupProps);
      }
    };

    return _react2.default.createElement(
      _menu2.default,
      (0, _extends3.default)({ className: cls, style: newStyle }, props, others, { ref: this.getMenuRef }),
      children
    );
  };

  return Nav;
}(_react.Component), _class.propTypes = {
  prefix: _propTypes2.default.string,
  pure: _propTypes2.default.bool,
  rtl: _propTypes2.default.bool,
  className: _propTypes2.default.string,
  style: _propTypes2.default.object,
  /**
   * 导航项和子导航
   */
  children: _propTypes2.default.node,
  /**
   * 导航类型
   * @enumdesc 普通, 主要, 次要, 线形
   */
  type: _propTypes2.default.oneOf(['normal', 'primary', 'secondary', 'line']),
  /**
   * 导航布局
   * @enumdesc 水平, 垂直
   */
  direction: _propTypes2.default.oneOf(['hoz', 'ver']),
  /**
   * 横向导航条 items 和 footer 的对齐方向，在 direction 设置为 'hoz' 并且 header 存在时生效
   */
  hozAlign: _propTypes2.default.oneOf(['left', 'right']),
  /**
   * 设置组件选中状态的 active 边方向
   * @enumdesc 无, 上, 下, 左, 右
   * @default 当 direction 为 'hoz' 时，默认值为 'bottom'，当 direction 为 'ver' 时，默认值为 'left'
   */
  activeDirection: _propTypes2.default.oneOf([null, 'top', 'bottom', 'left', 'right']),
  /**
   * 子导航打开的模式（水平导航只支持弹出）
   * @eumdesc 行内, 弹出
   */
  mode: _propTypes2.default.oneOf(['inline', 'popup']),
  /**
   * 子导航打开的触发方式
   */
  triggerType: _propTypes2.default.oneOf(['click', 'hover']),
  /**
   * 内联子导航缩进距离
   */
  inlineIndent: _propTypes2.default.number,
  /**
   * 首次渲染展开所有的子导航，只在 mode 设置为 'inline' 以及 openMode 设置为 'multiple' 下生效
   */
  defaultOpenAll: _propTypes2.default.bool,
  /**
   * 内联子导航的展开模式，同时可以展开一个同级子导航还是多个同级子导航，该属性仅在 mode 为 inline 时生效
   * @eumdesc 一个, 多个
   */
  openMode: _propTypes2.default.oneOf(['single', 'multiple']),
  /**
   * 当前选中导航项的 key 值
   */
  selectedKeys: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.array]),
  /**
   * 初始选中导航项的 key 值
   */
  defaultSelectedKeys: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.array]),
  /**
   * 选中或取消选中导航项触发的回调函数
   * @param {Array} selectedKeys 选中的所有导航项的 key
   * @param {Object} item 选中或取消选中的导航项
   * @param {Object} extra 额外参数
   * @param {Boolean} extra.select 是否是选中
   * @param {Array} extra.key 导航项的 key
   * @param {Object} extra.label 导航项的文本
   * @param {Array} extra.keyPath 导航项 key 的路径
   */
  onSelect: _propTypes2.default.func,
  /**
   * 弹出子导航的对齐方式（水平导航只支持 follow ）
   * @eumdesc Item 顶端对齐, Nav 顶端对齐
   */
  popupAlign: _propTypes2.default.oneOf(['follow', 'outside']),
  /**
   * 弹出子导航的自定义类名
   */
  popupClassName: _propTypes2.default.string,
  /**
   * 是否只显示图标
   */
  iconOnly: _propTypes2.default.bool,
  /**
   * iconOnly 模式下的宽度（仅在 iconOnly=true 时生效） 如果传入了iconOnlyWidth，那么会隐藏文本，例如 Nav.Item 的 label
   */
  iconOnlyWidth: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
  /**
   * iconOnly模式下是否展示文字（仅在 iconOnly=true 时生效）
   */
  iconTextOnly: _propTypes2.default.bool,
  /**
   * 是否显示右侧的箭头（仅在 iconOnly=true 时生效）
   */
  hasArrow: _propTypes2.default.bool,
  /**
   * 是否有 ToolTips （仅在 iconOnly=true 时生效）
   */
  hasTooltip: _propTypes2.default.bool,
  /**
   * 自定义导航头部
   */
  header: _propTypes2.default.node,
  /**
   * 自定义导航尾部
   */
  footer: _propTypes2.default.node,
  /**
   * 是否开启嵌入式模式，一般用于Layout的布局中，开启后没有默认背景、外层border、box-shadow，可以配合`<Nav style={{lineHeight: '100px'}}>` 自定义高度
   * @version 1.18
   */
  embeddable: _propTypes2.default.bool,
  popupProps: _propTypes2.default.object
}, _class.defaultProps = {
  prefix: 'next-',
  pure: false,
  type: 'normal',
  direction: 'ver',
  hozAlign: 'left',
  mode: 'inline',
  triggerType: 'click',
  inlineIndent: 20,
  defaultOpenAll: false,
  openMode: 'multiple',
  defaultSelectedKeys: [],
  popupAlign: 'follow',
  hasTooltip: false,
  embeddable: false,
  hasArrow: true,
  popupProps: {}
}, _class.childContextTypes = {
  prefix: _propTypes2.default.string,
  mode: _propTypes2.default.string,
  iconOnly: _propTypes2.default.bool,
  iconOnlyWidth: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
  iconTextOnly: _propTypes2.default.bool,
  hasTooltip: _propTypes2.default.bool,
  hasArrow: _propTypes2.default.bool
}, _class.contextTypes = {
  isCollapse: _propTypes2.default.bool
}, _temp);
Nav.displayName = 'Nav';
exports.default = _configProvider2.default.config(Nav);
module.exports = exports['default'];