@mopinion/survey/features/elements/components/SelectList.js

Collect customer feedback with the Mopinion survey library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = SelectList;
var _preact = require("preact");
var _hooks = require("preact/hooks");
var _utils = require("../../../utils");
var _conversational = require("../../conversational");
var _form = require("../../form");
var _Selectable = _interopRequireDefault(require("./Selectable"));
var _utils2 = require("../utils");
var _excluded = ["block", "state", "setValue", "setNestedValue", "text", "elementIndex"];
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
function SelectList(_ref, ref) {
  var _currentPageBreak$blo;
  var block = _ref.block,
    state = _ref.state,
    setValue = _ref.setValue,
    setNestedValue = _ref.setNestedValue,
    text = _ref.text,
    elementIndex = _ref.elementIndex,
    props = _objectWithoutProperties(_ref, _excluded);
  var _useFormStore = (0, _form.useFormStore)(),
    currentConversationalFocusRef = _useFormStore.currentConversationalFocusRef,
    actions = _useFormStore.actions,
    formType = _useFormStore.formType,
    lastKeyPressed = _useFormStore.lastKeyPressed,
    activePage = _useFormStore.activePage;
  var _useProperties = (0, _form.useProperties)(),
    conversational = _useProperties.conversational;
  var _useAdvanced = (0, _form.useAdvanced)(),
    lastPageAutoPost = _useAdvanced.lastPageAutoPost;
  var properties = block.properties;
  var wrapperClass = ['gcr', 'thumbs', 'category'].indexOf(block.typeName) > -1 || properties.show_as_buttons ? "button-container ".concat(block.typeName, "-container") : '';
  var currentPageBreak = (0, _form.useBlock)({
    typeName: 'page_break',
    typeOf: activePage - 1
  });
  var withWcagKeyboardEvents = conversational || lastPageAutoPost && formType === 'embed' || (currentPageBreak === null || currentPageBreak === void 0 || (_currentPageBreak$blo = currentPageBreak.block) === null || _currentPageBreak$blo === void 0 || (_currentPageBreak$blo = _currentPageBreak$blo.properties) === null || _currentPageBreak$blo === void 0 ? void 0 : _currentPageBreak$blo.autopost) && formType === 'embed';
  var _useWcagKeyboardEvent = (0, _conversational.useWcagKeyboardEvents)({
      onArrowKeyPressed: function onArrowKeyPressed(e) {
        var updateHelperText = (0, _utils.debounce)(function () {
          var _text$wcag$ratingHelp, _text$wcag;
          return actions.updateScreenReaderHelper((_text$wcag$ratingHelp = text === null || text === void 0 || (_text$wcag = text.wcag) === null || _text$wcag === void 0 ? void 0 : _text$wcag.ratingHelperText) !== null && _text$wcag$ratingHelp !== void 0 ? _text$wcag$ratingHelp : '');
        }, 1000);
        updateHelperText();
        actions.updateLastKeyPressed(e.key);
      },
      onTabSpaceEnter: function onTabSpaceEnter() {
        if (pendingScore) {
          setValue(pendingScore);
          updatePendingScore(null);
          setTimeout(function () {
            actions.updateScreenReaderHelper('');
          }, 100);
        }
      },
      onChangedValue: function onChangedValue(e) {
        updatePendingScore(e.target.value);
        actions.updateLastKeyPressed(null);
      },
      onChangedValueConfirm: function onChangedValueConfirm(e) {
        actions.handleConversationalFocus(true);
        setValue(pendingScore);
        updatePendingScore(null);
      },
      onClickValue: function onClickValue(e, isMouseClick) {
        updatePendingScore(!isMouseClick && block.typeName !== 'checkbox' ? e.target.value : null);
        setTimeout(function () {
          actions.updateScreenReaderHelper('');
        }, 100);
      }
    }),
    _onKeyDown = _useWcagKeyboardEvent.onKeyDown,
    _onChange = _useWcagKeyboardEvent.onChange,
    _onClick = _useWcagKeyboardEvent.onClick,
    pendingScore = _useWcagKeyboardEvent.pendingScore,
    updatePendingScore = _useWcagKeyboardEvent.updatePendingScore;
  var _useMemo = (0, _hooks.useMemo)(function () {
      var elements = (0, _utils2.getElementsHandleExtra)({
        elements: properties.elements,
        elements_extra: properties.elements_extra
      });
      if (properties.reverseScore) {
        return {
          elements: elements,
          elementList: Object.keys(elements).reverse()
        };
      }
      if (properties.randomize) {
        var _properties$elements_;
        return {
          elements: elements,
          elementList: (0, _utils.shuffleArray)(Object.keys(elements), Object.keys((_properties$elements_ = properties.elements_extra) !== null && _properties$elements_ !== void 0 ? _properties$elements_ : {}).length > 0)
        };
      }
      return {
        elements: elements,
        elementList: Object.keys(elements)
      };
    }, [properties]),
    elements = _useMemo.elements,
    elementList = _useMemo.elementList;
  (0, _hooks.useEffect)(function () {
    if (conversational && elementIndex !== 0) {
      actions.handleConversationalFocus();
      actions.updateLastKeyPressed(null);
    }
  }, []);
  return (0, _preact.h)("div", _extends({
    "class": wrapperClass
  }, conversational && {
    'aria-labelledby': "block-title-".concat(block.typeName, "-").concat(block.id)
  }, {
    role: "radiogroup",
    ref: currentConversationalFocusRef
  }, properties.required && {
    'aria-required': true
  }, conversational && {
    'aria-labelledby': "block-title-".concat(block.typeName, "-").concat(block.id)
  }), elementList.map(function (k, i) {
    var _state$el$data_field, _state$el$data_field2;
    var el = elements[k];
    var value = el.hasOwnProperty('value') ? el.value : el.label;
    var attr = {
      block: block,
      value: value,
      key: i,
      selectableIndex: i,
      onChange: function onChange(e) {
        if (withWcagKeyboardEvents && pendingScore) {
          _onChange(e, {
            key: lastKeyPressed
          });
        } else {
          if (block.typeName === 'checkbox') {
            setNestedValue(el.data_field, e.target.checked);
          } else {
            setValue(e.target.value);
          }
        }
      },
      checked: block.typeName !== 'checkbox' ? state.value === value || pendingScore === value : ((_state$el$data_field = state[el.data_field]) === null || _state$el$data_field === void 0 ? void 0 : _state$el$data_field.value) && ((_state$el$data_field2 = state[el.data_field]) === null || _state$el$data_field2 === void 0 ? void 0 : _state$el$data_field2.value) !== 'false',
      onKeyDown: function onKeyDown(e) {
        if (withWcagKeyboardEvents) {
          _onKeyDown(e);
        }
      },
      onClick: function onClick(e) {
        if (withWcagKeyboardEvents) {
          _onClick(e);
        }
      }
    };
    if (block.typeName === 'thumbs') {
      attr.labelAtts = {
        "class": "label_thumbs_".concat(i == 0 ? 'positive' : 'negative'),
        ariaLabel: "".concat(el.label ? el.label : i === 0 ? 'positive' : 'negative')
      };
    }
    var thumbsProps = block.typeName === 'thumbs' ? {
      style: {
        verticalAlign: 'middle'
      },
      alt: el.label
    } : {};
    return (0, _preact.h)(_Selectable["default"], attr, el.icon ? (0, _preact.h)(_form.SvgIcon, _extends({
      icon: el.icon
    }, thumbsProps)) : null, block.typeName !== 'thumbs' ? ' ' + el.label : null, block.properties.showCaptions && Object.keys(thumbsProps).length ? (0, _preact.h)("span", thumbsProps, ' ' + el.label) : null);
  }));
}
//# sourceMappingURL=SelectList.js.map