@instructure/quiz-interactions
Version:
A React UI component Library for quiz interaction types.
201 lines • 7.98 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";
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 { SimpleSelect, Flex } from '@instructure/quiz-common';
import { Decimal } from '@instructure/quiz-i18n';
import { ScientificNumberInput } from '@instructure/quiz-number-input';
import { decimals, significantDigits } from 'instructure-validations';
import t from '@instructure/quiz-i18n/es/format-message';
import { DECIMALS, SIGNIFICANT_DIGITS } from './constants';
var PreciseResponse = /*#__PURE__*/function (_Component) {
function PreciseResponse() {
var _this2;
_classCallCheck(this, PreciseResponse);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this2 = _callSuper(this, PreciseResponse, [].concat(args));
_defineProperty(_this2, "state", {
value: ''
});
_defineProperty(_this2, "handlePrecisionChange", function (event, _, normalized) {
// When precision changes, update the value to match the new precision (add
// or remove trailing zeros)
var precision = normalized;
var value = _this2.props.value;
if (precision != null && !isNaN(value)) {
var precisionNumber = parseInt(precision, 10);
var valueDecimal = Decimal(value);
value = _this2.props.precisionType === SIGNIFICANT_DIGITS ? valueDecimal.toPrecision(precisionNumber, _this2.props.locale) : valueDecimal.toFixed(precisionNumber, _this2.props.locale);
}
_this2.setState({
value: value
});
_this2.props.onChange(event, {
id: _this2.props.id,
precision: precision,
value: value
});
});
_defineProperty(_this2, "handlePrecisionTypeChange", function (event, _ref) {
var value = _ref.value;
var precisionType = value;
var precision = _this2.props.precision;
if (_this2.props.value) {
precision = precisionFromValue(_this2.props.value, precisionType).toString();
}
_this2.props.onChange(event, {
id: _this2.props.id,
precision: precision,
precisionType: precisionType
});
});
_defineProperty(_this2, "handleValueChange", function (event, value, normalized) {
// When the answer value changes, update the precision to match the
// precision of the answer
var precision = _this2.props.precision;
if (normalized != null) {
precision = precisionFromValue(normalized, _this2.props.precisionType).toString();
}
_this2.setState({
value: value
});
_this2.props.onChange(event, {
id: _this2.props.id,
precision: precision,
value: normalized
});
});
return _this2;
}
_inherits(PreciseResponse, _Component);
return _createClass(PreciseResponse, [{
key: "UNSAFE_componentWillMount",
value: function UNSAFE_componentWillMount() {
if (this.props.value) {
var value;
try {
value = Decimal.toLocaleString(this.props.value, this.props.locale);
} catch (_unused) {
value = this.props.value;
}
this.setState({
value: value
});
}
}
}, {
key: "minPrecision",
value: function minPrecision() {
var value = parseFloat(this.props.value);
if (this.props.precisionType === SIGNIFICANT_DIGITS) {
return isNaN(value) ? 1 : significantDigits(value.toString());
}
return isNaN(value) ? 0 : decimals(value.toString());
}
}, {
key: "maxPrecision",
value: function maxPrecision() {
// These are the limits for toPrecision and toFixed in Chrome
if (this.props.precisionType === SIGNIFICANT_DIGITS) {
var value = parseFloat(this.props.value);
return value === 0 ? 1 : 21;
}
return 100;
}
}, {
key: "render",
value: function render() {
var currentAnswerValue = this.state.value;
var currentPrecisionValue = this.props.precision;
return /*#__PURE__*/React.createElement(Flex, {
alignItems: "start"
}, /*#__PURE__*/React.createElement(Flex.Item, {
shouldGrow: true,
shouldShrink: true,
margin: "0 xx-small"
}, this.props.numericTypeSelect), /*#__PURE__*/React.createElement(Flex.Item, {
shouldGrow: true,
shouldShrink: true,
margin: "0 xx-small"
}, /*#__PURE__*/React.createElement(ScientificNumberInput, {
renderLabel: t('Answer'),
locale: this.props.locale,
messages: this.props.messages.value,
onChange: this.handleValueChange,
value: currentAnswerValue,
"aria-valuetext": "".concat(currentAnswerValue, " ").concat(t('Answer')),
"data-automation": "sdk-numeric-precise-answer-number-input",
isRequired: true
})), /*#__PURE__*/React.createElement(Flex.Item, {
shouldGrow: true,
shouldShrink: true,
margin: "0 xx-small"
}, /*#__PURE__*/React.createElement(ScientificNumberInput, {
renderLabel: t('Precision'),
locale: this.props.locale,
max: this.maxPrecision(),
messages: this.props.messages.precision,
min: this.minPrecision(),
onChange: this.handlePrecisionChange,
step: 1,
value: currentPrecisionValue,
"aria-valuetext": "".concat(currentPrecisionValue, " ").concat(t('Precision')),
"data-automation": "sdk-numeric-precise-precision-number-input",
isRequired: true
})), /*#__PURE__*/React.createElement(Flex.Item, {
shouldGrow: true,
shouldShrink: true,
margin: "0 xx-small"
}, /*#__PURE__*/React.createElement(SimpleSelect, {
renderLabel: t('Type'),
onChange: this.handlePrecisionTypeChange,
value: this.props.precisionType
}, /*#__PURE__*/React.createElement(SimpleSelect.Option, {
id: "precise-response-select-option-significant-digits",
value: SIGNIFICANT_DIGITS
}, t('Significant digits')), /*#__PURE__*/React.createElement(SimpleSelect.Option, {
id: "precise-response-select-option-decimals",
value: DECIMALS
}, t('Decimal places')))));
}
}]);
}(Component);
_defineProperty(PreciseResponse, "propTypes", {
id: PropTypes.string.isRequired,
locale: PropTypes.string.isRequired,
messages: PropTypes.objectOf(PropTypes.array),
numericTypeSelect: PropTypes.node.isRequired,
precision: PropTypes.string,
precisionType: PropTypes.oneOf([SIGNIFICANT_DIGITS, DECIMALS]).isRequired,
onChange: PropTypes.func.isRequired,
value: PropTypes.string
});
_defineProperty(PreciseResponse, "defaultProps", {
messages: void 0,
precision: void 0,
value: void 0
});
export { PreciseResponse as default };
function precisionFromValue(value, precisionType) {
return precisionType === SIGNIFICANT_DIGITS ? significantDigits(value) : decimals(value);
}