ssc-grid/es/Dropdown.js

React grid component for SSC 3.0

import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
import _inherits from 'babel-runtime/helpers/inherits';
import React, { Component } from 'react';
import PropTypes from 'prop-types';

import DropdownButton from 'react-bootstrap/lib/DropdownButton';
import MenuItem from 'react-bootstrap/lib/MenuItem';

// YBZSAAS-461
// IE11不支持Array.prototype.find()
import 'core-js/fn/array/find';

/** 下拉菜单组件 */

var Dropdown = function (_Component) {
  _inherits(Dropdown, _Component);

  function Dropdown(props) {
    _classCallCheck(this, Dropdown);

    var _this = _possibleConstructorReturn(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 React.createElement(
      DropdownButton,
      {
        id: dropdownId,
        bsStyle: 'default',
        title: this.state.dropdownTitle,
        onSelect: this.handleSelect.bind(this)
      },
      data.map(function (item, index) {
        return React.createElement(
          MenuItem,
          {
            key: 'index-' + index + '-' + item.id,
            eventKey: item.id
          },
          item.name
        );
      })
    );
  };

  return Dropdown;
}(Component);

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