zent/lib/tabs/components/TabPanel.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 TabPanel = function (_ref) {
  (0, _inherits3['default'])(TabPanel, _ref);

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

  (0, _createClass3['default'])(TabPanel, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      this.componentDidUpdate();
    }
  }, {
    key: 'componentDidUpdate',
    value: function componentDidUpdate() {
      var _props = this.props,
          onPanelReady = _props.onPanelReady,
          id = _props.id;
      // Dom ready后的回调

      onPanelReady(id);
    }
  }, {
    key: 'render',
    value: function render() {
      var props = this.props;
      var actived = props.actived;
      var hiddenStyle = {};
      if (!actived) {
        hiddenStyle.display = 'none';
      }
      return _react2['default'].createElement(
        'div',
        {
          style: hiddenStyle,
          role: 'tabpanel',
          id: props.prefix + '-tabpanel-' + props.uniqueId + '-' + props.id,
          className: props.prefix + '-tab-tabpanel ' + props.className
        },
        props.children
      );
    }
  }]);
  return TabPanel;
}(_react.PureComponent || _react.Component);

TabPanel.propTypes = {
  className: _propTypes2['default'].string,
  prefix: _propTypes2['default'].string,
  actived: _propTypes2['default'].bool,
  tab: _propTypes2['default'].any.isRequired,
  id: _propTypes2['default'].oneOfType([_propTypes2['default'].string, _propTypes2['default'].number]),
  onPanelReady: _propTypes2['default'].func,
  uniqueId: _propTypes2['default'].number
};
TabPanel.defaultProps = {
  prefix: 'zent',
  className: '',
  actived: false,
  onPanelReady: _noop2['default'],
  uniqueId: 0
};
exports['default'] = TabPanel;