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

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 _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _react = _interopRequireWildcard(require("react"));

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

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

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

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 _theme = _interopRequireDefault(require("./theme"));

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

var _dec, _class, _class2, _temp;

var styles = {
  componentId: 'fwNdm',
  template: function template(theme) {
    return "\n\n.fwNdm_kBjv{border-bottom:".concat(theme.borderWidth || 'inherit', " solid ").concat(theme.borderColor || 'inherit', ";padding-bottom:").concat(theme.categoriesWrapperPadding || 'inherit', "}\n\n.fwNdm_cIVb{display:flex;flex-flow:row wrap;padding-bottom:").concat(theme.categoriesContainerPadding || 'inherit', ";position:relative}\n\n.fwNdm_dEen{flex-basis:50%}\n\n.fwNdm_cghZ{padding-right:").concat(theme.categoryContainerWrapperPadding || 'inherit', "}\n\n.fwNdm_hiOc{border:").concat(theme.borderWidth || 'inherit', " solid ").concat(theme.borderColor || 'inherit', "}\n\n.fwNdm_dgyO{background-color:").concat(theme.categoryDescriptionBackground || 'inherit', ";padding:").concat(theme.categoryDescriptionInputPadding || 'inherit', "}\n\n.fwNdm_eThm{padding:").concat(theme.categoryBodyAnswersPadding || 'inherit', "}\n\n.fwNdm_dFuC{align-items:flex-start;display:flex;padding-top:").concat(theme.itemContainerPadding || 'inherit', "}\n\n.fwNdm_emOZ{align-items:center;display:flex;flex:1;padding:").concat(theme.itemContainerBodyPadding || 'inherit', "}\n\n.fwNdm_gaxB{display:flex}\n\n@media only screen and (max-width:48rem){.fwNdm_dEen{flex-basis:100%}}");
  },
  'categoriesWrapper': 'fwNdm_kBjv',
  'categoriesContainer': 'fwNdm_cIVb',
  'categoryContainer': 'fwNdm_dEen',
  'categoryContainerWrapper': 'fwNdm_cghZ',
  'categoryBody': 'fwNdm_hiOc',
  'categoryBodyDescriptionInput': 'fwNdm_dgyO',
  'categoryBodyAnswers': 'fwNdm_eThm',
  'itemContainer': 'fwNdm_dFuC',
  'itemContainerBody': 'fwNdm_emOZ',
  'itemContainerActions': 'fwNdm_gaxB'
};
var CategoryForm = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(CategoryForm, _Component);

  function CategoryForm() {
    var _getPrototypeOf2;

    var _this;

    (0, _classCallCheck2.default)(this, CategoryForm);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(CategoryForm)).call.apply(_getPrototypeOf2, [this].concat(args)));
    _this.answerRefs = {};
    _this.categoryRefs = {};
    _this.categoryAnswerInputRefs = {};
    _this._answerRemoveHandlers = {};
    _this._categoryRemoveHandlers = {};
    _this._createAnswerHandlers = {};
    _this._isMounted = false;

    _this.getCreateAnswerHandler = function (categoryId) {
      var createAnswerHandler = _this._createAnswerHandlers[categoryId];
      if (createAnswerHandler) return createAnswerHandler;
      createAnswerHandler = _this.props.onCreateAnswer.bind((0, _assertThisInitialized2.default)(_this), categoryId);
      _this._createAnswerHandlers[categoryId] = createAnswerHandler;
      return createAnswerHandler;
    };

    _this.getAnswerRemoveHandler = function (answerId, categoryId) {
      var answerRemoveHandler = _this._answerRemoveHandlers[categoryId];
      if (answerRemoveHandler) return answerRemoveHandler;
      answerRemoveHandler = _this.props.onRemoveAnswer.bind((0, _assertThisInitialized2.default)(_this), answerId, categoryId);
      _this._answerRemoveHandlers[answerId] = answerRemoveHandler;
      return answerRemoveHandler;
    };

    _this.getCategoryRemoveHandler = function (categoryId) {
      var categoryRemoveHandler = _this._categoryRemoveHandlers[categoryId];
      if (categoryRemoveHandler) return categoryRemoveHandler;
      categoryRemoveHandler = _this.props.onRemoveCategory.bind((0, _assertThisInitialized2.default)(_this), categoryId);
      _this._categoryRemoveHandlers[categoryId] = categoryRemoveHandler;
      return categoryRemoveHandler;
    };

    _this.handleFooterRef = function (node) {
      _this.footerRef = node;
    };

    _this.renderRemoveButton = function (category, index) {
      var onRemoveCategory = _this.getCategoryRemoveHandler(category.id);

      var singleCategory = _this.props.sortedCategories.length === 1;

      if (!singleCategory && !_this.props.disabled) {
        return _react.default.createElement(_RemoveChoiceButton.default, {
          choiceId: category.id,
          screenReaderText: (0, _formatMessage.default)('Remove Category {index}: {category}', {
            index: index,
            category: category.itemBody
          }),
          onRemoveChoice: onRemoveCategory
        });
      }
    };

    _this.renderCategory = function (category, index, focusOnMount) {
      var onCreateAnswer = _this.getCreateAnswerHandler(category.id);

      var categoryAnswerInputRefs = function categoryAnswerInputRefs(node) {
        _this.categoryAnswerInputRefs[category.id] = node;
      };

      var categoryRef = function categoryRef(node) {
        _this.categoryRefs[category.id] = node;
      };

      return _react.default.createElement("div", {
        key: category.id,
        className: styles.categoryContainer
      }, _react.default.createElement("div", {
        className: styles.categoryContainerWrapper
      }, _react.default.createElement("div", {
        className: styles.itemContainer
      }, _react.default.createElement("div", {
        className: styles.itemContainerBody
      }, _react.default.createElement(_uiElements.Text, {
        color: "primary"
      }, (0, _formatMessage.default)('Category {position, number}', {
        position: index + 1
      }))), _this.renderRemoveButton(category, index + 1)), _react.default.createElement("div", {
        className: styles.categoryBody
      }, _react.default.createElement("div", {
        className: styles.categoryBodyDescriptionInput
      }, _react.default.createElement(_AnswerInput.default, {
        ref: categoryAnswerInputRefs,
        disabled: _this.props.disabled,
        onChangeHandler: _this.props.onCategoryInputChange,
        onModalClose: _this.props.onModalClose,
        onModalOpen: _this.props.onModalOpen,
        id: category.id,
        itemBody: category.itemBody,
        errors: _this.props.getCategoryErrors(category.id),
        placeholder: (0, _formatMessage.default)('Type a category description'),
        screenReaderText: (0, _formatMessage.default)('Category Description'),
        focusOnMount: focusOnMount && _this._isMounted,
        noRCE: true
      })), _react.default.createElement("div", {
        className: styles.categoryBodyAnswers
      }, _this.props.categoryScoringData(category.id).map(function (answerId, index, source) {
        var answer = _this.props.distractors[answerId];
        var focusOnMount = index + 1 === source.length && !answer.itemBody;
        return _this.renderAnswer(answer, category.id, focusOnMount);
      })), !_this.props.disabled && _react.default.createElement(_Footer.default, {
        onCreateChoice: onCreateAnswer,
        ref: categoryRef,
        screenReaderText: (0, _formatMessage.default)('Add answer to category {position, number}', {
          position: index + 1
        })
      }))));
    };

    return _this;
  }

  (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: "componentWillReceiveProps",
    value: function 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",
    // ===========
    //   RENDER
    // ===========
    value: function renderAnswer(answer, categoryId, focusOnMount) {
      var _this2 = this;

      var onRemoveAnswer = this.getAnswerRemoveHandler(answer.id, categoryId);
      return _react.default.createElement(_ChoiceInput.default, {
        key: "answerInput".concat(answer.id) // eslint-disable-line react/jsx-no-literals
        ,
        ref: function ref(node) {
          _this2.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
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _this3 = this;

      return _react.default.createElement("div", {
        className: styles.categoriesWrapper
      }, _react.default.createElement("div", {
        className: styles.categoriesContainer
      }, this.props.sortedCategories.map(function (category, index, source) {
        var focusOnMount = index + 1 === source.length && !category.itemBody;
        return _this3.renderCategory(category, index, focusOnMount);
      })), !this.props.disabled && _react.default.createElement(_Footer.default, {
        ref: this.handleFooterRef,
        onCreateChoice: this.props.onCreateCategory,
        buttonText: (0, _formatMessage.default)('Category'),
        screenReaderText: (0, _formatMessage.default)('Add Category')
      }));
    }
  }]);
  CategoryForm.displayName = "CategoryForm";
  return CategoryForm;
}(_react.Component), _class2.propTypes = {
  getCategoryErrors: _propTypes.default.func,
  categoryScoringData: _propTypes.default.func,
  disabled: _propTypes.default.bool,
  distractors: _propTypes.default.objectOf(_propTypes.default.shape({
    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
}, _class2.defaultProps = {
  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
}, _temp)) || _class);
exports.default = CategoryForm;