@instructure/quiz-interactions/lib/components/matching/Edit/DistractorList/index.js

A React UI component Library for quiz interaction types.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = require("react");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _uiText = require("@instructure/ui-text");
var _uiView = require("@instructure/ui-view");
var _quizCommon = require("@instructure/quiz-common");
var _emotion = require("@instructure/emotion");
var _ChoiceInput = _interopRequireDefault(require("../../../common/edit/components/ChoiceInput"));
var _Footer = _interopRequireDefault(require("../../../common/edit/components/Footer"));
var _styles = _interopRequireDefault(require("./styles"));
var _theme = _interopRequireDefault(require("./theme"));
var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
var _RemoveChoiceButton = _interopRequireDefault(require("../../../common/edit/components/RemoveChoiceButton"));
var _dec, _class, _DistractorList;
/** @jsx jsx */
function _callSuper(_this, derived, args) {
  function isNativeReflectConstruct() {
    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
    if (Reflect.construct.sham) return false;
    if (typeof Proxy === "function") return true;
    try {
      return !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
    } catch (e) {
      return false;
    }
  }
  derived = (0, _getPrototypeOf2["default"])(derived);
  return (0, _possibleConstructorReturn2["default"])(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], (0, _getPrototypeOf2["default"])(_this).constructor) : derived.apply(_this, args));
}
var DistractorList = exports["default"] = (_dec = (0, _quizCommon.withStyleOverrides)(_styles["default"], _theme["default"]), _dec(_class = (_DistractorList = /*#__PURE__*/function (_Component) {
  function DistractorList() {
    var _this2;
    (0, _classCallCheck2["default"])(this, DistractorList);
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this2 = _callSuper(this, DistractorList, [].concat(args));
    (0, _defineProperty2["default"])(_this2, "distractorRefs", {});
    return _this2;
  }
  (0, _inherits2["default"])(DistractorList, _Component);
  return (0, _createClass2["default"])(DistractorList, [{
    key: "renderDistractor",
    value: function renderDistractor(distractorText, i, focusOnMount) {
      var _this3 = this;
      var distractorErrors = this.props.distractorErrors;
      var index = i.toString();
      return (0, _emotion.jsx)(_quizCommon.Flex, {
        key: i,
        alignItems: "start",
        "data-automation": "sdk-matching-distractor"
      }, (0, _emotion.jsx)(_quizCommon.Flex.Item, {
        shouldShrink: true,
        size: "24rem"
      }, (0, _emotion.jsx)(_ChoiceInput["default"], {
        key: index,
        id: index
        // disabledFields={[]}
        ,
        itemBody: distractorText,
        errors: distractorErrors(i),
        onInputChange: this.props.editDistractor,
        onInputBlur: this.props.blurDistractor,
        ref: function ref(node) {
          _this3.distractorRefs[index] = node;
        },
        renderLabel: (0, _formatMessage["default"])('Distractor'),
        isRequired: true,
        focusOnMount: focusOnMount,
        shouldRenderRemoveChoice: false,
        noRCE: true,
        notifyScreenreader: this.props.notifyScreenreader,
        placeholder: (0, _formatMessage["default"])('Type a distractor'),
        automationData: "sdk-matching-distractor-entry"
      })), !this.props.disabled && (0, _emotion.jsx)(_uiView.View, {
        as: "div",
        margin: "xx-large 0 0 0",
        themeOverride: {
          marginXxLarge: '30px'
        }
      }, (0, _emotion.jsx)(_RemoveChoiceButton["default"], {
        screenReaderText: (0, _formatMessage["default"])('Remove Distractor: {distractor}', {
          distractor: distractorText
        }),
        onRemoveChoice: function onRemoveChoice() {
          return _this3.props.removeDistractor(index);
        },
        choiceId: index
      })));
    }
  }, {
    key: "renderDistractors",
    value: function renderDistractors() {
      var _this4 = this;
      var distractors = this.props.distractors;
      return (0, _emotion.jsx)(_quizCommon.Flex, {
        direction: "column",
        gap: "small",
        padding: "x-small 0 0 0"
      }, (0, _emotion.jsx)(_quizCommon.Flex.Item, {
        "data-testid": "additional-distractor-text"
      }, (0, _emotion.jsx)(_uiText.Text, {
        color: "primary"
      }, (0, _formatMessage["default"])('Additional Distractors'))), (0, _emotion.jsx)(_quizCommon.Flex, {
        direction: "column",
        gap: "small"
      }, distractors.map(function (distractorText, i, source) {
        var focusOnMount = i + 1 === source.length && !distractorText.itemBody;
        return _this4.renderDistractor(distractorText, i, focusOnMount);
      })), !this.props.disabled && (0, _emotion.jsx)(_Footer["default"], {
        onCreateChoice: this.props.createNewDistractor,
        buttonText: (0, _formatMessage["default"])('Distractor'),
        screenReaderText: (0, _formatMessage["default"])('Add Distractor'),
        notifyScreenreader: this.props.notifyScreenreader,
        automationData: "sdk-add-matching-distractor-button"
      }));
    }
  }, {
    key: "render",
    value: function render() {
      this.distractorRefs = {};
      return this.renderDistractors();
    }
  }]);
}(_react.Component), (0, _defineProperty2["default"])(_DistractorList, "displayName", 'DistractorList'), (0, _defineProperty2["default"])(_DistractorList, "componentId", "Quizzes".concat(_DistractorList.displayName)), (0, _defineProperty2["default"])(_DistractorList, "propTypes", {
  createNewDistractor: _propTypes["default"].func.isRequired,
  disabled: _propTypes["default"].bool,
  distractorErrors: _propTypes["default"].func.isRequired,
  distractors: _propTypes["default"].arrayOf(_propTypes["default"].string).isRequired,
  editDistractor: _propTypes["default"].func.isRequired,
  blurDistractor: _propTypes["default"].func.isRequired,
  removeDistractor: _propTypes["default"].func.isRequired,
  notifyScreenreader: _propTypes["default"].func,
  styles: _propTypes["default"].object
}), (0, _defineProperty2["default"])(_DistractorList, "defaultProps", {
  notifyScreenreader: function notifyScreenreader() {},
  disabled: false
}), _DistractorList)) || _class);