@instructure/quiz-interactions
Version:
A React UI component Library for quiz interaction types.
179 lines (178 loc) • 6.47 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 partial from 'lodash/partial';
import { ScreenReaderContent } from '@instructure/ui-a11y-content';
import { View } from '@instructure/ui-view';
import { Text } from '@instructure/ui-text';
import { TextInput } from '@instructure/quiz-common';
import { RichContentInput, RCE_SINGLE_LINE_HEIGHT } from '@instructure/quiz-rce';
import t from '@instructure/quiz-i18n/es/format-message';
// this exists as its own component to
// get the benefits of componentDidMount
var AnswerInput = /*#__PURE__*/function (_Component) {
function AnswerInput() {
var _this2;
_classCallCheck(this, AnswerInput);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this2 = _callSuper(this, AnswerInput, [].concat(args));
_defineProperty(_this2, "focus", function () {
_this2.answerInput.focus();
});
_defineProperty(_this2, "handleRef", function (node) {
_this2.answerInput = node;
});
_defineProperty(_this2, "handleTextChange", function (event) {
_this2.props.onChangeHandler(_this2.props.id, event, {
editorContent: event.target.value
});
});
_defineProperty(_this2, "handleTextBlur", function (event) {
_this2.props.onBlurHandler(_this2.props.id, event, {
editorContent: event.target.value
});
});
return _this2;
}
_inherits(AnswerInput, _Component);
return _createClass(AnswerInput, [{
key: "componentDidMount",
value: function componentDidMount() {
if (this.props.focusOnMount) {
this.answerInput.focus();
}
}
}, {
key: "choiceId",
get: function get() {
return "".concat(this.props.parentType, "_").concat(this.props.id, "_answer_input");
}
}, {
key: "plainTextLabel",
get: function get() {
return this.props.renderLabel || t('Answer');
}
}, {
key: "renderLabel",
value: function renderLabel() {
var screenReaderText = this.props.screenReaderText || t('Answer Value');
return /*#__PURE__*/React.createElement(View, {
"data-automation": this.automationData('label')
}, /*#__PURE__*/React.createElement(ScreenReaderContent, null, screenReaderText), /*#__PURE__*/React.createElement(Text, {
"aria-hidden": "true"
}, this.plainTextLabel));
}
}, {
key: "automationData",
value: function automationData(suffix) {
return this.props.automationData ? "".concat(this.props.automationData, "-").concat(suffix) : "sdk-answer".concat(this.choiceId, "-").concat(suffix);
}
}, {
key: "renderTextInput",
value: function renderTextInput() {
return /*#__PURE__*/React.createElement(TextInput, {
interaction: this.props.disabled ? 'disabled' : 'enabled',
id: this.choiceId,
name: this.choiceId,
messages: this.props.errors,
ref: this.handleRef,
renderLabel: this.renderLabel(),
isRequired: this.props.isRequired,
onChange: this.handleTextChange,
onBlur: this.handleTextBlur,
type: "text",
value: this.props.itemBody,
"data-automation": this.automationData('input')
});
}
}, {
key: "renderRichContentInput",
value: function renderRichContentInput() {
return /*#__PURE__*/React.createElement(RichContentInput, {
actsAsInput: true,
defaultContent: this.props.itemBody,
disabled: this.props.disabled,
readOnly: this.props.readOnly,
id: this.choiceId,
label: this.renderLabel(),
plainTextLabel: this.plainTextLabel,
isRequired: this.props.isRequired,
messages: this.props.errors,
name: this.choiceId,
onChange: partial(this.props.onChangeHandler, this.props.id),
onModalClose: this.props.onModalClose,
onModalOpen: this.props.onModalOpen,
openImportModal: this.props.openImportModal,
ref: this.handleRef,
textareaId: this.choiceId,
type: "text",
focusOnMount: this.props.focusOnMount,
height: RCE_SINGLE_LINE_HEIGHT
});
}
}, {
key: "render",
value: function render() {
if (this.props.noRCE) {
return this.renderTextInput();
}
return this.renderRichContentInput();
}
}]);
}(Component);
_defineProperty(AnswerInput, "propTypes", {
disabled: PropTypes.bool,
onChangeHandler: PropTypes.func.isRequired,
onBlurHandler: PropTypes.func,
id: PropTypes.string.isRequired,
itemBody: PropTypes.string.isRequired,
errors: PropTypes.array,
onModalClose: PropTypes.func,
onModalOpen: PropTypes.func,
renderLabel: PropTypes.string,
isRequired: PropTypes.bool,
screenReaderText: PropTypes.string,
focusOnMount: PropTypes.bool,
noRCE: PropTypes.bool,
parentType: PropTypes.string,
openImportModal: PropTypes.func,
readOnly: PropTypes.bool,
automationData: PropTypes.string
});
_defineProperty(AnswerInput, "defaultProps", {
disabled: false,
errors: [],
screenReaderText: null,
parentType: '',
renderLabel: null,
noRCE: false,
readOnly: false,
onBlurHandler: function onBlurHandler() {},
onModalClose: void 0,
onModalOpen: void 0,
focusOnMount: void 0,
openImportModal: void 0,
isRequired: false
});
export { AnswerInput as default };