@instructure/quiz-interactions
Version:
A React UI component Library for quiz interaction types.
129 lines (126 loc) • 4.21 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";
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));
}
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { ItemBodyWrapper } from '@instructure/quiz-rce';
import TargetContainer from '../common/TargetContainer';
import Square from '../common/Square';
import Oval from '../common/Oval';
import Polygon from '../common/Polygon';
var getShape = function getShape(type) {
switch (type) {
case 'square':
return Square;
case 'oval':
return Oval;
case 'polygon':
return Polygon;
default:
return Square;
}
};
/**
---
category: HotSpot
---
HotSpot Show component
```jsx_example
<SettingsSwitcher locales={LOCALES}>
<HotSpotShow
itemBody="Which of these players is David Ferrer"
interactionData={{
imageUrl: 'https://i.ytimg.com/vi/LgkAebhJ7iE/maxresdefault.jpg'
}}
scoringData={{
value: {
type: 'oval',
coordinates: [
{ x: 0.6, y: 0.13 },
{ x: 0.7, y: 0.2 }
]
}
}}
/>
</SettingsSwitcher>
```
**/
var HotSpotShow = /*#__PURE__*/function (_Component) {
function HotSpotShow() {
var _this2;
_classCallCheck(this, HotSpotShow);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this2 = _callSuper(this, HotSpotShow, [].concat(args));
_defineProperty(_this2, "prepareHotspots", function () {
var value = _this2.props.scoringData.value;
if (Array.isArray(value)) {
return value.map(function (hotspot) {
return {
coordinates: hotspot.coordinates,
drawingType: getShape(hotspot.type)
};
});
}
return [{
coordinates: value.coordinates,
drawingType: getShape(value.type)
}];
});
return _this2;
}
_inherits(HotSpotShow, _Component);
return _createClass(HotSpotShow, [{
key: "render",
value: function render() {
var hotspots = this.prepareHotspots();
return /*#__PURE__*/React.createElement(ItemBodyWrapper, {
itemBody: this.props.itemBody
}, /*#__PURE__*/React.createElement(TargetContainer, {
hotspots: hotspots,
url: this.props.interactionData.imageUrl,
readOnly: true
}));
}
}]);
}(Component);
_defineProperty(HotSpotShow, "propTypes", {
itemBody: PropTypes.string.isRequired,
interactionData: PropTypes.shape({
imageUrl: PropTypes.string.isRequired
}).isRequired,
scoringData: PropTypes.shape({
value: PropTypes.oneOfType([PropTypes.shape({
type: PropTypes.oneOf(['square', 'oval', 'polygon']),
coordinates: PropTypes.arrayOf(PropTypes.shape({
x: PropTypes.number.isRequired,
y: PropTypes.number.isRequired
})).isRequired
}), PropTypes.arrayOf(PropTypes.shape({
type: PropTypes.oneOf(['square', 'oval', 'polygon']),
coordinates: PropTypes.arrayOf(PropTypes.shape({
x: PropTypes.number.isRequired,
y: PropTypes.number.isRequired
})).isRequired
}))]).isRequired
}).isRequired
});
export { HotSpotShow as default };