quiz-interactions/lib/components/ordering/common/OrderGroup/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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

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 _classnames = _interopRequireDefault(require("classnames"));

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

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

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

var _uiElements = require("@instructure/ui-elements");

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

var _quizRce = require("@instructure/quiz-rce");

var _Card = _interopRequireDefault(require("../../../common/components/Card"));

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

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

var _dec, _class, _class2, _temp;

var styles = {
  componentId: 'GieSs',
  template: function template(theme) {
    return "\n\n.GieSs_eiZV,.GieSs_YIqF{padding-top:".concat(theme.bottomLabelPadding || 'inherit', "}\n\n.GieSs_iRsP{background-color:").concat(theme.paragraphContainerColor || 'inherit', ";display:flex;flex-wrap:wrap;margin-top:").concat(theme.paragraphContainerMargin || 'inherit', ";padding-bottom:").concat(theme.paragraphContainerPadding || 'inherit', ";padding-left:").concat(theme.paragraphContainerPadding || 'inherit', "}\n\n.GieSs_coRA{align-items:center;display:flex;margin-top:").concat(theme.choiceContainerMargin || 'inherit', "}\n\n.GieSs_eDCf{background-color:").concat(theme.choiceContainerContentColor || 'inherit', ";padding:").concat(theme.choiceContainerContentPadding || 'inherit', ";width:100%}\n\n.GieSs_eZDw .GieSs_eDCf{align-items:center;display:flex;flex:1}\n\n.GieSs_bLTv{text-align:center;width:").concat(theme.choicePositionWidth || 'inherit', "}\n\n[dir=ltr] .GieSs_bLTv,[dir=rtl] .GieSs_bLTv{text-align:center}\n\n.GieSs_eXaD{align-items:center;background-color:").concat(theme.choiceColor || 'inherit', ";border:").concat(theme.choiceBorder || 'inherit', " solid ").concat(theme.choiceBorderColor || 'inherit', ";border-radius:").concat(theme.choiceBorderRadius || 'inherit', ";display:flex;flex:1;padding:").concat(theme.choicePadding || 'inherit', "}\n\n.GieSs_bAPG{padding-left:").concat(theme.choiceBodyPadding || 'inherit', ";padding-right:").concat(theme.choiceBodyPadding || 'inherit', "}");
  },
  'bottomLabel': 'GieSs_eiZV',
  'topLabel': 'GieSs_YIqF',
  'paragraphContainer': 'GieSs_iRsP',
  'choiceContainer': 'GieSs_coRA',
  'choiceContainerContent': 'GieSs_eDCf',
  'nonParagraphContainer': 'GieSs_eZDw',
  'choicePosition': 'GieSs_bLTv',
  'choice': 'GieSs_eXaD',
  'choiceBody': 'GieSs_bAPG'
};
var OrderGroup = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(OrderGroup, _Component);

  function OrderGroup() {
    var _getPrototypeOf2;

    var _this;

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

    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)(OrderGroup)).call.apply(_getPrototypeOf2, [this].concat(args)));

    _this.renderActions = function (choiceId, isFinalChoice, isFirstChoice) {
      if (_this.props.actionsContent) {
        return _this.props.actionsContent(choiceId, isFinalChoice, isFirstChoice);
      }

      return (// We need to wrap the button in a div for drag-and-drop to work in IE11 and Firefox
        _react.default.createElement("div", null, _react.default.createElement(_uiButtons.Button, {
          variant: "icon",
          size: "small",
          readOnly: _this.props.readOnly,
          icon: _uiIcons.IconDragHandleLine
        }, _react.default.createElement(_uiA11y.ScreenReaderContent, null, (0, _formatMessage.default)('Reorder Choice'))))
      );
    };

    _this.renderChoice = function (choiceId, index) {
      var choicePosition = index + 1;
      var isFirstChoice = index === 0;
      var isFinalChoice = choicePosition === _this.props.choiceOrder.length;
      return _react.default.createElement("div", {
        key: choiceId,
        className: styles.choiceContainer
      }, _react.default.createElement("div", {
        className: styles.choiceContainerContent
      }, !_this.props.displayAnswersParagraph && _react.default.createElement("div", {
        className: styles.choicePosition
      }, _react.default.createElement(_uiA11y.ScreenReaderContent, null, (0, _formatMessage.default)('position {position, number}', {
        position: choicePosition
      })), _react.default.createElement(_uiA11y.PresentationContent, null, _react.default.createElement(_uiElements.Text, {
        color: "primary"
      }, _formatMessage.default.number(choicePosition)))), _react.default.createElement("div", {
        className: styles.choice
      }, _this.renderActions(choiceId, isFinalChoice, isFirstChoice), _react.default.createElement(_quizRce.RichContentRenderer, {
        customStyles: styles.choiceBody,
        content: _this.props.choices[choiceId].itemBody
      }))));
    };

    return _this;
  }

  (0, _createClass2.default)(OrderGroup, [{
    key: "renderChoicesContainer",
    value: function renderChoicesContainer() {
      var _classNames,
          _this2 = this;

      var mainClasses = (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, styles.paragraphContainer, this.props.displayAnswersParagraph), (0, _defineProperty2.default)(_classNames, styles.nonParagraphContainer, !this.props.displayAnswersParagraph), _classNames));

      if (this.props.readOnly) {
        return _react.default.createElement("div", {
          className: mainClasses
        }, this.props.choiceOrder.map(this.renderChoice));
      }

      return _react.default.createElement("div", {
        className: mainClasses
      }, this.props.choiceOrder.map(function (choiceId, i) {
        return _react.default.createElement(_Card.default, {
          key: choiceId,
          index: i,
          id: choiceId,
          choices: _this2.props.choices,
          moveCard: _this2.props.onMoveChoice
        }, _this2.renderChoice(choiceId, i));
      }));
    }
  }, {
    key: "render",
    value: function render() {
      return _react.default.createElement("div", null, this.props.includeLabels && _react.default.createElement("div", {
        className: styles.topLabel,
        "data-automation": "sdk-ordering-toplabel"
      }, _react.default.createElement(_uiA11y.ScreenReaderContent, null, (0, _formatMessage.default)('Top label: {label}', {
        label: this.props.topLabel
      })), _react.default.createElement(_uiA11y.PresentationContent, null, _react.default.createElement(_uiElements.Text, {
        color: "primary"
      }, this.props.topLabel))), this.renderChoicesContainer(), this.props.includeLabels && _react.default.createElement("div", {
        className: styles.bottomLabel,
        "data-automation": "sdk-ordering-bottomlabel"
      }, _react.default.createElement(_uiA11y.ScreenReaderContent, null, (0, _formatMessage.default)('Bottom label: {label}', {
        label: this.props.bottomLabel
      })), _react.default.createElement(_uiA11y.PresentationContent, null, _react.default.createElement(_uiElements.Text, {
        color: "primary"
      }, this.props.bottomLabel))));
    }
  }]);
  OrderGroup.displayName = "OrderGroup";
  return OrderGroup;
}(_react.Component), _class2.propTypes = {
  bottomLabel: _propTypes.default.string,
  topLabel: _propTypes.default.string,
  choiceOrder: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
  choices: _propTypes.default.shape({
    itemBody: _quizRce.RichContentRenderer.propTypes.content
  }).isRequired,
  actionsContent: _propTypes.default.func,
  displayAnswersParagraph: _propTypes.default.bool,
  includeLabels: _propTypes.default.bool,
  onMoveChoice: _propTypes.default.func,
  readOnly: _propTypes.default.bool
}, _class2.defaultProps = {
  bottomLabel: void 0,
  topLabel: void 0,
  actionsContent: void 0,
  displayAnswersParagraph: void 0,
  includeLabels: void 0,
  onMoveChoice: void 0,
  readOnly: false // ===========
  //   RENDER
  // ===========

}, _temp)) || _class);
exports.default = OrderGroup;