@instructure/quiz-interactions
Version:
A React UI component Library for quiz interaction types.
152 lines (147 loc) • 5.54 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, _FileUploadResult;
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 get from 'lodash/get';
import { Alert } from '@instructure/ui-alerts';
import { jsx } from '@instructure/emotion';
import { ItemBodyWrapper } from '@instructure/quiz-rce';
import { SubjectiveFeedback } from '@instructure/quiz-results-feedback';
import t from '@instructure/quiz-i18n/es/format-message';
import FilesList from '../common/FilesList';
import generateStyle from './styles';
import generateComponentTheme from './theme';
import { withStyleOverrides } from '@instructure/quiz-common';
/**
---
category: FileUpload
---
File Upload Result component
```jsx_example
function Example (props) {
const exampleProps = {
itemBody: 'Give six examples of people',
interactionData: {
restrictCount: true,
filesCount: 6
},
scoredData: {
gradeStatus: 'waiting',
value: [{
id: 111,
name: 'slide-3.jpg',
url: 'http://instructure.github.io/images/slide-3.jpg',
size: 49067
}, {
id: 112,
name: 'instructure.png',
url: 'https://www.canvaslms.com/img/logo/instructure.png',
size: 3184
}, {
id: 113,
name: '',
url: '',
size: 0
}, {
id: 143,
name: 'broken-image-link.jpeg',
url: 'fake-path/broken-image-link.jpeg',
size: 42000
}, {
id: 153,
name: 'canvas-webfont.woff',
url: 'http://instructure.github.io/assets/fonts/canvas-webfont.woff',
size: 45280
}, {
id: 163,
name: 'broken-file-link.pdf',
url: 'fake-path/broken-file-link.pdf',
size: 314159
}]
}
}
return <FileUploadResult {...exampleProps} {...props} />
}
<SettingsSwitcher locales={LOCALES}>
<Example />
</SettingsSwitcher>
```
**/
var FileUploadResult = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_FileUploadResult = /*#__PURE__*/function (_Component) {
function FileUploadResult() {
_classCallCheck(this, FileUploadResult);
return _callSuper(this, FileUploadResult, arguments);
}
_inherits(FileUploadResult, _Component);
return _createClass(FileUploadResult, [{
key: "getGradeStatus",
value: function getGradeStatus() {
var resultMods = this.props.itemResultsModifications || {};
var workingGradeStatus = get(resultMods, ['scoredData', 'gradeStatus']);
return workingGradeStatus || this.props.scoredData.gradeStatus;
}
}, {
key: "render",
value: function render() {
var _this$props = this.props,
itemBody = _this$props.itemBody,
scoredData = _this$props.scoredData;
return jsx("div", null, jsx("div", {
css: this.props.styles.printOnly
}, jsx(Alert, {
variant: "warning"
}, t('This question type cannot be printed'))), jsx(ItemBodyWrapper, {
itemBody: itemBody
}, jsx("div", {
css: this.props.styles.choicesWrapper
}, jsx(SubjectiveFeedback, {
gradeStatus: this.getGradeStatus()
}, jsx("div", {
css: this.props.styles.filesListWrapper
}, jsx(FilesList, {
files: scoredData.value,
showIfEmpty: true
}))))));
}
}]);
}(Component), _defineProperty(_FileUploadResult, "displayName", 'FileUploadResult'), _defineProperty(_FileUploadResult, "componentId", "Quizzes".concat(_FileUploadResult.displayName)), _defineProperty(_FileUploadResult, "propTypes", {
itemBody: PropTypes.string.isRequired,
interactionData: PropTypes.shape({
restrictCount: PropTypes.bool.isRequired,
filesCount: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
}).isRequired,
scoredData: PropTypes.shape({
gradeStatus: PropTypes.oneOf(['waiting', 'graded', 'correct', 'incorrect', 'unknown']),
value: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.number.isRequired,
name: PropTypes.string.isRequired,
url: PropTypes.string.isRequired,
size: PropTypes.number.isRequired
}))
}).isRequired,
itemResultsModifications: PropTypes.object,
styles: PropTypes.object
}), _defineProperty(_FileUploadResult, "defaultProps", {
itemResultsModifications: void 0
}), _FileUploadResult)) || _class);
export { FileUploadResult as default };