react-misc-toolbox/dist/SelectOne.js

'use strict';

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

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

var _extends3 = _interopRequireDefault(_extends2);

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

var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

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 _defaultStyles = require('./defaultStyles');

var _recompose = require('recompose');

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

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

var _CTCPopover2 = _interopRequireDefault(_CTCPopover);

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

var _Button2 = _interopRequireDefault(_Button);

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

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

var SelectOne = function SelectOne(_ref) {
  var _ref$alwaysOn = _ref.alwaysOn,
      alwaysOn = _ref$alwaysOn === undefined ? false : _ref$alwaysOn,
      _ref$onClick = _ref.onClick,
      onClick = _ref$onClick === undefined ? function () {
    return null;
  } : _ref$onClick,
      _ref$maxHeight = _ref.maxHeight,
      maxHeight = _ref$maxHeight === undefined ? 20 : _ref$maxHeight,
      _ref$showCurrentOptio = _ref.showCurrentOption,
      showCurrentOption = _ref$showCurrentOptio === undefined ? false : _ref$showCurrentOptio,
      onChange = _ref.onChange,
      children = _ref.children,
      _renderTrigger = _ref.renderTrigger,
      externalCurrentOption = _ref.currentOption,
      options = _ref.options,
      _ref$pivotFrom = _ref.pivotFrom,
      pivotFrom = _ref$pivotFrom === undefined ? 'DOWNRIGHT' : _ref$pivotFrom,
      props = (0, _objectWithoutProperties3.default)(_ref, ['alwaysOn', 'onClick', 'maxHeight', 'showCurrentOption', 'onChange', 'children', 'renderTrigger', 'currentOption', 'options', 'pivotFrom']);

  var _useState = (0, _react.useState)(externalCurrentOption ? externalCurrentOption : options[0]),
      _useState2 = (0, _slicedToArray3.default)(_useState, 2),
      currentOption = _useState2[0],
      setCurrentOption = _useState2[1];

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

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

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

    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();
        setCurrentOption(option);
        onChange(option);
        _onClick && _onClick.apply(undefined, [e].concat(args));
      },
      className: (0, _helperFunctions.flippyClass)(isActive(option), 'selectone__option', 'active', 'inactive') + ' ' + (className ? (0, _helperFunctions.flippyClass)(isActive(option), className, 'active', 'inactive') : ''),
      style: (0, _extends3.default)({
        display: showCurrentOption === false && isActive(option) ? 'none' : 'flex'
      }, style)
    }, props);
  };
  return _react2.default.createElement(
    _CTCPopover2.default,
    (0, _extends3.default)({
      renderTrigger: function renderTrigger(_ref3) {
        var isOn = _ref3.isOn,
            _getTriggerProps = _ref3.getTriggerProps;

        var defaultTriggerClassName = (0, _helperFunctions.flippyClass)(isOn, 'selectone__trigger', 'on', 'off');
        return _renderTrigger ? _renderTrigger({
          currentOption: currentOption,
          isOn: alwaysOn ? true : isOn,
          getTriggerProps: function getTriggerProps() {
            var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

            var className = _ref4.className,
                props = (0, _objectWithoutProperties3.default)(_ref4, ['className']);
            return _getTriggerProps((0, _extends3.default)({
              className: className ? className + ' ' + defaultTriggerClassName : defaultTriggerClassName
            }, props));
          }
        }) : _react2.default.createElement(
          _Button2.default,
          (0, _extends3.default)({
            type: 'caretdown',
            isOn: alwaysOn ? true : isOn
          }, _getTriggerProps({
            className: defaultTriggerClassName,
            onClick: onClick
          }), {
            colors: _defaultStyles.buttonStyles.transparentNeutral
          }),
          currentOption ? currentOption.label : options[0].label
        );
      },
      alwaysOn: alwaysOn,
      pivotFrom: pivotFrom
    }, props),
    function (_ref5) {
      var _getChildrenProps = _ref5.getChildrenProps,
          isOn = _ref5.isOn,
          setIsOnTo = _ref5.setIsOnTo,
          toggleIsOn = _ref5.toggleIsOn;

      var defaultChildrenClassName = 'selectone__children';

      return typeof children === 'function' ? children({
        getChildProps: getChildProps,
        getChildrenProps: function getChildrenProps() {
          var _ref6 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

          var className = _ref6.className,
              props = (0, _objectWithoutProperties3.default)(_ref6, ['className']);
          return _getChildrenProps((0, _extends3.default)({
            className: className ? className + ' ' + defaultChildrenClassName : defaultChildrenClassName
          }, props));
        },
        isOn: isOn,
        setIsOnTo: setIsOnTo,
        toggleIsOn: toggleIsOn,
        currentOption: currentOption
      }) : _react2.default.createElement(
        _StyledSelect.DROPDOWN_CHILDREN,
        (0, _extends3.default)({}, _getChildrenProps({
          className: defaultChildrenClassName
        }), {
          maxHeight: maxHeight
        }),
        children.map(function (option) {
          return _react2.default.createElement(
            _Button2.default,
            (0, _extends3.default)({}, getChildProps({
              option: option,
              onClick: toggleIsOn
            }), {
              colors: _defaultStyles.buttonStyles.neutral,
              isOn: isActive(option),
              key: option.value
            }),
            option.label
          );
        })
      );
    }
  );
};

exports.SelectOne = SelectOne;
exports.default = SelectOne;