zent/lib/tabs/components/Tab.js

一套前端设计语言和基于React的实现

'use strict';

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

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 _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _noop = require('lodash/noop');

var _noop2 = _interopRequireDefault(_noop);

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

var Tab = function (_ref) {
  (0, _inherits3['default'])(Tab, _ref);

  function Tab() {
    (0, _classCallCheck3['default'])(this, Tab);
    return (0, _possibleConstructorReturn3['default'])(this, (Tab.__proto__ || Object.getPrototypeOf(Tab)).apply(this, arguments));
  }

  (0, _createClass3['default'])(Tab, [{
    key: 'onDel',
    value: function onDel(e) {
      e.stopPropagation();
      var _props = this.props,
          onDelete = _props.onDelete,
          id = _props.id;

      onDelete(id);
    }
  }, {
    key: 'onClick',
    value: function onClick() {
      var _props2 = this.props,
          onSelected = _props2.onSelected,
          id = _props2.id,
          actived = _props2.actived,
          disabled = _props2.disabled;

      if (!actived && !disabled) {
        onSelected(id);
      }
    }
  }, {
    key: 'renderDelOperater',
    value: function renderDelOperater() {
      var _props3 = this.props,
          candel = _props3.candel,
          prefix = _props3.prefix;

      if (candel) {
        return _react2['default'].createElement(
          'span',
          {
            className: prefix + '-tabs-tab-inner-del',
            onClick: this.onDel.bind(this)
          },
          '\u2715'
        );
      }
      return '';
    }
  }, {
    key: 'render',
    value: function render() {
      var props = this.props;
      var prefix = props.prefix,
          minWidth = props.minWidth;

      var classes = prefix + '-tabs-tab';
      if (props.actived) {
        classes += ' ' + prefix + '-tabs-actived';
      }
      if (props.disabled) {
        classes += ' ' + prefix + '-tabs-disabled';
      }
      var style = {};
      if (minWidth) {
        style.minWidth = minWidth;
      }
      return _react2['default'].createElement(
        'div',
        {
          role: 'tab',
          'aria-labelledby': props.prefix + '-tabpanel-' + props.uniqueId + '-' + props.id,
          className: classes,
          'aria-disabled': props.disabled,
          'aria-selected': props.actived,
          onClick: this.onClick.bind(this),
          style: style
        },
        _react2['default'].createElement(
          'div',
          { className: prefix + '-tabs-tab-inner' },
          this.renderDelOperater(),
          props.children
        )
      );
    }
  }]);
  return Tab;
}(_react.PureComponent || _react.Component);

Tab.propTypes = {
  prefix: _propTypes2['default'].string,
  actived: _propTypes2['default'].bool,
  disabled: _propTypes2['default'].bool,
  id: _propTypes2['default'].oneOfType([_propTypes2['default'].string, _propTypes2['default'].number]),
  minWidth: _propTypes2['default'].string,
  onSelected: _propTypes2['default'].func,
  onDelete: _propTypes2['default'].func,
  candel: _propTypes2['default'].bool,
  uniqueId: _propTypes2['default'].number
};
Tab.defaultProps = {
  prefix: 'zent',
  actived: false,
  disabled: false,
  id: '',
  minWidth: '',
  onSelected: _noop2['default'],
  onDelete: _noop2['default'],
  candel: false
};
exports['default'] = Tab;