react-misc-toolbox/dist/SelectMany.js

'use strict';

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

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');

var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');

var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _helperFunctions = require('./helperFunctions');

var _CTCPopover = require('./CTCPopover');

var _CTCPopover2 = _interopRequireDefault(_CTCPopover);

var _defaultStyles = require('./defaultStyles');

var _Button = require('./Button');

var _Button2 = _interopRequireDefault(_Button);

var _StyledSelect = require('./StyledSelect');

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

var defaultRenderCurrentOption = function defaultRenderCurrentOption(_ref) {
  var label = _ref.label;

  if (typeof label === 'string') {
    return label;
  } else {
    var flattened = (0, _helperFunctions.flatten)(label);
    return flattened.join(', ');
  }
};

var SelectMany = function SelectMany(_ref2) {
  var _ref2$onChange = _ref2.onChange,
      onChange = _ref2$onChange === undefined ? function (x) {
    return console.log(x);
  } : _ref2$onChange,
      _ref2$renderCurrentOp = _ref2.renderCurrentOption,
      renderCurrentOption = _ref2$renderCurrentOp === undefined ? defaultRenderCurrentOption : _ref2$renderCurrentOp,
      _ref2$sortingFunction = _ref2.sortingFunction,
      sortingFunction = _ref2$sortingFunction === undefined ? function () {
    return 0;
  } : _ref2$sortingFunction,
      _ref2$showUnselectedO = _ref2.showUnselectedOnly,
      showUnselectedOnly = _ref2$showUnselectedO === undefined ? false : _ref2$showUnselectedO,
      children = _ref2.children,
      _ref2$shouldRenderCle = _ref2.shouldRenderClearSelection,
      shouldRenderClearSelection = _ref2$shouldRenderCle === undefined ? true : _ref2$shouldRenderCle,
      renderTrigger = _ref2.renderTrigger,
      _ref2$initialOptions = _ref2.initialOptions,
      initialOptions = _ref2$initialOptions === undefined ? [] : _ref2$initialOptions,
      props = (0, _objectWithoutProperties3.default)(_ref2, ['onChange', 'renderCurrentOption', 'sortingFunction', 'showUnselectedOnly', 'children', 'shouldRenderClearSelection', 'renderTrigger', 'initialOptions']);

  function init(initialOptions) {
    return { currentOptions: initialOptions };
  }

  var reducer = function reducer(_ref3, action) {
    var currentOptions = _ref3.currentOptions;

    var updatedState = {};
    switch (action.type) {
      case 'add':
        if (sortingFunction) {
          updatedState = {
            currentOptions: [].concat((0, _toConsumableArray3.default)(currentOptions), [action.payload.option]).sort(sortingFunction)
          };
        } else {
          updatedState = {
            currentOptions: [].concat((0, _toConsumableArray3.default)(currentOptions), [action.payload.option])
          };
        }
        break;
      case 'remove':
        updatedState = {
          currentOptions: currentOptions.filter(function (currentOption) {
            return currentOption.value !== action.payload.option.value;
          })
        };
        break;
      case 'clear':
        updatedState = init(action.payload.options);
        break;
      default:
        throw new Error();
    }
    onChange(updatedState.currentOptions);
    return updatedState;
  };

  var _useReducer = (0, _react.useReducer)(reducer, initialOptions, init),
      _useReducer2 = (0, _slicedToArray3.default)(_useReducer, 2),
      currentOptions = _useReducer2[0].currentOptions,
      dispatch = _useReducer2[1];

  var renderClearSelection = function renderClearSelection() {
    return shouldRenderClearSelection ? _react2.default.createElement(_Button2.default, {
      type: 'cancel',
      colors: _defaultStyles.buttonStyles.redden,
      onClick: function onClick(e) {
        e.stopPropagation();
        e.nativeEvent.stopImmediatePropagation();
        dispatch({ type: 'clear', payload: { options: [] } });
      }
    }) : null;
  };
  var renderRemoveCurrentOption = function renderRemoveCurrentOption(currentOption) {
    return _react2.default.createElement(_Button2.default, {
      className: 'selectmany__option__remove',
      type: 'cancel',
      colors: 'darkhighlight',
      onClick: function onClick(e) {
        e.stopPropagation();
        e.nativeEvent.stopImmediatePropagation();
        dispatch({
          type: 'remove',
          payload: { option: currentOption }
        });
      }
    });
  };

  var isActive = function isActive(option) {
    return currentOptions.some(function (currentOption) {
      return currentOption.value === option.value;
    });
  };

  var getChildProps = function getChildProps() {
    var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

    var className = _ref4.className,
        style = _ref4.style,
        _onClick = _ref4.onClick,
        option = _ref4.option,
        props = (0, _objectWithoutProperties3.default)(_ref4, ['className', 'style', 'onClick', 'option']);

    var optionIsActive = isActive(option);
    var handleClassName = (0, _helperFunctions.advancedMulti)({
      unflattenedBases: [className, 'selectmany__option'],
      flipVars: [[optionIsActive, 'active', 'inactive']]
    });
    return (0, _extends3.default)({
      onClick: function onClick(e) {
        for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
          args[_key - 1] = arguments[_key];
        }

        e.stopPropagation();
        e.nativeEvent.stopImmediatePropagation();
        if (isActive(option)) {
          dispatch({ type: 'remove', payload: { option: option } });
        } else {
          dispatch({ type: 'add', payload: { option: option } });
        }
        _onClick && _onClick.apply(undefined, [e].concat(args));
      },
      className: handleClassName,
      style: style
    }, props);
  };

  var handleRenderTrigger = function handleRenderTrigger(_ref5) {
    var isOn = _ref5.isOn,
        _getTriggerProps = _ref5.getTriggerProps;
    return renderTrigger ? renderTrigger({
      dispatch: dispatch,
      currentOptions: currentOptions,
      isOn: isOn,
      getTriggerProps: function getTriggerProps() {
        var _ref6 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

        var className = _ref6.className,
            props = (0, _objectWithoutProperties3.default)(_ref6, ['className']);
        return _getTriggerProps((0, _extends3.default)({
          className: ['selectmany__trigger', className]
        }, props));
      }
    }) : _react2.default.createElement(
      _Button2.default,
      {
        type: 'caretdown',
        isOn: isOn
      },
      function (_ref7) {
        var getButtonProps = _ref7.getButtonProps,
            icon = _ref7.icon,
            commonProps = (0, _objectWithoutProperties3.default)(_ref7, ['getButtonProps', 'icon']);
        return _react2.default.createElement(
          _StyledSelect.DROPDOWN_TRIGGER,
          (0, _extends3.default)({}, commonProps, getButtonProps((0, _extends3.default)({}, _getTriggerProps({
            className: 'selectmany__trigger'
          })))),
          _react2.default.createElement(
            _StyledSelect.TRIGGER_OPTIONS,
            {
              className: 'selectmany__options'
            },
            currentOptions.length > 0 ? currentOptions.map(function (currentOption, i) {
              return _react2.default.createElement(
                _StyledSelect.TRIGGER_OPTION,
                {
                  key: '' + currentOption.value + i,
                  className: 'selectmany__option'
                },
                _react2.default.createElement(
                  _StyledSelect.TRIGGER_OPTION_LABEL,
                  { className: 'selectmany__option__label' },
                  renderCurrentOption(currentOption)
                ),
                renderRemoveCurrentOption(currentOption)
              );
            }) : _react2.default.createElement(
              _StyledSelect.EMPTY_GUIDE,
              {
                className: 'selectmany__guide'
              },
              'select one...'
            )
          ),
          _react2.default.createElement(
            _StyledSelect.TRIGGER_CONTROLS,
            { className: 'selectmany__removeall' },
            currentOptions.length > 0 && renderClearSelection(),
            _react2.default.createElement(
              _StyledSelect.TRIGGER_CONTROLS_CARET,
              {
                className: 'selectmany__caret'
              },
              icon
            )
          )
        );
      }
    );
  };
  return _react2.default.createElement(
    _CTCPopover2.default,
    (0, _extends3.default)({
      renderTrigger: handleRenderTrigger

    }, props),
    function (_ref8) {
      var getChildrenProps = _ref8.getChildrenProps,
          toggleIsOn = _ref8.toggleIsOn;
      return typeof children === 'function' ? children({
        getChildProps: getChildProps,
        getChildrenProps: getChildrenProps,
        toggleIsOn: toggleIsOn,
        currentOptions: currentOptions
      }) : _react2.default.createElement(
        _StyledSelect.DROPDOWN_CHILDREN,
        (0, _extends3.default)({}, getChildrenProps({ style: { zIndex: 1 } })),
        children.filter(function (option) {
          if (showUnselectedOnly) {
            if (!currentOptions.some(function (currentOption) {
              return currentOption.value === option.value;
            })) {
              return option;
            }
          } else {
            return option;
          }
        }).map(function (option) {
          return _react2.default.createElement(
            _StyledSelect.DROPDOWN_OPTION,
            (0, _extends3.default)({}, getChildProps({ option: option }), {
              colors: _defaultStyles.buttonStyles.monochrome,
              isOn: currentOptions.some(function (currentOption) {
                return currentOption.value === option.value;
              }),
              key: option.value
            }),
            option.label
          );
        })
      );
    }
  );
};

exports.SelectMany = SelectMany;
exports.default = SelectMany;