quiz-interactions/lib/components/categorization/Show/index.js

A React UI component Library for quiz interaction types.

"use strict";

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

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

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

var _quizRce = require("@instructure/quiz-rce");

var _ChoicesList = _interopRequireDefault(require("../common/ChoicesList"));

var _CategoriesContainer = _interopRequireDefault(require("../common/CategoriesContainer"));

var _utils = require("../common/utils");

var _setFromArray = _interopRequireDefault(require("../../../util/setFromArray"));

/**
 ---
category: Categorization
---

  Categorization Show component

   ```jsx_example
  <SettingsSwitcher locales={LOCALES}>
    <CategorizationShow
      itemBody="Match the name of the celestial body on the left with its correct classification:"
      interactionData={{
        categoryOrder: ['uuid1', 'uuid2'],
        categories: {
          uuid1: { id: 'uuid1', itemBody: 'Planet' },
          uuid2: { id: 'uuid2', itemBody: 'Moon' }
        },
        distractors: {
          uuid3: { id: 'uuid3', itemBody: 'Mars' },
          uuid4: { id: 'uuid4', itemBody: 'Europa' },
          uuid5: { id: 'uuid5', itemBody: 'Venus' }
        }
      }}
      scoringData={{
        value: [{
          id: 'uuid1',
          scoringAlgorithm: 'AllOrNothing',
          scoringData: { value: ['uuid3'] }
        }, {
          id: 'uuid2',
          scoringAlgorithm: 'AllOrNothing',
          scoringData: { value: ['uuid4'] }
        }]
      }}
    />
  </SettingsSwitcher>
  ```
**/
var CategorizationShow =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(CategorizationShow, _Component);

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

  (0, _createClass2.default)(CategorizationShow, [{
    key: "filterDistractors",
    value: function filterDistractors() {
      var unavailableAnswersIds = (0, _setFromArray.default)(this.props.scoringData.value.reduce(function (accumulator, currentValue) {
        return accumulator.concat(currentValue.scoringData.value);
      }, []));
      var distractors = Object.values(this.props.interactionData.distractors).filter(function (distractor) {
        return !unavailableAnswersIds.has(distractor.id);
      });
      return distractors;
    }
  }, {
    key: "parsedScoringData",
    value: function parsedScoringData() {
      return this.props.scoringData.value.map(function (item) {
        return {
          id: item.id,
          value: item.scoringData.value
        };
      });
    } // ===========
    //   RENDER
    // ===========

  }, {
    key: "render",
    value: function render() {
      var _this$props$interacti = this.props.interactionData,
          categories = _this$props$interacti.categories,
          categoryOrder = _this$props$interacti.categoryOrder;
      return _react.default.createElement(_quizRce.ItemBodyWrapper, {
        itemBody: this.props.itemBody
      }, _react.default.createElement(_CategoriesContainer.default, {
        sortedCategories: (0, _utils.getSortedCategories)(categories, categoryOrder),
        distractors: this.props.interactionData.distractors,
        userResponseValue: this.parsedScoringData()
      }), _react.default.createElement(_ChoicesList.default, {
        distractors: this.filterDistractors(),
        isDraggable: false
      }));
    }
  }]);
  CategorizationShow.displayName = "CategorizationShow";
  return CategorizationShow;
}(_react.Component);

exports.default = CategorizationShow;
CategorizationShow.propTypes = {
  itemBody: _propTypes.default.string.isRequired,
  interactionData: _propTypes.default.object.isRequired,
  scoringData: _propTypes.default.object.isRequired // ===========
  //   HELPERS
  // ===========

};