quiz-interactions/lib/components/formula/Show/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 _quizNumberInput = _interopRequireDefault(require("@instructure/quiz-number-input"));

var _uiA11y = require("@instructure/ui-a11y");

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

var _quizCommon = require("@instructure/quiz-common");

var _withAsyncDeps = _interopRequireDefault(require("../../../util/withAsyncDeps"));

var _util = require("../common/util");

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

var _dec, _class, _class2, _temp;

var FormulaShow = (
/**
---
category: Formula
---
  Formula Show component

  ```jsx_example
  <SettingsSwitcher locales={LOCALES}>
    <FormulaShow
      itemBody="Find `x` + `y`"
      scoringData={{
        value: {
          answerCount: '2',
          formula: 'x+y',
          generatedSolutions: [{
            output: 3333.3333,
            inputs: [
              { name: 'x', value: 1111.1111 },
              { name: 'y', value: 2222.2222 }
            ]
          }, {
            output: 10000.5,
            inputs: [
              { name: 'x', value: 3000.25 },
              { name: 'y', value: 7000.25 }
            ]
          }],
          variables: [{
            name: 'x',
            min: '0',
            max: '10000',
            precision: '2'
          }, {
            name: 'y',
            min: '0',
            max: '10000',
            precision: '2'
          }]
        }
      }}
    />
  </SettingsSwitcher>
  ```
**/
_dec = (0, _withAsyncDeps.default)(_util.mathjsIsLoaded, _util.loadMathjs), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_withI18nSupport) {
  (0, _inherits2.default)(FormulaShow, _withI18nSupport);

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

  (0, _createClass2.default)(FormulaShow, [{
    key: "render",
    value: function render() {
      var transformedBody = (0, _util.substituteVars)(this.props.itemBody, this.variables, this.locale);
      return _react.default.createElement(_quizRce.ItemBodyWrapper, {
        itemBody: transformedBody
      }, _react.default.createElement(_quizNumberInput.default, {
        label: _react.default.createElement(_uiA11y.ScreenReaderContent, null, (0, _formatMessage.default)('Answer value')),
        value: this.value,
        readOnly: true,
        tabIndex: -1
      }));
    }
  }, {
    key: "value",
    get: function get() {
      if (!this.props.scoringData || this.props.scoringData.value.generatedSolutions.length < 1) {
        return '';
      }

      return this.props.scoringData.value.generatedSolutions[0].output;
    }
  }, {
    key: "variables",
    get: function get() {
      if (!this.props.scoringData || this.props.scoringData.value.generatedSolutions.length < 1) {
        return [];
      }

      return this.props.scoringData.value.generatedSolutions[0].inputs;
    }
  }]);
  FormulaShow.displayName = "FormulaShow";
  return FormulaShow;
}((0, _quizCommon.withI18nSupport)(_react.Component)), _class2.propTypes = {
  itemBody: _propTypes.default.string.isRequired,
  scoringData: _propTypes.default.shape({
    value: _propTypes.default.shape({
      generatedSolutions: _propTypes.default.arrayOf(_propTypes.default.shape({
        inputs: _propTypes.default.arrayOf(_propTypes.default.shape({
          name: _propTypes.default.string.isRequired,
          value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired
        })),
        output: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired
      }))
    }).isRequired
  }).isRequired,
  locale: _propTypes.default.string
}, _class2.defaultProps = {
  locale: null
}, _class2.contextTypes = {
  locale: _propTypes.default.string
}, _temp)) || _class);
exports.default = FormulaShow;