@instructure/quiz-interactions
Version:
A React UI component Library for quiz interaction types.
168 lines (166 loc) • 9.66 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 = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _uuid = require("uuid");
var _quizCommon = require("@instructure/quiz-common");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
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 MatchSelect = exports["default"] = /*#__PURE__*/function (_Component) {
function MatchSelect() {
var _this2;
(0, _classCallCheck2["default"])(this, MatchSelect);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this2 = _callSuper(this, MatchSelect, [].concat(args));
(0, _defineProperty2["default"])(_this2, "state", {
inputValue: _this2.props.selectedAnswers.value[_this2.props.questionId] || '',
isShowingOptions: false,
highlightedOptionId: null,
filteredOptions: _this2.props.options
});
(0, _defineProperty2["default"])(_this2, "filterOptions", function (value) {
return _this2.props.options.filter(function (option) {
return option.startsWith(value);
});
});
(0, _defineProperty2["default"])(_this2, "handleShowOptions", function () {
_this2.setState({
isShowingOptions: true
});
});
(0, _defineProperty2["default"])(_this2, "handleHideOptions", function () {
var _this2$state = _this2.state,
filteredOptions = _this2$state.filteredOptions,
inputValue = _this2$state.inputValue;
var index = filteredOptions.findIndex(function (option) {
return option === inputValue;
});
_this2.handleSelectOption(null, {
id: index === -1 ? undefined : _this2.getIdFromText(filteredOptions[index])
});
});
(0, _defineProperty2["default"])(_this2, "handleBlur", function () {
_this2.setState({
highlightedOptionId: null
});
});
(0, _defineProperty2["default"])(_this2, "handleHighlightOption", function (event, option) {
event.persist();
if (!option || !option.id) return; // prevent highlighting of empty option
_this2.setState({
highlightedOptionId: option.id,
inputValue: event.type === 'keydown' ? _this2.getTextFromId(option.id) : _this2.state.inputValue
});
});
(0, _defineProperty2["default"])(_this2, "handleSelectOption", function (event, option) {
if (!option || option.id === _quizCommon.SELECT_EMPTY_OPTION) return;
var value = option.id ? _this2.getTextFromId(option.id) : '';
_this2.props.handleResponseUpdate(_objectSpread(_objectSpread({}, _this2.props.selectedAnswers && _this2.props.selectedAnswers.value), {}, (0, _defineProperty2["default"])({}, _this2.props.questionId, option && value)));
_this2.setState({
inputValue: value,
isShowingOptions: false,
filteredOptions: _this2.props.options
});
});
(0, _defineProperty2["default"])(_this2, "handleInputChange", function (event) {
var value = event.target.value;
var newOptions = _this2.filterOptions(value);
_this2.setState({
isShowingOptions: true,
inputValue: value,
highlightedOptionId: newOptions.length > 0 ? _this2.getIdFromText(newOptions[0]) : null
});
});
(0, _defineProperty2["default"])(_this2, "getIdFromText", function (text) {
return btoa(encodeURIComponent(text));
});
(0, _defineProperty2["default"])(_this2, "getTextFromId", function (id) {
return decodeURIComponent(atob(id));
});
return _this2;
}
(0, _inherits2["default"])(MatchSelect, _Component);
return (0, _createClass2["default"])(MatchSelect, [{
key: "render",
value: function render() {
var _this3 = this;
var _this$state = this.state,
inputValue = _this$state.inputValue,
isShowingOptions = _this$state.isShowingOptions,
highlightedOptionId = _this$state.highlightedOptionId,
filteredOptions = _this$state.filteredOptions;
var mountNodeId = "mountNode_".concat((0, _uuid.v4)());
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_quizCommon.Select, {
interaction: this.props.interaction,
renderLabel: this.props.renderLabel,
inputValue: inputValue,
isShowingOptions: isShowingOptions,
onBlur: this.handleBlur,
optionsMaxHeight: "50vh",
onInputChange: this.handleInputChange,
onRequestShowOptions: this.handleShowOptions,
onRequestHideOptions: this.handleHideOptions,
onRequestHighlightOption: this.handleHighlightOption,
onRequestSelectOption: this.handleSelectOption,
mountNode: function mountNode() {
return document.getElementById(mountNodeId);
}
}, filteredOptions.length > 0 ? filteredOptions.map(function (option) {
var normalized = _this3.getIdFromText(option);
return /*#__PURE__*/_react["default"].createElement(_quizCommon.Select.Option, {
id: normalized,
key: option,
isHighlighted: normalized === highlightedOptionId,
isSelected: option === _this3.props.selectedAnswers.value[_this3.props.questionId]
}, option);
}) : /*#__PURE__*/_react["default"].createElement(_quizCommon.Select.Option, {
id: _quizCommon.SELECT_EMPTY_OPTION,
key: _quizCommon.SELECT_EMPTY_OPTION
}, _quizCommon.SELECT_EMPTY_OPTION_TEXT)), /*#__PURE__*/_react["default"].createElement("div", {
id: mountNodeId
}));
}
}]);
}(_react.Component);
(0, _defineProperty2["default"])(MatchSelect, "propTypes", {
questionId: _propTypes["default"].string.isRequired,
options: _propTypes["default"].arrayOf(_propTypes["default"].string).isRequired,
handleResponseUpdate: _propTypes["default"].func,
selectedAnswers: _propTypes["default"].shape({
value: _propTypes["default"].objectOf(_propTypes["default"].string)
}).isRequired,
interaction: _propTypes["default"].string,
renderLabel: _propTypes["default"].element.isRequired
});
(0, _defineProperty2["default"])(MatchSelect, "defaultProps", {
handleResponseUpdate: void 0,
interaction: 'enabled'
});