UNPKG

@instructure/quiz-interactions

Version:

A React UI component Library for quiz interaction types.

552 lines (546 loc) • 27 kB
"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); Object.defineProperty(exports, "__esModule", { value: true }); exports.getPropsFromEditData = exports.getEditData = 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 _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray")); var _react = _interopRequireWildcard(require("react")); var _propTypes = _interopRequireDefault(require("prop-types")); var _map = _interopRequireDefault(require("lodash/fp/map")); var _filter = _interopRequireDefault(require("lodash/fp/filter")); var _set = _interopRequireDefault(require("lodash/fp/set")); var _fromPairs = _interopRequireDefault(require("lodash/fp/fromPairs")); var _pullAt = _interopRequireDefault(require("lodash/fp/pullAt")); var _findIndex = _interopRequireDefault(require("lodash/fp/findIndex")); var _isEmpty = _interopRequireDefault(require("lodash/fp/isEmpty")); var _uniq = _interopRequireDefault(require("lodash/fp/uniq")); var _shuffle = _interopRequireDefault(require("lodash/fp/shuffle")); var _uuid = require("uuid"); var _FocusGroup = _interopRequireDefault(require("../../common/components/FocusGroup")); var _matching = _interopRequireDefault(require("../../../records/interactions/matching")); var _QuestionContainer = _interopRequireDefault(require("../../common/edit/components/QuestionContainer")); var _QuestionSettingsContainer = _interopRequireDefault(require("../../common/edit/components/QuestionSettingsContainer")); var _DistractorList = _interopRequireDefault(require("./DistractorList")); var _MatchListEdit = _interopRequireDefault(require("./MatchListEdit")); var _withEditTools = _interopRequireDefault(require("../../../util/withEditTools")); var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message")); var _uiRadioInput = require("@instructure/ui-radio-input"); var _uiCheckbox = require("@instructure/ui-checkbox"); var _uiView = require("@instructure/ui-view"); var _QuestionSettingsPanel = _interopRequireDefault(require("../../common/edit/components/QuestionSettingsPanel")); var _CalculatorOptionWithOqaatAlert = _interopRequireDefault(require("../../common/edit/components/CalculatorOptionWithOqaatAlert")); var _uiA11yContent = require("@instructure/ui-a11y-content"); var _uiButtons = require("@instructure/ui-buttons"); var _uiIcons = require("@instructure/ui-icons"); var _uiText = require("@instructure/ui-text"); var _quizCommon = require("@instructure/quiz-common"); var _class, _MatchingEdit; 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 QUESTION_SELECTOR = '[data-role=questionWrapper] input'; // Scoring Algorithms: var DEEP_EQUALS = 'DeepEquals'; var PARTIAL_DEEP = 'PartialDeep'; // return editData if supplied, otherwise reconstruct it from props var getEditData = exports.getEditData = function getEditData(_ref) { var scoringData = _ref.scoringData, interactionData = _ref.interactionData; var editData = scoringData.editData; if (!(0, _isEmpty["default"])(editData)) { return { matches: editData.matches || [], distractors: editData.distractors || [] }; } var matches = (0, _map["default"])(function (_ref2) { var id = _ref2.id, itemBody = _ref2.itemBody; return { questionId: id, questionBody: itemBody, answerBody: scoringData.value[id] }; }, interactionData.questions); var matchBodies = (0, _map["default"])('answerBody', matches); var distractors = (0, _filter["default"])(function (answerBody) { return !matchBodies.includes(answerBody); }, interactionData.answers); return { matches: matches, distractors: distractors }; }; // given editData, calculate the rest of the props var getPropsFromEditData = exports.getPropsFromEditData = function getPropsFromEditData(editData) { return { interactionData: { questions: (0, _map["default"])(function (match) { return { id: match.questionId, itemBody: match.questionBody }; }, editData.matches), answers: (0, _shuffle["default"])((0, _uniq["default"])([].concat((0, _toConsumableArray2["default"])((0, _map["default"])('answerBody', editData.matches)), (0, _toConsumableArray2["default"])(editData.distractors)))) }, scoringData: { value: (0, _fromPairs["default"])((0, _map["default"])(function (match) { return [match.questionId, match.answerBody]; }, editData.matches)), editData: editData } }; }; /** --- category: Matching --- Matching Edit component ```jsx_example function Example (props) { const exampleProps = { itemBody: 'Match the Secretary of State with the President they served under.', overrideEditableForRegrading: false, properties: { shuffleRules: { questions: { shuffled: true } } }, interactionData: { questions: [ { id: 'uuid1', itemBody: 'Condi Rice' }, { id: 'uuid2', itemBody: 'Alexander Haig' }, { id: 'uuid3', itemBody: 'John Kerry' } ], answers: [ 'Ronald Reagan', 'George W. Bush', 'Barack Obama', 'George H.W. Bush', 'Bill Clinton' ] }, scoringData: { value: { uuid1: 'George W. Bush', uuid2: 'Ronald Reagan', uuid3: 'Barack Obama' }, editData: {} } } return ( <MatchingEdit {...exampleProps} {...props} /> ) } <SettingsSwitcher locales={LOCALES}> <EditStateProvider> <Example /> </EditStateProvider> </SettingsSwitcher> ``` **/ var MatchingEdit = exports["default"] = (0, _withEditTools["default"])(_class = (_MatchingEdit = /*#__PURE__*/function (_Component) { function MatchingEdit() { var _this2; (0, _classCallCheck2["default"])(this, MatchingEdit); for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { args[_key] = arguments[_key]; } _this2 = _callSuper(this, MatchingEdit, [].concat(args)); (0, _defineProperty2["default"])(_this2, "state", { isModalOpen: false }); (0, _defineProperty2["default"])(_this2, "_timeouts", []); (0, _defineProperty2["default"])(_this2, "focusMatch", null); (0, _defineProperty2["default"])(_this2, "focusDistractor", null); (0, _defineProperty2["default"])(_this2, "stemElement", null); (0, _defineProperty2["default"])(_this2, "questionErrors", function (index) { return _this2.props.getErrors("scoringData.editData.matches[".concat(index, "].questionBody")).slice(0, 1); }); (0, _defineProperty2["default"])(_this2, "answerErrors", function (index) { return _this2.props.getErrors("scoringData.editData.matches[".concat(index, "].answerBody")).slice(0, 1); }); (0, _defineProperty2["default"])(_this2, "distractorErrors", function (index) { return _this2.props.getErrors("scoringData.editData.distractors[".concat(index, "]")).slice(0, 1); }); // ============= // HANDLERS // ============= (0, _defineProperty2["default"])(_this2, "handleScoringAlgoChange", function (e, value) { _this2.props.changeItemState({ scoringAlgorithm: value }, { scoringAlgorithm: value }); }); (0, _defineProperty2["default"])(_this2, "blurDistractor", function (index, e) { _this2.editDistractor(index, { target: { value: e.target.value.trim() } }); }); (0, _defineProperty2["default"])(_this2, "editDistractor", function (index, e) { var editData = getEditData(_this2.props); if (index >= 0 && index < editData.distractors.length) { _this2.updateEditData((0, _set["default"])("distractors[".concat(index, "]"), e.target.value, editData)); } }); (0, _defineProperty2["default"])(_this2, "editQuestion", function (questionId, text) { var editData = getEditData(_this2.props); var questionIndex = (0, _findIndex["default"])({ questionId: questionId }, editData.matches); if (questionIndex !== -1) { _this2.updateEditData((0, _set["default"])("matches[".concat(questionIndex, "].questionBody"), text, editData)); } }); (0, _defineProperty2["default"])(_this2, "editAnswer", function (questionId, text) { var editData = getEditData(_this2.props); var questionIndex = (0, _findIndex["default"])({ questionId: questionId }, editData.matches); if (questionIndex !== -1) { _this2.updateEditData((0, _set["default"])("matches[".concat(questionIndex, "].answerBody"), text, editData)); } }); (0, _defineProperty2["default"])(_this2, "handleShuffleChange", function (event) { var properties = (0, _set["default"])('shuffleRules.questions.shuffled', event.target.checked, _this2.props.properties); _this2.props.changeItemState({ properties: properties }, { properties: properties }); }); (0, _defineProperty2["default"])(_this2, "handleRemoveMatch", function (questionId) { if (document.activeElement !== document.body) { // In FF clicking on a button doesn't focus it, so don't update focus in such case _this2.updateFocusOnRemoveMatch(); } var editData = getEditData(_this2.props); _this2.updateEditData((0, _set["default"])('matches', editData.matches.filter(function (match) { return match.questionId !== questionId; }), editData)); }); (0, _defineProperty2["default"])(_this2, "handleCreateMatch", function () { _this2._timeouts = [].concat((0, _toConsumableArray2["default"])(_this2._timeouts), [setTimeout(function () { return _this2.focusMatch.focusLast(QUESTION_SELECTOR); }, 100)]); var editData = getEditData(_this2.props); _this2.updateEditData((0, _set["default"])('matches', [].concat((0, _toConsumableArray2["default"])(editData.matches), [{ questionId: _this2.props.newId(), questionBody: '', answerBody: '' }]), editData)); }); (0, _defineProperty2["default"])(_this2, "handleRemoveDistractor", function (index) { if (_this2.focusDistractor.previousExists('button')) { _this2.focusDistractor.focusPrevious('button'); } else { _this2.focusMatch.focusLast(); } var editData = getEditData(_this2.props); _this2.updateEditData((0, _set["default"])('distractors', (0, _pullAt["default"])([index], editData.distractors), editData)); }); (0, _defineProperty2["default"])(_this2, "handleCreateDistractor", function () { _this2._timeouts = [].concat((0, _toConsumableArray2["default"])(_this2._timeouts), [setTimeout(function () { return _this2.focusDistractor.focusLast('input'); }, 100)]); var editData = getEditData(_this2.props); _this2.updateEditData((0, _set["default"])('distractors', [].concat((0, _toConsumableArray2["default"])(editData.distractors), ['']), editData)); }); (0, _defineProperty2["default"])(_this2, "handleCalculatorTypeChange", function (e, value) { _this2.props.changeItemState({ calculatorType: value }); }); (0, _defineProperty2["default"])(_this2, "handleDescriptionChange", function (itemBody) { _this2.props.changeItemState({ itemBody: itemBody }); }); (0, _defineProperty2["default"])(_this2, "handleFocusMatchRef", function (node) { _this2.focusMatch = node; }); (0, _defineProperty2["default"])(_this2, "handleFocusDistractorRef", function (node) { _this2.focusDistractor = node; }); (0, _defineProperty2["default"])(_this2, "handleStemRef", function (node) { _this2.stemElement = node; }); (0, _defineProperty2["default"])(_this2, "handleCloseModal", function () { _this2.setState({ isModalOpen: false }); }); (0, _defineProperty2["default"])(_this2, "handleOpenModal", function () { _this2.setState({ isModalOpen: true }); }); return _this2; } (0, _inherits2["default"])(MatchingEdit, _Component); return (0, _createClass2["default"])(MatchingEdit, [{ key: "componentDidMount", value: function componentDidMount() { this.setDefaultScoringAlgorithm(); } }, { key: "componentWillUnmount", value: function componentWillUnmount() { this._timeouts.forEach(clearTimeout); } }, { key: "componentDidUpdate", value: function componentDidUpdate() { this.setDefaultScoringAlgorithm(); } }, { key: "setDefaultScoringAlgorithm", value: function setDefaultScoringAlgorithm() { if (!this.props.scoringAlgorithm && this.props.partialDeepScoringEnabled) { this.props.changeItemState({ scoringAlgorithm: PARTIAL_DEEP }); } } }, { key: "overrideEditable", value: function overrideEditable() { return this.props.overrideEditableForItem || this.props.overrideEditableForRegrading; } // ============= // HELPERS // ============= }, { key: "updateEditData", value: function updateEditData(newEditData) { this.props.changeItemState(getPropsFromEditData(newEditData)); } }, { key: "updateFocusOnRemoveMatch", value: function updateFocusOnRemoveMatch() { var _this3 = this; if (!this.focusMatch.previousExists('button')) { // if removing the first choice, focus on stem this.stemElement.focus(); } else if (this.props.interactionData.questions.length === 2) { // if removing the second choice out of two choices this._timeouts = [].concat((0, _toConsumableArray2["default"])(this._timeouts), [setTimeout(function () { return _this3.focusMatch.focusLast('input'); }, 100)]); } else { // all the other cases this.focusMatch.focusPrevious('button'); } } }, { key: "renderOptionsDescription", value: // ============= // RENDERING // ============= function renderOptionsDescription() { return /*#__PURE__*/_react["default"].createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage["default"])('Matching options')); } }, { key: "renderGradingOptions", value: function renderGradingOptions() { return /*#__PURE__*/_react["default"].createElement(_uiView.View, { as: "div", margin: "medium 0", position: "relative" }, /*#__PURE__*/_react["default"].createElement(_uiRadioInput.RadioInputGroup, { onChange: this.handleScoringAlgoChange, name: (0, _formatMessage["default"])('Grading'), value: this.props.scoringAlgorithm, description: /*#__PURE__*/_react["default"].createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage["default"])('Grading')) }, /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement(_uiText.Text, null, (0, _formatMessage["default"])('Grading')), /*#__PURE__*/_react["default"].createElement(_uiButtons.IconButton, { size: "small", withBackground: false, withBorder: false, renderIcon: _uiIcons.IconQuestionLine, onClick: this.handleOpenModal, screenReaderLabel: (0, _formatMessage["default"])('Open grading option information') })), /*#__PURE__*/_react["default"].createElement(_uiRadioInput.RadioInput, { value: PARTIAL_DEEP, label: (0, _formatMessage["default"])('Partial credit'), "data-automation": "sdk-grading-partial-credit-radio-input" }), /*#__PURE__*/_react["default"].createElement(_uiRadioInput.RadioInput, { value: DEEP_EQUALS, label: (0, _formatMessage["default"])('Exact match'), "data-automation": "sdk-grading-exact-match-radio-input" }))); } }, { key: "renderGradingOptionsModal", value: function renderGradingOptionsModal() { return /*#__PURE__*/_react["default"].createElement(_quizCommon.SimpleModal, { size: "small", title: (0, _formatMessage["default"])('Grading'), label: (0, _formatMessage["default"])('Grading'), isModalOpen: this.state.isModalOpen, onModalDismiss: this.handleCloseModal }, /*#__PURE__*/_react["default"].createElement(_uiText.Text, { weight: "bold", lineHeight: "double" }, (0, _formatMessage["default"])('Partial credit')), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_uiText.Text, null, (0, _formatMessage["default"])('Students are awarded points for every correct answer.')), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_uiText.Text, { weight: "bold", lineHeight: "double" }, (0, _formatMessage["default"])('Exact match')), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_uiText.Text, null, (0, _formatMessage["default"])('Students are awarded full credit if all correct answers are selected and no incorrect answers are selected.'))); } }, { key: "render", value: function render() { var _this4 = this; var _getEditData = getEditData(this.props), matches = _getEditData.matches, distractors = _getEditData.distractors; return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_QuestionContainer["default"], { disabled: this.props.overrideEditableForRegrading, enableRichContentEditor: this.props.enableRichContentEditor, itemBody: this.props.itemBody, onDescriptionChange: this.handleDescriptionChange, onModalClose: this.props.onModalClose, onModalOpen: this.props.onModalOpen, openImportModal: this.props.openImportModal, stemErrors: this.props.getErrors('itemBody'), textareaRef: this.handleStemRef }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_FocusGroup["default"], { ref: this.handleFocusMatchRef }, /*#__PURE__*/_react["default"].createElement(_MatchListEdit["default"] // Passed in as new function to force re-render , { answerErrors: function answerErrors(index) { return _this4.answerErrors(index); }, createNewMatch: this.handleCreateMatch, editAnswer: this.editAnswer, editQuestion: this.editQuestion // Passed in as new function to force re-render , questionErrors: function questionErrors(index) { return _this4.questionErrors(index); }, removeMatch: this.handleRemoveMatch, disabled: this.props.overrideEditableForRegrading, matches: matches, notifyScreenreader: this.props.notifyScreenreader })), /*#__PURE__*/_react["default"].createElement(_FocusGroup["default"], { ref: this.handleFocusDistractorRef }, /*#__PURE__*/_react["default"].createElement(_DistractorList["default"], { disabled: this.props.overrideEditableForRegrading, createNewDistractor: this.handleCreateDistractor, distractors: distractors, editDistractor: this.editDistractor, blurDistractor: this.blurDistractor // Passed in as new function to force re-render , distractorErrors: function distractorErrors(index) { return _this4.distractorErrors(index); }, notifyScreenreader: this.props.notifyScreenreader, removeDistractor: this.handleRemoveDistractor })))), /*#__PURE__*/_react["default"].createElement(_QuestionSettingsContainer["default"], { additionalOptions: this.props.additionalOptions }, /*#__PURE__*/_react["default"].createElement(_QuestionSettingsPanel["default"], { label: (0, _formatMessage["default"])('Options'), defaultExpanded: true }, /*#__PURE__*/_react["default"].createElement(_quizCommon.FormFieldGroup, { rowSpacing: "small", description: this.renderOptionsDescription() }, this.props.showCalculatorOption && /*#__PURE__*/_react["default"].createElement(_CalculatorOptionWithOqaatAlert["default"], { disabled: this.props.overrideEditableForRegrading, calculatorValue: this.props.calculatorType, onCalculatorTypeChange: this.handleCalculatorTypeChange, oqaatChecked: this.props.oneQuestionAtATime, onOqaatChange: this.props.setOneQuestionAtATime }), /*#__PURE__*/_react["default"].createElement(_uiCheckbox.Checkbox, { label: (0, _formatMessage["default"])('Shuffle questions'), onChange: this.handleShuffleChange, checked: this.props.properties.shuffleRules.questions.shuffled, disabled: this.props.overrideEditableForRegrading, "data-automation": "sdk-shuffle-questions-checkbox" }), this.props.partialDeepScoringEnabled && this.renderGradingOptions()))), this.renderGradingOptionsModal()); } }]); }(_react.Component), (0, _defineProperty2["default"])(_MatchingEdit, "interactionType", _matching["default"]), (0, _defineProperty2["default"])(_MatchingEdit, "propTypes", _objectSpread(_objectSpread({ additionalOptions: _QuestionSettingsContainer["default"].propTypes.additionalOptions, calculatorType: _propTypes["default"].string, changeItemState: _propTypes["default"].func, enableRichContentEditor: _propTypes["default"].bool, interactionData: _propTypes["default"].shape({ questions: _propTypes["default"].arrayOf(_propTypes["default"].shape({ id: _propTypes["default"].string, itemBody: _propTypes["default"].string })), answers: _propTypes["default"].arrayOf(_propTypes["default"].string) }).isRequired, itemBody: _propTypes["default"].string, newId: _propTypes["default"].func, onModalClose: _propTypes["default"].func, onModalOpen: _propTypes["default"].func, oneQuestionAtATime: _propTypes["default"].bool, openImportModal: _propTypes["default"].func, overrideEditableForItem: _propTypes["default"].bool, overrideEditableForRegrading: _propTypes["default"].bool, partialDeepScoringEnabled: _propTypes["default"].bool, properties: _propTypes["default"].object, scoringAlgorithm: _propTypes["default"].string, scoringData: _propTypes["default"].shape({ value: _propTypes["default"].objectOf(_propTypes["default"].string), editData: _propTypes["default"].shape({ matches: _MatchListEdit["default"].propTypes.matches, distractors: _DistractorList["default"].propTypes.distractors }) }), setOneQuestionAtATime: _propTypes["default"].func, notifyScreenreader: _propTypes["default"].func }, _withEditTools["default"].injectedProps), {}, { showCalculatorOption: _propTypes["default"].bool })), (0, _defineProperty2["default"])(_MatchingEdit, "defaultProps", { calculatorType: 'none', enableRichContentEditor: true, oneQuestionAtATime: false, overrideEditableForItem: false, overrideEditableForRegrading: false, newId: _uuid.v4, setOneQuestionAtATime: Function.prototype, notifyScreenreader: Function.prototype, additionalOptions: void 0, changeItemState: void 0, interactionData: void 0, itemBody: void 0, onModalClose: void 0, onModalOpen: void 0, openImportModal: void 0, partialDeepScoringEnabled: false, properties: void 0, scoringAlgorithm: null, scoringData: void 0, showCalculatorOption: true }), _MatchingEdit)) || _class;