@instructure/quiz-interactions
Version:
A React UI component Library for quiz interaction types.
132 lines (130 loc) • 4.81 kB
JavaScript
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
var _dec, _class, _FormulaShow;
function _callSuper(_this, derived, args) {
function isNativeReflectConstruct() {
if (typeof Reflect === "undefined" || !Reflect.construct) return false;
if (Reflect.construct.sham) return false;
if (typeof Proxy === "function") return true;
try {
return !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
} catch (e) {
return false;
}
}
derived = _getPrototypeOf(derived);
return _possibleConstructorReturn(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], _getPrototypeOf(_this).constructor) : derived.apply(_this, args));
}
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import NumberInput from '@instructure/quiz-number-input';
import { ScreenReaderContent } from '@instructure/ui-a11y-content';
import { ItemBodyWrapper } from '@instructure/quiz-rce';
import { withI18nSupport } from '@instructure/quiz-common';
import withAsyncDeps from '../../../util/withAsyncDeps';
import { mathjsIsLoaded, loadMathjs, substituteVars } from '../common/util';
import { Decimal } from '@instructure/quiz-i18n';
import t from '@instructure/quiz-i18n/es/format-message';
/**
---
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>
```
**/
var FormulaShow = (_dec = withAsyncDeps(mathjsIsLoaded, loadMathjs), _dec(_class = (_FormulaShow = /*#__PURE__*/function (_withI18nSupport) {
function FormulaShow() {
_classCallCheck(this, FormulaShow);
return _callSuper(this, FormulaShow, arguments);
}
_inherits(FormulaShow, _withI18nSupport);
return _createClass(FormulaShow, [{
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;
}
}, {
key: "render",
value: function render() {
var transformedBody = substituteVars(this.props.itemBody, this.variables, this.locale);
return /*#__PURE__*/React.createElement(ItemBodyWrapper, {
itemBody: transformedBody
}, /*#__PURE__*/React.createElement(NumberInput, {
renderLabel: /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Answer value')),
value: Decimal.toLocaleStringIfValid(this.value, this.locale),
readOnly: true,
tabIndex: -1
}));
}
}]);
}(withI18nSupport(Component)), _defineProperty(_FormulaShow, "propTypes", {
itemBody: PropTypes.string.isRequired,
scoringData: PropTypes.shape({
value: PropTypes.shape({
generatedSolutions: PropTypes.arrayOf(PropTypes.shape({
inputs: PropTypes.arrayOf(PropTypes.shape({
name: PropTypes.string.isRequired,
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
})),
output: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
}))
}).isRequired
}).isRequired,
locale: PropTypes.string
}), _defineProperty(_FormulaShow, "defaultProps", {
locale: null
}), _defineProperty(_FormulaShow, "contextTypes", {
locale: PropTypes.string
}), _FormulaShow)) || _class);
export { FormulaShow as default };