@instructure/quiz-interactions/src/components/ordering/common/ReorderChoiceButton/index.js

A React UI component Library for quiz interaction types.

import React, {Component} from 'react'
import PropTypes from 'prop-types'

import {IconDragHandleLine} from '@instructure/ui-icons'
import {IconButton} from '@instructure/ui-buttons'
import {Menu} from '@instructure/ui-menu'

import t from '@instructure/quiz-i18n/format-message'

export default class ReorderChoiceButton extends Component {
  static propTypes = {
    buttonSize: PropTypes.oneOf(['small', 'medium', 'large']),
    id: PropTypes.string.isRequired,
    screenReaderText: PropTypes.string.isRequired,
    isFinalChoice: PropTypes.bool,
    isFirstChoice: PropTypes.bool,
    onMoveChoiceUp: PropTypes.func.isRequired,
    onMoveChoiceDown: PropTypes.func.isRequired,
  }

  static defaultProps = {
    buttonSize: 'medium',
    isFinalChoice: void 0,
    isFirstChoice: void 0,
  }

  popover = null

  focus() {
    this.popover._trigger && this.popover._trigger.focus()
  }

  handleMoveUp = () => {
    this.focus()
    this.props.onMoveChoiceUp(this.props.id)
  }

  handleMoveDown = () => {
    this.focus()
    this.props.onMoveChoiceDown(this.props.id)
  }

  handlePopoverRef = node => {
    this.popover = node
  }

  render() {
    return (
      <Menu
        ref={this.handlePopoverRef}
        placement="start"
        trigger={
          <IconButton
            as="div"
            size={this.props.buttonSize}
            withBackground={false}
            withBorder={false}
            margin="0 xxx-small"
            renderIcon={IconDragHandleLine}
            screenReaderLabel={this.props.screenReaderText}
          />
        }
      >
        {!this.props.isFirstChoice && (
          <Menu.Item onSelect={this.handleMoveUp} data-automation="sdk-ordering-moveup">
            {t('Move Up')}
          </Menu.Item>
        )}
        {!this.props.isFinalChoice && (
          <Menu.Item onSelect={this.handleMoveDown} data-automation="sdk-ordering-movedown">
            {t('Move Down')}
          </Menu.Item>
        )}
      </Menu>
    )
  }
}