quiz-interactions/lib/components/numeric/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 _uiA11y = require("@instructure/ui-a11y");

var _quizI18n = require("@instructure/quiz-i18n");

var _uiTextInput = require("@instructure/ui-text-input");

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

/**
---
category: Numeric
---
  Numeric Show component

  ```jsx_example
  <SettingsSwitcher locales={LOCALES}>
    <NumericShow
      itemBody="x is an integer and 9 < x^2 < 99. What's the max value of x, minus the minimum value of x"
      scoringData={{
        value: [{
          type: 'exactResponse',
          id: '1',
          value: '18'
        }, {
          type: 'withinARange',
          id: '2',
          start: '18',
          end: '18'
        }, {
          type: 'preciseResponse',
          id: '3',
          value: '18',
          precision: '1',
          precisionType: 'decimals'
        }, {
          type: 'marginOfError',
          id: '4',
          value: '18',
          margin: '0.4',
          marginType: 'absolute'
        }]
      }}
    />
  </SettingsSwitcher>
  ```
**/
var NumericShow =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(NumericShow, _Component);

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

  (0, _createClass2.default)(NumericShow, [{
    key: "formatNumber",
    value: function formatNumber(value) {
      return isNaN(value) ? value : _quizI18n.Decimal.toLocaleString(value.toString(), this.locale);
    }
  }, {
    key: "render",
    value: function render() {
      return _react.default.createElement(_quizRce.ItemBodyWrapper, {
        itemBody: this.props.itemBody
      }, _react.default.createElement(_uiTextInput.TextInput, {
        label: _react.default.createElement(_uiA11y.ScreenReaderContent, null, (0, _formatMessage.default)('Answer value')),
        readOnly: true,
        tabIndex: -1,
        value: this.value
      }));
    }
  }, {
    key: "locale",
    get: function get() {
      return this.props.locale || this.context.locale || 'en-US';
    }
  }, {
    key: "firstCriteria",
    get: function get() {
      var scoringData = this.props.scoringData;
      return scoringData && scoringData.value && scoringData.value[0] || {};
    }
  }, {
    key: "value",
    get: function get() {
      var _this$firstCriteria = this.firstCriteria,
          type = _this$firstCriteria.type,
          value = _this$firstCriteria.value,
          start = _this$firstCriteria.start,
          end = _this$firstCriteria.end;

      if (type === 'withinARange') {
        return (0, _formatMessage.default)('{minimum} to {maximum} inclusive', {
          minimum: this.formatNumber(start),
          maximum: this.formatNumber(end)
        });
      }

      return this.formatNumber(value);
    }
  }]);
  NumericShow.displayName = "NumericShow";
  return NumericShow;
}(_react.Component);

exports.default = NumericShow;
NumericShow.propTypes = {
  itemBody: _propTypes.default.string.isRequired,
  locale: _propTypes.default.string,
  scoringData: _propTypes.default.shape({
    value: _propTypes.default.array
  })
};
NumericShow.contextTypes = {
  locale: _propTypes.default.string
};
NumericShow.defaultProps = {
  locale: void 0,
  scoringData: void 0
};