@instructure/quiz-interactions
Version:
A React UI component Library for quiz interaction types.
320 lines (314 loc) • 15.6 kB
JavaScript
"use strict";
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 _uiCheckbox = require("@instructure/ui-checkbox");
var _quizNumberInput = _interopRequireDefault(require("@instructure/quiz-number-input"));
var _uiA11yContent = require("@instructure/ui-a11y-content");
var _emotion = require("@instructure/emotion");
var _essay = _interopRequireDefault(require("../../../records/interactions/essay"));
var _QuestionSettingsContainer = _interopRequireDefault(require("../../common/edit/components/QuestionSettingsContainer"));
var _QuestionContainer = _interopRequireDefault(require("../../common/edit/components/QuestionContainer"));
var _styles = _interopRequireDefault(require("./styles"));
var _theme = _interopRequireDefault(require("./theme"));
var _withEditTools = _interopRequireDefault(require("../../../util/withEditTools"));
var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
var _QuestionSettingsPanel = _interopRequireDefault(require("../../common/edit/components/QuestionSettingsPanel"));
var _CalculatorOptionWithOqaatAlert = _interopRequireDefault(require("../../common/edit/components/CalculatorOptionWithOqaatAlert"));
var _quizCommon = require("@instructure/quiz-common");
var _dec, _class, _EssayEdit;
/** @jsx jsx */
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
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));
}
/**
---
category: Essay
---
Essay Edit component
```jsx_example
function Example (props) {
const exampleProps = {
itemBody: 'Please enter Question/Prompt...',
interactionData: {
rce: false,
spellCheck: false,
wordCount: false,
wordLimitEnabled: false,
wordLimitMax: '',
wordLimitMin: '',
notes: ''
},
scoringData: { value: 'goths and food shortage' },
additionalOptions: []
}
return (
<EssayEdit {...exampleProps} {...props} />
)
}
<SettingsSwitcher locales={LOCALES}>
<EditStateProvider>
<Example />
</EditStateProvider>
</SettingsSwitcher>
```
**/
var EssayEdit = exports["default"] = (_dec = (0, _quizCommon.withStyleOverrides)(_styles["default"], _theme["default"]), (0, _withEditTools["default"])(_class = _dec(_class = (_EssayEdit = /*#__PURE__*/function (_Component) {
function EssayEdit(props) {
var _this2;
(0, _classCallCheck2["default"])(this, EssayEdit);
_this2 = _callSuper(this, EssayEdit, [props]);
// =============
// HANDLERS
// =============
(0, _defineProperty2["default"])(_this2, "handleCalculatorTypeChange", function (e, value) {
_this2.props.changeItemState({
calculatorType: value
});
});
(0, _defineProperty2["default"])(_this2, "handleCheckboxChange", function (event) {
_this2.mergeInteractionData((0, _defineProperty2["default"])({}, event.target.value, !_this2.props.interactionData[event.target.value]));
});
(0, _defineProperty2["default"])(_this2, "handleNotesChange", function (event) {
_this2.props.changeItemState({
scoringData: {
value: event.target.value
}
});
});
(0, _defineProperty2["default"])(_this2, "handleWordLimitMinChange", function (event, value, normalizedValue) {
_this2.setState({
wordLimitMin: value,
normalizedWordLimitMin: normalizedValue
});
});
(0, _defineProperty2["default"])(_this2, "handleWordLimitMaxChange", function (event, value, normalizedValue) {
_this2.setState({
wordLimitMax: value,
normalizedWordLimitMax: normalizedValue
});
});
(0, _defineProperty2["default"])(_this2, "handleWordLimitBlur", function (key, normalizedKey) {
if (_this2.state[normalizedKey] == null) {
_this2.mergeInteractionData((0, _defineProperty2["default"])({}, key, null));
_this2.setState((0, _defineProperty2["default"])({}, key, null));
} else {
var wordLimit = parseInt(_this2.state[normalizedKey], 10) || 0;
_this2.mergeInteractionData((0, _defineProperty2["default"])({}, key, wordLimit.toString()));
_this2.setState((0, _defineProperty2["default"])({}, key, wordLimit));
}
});
(0, _defineProperty2["default"])(_this2, "handleWordLimitMinBlur", function () {
_this2.handleWordLimitBlur('wordLimitMin', 'normalizedWordLimitMin');
});
(0, _defineProperty2["default"])(_this2, "handleWordLimitMaxBlur", function () {
_this2.handleWordLimitBlur('wordLimitMax', 'normalizedWordLimitMax');
});
(0, _defineProperty2["default"])(_this2, "handleDescriptionChange", function (itemBody) {
return _this2.props.changeItemState({
itemBody: itemBody
});
});
var _props$interactionDat = props.interactionData,
wordLimitMin = _props$interactionDat.wordLimitMin,
wordLimitMax = _props$interactionDat.wordLimitMax;
_this2.state = {
wordLimitMin: wordLimitMin && Number(wordLimitMin),
wordLimitMax: wordLimitMax && Number(wordLimitMax),
normalizedWordLimitMin: wordLimitMin,
normalizedWordLimitMax: wordLimitMax
};
return _this2;
}
// =============
// HELPERS
// =============
(0, _inherits2["default"])(EssayEdit, _Component);
return (0, _createClass2["default"])(EssayEdit, [{
key: "mergeInteractionData",
value: function mergeInteractionData(intDataDiff) {
this.props.changeItemState({
interactionData: Object.assign({}, this.props.interactionData, intDataDiff)
});
}
}, {
key: "renderGradingNotes",
value:
// =============
// RENDERING
// =============
function renderGradingNotes() {
return (0, _emotion.jsx)(_quizCommon.TextArea, {
disabled: this.props.overrideEditableForRegrading,
label: (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage["default"])('Grading Notes')),
value: this.props.scoringData.value,
onChange: this.handleNotesChange,
autoGrow: this.context.disableTextAreaAutoGrow ? false : null,
"data-automation": "sdk-essay-grading-notes-text-area"
});
}
}, {
key: "renderOptions",
value: function renderOptions() {
var description = (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage["default"])('Essay options'));
return (0, _emotion.jsx)(_quizCommon.FormFieldGroup, {
rowSpacing: "small",
description: description
}, this.props.showCalculatorOption && (0, _emotion.jsx)(_CalculatorOptionWithOqaatAlert["default"], {
disabled: this.props.overrideEditableForRegrading,
calculatorValue: this.props.calculatorType,
onCalculatorTypeChange: this.handleCalculatorTypeChange,
oqaatChecked: this.props.oneQuestionAtATime,
onOqaatChange: this.props.setOneQuestionAtATime
}), (0, _emotion.jsx)(_uiCheckbox.Checkbox, {
disabled: this.props.overrideEditableForRegrading,
value: "rce",
"data-automation": "sdk-essay-rce-checkbox",
label: (0, _formatMessage["default"])('Rich Content Editor'),
onChange: this.handleCheckboxChange,
checked: this.props.interactionData.rce
}), (0, _emotion.jsx)(_uiCheckbox.Checkbox, {
disabled: this.props.overrideEditableForRegrading,
value: "spellCheck",
"data-automation": "sdk-essay-spellcheck-checkbox",
label: (0, _formatMessage["default"])('Spell-check'),
onChange: this.handleCheckboxChange,
checked: this.props.interactionData.spellCheck
}), (0, _emotion.jsx)(_uiCheckbox.Checkbox, {
disabled: this.props.overrideEditableForRegrading,
value: "wordCount",
"data-automation": "sdk-essay-wordcount-checkbox",
label: (0, _formatMessage["default"])('Show Word Count'),
onChange: this.handleCheckboxChange,
checked: this.props.interactionData.wordCount
}), (0, _emotion.jsx)(_uiCheckbox.Checkbox, {
disabled: this.props.overrideEditableForRegrading,
value: "wordLimitEnabled",
"data-automation": "sdk-essay-wordlimit-checkbox",
label: (0, _formatMessage["default"])('Set Word Limit'),
onChange: this.handleCheckboxChange,
checked: this.props.interactionData.wordLimitEnabled
}), this.renderWordLimitInput());
}
}, {
key: "renderWordLimitInput",
value: function renderWordLimitInput() {
if (this.props.interactionData.wordLimitEnabled) {
var currentMinValue = this.state.wordLimitMin == null ? '' : this.state.wordLimitMin;
var currentMaxValue = this.state.wordLimitMax == null ? '' : this.state.wordLimitMax;
return (0, _emotion.jsx)("div", null, (0, _emotion.jsx)("div", {
css: this.props.styles.wordLimitInputsContainer
}, (0, _emotion.jsx)("div", {
css: this.props.styles.wordLimitInput
}, (0, _emotion.jsx)(_quizNumberInput["default"], {
disabled: this.props.overrideEditableForRegrading,
"data-automation": "sdk-essay-wordlimit-min",
min: "0",
width: "8rem",
renderLabel: (0, _formatMessage["default"])('Minimum'),
placeholder: (0, _formatMessage["default"])('Limit'),
value: currentMinValue,
onChange: this.handleWordLimitMinChange,
onBlur: this.handleWordLimitMinBlur,
messages: this.props.getErrors('interactionData.$errors'),
"aria-valuetext": "".concat(currentMinValue, " ").concat((0, _formatMessage["default"])('Words minimum'))
})), (0, _emotion.jsx)("div", {
css: this.props.styles.wordLimitInput
}, (0, _emotion.jsx)(_quizNumberInput["default"], {
disabled: this.props.overrideEditableForRegrading,
"data-automation": "sdk-essay-wordlimit-max",
min: "0",
width: "8rem",
renderLabel: (0, _formatMessage["default"])('Maximum'),
placeholder: (0, _formatMessage["default"])('Limit'),
value: currentMaxValue,
onChange: this.handleWordLimitMaxChange,
onBlur: this.handleWordLimitMaxBlur,
"aria-valuetext": "".concat(currentMaxValue, " ").concat((0, _formatMessage["default"])('Words maximum'))
}))));
}
}
}, {
key: "renderQuestionConfigContainer",
value: function renderQuestionConfigContainer() {
return (0, _emotion.jsx)(_QuestionSettingsContainer["default"], {
additionalOptions: this.props.additionalOptions
}, (0, _emotion.jsx)(_QuestionSettingsPanel["default"], {
label: (0, _formatMessage["default"])('Options'),
defaultExpanded: true
}, this.renderOptions()), (0, _emotion.jsx)(_QuestionSettingsPanel["default"], {
label: (0, _formatMessage["default"])('Grading Notes')
}, this.renderGradingNotes()));
}
}, {
key: "render",
value: function render() {
return (0, _emotion.jsx)("div", null, (0, _emotion.jsx)(_QuestionContainer["default"], {
disabled: this.props.overrideEditableForRegrading,
enableRichContentEditor: this.props.enableRichContentEditor,
itemBody: this.props.itemBody,
onDescriptionChange: this.handleDescriptionChange,
onModalClose: this.props.onModalClose,
onModalOpen: this.props.onModalOpen,
openImportModal: this.props.openImportModal,
stemErrors: this.props.getErrors('itemBody'),
automationData: "sdk-essay-rce"
}), this.renderQuestionConfigContainer());
}
}]);
}(_react.Component), (0, _defineProperty2["default"])(_EssayEdit, "displayName", 'EssayEdit'), (0, _defineProperty2["default"])(_EssayEdit, "componentId", "Quizzes".concat(_EssayEdit.displayName)), (0, _defineProperty2["default"])(_EssayEdit, "interactionType", _essay["default"]), (0, _defineProperty2["default"])(_EssayEdit, "propTypes", _objectSpread(_objectSpread({
additionalOptions: _propTypes["default"].array,
calculatorType: _propTypes["default"].string,
changeItemState: _propTypes["default"].func.isRequired,
enableRichContentEditor: _propTypes["default"].bool,
interactionData: _propTypes["default"].object.isRequired,
itemBody: _propTypes["default"].string.isRequired,
onModalClose: _propTypes["default"].func,
onModalOpen: _propTypes["default"].func,
oneQuestionAtATime: _propTypes["default"].bool,
openImportModal: _propTypes["default"].func,
overrideEditableForRegrading: _propTypes["default"].bool,
scoringData: _propTypes["default"].shape({
value: _propTypes["default"].string.isRequired
}).isRequired,
setOneQuestionAtATime: _propTypes["default"].func
}, _withEditTools["default"].injectedProps), {}, {
styles: _propTypes["default"].object,
showCalculatorOption: _propTypes["default"].bool
})), (0, _defineProperty2["default"])(_EssayEdit, "defaultProps", {
calculatorType: 'none',
enableRichContentEditor: true,
oneQuestionAtATime: false,
overrideEditableForRegrading: false,
additionalOptions: [],
setOneQuestionAtATime: Function.prototype,
onModalClose: void 0,
onModalOpen: void 0,
openImportModal: void 0,
showCalculatorOption: true
}), (0, _defineProperty2["default"])(_EssayEdit, "contextTypes", {
disableTextAreaAutoGrow: _propTypes["default"].bool
}), _EssayEdit)) || _class) || _class);