react-cqtoolbox/lib/select/Select.js

[![Travis][build-badge]][build] [![npm package][npm-badge]][npm] [![Coveralls][coveralls-badge]][coveralls]

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Select = exports.selectFactory = undefined;
var _jsxFileName = '/Users/chenyutian0510/Documents/dev-js/chuangqi/react-cqtoolbox/components/select/Select.js';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _trigger = require('../trigger');

var _trigger2 = _interopRequireDefault(_trigger);

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

var _select_input = require('../select_input');

var _select_input2 = _interopRequireDefault(_select_input);

var _splitEvery = require('ramda/src/splitEvery');

var _splitEvery2 = _interopRequireDefault(_splitEvery);

var _addIndex = require('ramda/src/addIndex');

var _addIndex2 = _interopRequireDefault(_addIndex);

var _map = require('ramda/src/map');

var _map2 = _interopRequireDefault(_map);

var _pipe = require('ramda/src/pipe');

var _pipe2 = _interopRequireDefault(_pipe);

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

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var popupAlign = {
  points: ['tl', 'bl'],
  offset: [0, 10]
};

var factory = function factory(Trigger, SelectInput, Menu, MenuItem) {
  var _class, _temp;

  var Select = (_temp = _class = function (_Component) {
    _inherits(Select, _Component);

    function Select(props) {
      var _this2 = this;

      _classCallCheck(this, Select);

      var _this = _possibleConstructorReturn(this, (Select.__proto__ || Object.getPrototypeOf(Select)).call(this, props));

      _this.getMenus = function (list) {
        var _this$props = _this.props,
            data = _this$props.data,
            theme = _this$props.theme,
            maxRowNum = _this$props.maxRowNum;


        var mapIndexed = (0, _addIndex2.default)(_map2.default);

        var menus = (0, _pipe2.default)((0, _splitEvery2.default)(maxRowNum), mapIndexed(_this.getMenu))(data);

        return _react2.default.createElement(
          'div',
          { className: theme.menuOutter, __source: {
              fileName: _jsxFileName,
              lineNumber: 74
            },
            __self: _this2
          },
          menus
        );
      };

      _this.getMenu = function (list, index) {
        var theme = _this.props.theme;
        return _react2.default.createElement(
          Menu,
          {
            key: index,
            mode: 'vertical',
            theme: theme, __source: {
              fileName: _jsxFileName,
              lineNumber: 83
            },
            __self: _this2
          },
          list.map(_this.getMenuItem)
        );
      };

      _this.getMenuItem = function (item) {
        var theme = _this.props.theme;
        return _react2.default.createElement(
          MenuItem,
          {
            theme: theme,
            key: item.label,
            onClick: _this.handleMenuItemClick(item), __source: {
              fileName: _jsxFileName,
              lineNumber: 95
            },
            __self: _this2
          },
          item.label
        );
      };

      _this.handleMenuItemClick = function (item) {
        return function () {
          _this.handleSelectToggle();
          if (!('value' in _this.props)) {
            _this.setState({ value: item.value });
          }

          if (_this.props.returnValue) {
            _this.props.onChange(item.value);
          } else {
            _this.props.onChange(item);
          }
        };
      };

      _this.handleSelectToggle = function () {
        _this.setState({ open: !_this.state.open });
      };

      var value = void 0;
      if ('value' in props) {
        value = props.value;
      } else {
        value = props.data[0].value;
      }

      _this.state = {
        value: value,
        open: false
      };
      return _this;
    }

    _createClass(Select, [{
      key: 'componentWillReceiveProps',
      value: function componentWillReceiveProps(nextProps) {
        if ('value' in nextProps) {
          this.setState({ value: nextProps.value });
        }
      }
    }, {
      key: 'render',
      value: function render() {
        var props = this.props;
        var state = this.state;
        var menu = this.getMenus(props.data);
        var selectedItem = props.data.find(function (item) {
          return item.value === state.value;
        }) || props.data[0];

        return _react2.default.createElement(
          Trigger,
          {
            popupAlign: popupAlign,
            popupVisible: state.open,
            onPopupVisibleChange: this.handleSelectToggle,
            popupTheme: props.theme,
            popup: menu, __source: {
              fileName: _jsxFileName,
              lineNumber: 130
            },
            __self: this
          },
          _react2.default.createElement(SelectInput, {
            theme: props.theme,
            selectedItem: selectedItem,
            isActive: state.open,
            onClick: this.handleSelectToggle, __source: {
              fileName: _jsxFileName,
              lineNumber: 136
            },
            __self: this
          })
        );
      }
    }]);

    return Select;
  }(_react.Component), _class.propTypes = {
    value: _react.PropTypes.any,
    data: _react.PropTypes.array,
    returnValue: _react.PropTypes.bool,
    maxRowNum: _react.PropTypes.number,
    onChange: _react.PropTypes.func,
    theme: _react.PropTypes.shape({
      menu: _react.PropTypes.string,
      menuItem: _react.PropTypes.string
    })
  }, _class.defaultProps = {
    maxRowNum: 10,
    returnValue: true,
    onChange: function onChange() {
      return void 0;
    }
  }, _temp);


  return Select;
};

var Select = factory(_trigger2.default, _select_input2.default, _menu.Menu, _menu.MenuItem);

exports.selectFactory = factory;
exports.Select = Select;