@instructure/quiz-interactions/src/components/file_upload/Result/index.js

A React UI component Library for quiz interaction types.

/** @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/components/ItemBodyWrapper/index'
import {SubjectiveFeedback} from '@instructure/quiz-results-feedback'
import t from '@instructure/quiz-i18n/format-message'

import FilesList from '../common/FilesList'
import generateStyle from './styles'
import generateComponentTheme from './theme'
import {withStyleOverrides} from '@instructure/quiz-common/util/withStyleOverrides'

/**
---
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>
  ```
**/
@withStyleOverrides(generateStyle, generateComponentTheme)
export default class FileUploadResult extends Component {
  static displayName = 'FileUploadResult'
  static componentId = `Quizzes${this.displayName}`

  static 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,
  }

  static defaultProps = {
    itemResultsModifications: void 0,
  }

  getGradeStatus() {
    const resultMods = this.props.itemResultsModifications || {}
    const workingGradeStatus = get(resultMods, ['scoredData', 'gradeStatus'])

    return workingGradeStatus || this.props.scoredData.gradeStatus
  }

  render() {
    const {itemBody, scoredData} = this.props

    return (
      <div>
        <div css={this.props.styles.printOnly}>
          <Alert variant="warning">{t('This question type cannot be printed')}</Alert>
        </div>
        <ItemBodyWrapper itemBody={itemBody}>
          <div css={this.props.styles.choicesWrapper}>
            <SubjectiveFeedback gradeStatus={this.getGradeStatus()}>
              <div css={this.props.styles.filesListWrapper}>
                <FilesList files={scoredData.value} showIfEmpty={true} />
              </div>
            </SubjectiveFeedback>
          </div>
        </ItemBodyWrapper>
      </div>
    )
  }
}