ssc-grid/lib/Dropdown.js

React grid component for SSC 3.0

'use strict';

exports.__esModule = true;

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 _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _DropdownButton = require('react-bootstrap/lib/DropdownButton');

var _DropdownButton2 = _interopRequireDefault(_DropdownButton);

var _MenuItem = require('react-bootstrap/lib/MenuItem');

var _MenuItem2 = _interopRequireDefault(_MenuItem);

require('core-js/fn/array/find');

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

/** 下拉菜单组件 */
var Dropdown = function (_Component) {
  (0, _inherits3['default'])(Dropdown, _Component);

  function Dropdown(props) {
    (0, _classCallCheck3['default'])(this, Dropdown);

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

    _this.state = {
      dropdownTitle: _this.props.defaultTitle
    };
    return _this;
  }

  Dropdown.prototype.componentWillMount = function componentWillMount() {};

  // 下拉菜单点击事件


  Dropdown.prototype.handleSelect = function handleSelect(selectedItemId, event) {
    var data = this.props.data;

    var foundItem = data.find(function (item) {
      return item.id === selectedItemId;
    });
    if (foundItem) {
      this.setState({
        dropdownTitle: foundItem.name
      });
    }
    if (this.props.onSelect) {
      this.props.onSelect(foundItem, event);
    }
  };

  Dropdown.prototype.render = function render() {
    var _props = this.props,
        dropdownId = _props.dropdownId,
        data = _props.data;


    return _react2['default'].createElement(
      _DropdownButton2['default'],
      {
        id: dropdownId,
        bsStyle: 'default',
        title: this.state.dropdownTitle,
        onSelect: this.handleSelect.bind(this)
      },
      data.map(function (item, index) {
        return _react2['default'].createElement(
          _MenuItem2['default'],
          {
            key: 'index-' + index + '-' + item.id,
            eventKey: item.id
          },
          item.name
        );
      })
    );
  };

  return Dropdown;
}(_react.Component);

// YBZSAAS-461
// IE11不支持Array.prototype.find()


Dropdown.displayName = 'Dropdown';
Dropdown.propTypes = {
  dropdownId: _propTypes2['default'].string.isRequired,
  defaultTitle: _propTypes2['default'].string.isRequired,
  /**
   * 填充下拉菜单的数据
   * ```json
   * [
   *   {id: 'zh_CN', name: '简体中文'},
   *   {id: 'en_US', name: '英文美国'}
   * ]
   * ```
   */
  data: _propTypes2['default'].array.isRequired,
  /**
   * 当从下拉菜单选择一项的时候
   * @param {Object} selectedItem 被选中项{id: 'zh_CN', name: '简体中文'}
   * @param {Object} event
   */
  onSelect: _propTypes2['default'].func
};
exports['default'] = Dropdown;
module.exports = exports['default'];