react-misc-toolbox/dist/SelectOpen.js

'use strict';

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

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

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

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

var _extends3 = _interopRequireDefault(_extends2);

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

var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

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

var SelectOpen = function SelectOpen(_ref) {
  var externalCurrentOption = _ref.externalCurrentOption,
      _ref$isSwitch = _ref.isSwitch,
      isSwitch = _ref$isSwitch === undefined ? false : _ref$isSwitch,
      className = _ref.className,
      options = _ref.options,
      renderOption = _ref.renderOption,
      _ref$onChange = _ref.onChange,
      onChange = _ref$onChange === undefined ? function () {
    return null;
  } : _ref$onChange,
      defaultCurrentOption = _ref.defaultCurrentOption;

  var _useReducer = (0, _react.useReducer)(function (state, newState) {
    return (0, _extends3.default)({}, state, newState);
  }, {
    currentOption: defaultCurrentOption ? defaultCurrentOption : options[0]
  }),
      _useReducer2 = (0, _slicedToArray3.default)(_useReducer, 2),
      state = _useReducer2[0],
      setState = _useReducer2[1];

  var setCurrentOption = function setCurrentOption(option) {
    return setState({ currentOption: option });
  };
  var currentOption = state.currentOption;


  (0, _react.useEffect)(function () {
    externalCurrentOption && externalCurrentOption.value && setCurrentOption(externalCurrentOption);
  }, [externalCurrentOption]);

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

  var getNextOption = function getNextOption(option) {
    var index = options.findIndex(function (o) {
      return o.value === option.value;
    });
    if (index >= options.length - 1) {
      return options[0];
    } else {
      return options[index + 1];
    }
  };
  var _getOptionProps = function _getOptionProps(_ref2) {
    var onClick = _ref2.onClick,
        style = _ref2.style,
        className = _ref2.className,
        option = _ref2.option,
        props = (0, _objectWithoutProperties3.default)(_ref2, ['onClick', 'style', 'className', 'option']);

    var optionIsActive = isActive(option);
    var handleClassName = (0, _helperFunctions.advancedMulti)({
      unflattenedBases: [className, 'selectopen__option'],
      flipVars: [[optionIsActive, 'active', 'inactive']]
    });
    var handleOnClick = function handleOnClick(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();
      if (!isSwitch) {
        setCurrentOption(option);
        onChange(option);
      } else {
        setCurrentOption(getNextOption(currentOption));
        onChange(getNextOption(currentOption));
      }
      onClick && onClick.apply(undefined, [e].concat(args));
    };
    return (0, _extends3.default)({
      onClick: handleOnClick,
      className: handleClassName,
      style: style
    }, props);
  };
  return _react2.default.createElement(
    'div',
    {
      className: className ? 'selectopen__container' : 'selectopen__container ' + className
    },
    options.map(function (option) {
      return renderOption({
        option: option,
        isActive: isActive(option),
        getOptionProps: function getOptionProps(props) {
          return _getOptionProps((0, _extends3.default)({ option: option }, props));
        }
      });
    })
  );
};

exports.default = _react2.default.memo(SelectOpen);