@instructure/quiz-interactions
Version:
A React UI component Library for quiz interaction types.
160 lines (159 loc) • 7.58 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 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) { _defineProperty(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 = _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 { v4 as uuid } from 'uuid';
import { SELECT_EMPTY_OPTION, SELECT_EMPTY_OPTION_TEXT, Select } from '@instructure/quiz-common';
var MatchSelect = /*#__PURE__*/function (_Component) {
function MatchSelect() {
var _this2;
_classCallCheck(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));
_defineProperty(_this2, "state", {
inputValue: _this2.props.selectedAnswers.value[_this2.props.questionId] || '',
isShowingOptions: false,
highlightedOptionId: null,
filteredOptions: _this2.props.options
});
_defineProperty(_this2, "filterOptions", function (value) {
return _this2.props.options.filter(function (option) {
return option.startsWith(value);
});
});
_defineProperty(_this2, "handleShowOptions", function () {
_this2.setState({
isShowingOptions: true
});
});
_defineProperty(_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])
});
});
_defineProperty(_this2, "handleBlur", function () {
_this2.setState({
highlightedOptionId: null
});
});
_defineProperty(_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
});
});
_defineProperty(_this2, "handleSelectOption", function (event, option) {
if (!option || option.id === SELECT_EMPTY_OPTION) return;
var value = option.id ? _this2.getTextFromId(option.id) : '';
_this2.props.handleResponseUpdate(_objectSpread(_objectSpread({}, _this2.props.selectedAnswers && _this2.props.selectedAnswers.value), {}, _defineProperty({}, _this2.props.questionId, option && value)));
_this2.setState({
inputValue: value,
isShowingOptions: false,
filteredOptions: _this2.props.options
});
});
_defineProperty(_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
});
});
_defineProperty(_this2, "getIdFromText", function (text) {
return btoa(encodeURIComponent(text));
});
_defineProperty(_this2, "getTextFromId", function (id) {
return decodeURIComponent(atob(id));
});
return _this2;
}
_inherits(MatchSelect, _Component);
return _createClass(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(uuid());
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(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.createElement(Select.Option, {
id: normalized,
key: option,
isHighlighted: normalized === highlightedOptionId,
isSelected: option === _this3.props.selectedAnswers.value[_this3.props.questionId]
}, option);
}) : /*#__PURE__*/React.createElement(Select.Option, {
id: SELECT_EMPTY_OPTION,
key: SELECT_EMPTY_OPTION
}, SELECT_EMPTY_OPTION_TEXT)), /*#__PURE__*/React.createElement("div", {
id: mountNodeId
}));
}
}]);
}(Component);
_defineProperty(MatchSelect, "propTypes", {
questionId: PropTypes.string.isRequired,
options: PropTypes.arrayOf(PropTypes.string).isRequired,
handleResponseUpdate: PropTypes.func,
selectedAnswers: PropTypes.shape({
value: PropTypes.objectOf(PropTypes.string)
}).isRequired,
interaction: PropTypes.string,
renderLabel: PropTypes.element.isRequired
});
_defineProperty(MatchSelect, "defaultProps", {
handleResponseUpdate: void 0,
interaction: 'enabled'
});
export { MatchSelect as default };