@instructure/quiz-interactions
Version:
A React UI component Library for quiz interaction types.
144 lines • 5.92 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, _DistractorList;
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 { Text } from '@instructure/ui-text';
import { View } from '@instructure/ui-view';
import { Flex, withStyleOverrides } from '@instructure/quiz-common';
import { jsx } from '@instructure/emotion';
import ChoiceInput from '../../../common/edit/components/ChoiceInput';
import Footer from '../../../common/edit/components/Footer';
import generateStyle from './styles';
import generateComponentTheme from './theme';
import t from '@instructure/quiz-i18n/es/format-message';
import RemoveChoiceButton from '../../../common/edit/components/RemoveChoiceButton';
var DistractorList = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_DistractorList = /*#__PURE__*/function (_Component) {
function DistractorList() {
var _this2;
_classCallCheck(this, DistractorList);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this2 = _callSuper(this, DistractorList, [].concat(args));
_defineProperty(_this2, "distractorRefs", {});
return _this2;
}
_inherits(DistractorList, _Component);
return _createClass(DistractorList, [{
key: "renderDistractor",
value: function renderDistractor(distractorText, i, focusOnMount) {
var _this3 = this;
var distractorErrors = this.props.distractorErrors;
var index = i.toString();
return jsx(Flex, {
key: i,
alignItems: "start",
"data-automation": "sdk-matching-distractor"
}, jsx(Flex.Item, {
shouldShrink: true,
size: "24rem"
}, jsx(ChoiceInput, {
key: index,
id: index
// disabledFields={[]}
,
itemBody: distractorText,
errors: distractorErrors(i),
onInputChange: this.props.editDistractor,
onInputBlur: this.props.blurDistractor,
ref: function ref(node) {
_this3.distractorRefs[index] = node;
},
renderLabel: t('Distractor'),
isRequired: true,
focusOnMount: focusOnMount,
shouldRenderRemoveChoice: false,
noRCE: true,
notifyScreenreader: this.props.notifyScreenreader,
placeholder: t('Type a distractor'),
automationData: "sdk-matching-distractor-entry"
})), !this.props.disabled && jsx(View, {
as: "div",
margin: "xx-large 0 0 0",
themeOverride: {
marginXxLarge: '30px'
}
}, jsx(RemoveChoiceButton, {
screenReaderText: t('Remove Distractor: {distractor}', {
distractor: distractorText
}),
onRemoveChoice: function onRemoveChoice() {
return _this3.props.removeDistractor(index);
},
choiceId: index
})));
}
}, {
key: "renderDistractors",
value: function renderDistractors() {
var _this4 = this;
var distractors = this.props.distractors;
return jsx(Flex, {
direction: "column",
gap: "small",
padding: "x-small 0 0 0"
}, jsx(Flex.Item, {
"data-testid": "additional-distractor-text"
}, jsx(Text, {
color: "primary"
}, t('Additional Distractors'))), jsx(Flex, {
direction: "column",
gap: "small"
}, distractors.map(function (distractorText, i, source) {
var focusOnMount = i + 1 === source.length && !distractorText.itemBody;
return _this4.renderDistractor(distractorText, i, focusOnMount);
})), !this.props.disabled && jsx(Footer, {
onCreateChoice: this.props.createNewDistractor,
buttonText: t('Distractor'),
screenReaderText: t('Add Distractor'),
notifyScreenreader: this.props.notifyScreenreader,
automationData: "sdk-add-matching-distractor-button"
}));
}
}, {
key: "render",
value: function render() {
this.distractorRefs = {};
return this.renderDistractors();
}
}]);
}(Component), _defineProperty(_DistractorList, "displayName", 'DistractorList'), _defineProperty(_DistractorList, "componentId", "Quizzes".concat(_DistractorList.displayName)), _defineProperty(_DistractorList, "propTypes", {
createNewDistractor: PropTypes.func.isRequired,
disabled: PropTypes.bool,
distractorErrors: PropTypes.func.isRequired,
distractors: PropTypes.arrayOf(PropTypes.string).isRequired,
editDistractor: PropTypes.func.isRequired,
blurDistractor: PropTypes.func.isRequired,
removeDistractor: PropTypes.func.isRequired,
notifyScreenreader: PropTypes.func,
styles: PropTypes.object
}), _defineProperty(_DistractorList, "defaultProps", {
notifyScreenreader: function notifyScreenreader() {},
disabled: false
}), _DistractorList)) || _class);
export { DistractorList as default };