quiz-interactions/lib/components/categorization/common/ChoicesList/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 _uiThemeable = require("@instructure/ui-themeable");

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

var _DropTargetContainer = _interopRequireDefault(require("../DropTargetContainer"));

var _Pill = _interopRequireDefault(require("../Pill"));

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

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

var _dec, _class, _class2, _temp;

var styles = {
  componentId: 'bIACi',
  template: function template(theme) {
    return "\n\n.bIACi_vGMs{background-color:".concat(theme.background || 'inherit', ";display:flex;flex-direction:column;margin:0 ").concat(theme.margin || 'inherit', " ").concat(theme.margin || 'inherit', " 0;padding:").concat(theme.padding || 'inherit', "}\n\n.bIACi_bpaw{display:flex;flex-wrap:wrap}\n\n.bIACi_eElR>div{margin-left:").concat(theme.pillMargin || 'inherit', "!important;margin-top:").concat(theme.pillMargin || 'inherit', "!important}\n\n.bIACi_eElR span[role=button]{display:flex}\n\n.bIACi_eElR{background-color:").concat(theme.choiceBackground || 'inherit', ";border:").concat(theme.choiceBorderWidth || 'inherit', " solid ").concat(theme.choiceBorderColor || 'inherit', ";border-radius:").concat(theme.choiceBorderRadius || 'inherit', ";display:flex;flex-wrap:wrap;margin-top:").concat(theme.choiceMargin || 'inherit', ";padding-bottom:").concat(theme.pillMargin || 'inherit', ";padding-right:").concat(theme.pillMargin || 'inherit', ";position:relative;width:100%}\n\n.bIACi_eElR:focus{outline:none}\n\n.bIACi_eElR:before{border:").concat(theme.focusBorderWidth || 'inherit', " solid ").concat(theme.focusBorderColor || 'inherit', ";border-radius:calc(").concat(theme.focusBorderRadius || 'inherit', " + 0.125rem);bottom:-0.4rem;content:\"\";left:-0.4rem;opacity:0;pointer-events:none;position:absolute;right:-0.4rem;top:-0.4rem;transform:scale(0.02);transition:").concat(theme.choicesBackgroundTransition || 'inherit', "}\n\n.bIACi_eElR:focus:before{opacity:1;transform:scale(1)}\n\n.bIACi_dOCu{background-color:").concat(theme.emptyContainerBackground || 'inherit', ";border:").concat(theme.emptyContainerorderWidth || 'inherit', " dashed ").concat(theme.emptyContainerBorderColor || 'inherit', ";cursor:pointer;height:4.3rem;line-height:4.3rem;margin-top:").concat(theme.choiceMargin || 'inherit', ";text-align:center}\n\n[dir=ltr] .bIACi_dOCu,[dir=rtl] .bIACi_dOCu{text-align:center}");
  },
  'mainContainer': 'bIACi_vGMs',
  'choicesContainer': 'bIACi_bpaw',
  'choicesBackground': 'bIACi_eElR',
  'emptyContainer': 'bIACi_dOCu'
};
var ChoicesList = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(ChoicesList, _Component);

  function ChoicesList() {
    var _getPrototypeOf2;

    var _this;

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

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

    _this.renderChoices = function () {
      return _react.default.createElement("div", {
        className: styles.choicesBackground
      }, _this.props.distractors.map(function (item) {
        return _react.default.createElement(_Pill.default, {
          key: item.id,
          id: item.id,
          itemBody: item.itemBody,
          isDraggable: _this.props.isDraggable,
          actionsContent: _this.props.actionsContent
        });
      }));
    };

    return _this;
  }

  (0, _createClass2.default)(ChoicesList, [{
    key: "renderChoicesContainer",
    value: function renderChoicesContainer() {
      if (!this.props.distractors.length) {
        return _react.default.createElement("div", {
          className: styles.emptyContainer
        }, _react.default.createElement(_uiElements.Text, {
          color: "secondary"
        }, (0, _formatMessage.default)('Drag Uncategorized Answers Here')));
      }

      if (this.props.isDraggable) {
        return _react.default.createElement(_DropTargetContainer.default, {
          onDrop: this.props.onDrop,
          className: styles.choicesContainer
        }, this.renderChoices());
      }

      return _react.default.createElement("div", {
        className: styles.choicesContainer
      }, this.renderChoices());
    }
  }, {
    key: "render",
    value: function render() {
      return _react.default.createElement("div", {
        className: styles.mainContainer
      }, _react.default.createElement(_uiElements.Text, {
        color: "primary"
      }, (0, _formatMessage.default)('Possible answers')), this.renderChoicesContainer());
    }
  }]);
  ChoicesList.displayName = "ChoicesList";
  return ChoicesList;
}(_react.Component), _class2.propTypes = {
  actionsContent: _propTypes.default.func,
  distractors: _propTypes.default.arrayOf(_propTypes.default.shape({
    id: _propTypes.default.string.isRequired,
    itemBody: _propTypes.default.string.isRequired
  })).isRequired,
  isDraggable: _propTypes.default.bool,
  onDrop: _propTypes.default.func
}, _class2.defaultProps = {
  actionsContent: void 0,
  isDraggable: void 0,
  onDrop: void 0
}, _temp)) || _class);
exports.default = ChoicesList;