quiz-interactions/lib/components/numeric/Result/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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

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 _quizI18n = require("@instructure/quiz-i18n");

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

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

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

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

/**
---
category: Numeric
---

  Numeric Result component

  ```jsx_example
  function Example (props) {
    const exampleProps = {
      itemBody: 'x is an integer and 9 < x^2 < 99. What\'s the max value of x, minus the minimum value of x',
      scoredData: {
        value: {
          userResponse: '3.14159265',
          correctAnswer: '9999.9999',
          resultScore: 0
        }
      }
    }

    return <NumericResult {...exampleProps} {...props} />
  }

  <SettingsSwitcher locales={LOCALES}>
    <Example />
  </SettingsSwitcher>
  ```
**/
var NumericResult =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(NumericResult, _Component);

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

  (0, _createClass2.default)(NumericResult, [{
    key: "correctAnswerString",
    value: function correctAnswerString() {
      var _ref = this.props.scoredData.value || {},
          correctAnswer = _ref.correctAnswer;

      if (Array.isArray(correctAnswer)) {
        var _correctAnswer = (0, _slicedToArray2.default)(correctAnswer, 2),
            minimum = _correctAnswer[0],
            maximum = _correctAnswer[1];

        return (0, _formatMessage.default)('{minimum} to {maximum} inclusive', {
          minimum: this.formatNumber(minimum),
          maximum: this.formatNumber(maximum)
        });
      } else if (correctAnswer) {
        return this.formatNumber(correctAnswer);
      }

      return '';
    }
  }, {
    key: "formatNumber",
    value: function formatNumber(value) {
      return isNaN(value) ? value : _quizI18n.Decimal.toLocaleString(value.toString().trim(), this.locale);
    }
  }, {
    key: "render",
    value: function render() {
      var itemBody = this.props.itemBody;

      var _ref2 = this.props.scoredData.value || {},
          resultScore = _ref2.resultScore,
          userResponse = _ref2.userResponse;

      var responseHidden = typeof userResponse === 'undefined';
      var status;

      if (resultScore > 0) {
        status = 'correct';
      } else if (resultScore <= 0) {
        status = 'incorrect';
      } else {
        status = 'unknown';
      }

      return _react.default.createElement(_quizRce.ItemBodyWrapper, {
        itemBody: itemBody
      }, userResponse == null ? _react.default.createElement(_NoResponse.default, {
        correctAnswerLabel: this.correctAnswerString(),
        responseHidden: responseHidden,
        status: status
      }) : _react.default.createElement(_FeedbackWrapper.default, {
        status: status,
        userResponse: this.formatNumber(userResponse),
        correctAnswer: this.correctAnswerString(),
        hiddenCorrectAnswerText: (0, _formatMessage.default)('Correct answer: '),
        hiddenIncorrectAnswerText: (0, _formatMessage.default)('Incorrect answer: ')
      }));
    }
  }, {
    key: "locale",
    get: function get() {
      return this.props.locale || this.context.locale || 'en-US';
    }
  }]);
  NumericResult.displayName = "NumericResult";
  return NumericResult;
}(_react.Component);

exports.default = NumericResult;
NumericResult.propTypes = {
  itemBody: _propTypes.default.string.isRequired,
  scoredData: _propTypes.default.shape({
    value: _propTypes.default.shape({
      userResponse: _propTypes.default.string,
      correctAnswer: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
      resultScore: _propTypes.default.number
    })
  }).isRequired,
  locale: _propTypes.default.string
};
NumericResult.contextTypes = {
  locale: _propTypes.default.string
};
NumericResult.defaultProps = {
  locale: void 0
};