@instructure/quiz-interactions/src/components/categorization/common/Pill/index.js

A React UI component Library for quiz interaction types.

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

import {IconDragHandleLine} from '@instructure/ui-icons'
import {Text} from '@instructure/ui-text'
import {jsx} from '@instructure/emotion'

import Card from '../../../common/components/Card'

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

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

  static propTypes = {
    actionsContent: PropTypes.func,
    isDraggable: PropTypes.bool,
    id: PropTypes.string.isRequired,
    itemBody: PropTypes.string.isRequired,
    onDropOut: PropTypes.func,
    styles: PropTypes.object,
  }

  static defaultProps = {
    actionsContent: void 0,
    isDraggable: void 0,
    onDropOut: void 0,
  }

  renderActions() {
    if (this.props.actionsContent) {
      return this.props.actionsContent(this.props.id)
    }

    return (
      <div css={this.props.styles.actionsContentIconWrapper}>
        <IconDragHandleLine />
      </div>
    )
  }

  render() {
    if (this.props.isDraggable) {
      return (
        <Card id={this.props.id} onDropOut={this.props.onDropOut}>
          <div css={this.props.styles.choice}>
            <div css={this.props.styles.choice.choiceActions}>{this.renderActions()}</div>
            <div css={this.props.styles.choice.choiceBody}>
              <Text color="primary">{this.props.itemBody}</Text>
            </div>
          </div>
        </Card>
      )
    }

    return (
      <div id={this.props.id} css={this.props.styles.choice}>
        <div css={this.props.styles.choice.choiceActions}>{this.renderActions()}</div>
        <div css={this.props.styles.choice.choiceBody}>
          <Text color="primary">{this.props.itemBody}</Text>
        </div>
      </div>
    )
  }
}