@instructure/quiz-interactions/lib/components/categorization/Edit/CategoryForm/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 _emotion = require("@instructure/emotion");
var _quizCommon = require("@instructure/quiz-common");
var _uiText = require("@instructure/ui-text");
var _ChoiceInput = _interopRequireDefault(require("../../../common/edit/components/ChoiceInput"));
var _AnswerInput = _interopRequireDefault(require("../../../common/edit/components/AnswerInput"));
var _RemoveChoiceButton = _interopRequireDefault(require("../../../common/edit/components/RemoveChoiceButton"));
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 _normalizeErrors = require("../../../../util/normalizeErrors");
var _dec, _class, _CategoryForm;
/** @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 CategoryForm = exports["default"] = (_dec = (0, _quizCommon.withStyleOverrides)(_styles["default"], _theme["default"]), _dec(_class = (_CategoryForm = /*#__PURE__*/function (_Component) {
  function CategoryForm() {
    var _this2;
    (0, _classCallCheck2["default"])(this, CategoryForm);
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this2 = _callSuper(this, CategoryForm, [].concat(args));
    (0, _defineProperty2["default"])(_this2, "answerRefs", {});
    (0, _defineProperty2["default"])(_this2, "categoryRefs", {});
    (0, _defineProperty2["default"])(_this2, "categoryAnswerInputRefs", {});
    (0, _defineProperty2["default"])(_this2, "_answerRemoveHandlers", {});
    (0, _defineProperty2["default"])(_this2, "_categoryRemoveHandlers", {});
    (0, _defineProperty2["default"])(_this2, "_createAnswerHandlers", {});
    (0, _defineProperty2["default"])(_this2, "_isMounted", false);
    (0, _defineProperty2["default"])(_this2, "getCreateAnswerHandler", function (categoryId) {
      var createAnswerHandler = _this2._createAnswerHandlers[categoryId];
      if (createAnswerHandler) return createAnswerHandler;
      createAnswerHandler = _this2.props.onCreateAnswer.bind(_this2, categoryId);
      _this2._createAnswerHandlers[categoryId] = createAnswerHandler;
      return createAnswerHandler;
    });
    (0, _defineProperty2["default"])(_this2, "getAnswerRemoveHandler", function (answerId, categoryId) {
      var answerRemoveHandler = _this2._answerRemoveHandlers[categoryId];
      if (answerRemoveHandler) return answerRemoveHandler;
      answerRemoveHandler = _this2.props.onRemoveAnswer.bind(_this2, answerId, categoryId);
      _this2._answerRemoveHandlers[answerId] = answerRemoveHandler;
      return answerRemoveHandler;
    });
    (0, _defineProperty2["default"])(_this2, "getCategoryRemoveHandler", function (categoryId) {
      var categoryRemoveHandler = _this2._categoryRemoveHandlers[categoryId];
      if (categoryRemoveHandler) return categoryRemoveHandler;
      categoryRemoveHandler = _this2.props.onRemoveCategory.bind(_this2, categoryId);
      _this2._categoryRemoveHandlers[categoryId] = categoryRemoveHandler;
      return categoryRemoveHandler;
    });
    (0, _defineProperty2["default"])(_this2, "handleFooterRef", function (node) {
      _this2.footerRef = node;
    });
    (0, _defineProperty2["default"])(_this2, "renderRemoveButton", function (category, index) {
      var onRemoveCategory = _this2.getCategoryRemoveHandler(category.id);
      var singleCategory = _this2.props.sortedCategories.length === 1;
      if (!singleCategory && !_this2.props.disabled) {
        return (0, _emotion.jsx)(_RemoveChoiceButton["default"], {
          choiceId: category.id,
          screenReaderText: (0, _formatMessage["default"])('Remove Category {index}: {category}', {
            index: index,
            category: category.itemBody
          }),
          onRemoveChoice: onRemoveCategory,
          automationData: "sdk-remove-category-".concat(category.id)
        });
      }
    });
    (0, _defineProperty2["default"])(_this2, "renderCategory", function (category, index, focusOnMount) {
      var onCreateAnswer = _this2.getCreateAnswerHandler(category.id);
      var categoryAnswerInputRefs = function categoryAnswerInputRefs(node) {
        _this2.categoryAnswerInputRefs[category.id] = node;
      };
      var categoryRef = function categoryRef(node) {
        _this2.categoryRefs[category.id] = node;
      };
      return (0, _emotion.jsx)("div", {
        key: category.id,
        className: "categoryContainer",
        css: _this2.props.styles.categoryContainer
      }, (0, _emotion.jsx)("div", {
        css: _this2.props.styles.categoryContainerWrapper
      }, (0, _emotion.jsx)("div", {
        css: _this2.props.styles.itemContainer
      }, (0, _emotion.jsx)("div", {
        css: _this2.props.styles.itemContainerBody
      }, (0, _emotion.jsx)(_uiText.Text, {
        color: "primary"
      }, (0, _formatMessage["default"])('Category {position, number}', {
        position: index + 1
      }))), _this2.renderRemoveButton(category, index + 1)), (0, _emotion.jsx)("div", {
        css: _this2.props.styles.categoryBody
      }, (0, _emotion.jsx)("div", {
        css: _this2.props.styles.categoryBodyDescriptionInput
      }, (0, _emotion.jsx)(_AnswerInput["default"], {
        ref: categoryAnswerInputRefs,
        disabled: _this2.props.disabled,
        onChangeHandler: _this2.props.onCategoryInputChange,
        onModalClose: _this2.props.onModalClose,
        onModalOpen: _this2.props.onModalOpen,
        id: category.id,
        itemBody: category.itemBody,
        errors: _this2.props.getCategoryErrors(category.id),
        renderLabel: (0, _formatMessage["default"])('Description'),
        screenReaderText: (0, _formatMessage["default"])('Category Description'),
        focusOnMount: focusOnMount && _this2._isMounted,
        noRCE: true,
        automationData: "sdk-category-".concat(index + 1, "-description"),
        isRequired: true
      })), (0, _emotion.jsx)(_quizCommon.Flex, {
        padding: "x-small",
        direction: "column",
        gap: "small"
      }, _this2.props.categoryScoringData(category.id).map(function (answerId, index, source) {
        var answer = _this2.props.distractors[answerId];
        var focusOnMount = index + 1 === source.length && !answer.itemBody;
        return (0, _emotion.jsx)(_quizCommon.Flex.Item, {
          key: "answerInput".concat(answer.id)
        }, _this2.renderAnswer(answer, category.id, focusOnMount));
      })), (0, _emotion.jsx)("div", {
        css: _this2.props.styles.categoryBodyAnswers
      }), !_this2.props.disabled && (0, _emotion.jsx)(_Footer["default"], {
        onCreateChoice: onCreateAnswer,
        ref: categoryRef,
        screenReaderText: (0, _formatMessage["default"])('Add answer to category {position, number}', {
          position: index + 1
        }),
        notifyScreenreader: _this2.props.notifyScreenreader,
        automationData: "sdk-add-answer-to-category-".concat(index + 1, "-button")
      }))));
    });
    return _this2;
  }
  (0, _inherits2["default"])(CategoryForm, _Component);
  return (0, _createClass2["default"])(CategoryForm, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      // focusOnMount is conditional on this component being mounted so that focus
      // is not stolen on initial render when creating a new categorization question
      this._isMounted = true;
    }
  }, {
    key: "UNSAFE_componentWillReceiveProps",
    value: function UNSAFE_componentWillReceiveProps(nextProps) {
      if (this.props.onCreateAnswer !== nextProps.onCreateAnswer) {
        this._createAnswerHandlers = {};
      }
      if (this.props.onRemoveAnswer !== nextProps.onRemoveAnswer) {
        this._answerRemoveHandlers = {};
      }
      if (this.props.onRemoveCategory !== nextProps.onRemoveCategory) {
        this._categoryRemoveHandlers = {};
      }
    }
  }, {
    key: "renderAnswer",
    value:
    // ===========
    //   RENDER
    // ===========

    function renderAnswer(answer, categoryId, focusOnMount, index) {
      var _this3 = this;
      var onRemoveAnswer = this.getAnswerRemoveHandler(answer.id, categoryId);
      return (0, _emotion.jsx)(_ChoiceInput["default"], {
        key: "answerInput".concat(answer.id),
        ref: function ref(node) {
          _this3.answerRefs[answer.id] = node;
        },
        disabledFields: this.props.disabled ? ['answerInput'] : [],
        id: answer.id,
        itemBody: answer.itemBody,
        errors: this.props.distractorErrors(answer.id),
        onInputChange: this.props.onDistractorInputChange,
        onModalClose: this.props.onModalClose,
        onModalOpen: this.props.onModalOpen,
        onRemoveChoice: onRemoveAnswer,
        shouldRenderRemoveChoice: !this.props.disabled,
        focusOnMount: focusOnMount && this._isMounted,
        noRCE: true,
        notifyScreenreader: this.props.notifyScreenreader,
        isRequired: true,
        automationData: "sdk-category-".concat(index + 1, "-answer")
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _this4 = this;
      return (0, _emotion.jsx)("div", {
        css: this.props.styles.categoriesWrapper
      }, (0, _emotion.jsx)(_quizCommon.FormFieldGroup, {
        description: (0, _formatMessage["default"])('Categories'),
        messages: (0, _normalizeErrors.normalizeErrors)(this.props.categoriesErrors)
      }, (0, _emotion.jsx)("div", {
        css: this.props.styles.categoriesContainer
      }, this.props.sortedCategories.map(function (category, index, source) {
        var focusOnMount = index + 1 === source.length && !category.itemBody;
        return _this4.renderCategory(category, index, focusOnMount);
      }))), !this.props.disabled && (0, _emotion.jsx)(_Footer["default"], {
        ref: this.handleFooterRef,
        onCreateChoice: this.props.onCreateCategory,
        buttonText: (0, _formatMessage["default"])('Category'),
        screenReaderText: (0, _formatMessage["default"])('Add Category'),
        notifyScreenreader: this.props.notifyScreenreader,
        automationData: "sdk-add-category-button"
      }));
    }
  }]);
}(_react.Component), (0, _defineProperty2["default"])(_CategoryForm, "displayName", 'CategoryForm'), (0, _defineProperty2["default"])(_CategoryForm, "componentId", "Quizzes".concat(_CategoryForm.displayName)), (0, _defineProperty2["default"])(_CategoryForm, "propTypes", {
  categoriesErrors: _propTypes["default"].arrayOf(_propTypes["default"].shape({
    text: _propTypes["default"].string,
    type: _propTypes["default"].string
  })),
  getCategoryErrors: _propTypes["default"].func,
  categoryScoringData: _propTypes["default"].func,
  disabled: _propTypes["default"].bool,
  distractors: _propTypes["default"].objectOf(_propTypes["default"].shape({
    id: _propTypes["default"].string.isRequired,
    itemBody: _propTypes["default"].string.isRequired
  })).isRequired,
  distractorErrors: _propTypes["default"].func,
  notifyScreenreader: _propTypes["default"].func.isRequired,
  onCategoryInputChange: _propTypes["default"].func,
  onCreateAnswer: _propTypes["default"].func,
  onCreateCategory: _propTypes["default"].func,
  onDistractorInputChange: _propTypes["default"].func,
  onModalClose: _propTypes["default"].func,
  onModalOpen: _propTypes["default"].func,
  onRemoveAnswer: _propTypes["default"].func,
  onRemoveCategory: _propTypes["default"].func,
  sortedCategories: _propTypes["default"].arrayOf(_propTypes["default"].shape({
    id: _propTypes["default"].string.isRequired,
    itemBody: _propTypes["default"].string
  })).isRequired,
  styles: _propTypes["default"].object
}), (0, _defineProperty2["default"])(_CategoryForm, "defaultProps", {
  categoriesErrors: [],
  getCategoryErrors: void 0,
  categoryScoringData: void 0,
  disabled: void 0,
  distractorErrors: void 0,
  onCategoryInputChange: void 0,
  onCreateAnswer: void 0,
  onCreateCategory: void 0,
  onDistractorInputChange: void 0,
  onModalClose: void 0,
  onModalOpen: void 0,
  onRemoveAnswer: void 0,
  onRemoveCategory: void 0
}), _CategoryForm)) || _class);