@instructure/quiz-interactions
Version:
A React UI component Library for quiz interaction types.
209 lines (208 loc) • 10.5 kB
JavaScript
;
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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _quizCommon = require("@instructure/quiz-common");
var _quizI18n = require("@instructure/quiz-i18n");
var _quizNumberInput = require("@instructure/quiz-number-input");
var _instructureValidations = require("instructure-validations");
var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
var _constants = require("./constants");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
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 = (0, _getPrototypeOf2["default"])(derived);
return (0, _possibleConstructorReturn2["default"])(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], (0, _getPrototypeOf2["default"])(_this).constructor) : derived.apply(_this, args));
}
var PreciseResponse = exports["default"] = /*#__PURE__*/function (_Component) {
function PreciseResponse() {
var _this2;
(0, _classCallCheck2["default"])(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));
(0, _defineProperty2["default"])(_this2, "state", {
value: ''
});
(0, _defineProperty2["default"])(_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 = (0, _quizI18n.Decimal)(value);
value = _this2.props.precisionType === _constants.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
});
});
(0, _defineProperty2["default"])(_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
});
});
(0, _defineProperty2["default"])(_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;
}
(0, _inherits2["default"])(PreciseResponse, _Component);
return (0, _createClass2["default"])(PreciseResponse, [{
key: "UNSAFE_componentWillMount",
value: function UNSAFE_componentWillMount() {
if (this.props.value) {
var value;
try {
value = _quizI18n.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 === _constants.SIGNIFICANT_DIGITS) {
return isNaN(value) ? 1 : (0, _instructureValidations.significantDigits)(value.toString());
}
return isNaN(value) ? 0 : (0, _instructureValidations.decimals)(value.toString());
}
}, {
key: "maxPrecision",
value: function maxPrecision() {
// These are the limits for toPrecision and toFixed in Chrome
if (this.props.precisionType === _constants.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["default"].createElement(_quizCommon.Flex, {
alignItems: "start"
}, /*#__PURE__*/_react["default"].createElement(_quizCommon.Flex.Item, {
shouldGrow: true,
shouldShrink: true,
margin: "0 xx-small"
}, this.props.numericTypeSelect), /*#__PURE__*/_react["default"].createElement(_quizCommon.Flex.Item, {
shouldGrow: true,
shouldShrink: true,
margin: "0 xx-small"
}, /*#__PURE__*/_react["default"].createElement(_quizNumberInput.ScientificNumberInput, {
renderLabel: (0, _formatMessage["default"])('Answer'),
locale: this.props.locale,
messages: this.props.messages.value,
onChange: this.handleValueChange,
value: currentAnswerValue,
"aria-valuetext": "".concat(currentAnswerValue, " ").concat((0, _formatMessage["default"])('Answer')),
"data-automation": "sdk-numeric-precise-answer-number-input",
isRequired: true
})), /*#__PURE__*/_react["default"].createElement(_quizCommon.Flex.Item, {
shouldGrow: true,
shouldShrink: true,
margin: "0 xx-small"
}, /*#__PURE__*/_react["default"].createElement(_quizNumberInput.ScientificNumberInput, {
renderLabel: (0, _formatMessage["default"])('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((0, _formatMessage["default"])('Precision')),
"data-automation": "sdk-numeric-precise-precision-number-input",
isRequired: true
})), /*#__PURE__*/_react["default"].createElement(_quizCommon.Flex.Item, {
shouldGrow: true,
shouldShrink: true,
margin: "0 xx-small"
}, /*#__PURE__*/_react["default"].createElement(_quizCommon.SimpleSelect, {
renderLabel: (0, _formatMessage["default"])('Type'),
onChange: this.handlePrecisionTypeChange,
value: this.props.precisionType
}, /*#__PURE__*/_react["default"].createElement(_quizCommon.SimpleSelect.Option, {
id: "precise-response-select-option-significant-digits",
value: _constants.SIGNIFICANT_DIGITS
}, (0, _formatMessage["default"])('Significant digits')), /*#__PURE__*/_react["default"].createElement(_quizCommon.SimpleSelect.Option, {
id: "precise-response-select-option-decimals",
value: _constants.DECIMALS
}, (0, _formatMessage["default"])('Decimal places')))));
}
}]);
}(_react.Component);
(0, _defineProperty2["default"])(PreciseResponse, "propTypes", {
id: _propTypes["default"].string.isRequired,
locale: _propTypes["default"].string.isRequired,
messages: _propTypes["default"].objectOf(_propTypes["default"].array),
numericTypeSelect: _propTypes["default"].node.isRequired,
precision: _propTypes["default"].string,
precisionType: _propTypes["default"].oneOf([_constants.SIGNIFICANT_DIGITS, _constants.DECIMALS]).isRequired,
onChange: _propTypes["default"].func.isRequired,
value: _propTypes["default"].string
});
(0, _defineProperty2["default"])(PreciseResponse, "defaultProps", {
messages: void 0,
precision: void 0,
value: void 0
});
function precisionFromValue(value, precisionType) {
return precisionType === _constants.SIGNIFICANT_DIGITS ? (0, _instructureValidations.significantDigits)(value) : (0, _instructureValidations.decimals)(value);
}