react-misc-toolbox/dist/MultipleChoice.js

"use strict";

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

var _stringify = require("babel-runtime/core-js/json/stringify");

var _stringify2 = _interopRequireDefault(_stringify);

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

var _extends3 = _interopRequireDefault(_extends2);

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

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

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

var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

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

var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _styledComponents = require("styled-components");

var _CheckboxV = require("./CheckboxV2");

var _CheckboxV2 = _interopRequireDefault(_CheckboxV);

var _RadioButton = require("./RadioButton");

var _RadioButton2 = _interopRequireDefault(_RadioButton);

var _StyledMultipleChoice = require("./StyledMultipleChoice");

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

var _ = require(".");

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 MultipleChoice = function MultipleChoice(props) {
  var _props$buttonType = props.buttonType,
      buttonType = _props$buttonType === undefined ? "checkbox" : _props$buttonType,
      _props$renderIconMedi = props.renderIconMediaMin,
      renderIconMediaMin = _props$renderIconMedi === undefined ? 0 : _props$renderIconMedi,
      _props$alwaysOn = props.alwaysOn,
      alwaysOn = _props$alwaysOn === undefined ? false : _props$alwaysOn,
      _props$mutuallyExclus = props.mutuallyExclusive,
      mutuallyExclusive = _props$mutuallyExclus === undefined ? false : _props$mutuallyExclus,
      _props$iconSize = props.iconSize,
      iconSize = _props$iconSize === undefined ? 4 : _props$iconSize,
      footnote = props.footnote,
      options = props.options,
      _props$onChange = props.onChange,
      onChange = _props$onChange === undefined ? function (x) {
    return null;
  } : _props$onChange,
      _props$renderCurrentO = props.renderCurrentOption,
      renderCurrentOption = _props$renderCurrentO === undefined ? defaultRenderCurrentOption : _props$renderCurrentO,
      _props$sortingFunctio = props.sortingFunction,
      sortingFunction = _props$sortingFunctio === undefined ? function () {
    return 0;
  } : _props$sortingFunctio,
      _props$initialOptions = props.initialOptions,
      initialOptions = _props$initialOptions === undefined ? [] : _props$initialOptions,
      error = props.error;


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

  var reducer = function reducer(_ref2, action) {
    var currentOptions = _ref2.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 isActive = function isActive(option) {
    return currentOptions.some(function (currentOption) {
      return currentOption.value === option.value;
    });
  };

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

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

    var optionIsActive = isActive(option);
    var handleClassName = (0, _helperFunctions.advancedMulti)({
      unflattenedBases: [className, "multiplechoice__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)) {
          if (!alwaysOn) {
            dispatch({ type: "remove", payload: { option: option } });
          }
        } else {
          if (!mutuallyExclusive) {
            dispatch({ type: "add", payload: { option: option } });
          } else {
            dispatch({ type: "clear", payload: { options: [] } });
            dispatch({ type: "add", payload: { option: option } });
          }
        }
        _onClick && _onClick.apply(undefined, [e].concat(args));
      },
      className: handleClassName,
      style: style
    }, props);
  };
  // const themeContext = useContext(ThemeContext)
  // console.log(themeContext)
  return _react2.default.createElement(
    _StyledMultipleChoice.CONTAINER,
    null,
    (0, _stringify2.default)(props.currentOptions),
    options.map(function (option) {
      var checkboxProps = {
        disabled: true,
        className: "input",
        id: option.value,
        checked: isActive(option),
        onChange: function onChange(e) {}
      };
      var triggerProps = (0, _extends3.default)({
        padding: buttonType === "checkbox" ? "0 2.4rem 0" : "0.75rem 2.5rem",
        margin: buttonType === "checkbox" ? "0 -2.4rem 0" : "0 -2.5rem 0",

        isOn: isActive(option),
        buttonType: buttonType
      }, getChildProps({ option: option }));
      return _react2.default.createElement(
        _StyledMultipleChoice.OPTION,
        {
          key: option.value,
          style: {
            margin: buttonType !== "checkbox" ? "" : "0 0 0.75rem 0"
          }
        },
        typeof option.label === "string" ? buttonType === "checkbox" ? _react2.default.createElement(
          _StyledMultipleChoice.CHECKBOX_TRIGGER,
          (0, _extends3.default)({}, triggerProps),
          _react2.default.createElement(
            _StyledMultipleChoice.CHECKBOX_CONTAINER,
            null,
            _react2.default.createElement(_CheckboxV2.default, (0, _extends3.default)({}, checkboxProps))
          ),
          _react2.default.createElement(
            _StyledMultipleChoice.LABEL,
            null,
            option.label
          )
        ) : _react2.default.createElement(
          _StyledMultipleChoice.RADIO_TRIGGER,
          (0, _extends3.default)({}, triggerProps),
          _react2.default.createElement(
            _StyledMultipleChoice.CHECKBOX_CONTAINER,
            null,
            _react2.default.createElement(_RadioButton2.default, (0, _extends3.default)({}, checkboxProps))
          ),
          _react2.default.createElement(
            _StyledMultipleChoice.LABEL,
            null,
            option.label
          )
        ) : _react2.default.createElement(
          _StyledMultipleChoice.CHECKBOX_TRIGGER,
          (0, _extends3.default)({}, triggerProps),
          _react2.default.createElement(
            _StyledMultipleChoice.CHECKBOX_CONTAINER,
            null,
            buttonType === "checkbox" ? _react2.default.createElement(_CheckboxV2.default, (0, _extends3.default)({}, checkboxProps)) : _react2.default.createElement(_RadioButton2.default, (0, _extends3.default)({}, checkboxProps))
          ),
          _react2.default.createElement(
            _StyledMultipleChoice.LABEL,
            null,
            option.label.map(function (row, i) {
              return _react2.default.createElement(
                _StyledMultipleChoice.ROW,
                { iconSize: iconSize, key: i, isOn: isActive(option) },
                row.map(function (sublabel, j) {
                  var renderFootnote = function renderFootnote() {
                    if (footnote && footnote[0][0] === i && footnote[0][1] === j) {
                      return _react2.default.createElement(
                        _StyledMultipleChoice.FOOTNOTE_SIGN,
                        null,
                        footnote[1]
                      );
                    }
                  };
                  return _react2.default.createElement(
                    _StyledMultipleChoice.SUBLABEL,
                    { key: j },
                    typeof sublabel === "string" ? sublabel : sublabel(),
                    renderFootnote()
                  );
                })
              );
            })
          )
        ),
        option.subcontent && _react2.default.createElement(
          _.RTGTransition,
          { in: isActive(option), transitionType: "dropdown" },
          function (_ref4) {
            var style = _ref4.style;
            return _react2.default.createElement(
              _StyledMultipleChoice.CONTENT,
              { style: style },
              option.subcontent()
            );
          }
        )
      );
    })
  );
};

exports.default = MultipleChoice;