@instructure/quiz-grading
Version:
The Quiz React SDK by Instructure Inc.
321 lines (320 loc) • 14.6 kB
JavaScript
/** @jsx jsx */ function _assert_this_initialized(self) {
if (self === void 0) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return self;
}
function _call_super(_this, derived, args) {
derived = _get_prototype_of(derived);
return _possible_constructor_return(_this, _is_native_reflect_construct() ? Reflect.construct(derived, args || [], _get_prototype_of(_this).constructor) : derived.apply(_this, args));
}
function _class_call_check(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
function _defineProperties(target, props) {
for(var i = 0; i < props.length; i++){
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
function _create_class(Constructor, protoProps, staticProps) {
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
if (staticProps) _defineProperties(Constructor, staticProps);
return Constructor;
}
function _define_property(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function _get_prototype_of(o) {
_get_prototype_of = Object.setPrototypeOf ? Object.getPrototypeOf : function getPrototypeOf(o) {
return o.__proto__ || Object.getPrototypeOf(o);
};
return _get_prototype_of(o);
}
function _inherits(subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function");
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
writable: true,
configurable: true
}
});
if (superClass) _set_prototype_of(subClass, superClass);
}
function _object_spread(target) {
for(var i = 1; i < arguments.length; i++){
var source = arguments[i] != null ? arguments[i] : {};
var ownKeys = Object.keys(source);
if (typeof Object.getOwnPropertySymbols === "function") {
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
}));
}
ownKeys.forEach(function(key) {
_define_property(target, key, source[key]);
});
}
return target;
}
function _possible_constructor_return(self, call) {
if (call && (_type_of(call) === "object" || typeof call === "function")) {
return call;
}
return _assert_this_initialized(self);
}
function _set_prototype_of(o, p) {
_set_prototype_of = Object.setPrototypeOf || function setPrototypeOf(o, p) {
o.__proto__ = p;
return o;
};
return _set_prototype_of(o, p);
}
function _type_of(obj) {
"@swc/helpers - typeof";
return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
}
function _is_native_reflect_construct() {
try {
var result = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {}));
} catch (_) {}
return (_is_native_reflect_construct = function() {
return !!result;
})();
}
import { Component } from 'react';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { Map } from 'immutable';
import { jsx } from '@instructure/emotion';
import { CustomPropTypes } from '@instructure/quiz-core/common/util/CustomPropTypes';
import { SessionItemResult } from '@instructure/quiz-core/common/components/resources/sessionItemResult/SessionItemResult/index';
import GradingBar from '../GradingBar';
import RegradeOverride from '../../quizEntry/RegradeOverride';
import { CLEAR_ALL_INPUT_VALIDATION_ERRORS } from '@instructure/quiz-common/constants';
import { withStyleOverrides } from '@instructure/quiz-common/util/withStyleOverrides';
import generateStyle from './styles';
import generateComponentTheme from './theme';
var BaseSessionItemResultWrapper = /*#__PURE__*/ function(Component) {
"use strict";
_inherits(BaseSessionItemResultWrapper, Component);
function BaseSessionItemResultWrapper() {
_class_call_check(this, BaseSessionItemResultWrapper);
var _this;
_this = _call_super(this, BaseSessionItemResultWrapper, arguments), _define_property(_this, "state", {
graderFeedback: _this.props.graderFeedback,
validationErrorsFromApi: {}
}), _define_property(_this, "gradingBar", null), _define_property(_this, "_timeouts", []), _define_property(_this, "startFeedbackEdit", function() {
if (!_this.props.isEditing) {
_this.props.switchOnEditing();
}
}), _define_property(_this, "closeFeedbackEdit", function() {
var _this_gradingBar;
_this.props.switchOffEditing();
(_this_gradingBar = _this.gradingBar) === null || _this_gradingBar === void 0 ? void 0 : _this_gradingBar.focusFeedbackButton();
}), _define_property(_this, "submitFeedbackEdit", function() {
_this.props.handleChangeFeedback(_this.props.sessionItem.id, _this.props.item.id, {
graderFeedback: _this.state.graderFeedback.toJS()
});
_this.closeFeedbackEdit();
}), _define_property(_this, "updateFeedbackEdit", function(e, param) {
var editorContent = param.editorContent;
_this.setState({
graderFeedback: Map({
content: editorContent
})
});
}), // =============
// HANDLERS
// =============
_define_property(_this, "setActiveItem", function() {
if (_this.props.gradeByQuestionEnabled) {
_this.props.setActiveItem(_this.props.item.id);
}
}), _define_property(_this, "handleRegradingEditModeToggle", function() {
_this.props.toggleRegradingEditMode(_this.props.regradingKey);
}), _define_property(_this, "handleRegradingOnCancel", function(sessionItemId) {
_this.clearValidationErrorsFromApi(CLEAR_ALL_INPUT_VALIDATION_ERRORS);
_this._timeouts = _this._timeouts.concat(setTimeout(function() {
var _this_gradingBar;
return (_this_gradingBar = _this.gradingBar) === null || _this_gradingBar === void 0 ? void 0 : _this_gradingBar.focusRegradeButton();
}));
}), _define_property(_this, "handleGradingBarRef", function(node) {
_this.gradingBar = node;
}), _define_property(_this, "handleValidationErrorsFromApi", function(errors) {
_this.setState({
validationErrorsFromApi: errors
});
}), _define_property(_this, "clearValidationErrorsFromApi", function(inputId) {
if (inputId === CLEAR_ALL_INPUT_VALIDATION_ERRORS) {
_this.setState({
validationErrorsFromApi: {}
});
} else if (_this.state.validationErrorsFromApi[inputId]) {
var newErrors = _object_spread({}, _this.state.validationErrorsFromApi);
delete newErrors[inputId];
_this.setState({
validationErrorsFromApi: newErrors
});
}
}), // =============
// RENDERING
// =============
_define_property(_this, "renderRegradeOverride", function(sessionItem, item) {
return /*#__PURE__*/ jsx(RegradeOverride, {
displayPosition: sessionItem.position,
guid: sessionItem.id,
onCancel: _this.handleRegradingOnCancel,
itemId: item.id,
quizSessionId: _this.props.quizSessionId,
sessionItem: sessionItem,
validationErrorsFromApi: _this.state.validationErrorsFromApi,
handleValidationErrorsFromApi: _this.handleValidationErrorsFromApi,
clearValidationErrorsFromApi: _this.clearValidationErrorsFromApi
});
});
return _this;
}
_create_class(BaseSessionItemResultWrapper, [
{
key: "componentDidMount",
value: function componentDidMount() {
this.props.makeStyles();
}
},
{
key: "componentDidUpdate",
value: function componentDidUpdate() {
this.props.makeStyles();
}
},
{
key: "componentWillUnmount",
value: function componentWillUnmount() {
this._timeouts.forEach(clearTimeout);
}
},
{
key: "isAutogradeable",
value: function isAutogradeable() {
var notAutogradeableTypes = [
'essay',
'file-upload'
];
return !notAutogradeableTypes.includes(this.props.item.getInteractionType().slug);
}
},
{
key: "isSubjective",
value: function isSubjective() {
return this.props.item.getInteractionType().isSubjective;
}
},
{
key: "renderResult",
value: function renderResult(sessionItem, item) {
var _this_props = this.props, handleChangeGradeStatus = _this_props.handleChangeGradeStatus, handleChangePoints = _this_props.handleChangePoints, itemResultsModifications = _this_props.itemResultsModifications, sessionItemResult = _this_props.sessionItemResult, shouldRenderTopBorder = _this_props.shouldRenderTopBorder;
return /*#__PURE__*/ jsx("div", {
css: this.props.styles.root,
"data-automation": "sdk-grading-result-wrapper",
tabIndex: "-1",
onFocus: this.setActiveItem
}, /*#__PURE__*/ jsx("div", {
css: this.props.styles.result
}, /*#__PURE__*/ jsx(SessionItemResult, {
appContainer: this.props.appContainer,
editGraderFeedback: this.startFeedbackEdit,
hideGraderFeedback: this.props.isEditing,
item: item,
sessionItem: sessionItem,
sessionItemResult: sessionItemResult,
shouldRenderTopBorder: shouldRenderTopBorder
})), /*#__PURE__*/ jsx("div", {
css: this.props.styles.gradingBar
}, /*#__PURE__*/ jsx(GradingBar, {
appContainer: this.props.appContainer,
ref: this.handleGradingBarRef,
cancelFeedbackEdit: this.closeFeedbackEdit,
graderFeedback: this.state.graderFeedback,
handleChangeGradeStatus: handleChangeGradeStatus,
handleChangePoints: handleChangePoints,
isAutogradeable: this.isAutogradeable(),
isEditing: this.props.isEditing,
isSubjective: this.isSubjective(),
itemResultsModifications: itemResultsModifications,
regradeToggleAction: this.handleRegradingEditModeToggle,
renderUpdateButton: this.props.renderUpdateButton,
sessionItem: sessionItem,
sessionItemResult: sessionItemResult,
startFeedbackEdit: this.startFeedbackEdit,
submitFeedbackEdit: this.submitFeedbackEdit,
updateFeedbackEdit: this.updateFeedbackEdit
})));
}
},
{
key: "render",
value: function render() {
var _this_props = this.props, sessionItem = _this_props.sessionItem, item = _this_props.item, regradingFromSpeedGrader = _this_props.regradingFromSpeedGrader, isRegrading = _this_props.isRegrading;
if (isRegrading && regradingFromSpeedGrader) {
return this.renderRegradeOverride(sessionItem, item);
} else {
return this.renderResult(sessionItem, item);
}
}
}
]);
return BaseSessionItemResultWrapper;
}(Component);
_define_property(BaseSessionItemResultWrapper, "displayName", 'SessionItemResultWrapper');
_define_property(BaseSessionItemResultWrapper, "componentId", "Quizzes".concat(BaseSessionItemResultWrapper.displayName));
_define_property(BaseSessionItemResultWrapper, "propTypes", {
activeItemId: PropTypes.string,
appContainer: CustomPropTypes.selectors.isRequired,
handleChangeFeedback: PropTypes.func.isRequired,
handleChangeGradeStatus: PropTypes.func.isRequired,
handleChangePoints: PropTypes.func.isRequired,
gradeByQuestionEnabled: PropTypes.bool,
graderFeedback: ImmutablePropTypes.map.isRequired,
isEditing: PropTypes.bool.isRequired,
isRegrading: PropTypes.bool.isRequired,
item: ImmutablePropTypes.record.isRequired,
itemResultsModifications: ImmutablePropTypes.map.isRequired,
quizSessionId: PropTypes.string.isRequired,
regradingKey: PropTypes.string.isRequired,
renderUpdateButton: PropTypes.func.isRequired,
sessionItem: ImmutablePropTypes.record.isRequired,
sessionItemResult: ImmutablePropTypes.record.isRequired,
setActiveItem: PropTypes.func.isRequired,
shouldRenderTopBorder: PropTypes.bool.isRequired,
switchOffEditing: PropTypes.func.isRequired,
switchOnEditing: PropTypes.func.isRequired,
toggleRegradingEditMode: PropTypes.func.isRequired,
makeStyles: PropTypes.func,
styles: PropTypes.object,
regradingFromSpeedGrader: PropTypes.bool,
isSurvey: PropTypes.bool.isRequired
});
_define_property(BaseSessionItemResultWrapper, "defaultProps", {
activeItemId: null,
gradeByQuestionEnabled: false
});
export var SessionItemResultWrapper = withStyleOverrides(generateStyle, generateComponentTheme)(BaseSessionItemResultWrapper);
export default SessionItemResultWrapper;