@instructure/quiz-interactions
Version:
A React UI component Library for quiz interaction types.
109 lines (108 loc) • 4.15 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, _Wordbank;
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));
}
/** @jsx jsx */
import { Component } from 'react';
import PropTypes from 'prop-types';
import partial from 'lodash/partial';
import { jsx } from '@instructure/emotion';
import DraggableBlankChoice from '../DraggableBlankChoice';
import generateStyle from './styles';
import generateComponentTheme from './theme';
import { withStyleOverrides } from '@instructure/quiz-common';
var Wordbank = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_Wordbank = /*#__PURE__*/function (_Component) {
function Wordbank() {
_classCallCheck(this, Wordbank);
return _callSuper(this, Wordbank, arguments);
}
_inherits(Wordbank, _Component);
return _createClass(Wordbank, [{
key: "componentDidMount",
value: function componentDidMount() {
this.props.makeStyles();
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate() {
this.props.makeStyles();
}
// =============
// RENDERING
// =============
}, {
key: "renderChoice",
value: function renderChoice(choice) {
var printOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
return jsx(DraggableBlankChoice, {
key: choice.id,
id: choice.id,
itemBody: choice.itemBody,
returnChoiceToWordbank: partial(this.props.returnChoiceToWordbank, null),
printOnly: printOnly
});
}
}, {
key: "renderWordbankChoices",
value: function renderWordbankChoices() {
var _this2 = this;
return this.props.wordBankChoices.map(function (choice) {
return _this2.renderChoice(choice);
});
}
}, {
key: "renderDropdownChoices",
value: function renderDropdownChoices() {
var _this3 = this;
var dropdownBlanks = this.props.blanks.filter(function (blank) {
return blank.answerType === 'dropdown';
});
return dropdownBlanks.map(function (blank) {
return blank.choices.map(function (choice) {
return _this3.renderChoice(choice, true);
});
});
}
}, {
key: "render",
value: function render() {
// Screenreaders don't even need to know about the wordBank
return jsx("div", {
className: "fs-mask",
css: this.props.styles.wordbankWrapper,
"aria-hidden": true
}, this.renderWordbankChoices(), this.renderDropdownChoices());
}
}]);
}(Component), _defineProperty(_Wordbank, "displayName", 'Wordbank'), _defineProperty(_Wordbank, "componentId", "Quizzes".concat(_Wordbank.displayName)), _defineProperty(_Wordbank, "propTypes", {
blanks: PropTypes.array.isRequired,
returnChoiceToWordbank: PropTypes.func,
wordBankChoices: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.string,
itemBody: PropTypes.string
})),
makeStyles: PropTypes.func,
styles: PropTypes.object
}), _defineProperty(_Wordbank, "defaultProps", {
response: void 0,
returnChoiceToWordbank: void 0,
wordBankChoices: void 0
}), _Wordbank)) || _class);
export { Wordbank as default };