@instructure/quiz-interactions
Version:
A React UI component Library for quiz interaction types.
113 lines (111 loc) • 5.79 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 = require("react");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _uiButtons = require("@instructure/ui-buttons");
var _uiIcons = require("@instructure/ui-icons");
var _emotion = require("@instructure/emotion");
var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
var _constants = require("./constants");
var _styles = _interopRequireDefault(require("./styles"));
var _quizCommon = require("@instructure/quiz-common");
var _dec, _class, _NumericTypeSelect;
/** @jsx jsx */
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 NumericTypeSelect = exports["default"] = (_dec = (0, _quizCommon.withStyleOverrides)(_styles["default"], null), _dec(_class = (_NumericTypeSelect = /*#__PURE__*/function (_Component) {
function NumericTypeSelect() {
var _this2;
(0, _classCallCheck2["default"])(this, NumericTypeSelect);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this2 = _callSuper(this, NumericTypeSelect, [].concat(args));
(0, _defineProperty2["default"])(_this2, "setTypeSelectInputRef", function (node) {
_this2.props.inputRef(_this2.props.id, node);
});
(0, _defineProperty2["default"])(_this2, "handleChange", function (event, _ref) {
var value = _ref.value;
_this2.props.onChange(event, {
id: _this2.props.id,
type: value
});
});
return _this2;
}
(0, _inherits2["default"])(NumericTypeSelect, _Component);
return (0, _createClass2["default"])(NumericTypeSelect, [{
key: "renderLabel",
value: function renderLabel() {
var label = (0, _formatMessage["default"])('Requirement');
// TODO: find a way to do this without custom styles
return this.props.onClickHelp ? (0, _emotion.jsx)("div", {
css: this.props.styles.labelWithHelp
}, label, (0, _emotion.jsx)("div", {
css: this.props.styles.helpButton
}, (0, _emotion.jsx)(_uiButtons.IconButton, {
renderIcon: _uiIcons.IconQuestionLine,
onClick: this.props.onClickHelp,
size: "small",
screenReaderLabel: (0, _formatMessage["default"])('Display help dialog for numeric requirement'),
withBackground: false,
withBorder: false
}))) : label;
}
}, {
key: "render",
value: function render() {
return (0, _emotion.jsx)(_quizCommon.SimpleSelect, {
renderLabel: this.renderLabel(),
onChange: this.handleChange,
value: this.props.value,
"data-automation": "sdk-numeric-type",
inputRef: this.setTypeSelectInputRef
}, (0, _emotion.jsx)(_quizCommon.SimpleSelect.Option, {
id: "numeric-type-select-option-exact-response",
value: _constants.EXACT_RESPONSE
}, (0, _formatMessage["default"])('Exact response')), (0, _emotion.jsx)(_quizCommon.SimpleSelect.Option, {
id: "numeric-type-select-option-margin-of-error",
value: _constants.MARGIN_OF_ERROR
}, (0, _formatMessage["default"])('Margin of error')), (0, _emotion.jsx)(_quizCommon.SimpleSelect.Option, {
id: "numeric-type-select-option-within-a-range",
value: _constants.WITHIN_A_RANGE
}, (0, _formatMessage["default"])('Within a range')), (0, _emotion.jsx)(_quizCommon.SimpleSelect.Option, {
id: "numeric-type-select-option-precise-response",
value: _constants.PRECISE_RESPONSE
}, (0, _formatMessage["default"])('Precise response')));
}
}]);
}(_react.Component), (0, _defineProperty2["default"])(_NumericTypeSelect, "displayName", 'NumericTypeSelect'), (0, _defineProperty2["default"])(_NumericTypeSelect, "componentId", "Quizzes".concat(_NumericTypeSelect.displayName)), (0, _defineProperty2["default"])(_NumericTypeSelect, "propTypes", {
id: _propTypes["default"].string.isRequired,
onChange: _propTypes["default"].func.isRequired,
onClickHelp: _propTypes["default"].func,
inputRef: _propTypes["default"].func,
value: _propTypes["default"].oneOf([_constants.EXACT_RESPONSE, _constants.MARGIN_OF_ERROR, _constants.WITHIN_A_RANGE, _constants.PRECISE_RESPONSE]).isRequired,
styles: _propTypes["default"].object
}), (0, _defineProperty2["default"])(_NumericTypeSelect, "defaultProps", {
onClickHelp: null,
inputRef: void 0
}), _NumericTypeSelect)) || _class);