quiz-interactions/lib/components/ordering/common/ReorderChoiceButton/index.js

A React UI component Library for quiz interaction types.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _uiIcons = require("@instructure/ui-icons");

var _uiA11y = require("@instructure/ui-a11y");

var _uiButtons = require("@instructure/ui-buttons");

var _uiMenu = require("@instructure/ui-menu");

var _uiThemeable = require("@instructure/ui-themeable");

var _theme = _interopRequireDefault(require("./theme"));

var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/lib/format-message"));

var _dec, _class, _class2, _temp;

var styles = {
  componentId: 'RokRl',
  template: function template(theme) {
    return "\n\n.RokRl_EwaR div[role=button]{display:flex}";
  },
  'button': 'RokRl_EwaR'
};
var ReorderChoiceButton = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(ReorderChoiceButton, _Component);

  function ReorderChoiceButton() {
    var _getPrototypeOf2;

    var _this;

    (0, _classCallCheck2.default)(this, ReorderChoiceButton);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(ReorderChoiceButton)).call.apply(_getPrototypeOf2, [this].concat(args)));
    _this.popover = null;

    _this.handleMoveUp = function () {
      _this.focus();

      _this.props.onMoveChoiceUp(_this.props.id);
    };

    _this.handleMoveDown = function () {
      _this.focus();

      _this.props.onMoveChoiceDown(_this.props.id);
    };

    _this.handlePopoverRef = function (node) {
      _this.popover = node;
    };

    return _this;
  }

  (0, _createClass2.default)(ReorderChoiceButton, [{
    key: "focus",
    value: function focus() {
      this.popover._trigger && this.popover._trigger.focus();
    }
  }, {
    key: "render",
    value: function render() {
      return _react.default.createElement("div", {
        className: styles.button
      }, _react.default.createElement(_uiMenu.Menu, {
        ref: this.handlePopoverRef,
        placement: "start",
        trigger: _react.default.createElement(_uiButtons.Button, {
          as: "div",
          variant: "icon",
          size: this.props.buttonSize,
          margin: "0 xxx-small",
          icon: _uiIcons.IconDragHandleLine
        }, _react.default.createElement(_uiA11y.ScreenReaderContent, null, this.props.screenReaderText))
      }, !this.props.isFirstChoice && _react.default.createElement(_uiMenu.Menu.Item, {
        onSelect: this.handleMoveUp,
        "data-automation": "sdk-ordering-moveup"
      }, (0, _formatMessage.default)('Move Up')), !this.props.isFinalChoice && _react.default.createElement(_uiMenu.Menu.Item, {
        onSelect: this.handleMoveDown,
        "data-automation": "sdk-ordering-movedown"
      }, (0, _formatMessage.default)('Move Down'))));
    }
  }]);
  ReorderChoiceButton.displayName = "ReorderChoiceButton";
  return ReorderChoiceButton;
}(_react.Component), _class2.propTypes = {
  buttonSize: _propTypes.default.oneOf(['small', 'medium', 'large']),
  id: _propTypes.default.string.isRequired,
  screenReaderText: _propTypes.default.string.isRequired,
  isFinalChoice: _propTypes.default.bool,
  isFirstChoice: _propTypes.default.bool,
  onMoveChoiceUp: _propTypes.default.func.isRequired,
  onMoveChoiceDown: _propTypes.default.func.isRequired
}, _class2.defaultProps = {
  buttonSize: 'medium',
  isFinalChoice: void 0,
  isFirstChoice: void 0
}, _temp)) || _class);
exports.default = ReorderChoiceButton;