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

var _uiOverlays = require("@instructure/ui-overlays");

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

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

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

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

var _dec, _class, _class2, _temp;

var styles = {
  componentId: 'cRIOg',
  template: function template(theme) {
    return "\n\n.cRIOg_cuyR{align-items:center;color:".concat(theme.feedbackTextColor || 'inherit', ";display:flex;padding:").concat(theme.feedbackTopBottomPadding || 'inherit', " ").concat(theme.feedbackLeftRightPadding || 'inherit', "}\n\n.cRIOg_pIdH{background-color:").concat(theme.feedbackCorrectColor || 'inherit', "}\n\n.cRIOg_fPDL{background-color:").concat(theme.feedbackIncorrectColor || 'inherit', "}\n\n.cRIOg_fVek{background-color:").concat(theme.feedbackUnknownColor || 'inherit', "}\n\n.cRIOg_efuB{margin-left:").concat(theme.feedbackTextMargin || 'inherit', "}");
  },
  'feedback': 'cRIOg_cuyR',
  'feedbackCorrect': 'cRIOg_pIdH',
  'feedbackIncorrect': 'cRIOg_fPDL',
  'feedbackUnknown': 'cRIOg_fVek',
  'feedbackText': 'cRIOg_efuB'
};
var FeedbackPopover = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(FeedbackPopover, _Component);

  function FeedbackPopover() {
    var _getPrototypeOf2;

    var _this;

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

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

    _this.positionWrapperRef = function (node) {
      _this.positionWrapper = node;
    };

    return _this;
  }

  (0, _createClass2.default)(FeedbackPopover, [{
    key: "render",
    value: function render() {
      var _classNames;

      var _this$props = this.props,
          coordinates = _this$props.coordinates,
          flipVertically = _this$props.flipVertically,
          text = _this$props.text,
          status = _this$props.status,
          targetContent = _this$props.targetContent; // top and bottom are dynamic based on current window resolution

      var positionStyles = {
        left: coordinates.x,
        top: coordinates.y,
        position: 'absolute'
      };
      var classes = (0, _classnames.default)(styles.feedback, (_classNames = {}, (0, _defineProperty2.default)(_classNames, styles.feedbackCorrect, status === 'correct'), (0, _defineProperty2.default)(_classNames, styles.feedbackIncorrect, status === 'incorrect'), (0, _defineProperty2.default)(_classNames, styles.feedbackUnknown, status === 'unknown'), _classNames));
      var Icon = _uiIcons.IconNotGradedLine; // default to the unknown state

      switch (status) {
        case 'correct':
          Icon = _uiIcons.IconCheckLine;
          break;

        case 'incorrect':
          Icon = _uiIcons.IconXLine;
          break;
      }

      var placement = flipVertically ? 'bottom' : 'top';
      return _react.default.createElement("div", {
        ref: this.positionWrapperRef
      }, _react.default.createElement(_uiOverlays.Popover, {
        show: true,
        alignArrow: true,
        placement: placement,
        mountNode: this.positionWrapper
      }, _react.default.createElement(_uiOverlays.Popover.Trigger, null, _react.default.createElement("div", {
        style: positionStyles
      }, targetContent)), _react.default.createElement(_uiOverlays.Popover.Content, null, _react.default.createElement("div", {
        className: classes
      }, _react.default.createElement(Icon, {
        size: "x-small"
      }), _react.default.createElement("div", {
        className: styles.feedbackText
      }, _react.default.createElement(_uiElements.Text, null, text || (0, _formatMessage.default)('Correct Answer')))))));
    }
  }]);
  FeedbackPopover.displayName = "FeedbackPopover";
  return FeedbackPopover;
}(_react.Component), _class2.propTypes = {
  coordinates: _propTypes.default.shape({
    x: _propTypes.default.number.isRequired,
    y: _propTypes.default.number.isRequired
  }).isRequired,
  flipVertically: _propTypes.default.bool.isRequired,
  text: _propTypes.default.string,
  status: _propTypes.default.string,
  targetContent: _propTypes.default.node
}, _class2.defaultProps = {
  targetContent: null,
  status: 'correct',
  text: null
}, _temp)) || _class);
exports.default = FeedbackPopover;