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");

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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 _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _uiA11y = require("@instructure/ui-a11y");

var _uiForms = require("@instructure/ui-forms");

var _uiElements = require("@instructure/ui-elements");

var _uiThemeable = require("@instructure/ui-themeable");

var _RemoveChoiceButton = _interopRequireDefault(require("../../../common/edit/components/RemoveChoiceButton"));

var _Footer = _interopRequireDefault(require("../../../common/edit/components/Footer"));

var _theme = _interopRequireDefault(require("./theme"));

var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/lib/format-message"));

var _dec, _class, _class2, _temp;

var styles = {
  componentId: 'biBfA',
  template: function template(theme) {
    return "\n\n.biBfA_fubF{display:flex;flex-direction:column}\n\n.biBfA_bgmD{align-items:flex-start;display:flex;padding-bottom:".concat(theme.distractorMargin || 'inherit', ";padding-top:").concat(theme.distractorMargin || 'inherit', "}\n\n.biBfA_bgmD>span{padding-top:0}\n\n.biBfA_dTvH{flex:0 1 24rem}\n\n.biBfA_cqaP{font-size:").concat(theme.addButtonTextSize || 'inherit', ";padding:").concat(theme.addButtonTextPadding || 'inherit', "}\n\n.biBfA_fFEX{padding-right:").concat(theme.distractorPaddingRight || 'inherit', ";padding-top:").concat(theme.distractorPaddingTop || 'inherit', "}");
  },
  'distractorsContainer': 'biBfA_fubF',
  'distractor': 'biBfA_bgmD',
  'distractorInput': 'biBfA_dTvH',
  'addButtonText': 'biBfA_cqaP',
  'additionalDistractorText': 'biBfA_fFEX'
};
var DistractorList = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(DistractorList, _Component);

  function DistractorList() {
    (0, _classCallCheck2.default)(this, DistractorList);
    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(DistractorList).apply(this, arguments));
  }

  (0, _createClass2.default)(DistractorList, [{
    key: "render",
    value: function render() {
      var _this = this;

      var _this$props = this.props,
          distractorErrors = _this$props.distractorErrors,
          distractors = _this$props.distractors;
      var additionalText = !distractors || distractors.length === 0 ? null : _react.default.createElement("div", {
        className: styles.additionalDistractorText
      }, _react.default.createElement(_uiElements.Text, {
        color: "primary",
        size: "small"
      }, (0, _formatMessage.default)('Additional Distractors')));
      return _react.default.createElement("div", {
        className: styles.distractorsContainer
      }, additionalText, _react.default.createElement("div", null, distractors.map(function (distractorText, index) {
        return _react.default.createElement("div", {
          key: distractorText,
          className: styles.distractor,
          "data-automation": "sdk-matching-distractor"
        }, _react.default.createElement("div", {
          className: styles.distractorInput
        }, _react.default.createElement(_uiForms.TextInput, {
          label: _react.default.createElement(_uiA11y.ScreenReaderContent, null, (0, _formatMessage.default)('Distractor')),
          messages: distractorErrors(index),
          disabled: _this.props.disabled,
          onChange: function onChange(e) {
            return _this.props.editDistractor(index, e.target.value);
          },
          placeholder: (0, _formatMessage.default)('Distractor'),
          value: distractorText,
          "data-automation": "sdk-matching-distractor-entry"
        })), !_this.props.disabled && _react.default.createElement(_RemoveChoiceButton.default, {
          screenReaderText: (0, _formatMessage.default)('Remove Distractor: {distractor}', {
            distractor: distractorText
          }),
          onRemoveChoice: function onRemoveChoice() {
            return _this.props.removeDistractor(index);
          },
          choiceId: index,
          padding: "0 0 0 0.5rem"
        }));
      }), !this.props.disabled && _react.default.createElement(_Footer.default, {
        onCreateChoice: this.props.createNewDistractor,
        buttonText: (0, _formatMessage.default)('Distractor'),
        screenReaderText: (0, _formatMessage.default)('Add Distractor')
      })));
    }
  }]);
  DistractorList.displayName = "DistractorList";
  return DistractorList;
}(_react.Component), _class2.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,
  removeDistractor: _propTypes.default.func.isRequired
}, _class2.defaultProps = {
  disabled: false
}, _temp)) || _class);
exports.default = DistractorList;