@instructure/quiz-interactions
Version:
A React UI component Library for quiz interaction types.
206 lines (204 loc) • 8.24 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
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 _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = require("react");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactDnd = require("react-dnd");
var _uiMenu = require("@instructure/ui-menu");
var _uiText = require("@instructure/ui-text");
var _emotion = require("@instructure/emotion");
var _quizRce = require("@instructure/quiz-rce");
var _BlankAnswer = _interopRequireDefault(require("../BlankAnswer"));
var _styles = _interopRequireDefault(require("./styles"));
var _theme = _interopRequireDefault(require("./theme"));
var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
var _quizCommon = require("@instructure/quiz-common");
var _dec, _class, _BlankDropTarget;
/** @jsx jsx */
function _callSuper(_this, derived, args) {
function isNativeReflectConstruct() {
if (typeof Reflect === "undefined" || !Reflect.construct) return false;
if (Reflect.construct.sham) return false;
if (typeof Proxy === "function") return true;
try {
return !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
} catch (e) {
return false;
}
}
derived = (0, _getPrototypeOf2["default"])(derived);
return (0, _possibleConstructorReturn2["default"])(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], (0, _getPrototypeOf2["default"])(_this).constructor) : derived.apply(_this, args));
}
var ENTER_KEY = 'Enter';
var SPACE_KEY = ' ';
var BlankDropTarget = (_dec = (0, _quizCommon.withStyleOverrides)(_styles["default"], _theme["default"]), _dec(_class = (_BlankDropTarget = /*#__PURE__*/function (_Component) {
function BlankDropTarget() {
var _this2;
(0, _classCallCheck2["default"])(this, BlankDropTarget);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this2 = _callSuper(this, BlankDropTarget, [].concat(args));
(0, _defineProperty2["default"])(_this2, "toggleDragDropdown", function () {
setTimeout(function () {
var _this2$popover;
if ((_this2$popover = _this2.popover) !== null && _this2$popover !== void 0 && _this2$popover._contentElement) {
(0, _quizRce.processNewMathInElem)(_this2.popover._contentElement);
}
});
});
// =============
// HANDLERS
// =============
(0, _defineProperty2["default"])(_this2, "handleRemoveAnswer", function () {
_this2.props.returnChoiceToWordbank(_this2.props.choice.id);
});
(0, _defineProperty2["default"])(_this2, "handleDragTargetKeyPress", function (event) {
if (event.key === ENTER_KEY || event.key === SPACE_KEY) {
event.preventDefault();
event.target.click();
}
});
(0, _defineProperty2["default"])(_this2, "handleOptionSelect", function (choice) {
return function () {
_this2.props.onChange(choice);
};
});
(0, _defineProperty2["default"])(_this2, "handleBlankAnswerRef", function (node) {
_this2.blankAnswer = node;
});
(0, _defineProperty2["default"])(_this2, "handleDragTargetRef", function (node) {
_this2.dragTarget = node;
});
(0, _defineProperty2["default"])(_this2, "handleParentRef", function (node) {
_this2.parentNode = node;
});
(0, _defineProperty2["default"])(_this2, "handlePopoverRef", function (node) {
_this2.popover = node;
});
return _this2;
}
(0, _inherits2["default"])(BlankDropTarget, _Component);
return (0, _createClass2["default"])(BlankDropTarget, [{
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps) {
var hasAnswer = this.hasAnswer();
var hasPrevAnswer = this.hasAnswer(prevProps);
if (hasAnswer && !hasPrevAnswer) {
this.blankAnswer.focus();
} else if (!hasAnswer && hasPrevAnswer) {
this.dragTarget.focus();
}
(0, _quizRce.processNewMathInElem)(this.parentNode);
}
}, {
key: "hasAnswer",
value: function hasAnswer() {
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props;
return props.choice && props.choice.id;
}
}, {
key: "renderAnswer",
value:
// =============
// RENDER
// =============
function renderAnswer() {
return (0, _emotion.jsx)(_BlankAnswer["default"], {
ref: this.handleBlankAnswerRef,
choiceId: this.props.choice.id,
blankId: this.props.blankId,
itemBody: this.props.choice.itemBody,
onRemoveAnswer: this.handleRemoveAnswer,
readOnly: this.props.readOnly
});
}
}, {
key: "renderDragDropdown",
value: function renderDragDropdown() {
// when no answer selected
return (0, _emotion.jsx)(_uiMenu.Menu, {
trigger: this.renderDragTarget(),
onToggle: this.toggleDragDropdown,
popoverRef: this.handlePopoverRef
}, this.renderOptions());
}
}, {
key: "renderDragTarget",
value: function renderDragTarget() {
return (0, _emotion.jsx)("div", {
css: this.props.styles.dragTarget,
onKeyPress: this.handleDragTargetKeyPress,
ref: this.handleDragTargetRef,
role: "button",
tabIndex: "0"
}, (0, _emotion.jsx)(_uiText.Text, {
color: "secondary"
}, (0, _formatMessage["default"])('Answer')));
}
}, {
key: "renderOptions",
value: function renderOptions() {
var _this3 = this;
return this.props.choices.map(function (choice) {
return (0, _emotion.jsx)(_uiMenu.Menu.Item, {
key: choice.id,
value: choice.id,
onSelect: _this3.handleOptionSelect(choice)
}, choice.itemBody);
});
}
}, {
key: "render",
value: function render() {
return this.props.connectDropTarget((0, _emotion.jsx)("div", {
ref: this.handleParentRef,
role: "presentation",
tabIndex: "-1"
}, this.hasAnswer() ? this.renderAnswer() : this.renderDragDropdown()));
}
}]);
}(_react.Component), (0, _defineProperty2["default"])(_BlankDropTarget, "displayName", 'BlankDropTarget'), (0, _defineProperty2["default"])(_BlankDropTarget, "componentId", "Quizzes".concat(_BlankDropTarget.displayName)), (0, _defineProperty2["default"])(_BlankDropTarget, "propTypes", {
choices: _propTypes["default"].array,
choice: _propTypes["default"].object,
blankId: _propTypes["default"].string.isRequired,
connectDropTarget: _propTypes["default"].func.isRequired,
// injected by React DnD
value: _propTypes["default"].string,
readOnly: _propTypes["default"].bool,
onChange: _propTypes["default"].func,
onDrop: _propTypes["default"].func,
returnChoiceToWordbank: _propTypes["default"].func,
styles: _propTypes["default"].object
}), (0, _defineProperty2["default"])(_BlankDropTarget, "defaultProps", {
choices: void 0,
choice: void 0,
value: void 0,
readOnly: false,
onChange: void 0,
onDrop: void 0,
returnChoiceToWordbank: void 0
}), _BlankDropTarget)) || _class); // =============
// DRAG AND DROP
// =============
var dropTarget = {
drop: function drop(props, monitor, component) {
var droppedItem = monitor.getItem();
props.onDrop(droppedItem);
}
};
function collectDrop(connect, monitor) {
return {
connectDropTarget: connect.dropTarget()
};
}
var _default = exports["default"] = (0, _reactDnd.DropTarget)('fitb', dropTarget, collectDrop)(BlankDropTarget);