@instructure/quiz-interactions
Version:
A React UI component Library for quiz interaction types.
221 lines • 8.98 kB
JavaScript
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
var _dec, _class, _TargetContainer;
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 = _getPrototypeOf(derived);
return _possibleConstructorReturn(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], _getPrototypeOf(_this).constructor) : derived.apply(_this, args));
}
/** @jsx jsx */
import { Component } from 'react';
import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';
import minBy from 'lodash/fp/minBy';
import { jsx } from '@instructure/emotion';
import generateStyle from './styles';
import generateComponentTheme from './theme';
import t from '@instructure/quiz-i18n/es/format-message';
import { withStyleOverrides } from '@instructure/quiz-common';
var TargetContainer = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_TargetContainer = /*#__PURE__*/function (_Component) {
function TargetContainer() {
var _this2;
_classCallCheck(this, TargetContainer);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this2 = _callSuper(this, TargetContainer, [].concat(args));
_defineProperty(_this2, "state", {
imageWidth: 0,
imageHeight: 0
});
_defineProperty(_this2, "canvas", null);
_defineProperty(_this2, "image", null);
// ===========
// HELPERS
// ===========
_defineProperty(_this2, "convertCoordinate", function (item) {
return {
x: item.x * _this2.state.imageWidth,
y: item.y * _this2.state.imageHeight
};
});
_defineProperty(_this2, "currentCoordinates", function (coordinates) {
if (!coordinates || !coordinates.length) return null;
return coordinates.map(_this2.convertCoordinate);
});
_defineProperty(_this2, "getResponseDetails", function (index, feedbackCoordinates) {
var _this2$props$userResp;
var flipResponse = false;
var responseCoordinates = null;
var isCorrect = null;
var userResponse = (_this2$props$userResp = _this2.props.userResponseCoordinate) === null || _this2$props$userResp === void 0 ? void 0 : _this2$props$userResp[index];
if (_this2.validCoordinates(userResponse)) {
responseCoordinates = _this2.convertCoordinate(userResponse);
isCorrect = userResponse.correct;
flipResponse = _this2.shouldFlipResponse(responseCoordinates, feedbackCoordinates);
}
return {
responseCoordinates: responseCoordinates,
isCorrect: isCorrect,
flipResponse: flipResponse
};
});
_defineProperty(_this2, "shouldFlipResponse", function (responseCoordinates, feedbackCoordinates) {
if (feedbackCoordinates) {
var min = minBy('y', feedbackCoordinates);
return min && responseCoordinates.y > min.y;
}
return true;
});
// ===========
// HANDLERS
// ===========
_defineProperty(_this2, "handleCanvasRef", function (node) {
_this2.canvas = node;
});
_defineProperty(_this2, "handleImageRef", function (node) {
_this2.image = node;
});
_defineProperty(_this2, "updateImageDimensions", function () {
var rectObject = ReactDOM.findDOMNode(_this2.image).getBoundingClientRect();
_this2.setState({
imageWidth: rectObject.width,
imageHeight: rectObject.height
});
});
_defineProperty(_this2, "handleImageLoad", function (event) {
_this2.setState({
imageWidth: event.target.offsetWidth,
imageHeight: event.target.offsetHeight
});
});
// ===========
// RENDER
// ===========
_defineProperty(_this2, "renderCanvas", function () {
var hotspots = _this2.props.hotspots;
if (!(hotspots !== null && hotspots !== void 0 && hotspots.length)) return null;
if ((hotspots === null || hotspots === void 0 ? void 0 : hotspots.length) > 0) {
return hotspots.map(function (hotspot) {
var DrawingType = hotspot.drawingType;
var convertedCoordinates = _this2.currentCoordinates(hotspot.coordinates);
return jsx(DrawingType, {
key: JSON.stringify(hotspot.coordinates),
coordinates: convertedCoordinates || [],
readOnly: _this2.props.readOnly,
height: _this2.state.imageHeight,
handleSetCoordinates: _this2.props.handleSetCoordinates,
width: _this2.state.imageWidth
});
});
}
});
_defineProperty(_this2, "renderImage", function () {
return jsx("img", {
alt: t('Target Image'),
css: _this2.props.styles.image,
onLoad: _this2.handleImageLoad,
ref: _this2.handleImageRef,
src: _this2.props.url
});
});
_defineProperty(_this2, "renderFeedbackComponents", function () {
if (!_this2.props.results) {
return null;
}
return _this2.props.hotspots.map(function (hotspot, index) {
var feedbackCoordinates = _this2.currentCoordinates(hotspot.coordinates);
var renderFeedback = hotspot.renderScoringDataFeedback;
var _this2$getResponseDet = _this2.getResponseDetails(index, feedbackCoordinates),
responseCoordinates = _this2$getResponseDet.responseCoordinates,
isCorrect = _this2$getResponseDet.isCorrect,
flipResponse = _this2$getResponseDet.flipResponse;
return jsx("div", {
key: hotspot.id || index
}, _this2.props.renderUserResponseFeedback(responseCoordinates, flipResponse, isCorrect), renderFeedback(feedbackCoordinates, !flipResponse));
});
});
return _this2;
}
_inherits(TargetContainer, _Component);
return _createClass(TargetContainer, [{
key: "componentDidMount",
value: function componentDidMount() {
window.addEventListener('resize', this.updateImageDimensions);
this.props.makeStyles();
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
window.removeEventListener('resize', this.updateImageDimensions);
this.props.makeStyles();
}
}, {
key: "validCoordinates",
value: function validCoordinates(coordinates) {
if (!coordinates) return false;
var x = coordinates.x,
y = coordinates.y,
correct = coordinates.correct;
return x != null && y != null && correct != null;
}
}, {
key: "render",
value: function render() {
return jsx("div", {
className: "fs-mask",
css: this.props.styles.targetContainerWrapper,
onFocus: this.props.onFocus,
onBlur: this.props.onBlur
}, jsx("div", {
css: this.props.styles.targetContainerMain
}, jsx("div", {
css: this.props.styles.mainContainerContentWrapper
}, jsx("div", {
css: this.props.styles.mainContainerContent
}, this.renderImage(), this.renderCanvas())), this.renderFeedbackComponents()));
}
}]);
}(Component), _defineProperty(_TargetContainer, "displayName", 'TargetContainer'), _defineProperty(_TargetContainer, "componentId", "Quizzes".concat(_TargetContainer.displayName)), _defineProperty(_TargetContainer, "propTypes", {
hotspots: PropTypes.arrayOf(PropTypes.shape({
coordinates: PropTypes.array,
drawingType: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
renderScoringDataFeedback: PropTypes.func
})),
readOnly: PropTypes.bool,
handleSetCoordinates: PropTypes.func,
justifyContent: PropTypes.oneOf(['left', 'center']),
renderUserResponseFeedback: PropTypes.func,
results: PropTypes.bool,
url: PropTypes.string.isRequired,
userResponseCoordinate: PropTypes.arrayOf(PropTypes.shape({
x: PropTypes.number,
y: PropTypes.number,
correct: PropTypes.string
})),
makeStyles: PropTypes.func,
styles: PropTypes.object,
onFocus: PropTypes.func,
onBlur: PropTypes.func
}), _defineProperty(_TargetContainer, "defaultProps", {
justifyContent: 'center',
readOnly: false,
results: false,
handleSetCoordinates: void 0,
renderUserResponseFeedback: void 0,
userResponseCoordinate: []
}), _TargetContainer)) || _class);
export { TargetContainer as default };