react-cqtoolbox/lib/select/CascadeSelect.js

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

'use strict';

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

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };

var _jsxFileName = '/Users/chenyutian0510/Documents/dev-js/chuangqi/react-cqtoolbox/components/select/CascadeSelect.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 _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 _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

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 isArray = function isArray(arr) {
  return Object.prototype.toString.apply(arr) === '[object Array]';
};

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

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

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

    function CascadeSelect(props) {
      var _this2 = this;

      _classCallCheck(this, CascadeSelect);

      var _this = _possibleConstructorReturn(this, (CascadeSelect.__proto__ || Object.getPrototypeOf(CascadeSelect)).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: 76
            },
            __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: 85
            },
            __self: _this2
          },
          list.map(_this.getMenuItem)
        );
      };

      _this.getMenuItem = function (item) {
        var _this$props2 = _this.props,
            theme = _this$props2.theme,
            maxCascadeRowNum = _this$props2.maxCascadeRowNum;

        var children = item.children;

        if (children && _typeof(isArray(item.children))) {

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

          var menuItems = (0, _pipe2.default)((0, _splitEvery2.default)(maxCascadeRowNum), mapIndexed(_this.getMenuItemGroup))(children);

          return _react2.default.createElement(
            SubMenu,
            {
              key: item.value,
              title: item.label,
              theme: theme, __source: {
                fileName: _jsxFileName,
                lineNumber: 112
              },
              __self: _this2
            },
            _react2.default.createElement(
              'div',
              { className: theme.popupMenuInner, __source: {
                  fileName: _jsxFileName,
                  lineNumber: 116
                },
                __self: _this2
              },
              menuItems
            )
          );
        }

        return _react2.default.createElement(
          MenuItem,
          {
            key: item.label,
            theme: theme,
            onClick: _this.handleMenuItemClick(item), __source: {
              fileName: _jsxFileName,
              lineNumber: 124
            },
            __self: _this2
          },
          item.label
        );
      };

      _this.getMenuItemGroup = function (list, index) {
        return _react2.default.createElement(
          'div',
          { key: index, __source: {
              fileName: _jsxFileName,
              lineNumber: 134
            },
            __self: _this2
          },
          list.map(_this.getMenuItem)
        );
      };

      _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(CascadeSelect, [{
      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.reduce(function (array, b) {
          array.push(b);
          if (b.children && isArray(b.children)) array.push.apply(array, _toConsumableArray(b.children));
          return array;
        }, []).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: 170
            },
            __self: this
          },
          _react2.default.createElement(SelectInput, {
            theme: props.theme,
            selectedItem: selectedItem,
            isActive: state.open,
            onClick: this.handleSelectToggle, __source: {
              fileName: _jsxFileName,
              lineNumber: 176
            },
            __self: this
          })
        );
      }
    }]);

    return CascadeSelect;
  }(_react.Component), _class.propTypes = {
    value: _react.PropTypes.any,
    data: _react.PropTypes.array,
    returnValue: _react.PropTypes.bool,
    maxRowNum: _react.PropTypes.number,
    maxCascadeRowNum: _react.PropTypes.number,
    cascadeAction: _react.PropTypes.oneOf(['click', 'hover']),
    onChange: _react.PropTypes.func,
    theme: _react.PropTypes.shape({
      menu: _react.PropTypes.string,
      menuItem: _react.PropTypes.string
    })
  }, _class.defaultProps = {
    maxRowNum: 10,
    returnValue: false,
    maxCascadeRowNum: 5,
    cascadeAction: 'hover',
    onChange: function onChange() {
      return void 0;
    }
  }, _temp);


  return CascadeSelect;
};

exports.cascadeSelectFactory = factory;