quiz-interactions/lib/components/file_upload/Result/index.js

A React UI component Library for quiz interaction types.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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 _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _get = _interopRequireDefault(require("lodash/get"));

var _uiThemeable = require("@instructure/ui-themeable");

var _quizRce = require("@instructure/quiz-rce");

var _SubjectiveFeedback = _interopRequireDefault(require("@instructure/quiz-results-feedback/lib/components/SubjectiveFeedback"));

var _FilesList = _interopRequireDefault(require("../common/FilesList"));

var _theme = _interopRequireDefault(require("./theme"));

var _dec, _class, _class2, _temp;

var styles = {
  componentId: 'dXgeS',
  template: function template(theme) {
    return "\n\n.dXgeS_eYfB{display:flex}\n\n.dXgeS_bxxq{flex-basis:25rem;margin-top:".concat(theme.choicesWrapperMargin || 'inherit', ";padding:").concat(theme.choicesWrapperPadding || 'inherit', "}\n\n.dXgeS_bGzm{padding:0 ").concat(theme.filesListWrapperPadding || 'inherit', "}");
  },
  'holder': 'dXgeS_eYfB',
  'choicesWrapper': 'dXgeS_bxxq',
  'filesListWrapper': 'dXgeS_bGzm'
};
var FileUploadResult = (
/**
---
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>
  ```
**/
_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(FileUploadResult, _Component);

  function FileUploadResult() {
    (0, _classCallCheck2.default)(this, FileUploadResult);
    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(FileUploadResult).apply(this, arguments));
  }

  (0, _createClass2.default)(FileUploadResult, [{
    key: "getGradeStatus",
    value: function getGradeStatus() {
      var resultMods = this.props.itemResultsModifications || {};
      var workingGradeStatus = (0, _get.default)(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 _react.default.createElement("div", {
        className: styles.holder
      }, _react.default.createElement(_quizRce.ItemBodyWrapper, {
        itemBody: itemBody
      }, _react.default.createElement("div", {
        className: styles.choicesWrapper
      }, _react.default.createElement(_SubjectiveFeedback.default, {
        gradeStatus: this.getGradeStatus()
      }, _react.default.createElement("div", {
        className: styles.filesListWrapper
      }, _react.default.createElement(_FilesList.default, {
        files: scoredData.value,
        showIfEmpty: true
      }))))));
    }
  }]);
  FileUploadResult.displayName = "FileUploadResult";
  return FileUploadResult;
}(_react.Component), _class2.propTypes = {
  itemBody: _propTypes.default.string.isRequired,
  interactionData: _propTypes.default.shape({
    restrictCount: _propTypes.default.bool.isRequired,
    filesCount: _propTypes.default.number.isRequired
  }).isRequired,
  scoredData: _propTypes.default.shape({
    gradeStatus: _propTypes.default.oneOf(['waiting', 'graded', 'correct', 'incorrect', 'unknown']),
    value: _propTypes.default.arrayOf(_propTypes.default.shape({
      id: _propTypes.default.number.isRequired,
      name: _propTypes.default.string.isRequired,
      url: _propTypes.default.string.isRequired,
      size: _propTypes.default.number.isRequired
    }))
  }).isRequired,
  itemResultsModifications: _propTypes.default.object
}, _class2.defaultProps = {
  itemResultsModifications: void 0
}, _temp)) || _class);
exports.default = FileUploadResult;