@instructure/quiz-grading/src/components/layout/Sidebar/SidebarItem/presenter.js

The Quiz React SDK by Instructure Inc.

/** @jsx jsx */
import {Component} from 'react'
import PropTypes from 'prop-types'
import {jsx} from '@instructure/emotion'
import {ScreenReaderContent} from '@instructure/ui-a11y-content'
import t from '@instructure/quiz-i18n/format-message'

import {SidebarItem as CommonSidebarItem} from '@instructure/quiz-core/common/components/layout/sidebar/SidebarItem/index'

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

class BaseGradingSidebarItem extends Component {
  static displayName = 'GradingSidebarItem'
  static componentId = `Quizzes${this.displayName}`

  static propTypes = {
    inStimulus: PropTypes.bool,
    itemBody: PropTypes.string,
    itemName: PropTypes.string.isRequired,
    isGraded: PropTypes.bool.isRequired,
    pointsPossible: PropTypes.number.isRequired,
    position: PropTypes.number, // null for textblocks
    sessionItemId: PropTypes.string.isRequired,
    scrollToItem: PropTypes.func.isRequired,
    sidebarOpen: PropTypes.bool.isRequired,
    styles: PropTypes.object,
  }

  static defaultProps = {
    inStimulus: false,
    itemBody: '',
  }

  renderGradedMarkings() {
    return (
      <ScreenReaderContent>
        {t('Question at position {position} is graded', {position: this.props.position})}
      </ScreenReaderContent>
    )
  }

  renderNeedsGradingMarkings() {
    return (
      <div className="needsGradingDot" css={this.props.styles.needsGradingDot}>
        <ScreenReaderContent>
          {t('Question at position {position} needs grading', {position: this.props.position})}
        </ScreenReaderContent>
      </div>
    )
  }

  render() {
    const {position, isGraded} = this.props
    // Textblocks (position === null) don't have grading status
    const showGradingStatus = position !== null

    return (
      <div css={this.props.styles.itemWrapper}>
        {showGradingStatus &&
          (isGraded ? this.renderGradedMarkings() : this.renderNeedsGradingMarkings())}
        <CommonSidebarItem
          itemBody={this.props.itemBody}
          itemId={this.props.sessionItemId}
          itemName={this.props.itemName}
          inStimulus={this.props.inStimulus}
          pointsPossible={this.props.pointsPossible}
          position={this.props.position}
          scrollToItem={this.props.scrollToItem(this.props.position)}
          sidebarOpen={this.props.sidebarOpen}
        ></CommonSidebarItem>
      </div>
    )
  }
}

export const GradingSidebarItem = withStyleOverrides(
  generateStyle,
  generateComponentTheme,
)(BaseGradingSidebarItem)

export default GradingSidebarItem