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

A React UI component Library for quiz interaction types.

/** @jsx jsx */
import {Component} from 'react'
import PropTypes from 'prop-types'

import {jsx} from '@instructure/emotion'
import {Popover} from '@instructure/ui-popover'
import {Text} from '@instructure/ui-text'
import {IconCheckLine, IconXLine, IconNotGradedLine} from '@instructure/ui-icons'

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

@withStyleOverrides(generateStyle, generateComponentTheme)
export default class FeedbackPopover extends Component {
  static displayName = 'FeedbackPopover'
  static componentId = `Quizzes${this.displayName}`

  static propTypes = {
    coordinates: PropTypes.shape({
      x: PropTypes.number.isRequired,
      y: PropTypes.number.isRequired,
    }).isRequired,
    flipVertically: PropTypes.bool.isRequired,
    text: PropTypes.string,
    status: PropTypes.string,
    targetContent: PropTypes.node,
    makeStyles: PropTypes.func,
    styles: PropTypes.object,
  }

  static defaultProps = {
    targetContent: null,
    status: 'correct',
    text: null,
  }

  componentDidMount() {
    this.props.makeStyles()
  }

  componentDidUpdate() {
    this.props.makeStyles()
  }

  positionWrapperRef = node => {
    this.positionWrapper = node
  }

  render() {
    const {coordinates, flipVertically, text, status, targetContent} = this.props
    // top and bottom are dynamic based on current window resolution
    const positionStyles = {
      left: coordinates.x,
      top: coordinates.y,
      position: 'absolute',
    }

    let Icon = IconNotGradedLine // default to the unknown state
    switch (status) {
      case 'correct':
        Icon = IconCheckLine
        break
      case 'incorrect':
        Icon = IconXLine
        break
    }
    const placement = flipVertically ? 'bottom' : 'top'

    return (
      <div ref={this.positionWrapperRef}>
        <Popover
          isShowingContent
          shouldAlignArrow
          shouldSetAriaExpanded={false}
          placement={placement}
          mountNode={this.positionWrapper}
          renderTrigger={<div style={positionStyles}>{targetContent}</div>}
        >
          <div css={this.props.styles.feedback}>
            <Icon size="x-small" />
            <div css={this.props.styles.feedbackText}>
              <Text>{text || t('Correct Answer')}</Text>
            </div>
          </div>
        </Popover>
      </div>
    )
  }
}