quiz-interactions/lib/components/essay/Result/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 _get = _interopRequireDefault(require("lodash/get"));

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

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

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

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

var _SubjectiveFeedback = _interopRequireDefault(require("@instructure/quiz-results-feedback/lib/components/SubjectiveFeedback"));

var _WordCount = _interopRequireDefault(require("../helpers/WordCount"));

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

var _dec, _class, _class2, _temp;

var styles = {
  componentId: 'cZJas',
  template: function template(theme) {
    return "\n\n.cZJas_bLsK{box-sizing:border-box;font-family:".concat(theme.userResponseFontFamily || 'inherit', ";font-size:").concat(theme.userResponseFontSize || 'inherit', ";margin:").concat(theme.userResponseMargin || 'inherit', " 0;overflow:hidden;padding:").concat(theme.userResponsePadding || 'inherit', ";width:100%}\n\n.cZJas_bELQ,.cZJas_bLsK{white-space:pre-wrap;word-wrap:break-word}\n\n.cZJas_bELQ{background-color:").concat(theme.gradingNotesWrapperColor || 'inherit', ";border-radius:").concat(theme.gradingNotesWrapperBorderRadius || 'inherit', ";margin-top:").concat(theme.gradingNotesWrapperMargin || 'inherit', ";padding:").concat(theme.gradingNotesWrapperPadding || 'inherit', "}");
  },
  'userResponse': 'cZJas_bLsK',
  'gradingNotesWrapper': 'cZJas_bELQ'
};
var EssayResult = (
/**
---
category: Essay
---
  Essay Result component

   ```jsx_example
  <SettingsSwitcher locales={LOCALES}>
    <EssayResult
      itemBody="Why did the Roman Empire fall?"
      interactionData={{
        rce: true,
        spellCheck: true,
        wordCount: true,
        wordLimitEnabled: true,
        wordLimitMax: 10,
        wordLimitMin: 1
      }}
      scoredData={{ value: 'goths and food shortage', gradeStatus: 'waiting' }}
      scoringData={{ value: 'these are the grading notes' }}
    />
  </SettingsSwitcher>
  ```
**/
_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(EssayResult, _Component);

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

  (0, _createClass2.default)(EssayResult, [{
    key: "getGradeStatus",
    value: function getGradeStatus() {
      var workingGradeStatus = (0, _get.default)(this.props, ['itemResultsModifications', 'scoredData', 'gradeStatus']);
      return workingGradeStatus || this.props.scoredData.gradeStatus;
    }
  }, {
    key: "renderGradingNotes",
    value: function renderGradingNotes() {
      var gradingNotes = this.props.scoringData && this.props.scoringData.value;

      if (gradingNotes) {
        return _react.default.createElement("div", {
          className: styles.gradingNotesWrapper
        }, _react.default.createElement(_uiElements.Text, {
          color: "primary",
          size: "small",
          weight: "bold"
        }, (0, _formatMessage.default)('Grading Notes')), _react.default.createElement("div", null, _react.default.createElement(_uiElements.Text, {
          color: "primary",
          size: "small"
        }, gradingNotes)));
      }
    }
  }, {
    key: "renderEssay",
    value: function renderEssay() {
      var value = this.props.scoredData.value;
      var content;

      if (typeof value === 'undefined') {
        content = (0, _formatMessage.default)('(response not displayed)');
      } else if (!value) {
        content = (0, _formatMessage.default)('(no answer)');
      } else {
        content = value;
      }

      if (this.props.interactionData.rce) {
        return _react.default.createElement(_quizRce.RichContentRenderer, {
          customStyles: styles.userResponse,
          content: content
        });
      }

      return _react.default.createElement("div", {
        className: styles.userResponse
      }, _react.default.createElement(_uiElements.Text, {
        color: "primary",
        size: "small"
      }, content));
    }
  }, {
    key: "render",
    value: function render() {
      var gradeStatus = this.getGradeStatus();
      var interactionData = this.props.interactionData;
      return _react.default.createElement(_quizRce.ItemBodyWrapper, {
        itemBody: this.props.itemBody
      }, _react.default.createElement(_SubjectiveFeedback.default, {
        gradeStatus: gradeStatus
      }, this.renderEssay()), _react.default.createElement(_WordCount.default, {
        rce: interactionData.rce,
        essay: this.props.scoredData.value,
        wordCount: interactionData.wordCount,
        wordLimitEnabled: interactionData.wordLimitEnabled,
        wordLimitMin: interactionData.wordLimitMin,
        wordLimitMax: interactionData.wordLimitMax
      }), this.renderGradingNotes());
    }
  }]);
  EssayResult.displayName = "EssayResult";
  return EssayResult;
}(_react.Component), _class2.propTypes = {
  interactionData: _propTypes.default.object.isRequired,
  itemBody: _propTypes.default.string.isRequired,
  scoredData: _propTypes.default.shape({
    gradeStatus: _propTypes.default.oneOf(['waiting', 'graded', 'correct', 'incorrect']),
    value: _propTypes.default.string
  }).isRequired,
  scoringData: _propTypes.default.object
}, _class2.defaultProps = {
  scoredData: {
    value: 'waiting'
  },
  scoringData: void 0,
  itemResultsModifications: void 0
}, _temp)) || _class);
exports.default = EssayResult;