quiz-interactions
Version:
A React UI component Library for quiz interaction types.
218 lines (180 loc) • 7.88 kB
JavaScript
;
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 _reactDnd = require("react-dnd");
var _uiMenu = require("@instructure/ui-menu");
var _uiElements = require("@instructure/ui-elements");
var _uiThemeable = require("@instructure/ui-themeable");
var _BlankAnswer = _interopRequireDefault(require("../BlankAnswer"));
var _theme = _interopRequireDefault(require("./theme"));
var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/lib/format-message"));
var _dec, _class, _class2, _temp;
var styles = {
componentId: 'vXKOC',
template: function template(theme) {
return "\n\n.vXKOC_dsDN{display:block}\n\n.vXKOC_eSsm{border:".concat(theme.placeholderBorder || 'inherit', " dashed ").concat(theme.placeholderBorderColor || 'inherit', ";border-radius:").concat(theme.placeholderBorderRadius || 'inherit', ";color:").concat(theme.placeholderColor || 'inherit', ";overflow:hidden;padding:").concat(theme.placeholderPadding || 'inherit', ";text-overflow:clip;white-space:nowrap}\n\n.vXKOC_pXVZ{border:").concat(theme.dragTargetBorderWidth || 'inherit', " dashed ").concat(theme.dragTargetBorderColor || 'inherit', ";border-radius:").concat(theme.dragTargetBorderRadius || 'inherit', ";cursor:pointer;display:inline-block;margin:").concat(theme.dragTargetMargin || 'inherit', ";overflow:visible;padding:").concat(theme.dragTargetPadding || 'inherit', ";position:relative;vertical-align:middle}\n\n.vXKOC_pXVZ:focus{outline:none}\n\n.vXKOC_pXVZ:before{border:").concat(theme.focusBorderWidth || 'inherit', " solid ").concat(theme.focusBorderColor || 'inherit', ";border-radius:calc(").concat(theme.focusBorderRadius || 'inherit', " + 0.125rem);bottom:-0.25rem;content:\"\";left:-0.25rem;opacity:0;pointer-events:none;position:absolute;right:-0.25rem;top:-0.25rem;transform:scale(0.02);transition:").concat(theme.dragTargetTransition || 'inherit', "}\n\n.vXKOC_pXVZ:focus:before{opacity:1;transform:scale(1)}");
},
'blankDropTarget': 'vXKOC_dsDN',
'placeholder': 'vXKOC_eSsm',
'dragTarget': 'vXKOC_pXVZ'
};
var ENTER_KEY = 'Enter';
var SPACE_KEY = ' ';
var BlankDropTarget = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_Component) {
(0, _inherits2.default)(BlankDropTarget, _Component);
function BlankDropTarget() {
var _getPrototypeOf2;
var _this;
(0, _classCallCheck2.default)(this, BlankDropTarget);
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)(BlankDropTarget)).call.apply(_getPrototypeOf2, [this].concat(args)));
_this.handleRemoveAnswer = function () {
_this.props.returnChoiceToWordbank(_this.props.choice.id);
};
_this.handleDragTargetKeyPress = function (event) {
if (event.key === ENTER_KEY || event.key === SPACE_KEY) {
event.preventDefault();
event.target.click();
}
};
_this.handleBlankAnswerRef = function (node) {
_this.blankAnswer = node;
};
_this.handleDragTargetRef = function (node) {
_this.dragTarget = node;
};
_this.handleParentRef = function (node) {
_this.parentNode = node;
};
return _this;
}
(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();
}
}
}, {
key: "hasAnswer",
value: function hasAnswer() {
var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : this.props;
return props.choice && props.choice.id;
} // =============
// HANDLERS
// =============
}, {
key: "renderAnswer",
// =============
// RENDER
// =============
value: function renderAnswer() {
return _react.default.createElement(_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 _react.default.createElement(_uiMenu.Menu, {
trigger: this.renderDragTarget()
}, this.renderOptions());
}
}, {
key: "renderDragTarget",
value: function renderDragTarget() {
return _react.default.createElement("div", {
className: styles.dragTarget,
onKeyPress: this.handleDragTargetKeyPress,
ref: this.handleDragTargetRef,
role: "button",
tabIndex: "0"
}, _react.default.createElement(_uiElements.Text, {
color: "secondary"
}, (0, _formatMessage.default)('Answer')));
}
}, {
key: "renderOptions",
value: function renderOptions() {
var _this2 = this;
return this.props.choices.map(function (choice) {
return _react.default.createElement(_uiMenu.Menu.Item, {
key: choice.id,
value: choice.id,
onSelect: _this2.props.onChange
}, choice.itemBody);
});
}
}, {
key: "render",
value: function render() {
return this.props.connectDropTarget(_react.default.createElement("div", {
className: styles.blankDropTarget,
ref: this.handleParentRef,
role: "presentation",
tabIndex: "-1"
}, this.hasAnswer() ? this.renderAnswer() : this.renderDragDropdown()));
}
}]);
BlankDropTarget.displayName = "BlankDropTarget";
return BlankDropTarget;
}(_react.Component), _class2.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
}, _class2.defaultProps = {
choices: void 0,
choice: void 0,
value: void 0,
readOnly: false,
onChange: void 0,
onDrop: void 0,
returnChoiceToWordbank: void 0
}, _temp)) || _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 = (0, _reactDnd.DropTarget)('fitb', dropTarget, collectDrop)(BlankDropTarget);
exports.default = _default;