@instructure/quiz-interactions
Version:
A React UI component Library for quiz interaction types.
220 lines (217 loc) • 9.38 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 = require("react");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactDom = _interopRequireDefault(require("react-dom"));
var _debounce = _interopRequireDefault(require("lodash/debounce"));
var _partial = _interopRequireDefault(require("lodash/partial"));
var _emotion = require("@instructure/emotion");
var _uiA11yContent = require("@instructure/ui-a11y-content");
var _uiTag = require("@instructure/ui-tag");
var _uiView = require("@instructure/ui-view");
var _Errors = _interopRequireDefault(require("../../../common/edit/components/Errors"));
var _ContentEditable = _interopRequireDefault(require("../../../common/edit/components/ContentEditable"));
var _editStemController = _interopRequireDefault(require("./editStemController"));
var _styles = _interopRequireDefault(require("./styles"));
var _theme = _interopRequireDefault(require("./theme"));
var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
var _quizCommon = require("@instructure/quiz-common");
var _dec, _class, _EditStem;
/** @jsx jsx */
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 NBSP_CHAR_CODE = 160;
var EditStem = exports["default"] = (_dec = (0, _quizCommon.withStyleOverrides)(_styles["default"], _theme["default"]), _dec(_class = (_EditStem = /*#__PURE__*/function (_Component) {
function EditStem(props) {
var _this2;
(0, _classCallCheck2["default"])(this, EditStem);
_this2 = _callSuper(this, EditStem, [props]);
(0, _defineProperty2["default"])(_this2, "state", {
isFocused: false
});
(0, _defineProperty2["default"])(_this2, "handlePaste", function (stemItem, e) {
_this2.controller.handlePaste(e);
_this2.props.onStemChange(stemItem, e);
});
(0, _defineProperty2["default"])(_this2, "setFocus", function (isFocused) {
_this2.setState({
isFocused: isFocused
});
});
(0, _defineProperty2["default"])(_this2, "renderStemItem", function (stemItem) {
return stemItem.type === 'text' ? _this2.renderContentEditable(stemItem) : _this2.renderBlank(stemItem);
});
_this2.controller = new _editStemController["default"](props);
_this2.stemItemRefs = {};
return _this2;
}
(0, _inherits2["default"])(EditStem, _Component);
return (0, _createClass2["default"])(EditStem, [{
key: "_clearInterval",
value:
// own functions for stubbing purposes
function _clearInterval(cb) {
clearInterval(cb);
}
}, {
key: "_setInterval",
value: function _setInterval(cb, time) {
setInterval(cb, time);
}
// =============
// LIFECYCLE
// =============
}, {
key: "componentDidMount",
value: function componentDidMount() {
var _this3 = this;
this.props.makeStyles();
var oldOnSelectionChange = document.onselectionchange;
this._dom = _reactDom["default"].findDOMNode(this);
var newOnSelectionChange = (0, _debounce["default"])(function () {
var sel = window.getSelection();
var anchor = sel.anchorNode;
if (!anchor) return;
if (_this3._dom.contains(anchor) ||
// next line needed because of weird IE11 behavior
_this3._dom.contains(anchor.parentNode)) {
_this3.props.setSelectedText(sel.toString());
}
}, 100);
document.onselectionchange = function (e) {
oldOnSelectionChange && oldOnSelectionChange(e);
newOnSelectionChange();
};
this._oldOnSelectionChange = oldOnSelectionChange;
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
document.onselectionchange = this._oldOnSelectionChange;
}
}, {
key: "UNSAFE_componentWillReceiveProps",
value: function UNSAFE_componentWillReceiveProps(nextProps) {
this.controller.UNSAFE_componentWillReceiveProps(nextProps);
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps) {
this.props.makeStyles();
if (!this.state.isFocused) {
return;
}
var focusData = this.controller.getFocusData(prevProps);
if (!focusData) {
return;
}
var focusRef = this.stemItemRefs[focusData.stemItem.id];
focusData.stemItem.type === 'blank' ? focusRef.focus() : focusRef.focusAndSetCursorOnPosition(focusData.cursorPosition);
}
}, {
key: "renderContentEditable",
value:
// =============
// RENDERING
// =============
function renderContentEditable(stemItem) {
var _this4 = this;
var usePlaceholder = this.props.stemItems.length <= 1;
var placeholder = usePlaceholder ? (0, _formatMessage["default"])('Type a statement...') : '';
var content = this.controller.textForStemItem(stemItem);
if (!content || content === String.fromCharCode(NBSP_CHAR_CODE)) {
// nbsp is used to give a width to a final stem item if blank
// if we only have one stem, just use the placeholder to do this
content = usePlaceholder ? '' : String.fromCharCode(NBSP_CHAR_CODE);
}
return (0, _emotion.jsx)(_ContentEditable["default"], {
label: (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage["default"])('Statement')),
key: stemItem.id,
id: stemItem.id,
ref: function ref(span) {
_this4.stemItemRefs[stemItem.id] = span;
},
placeholder: placeholder,
enableFormatting: false,
disabled: this.props.disabled,
content: content,
onChange: (0, _partial["default"])(this.props.onStemChange, stemItem),
onPaste: (0, _partial["default"])(this.handlePaste, stemItem),
onKeyDown: this.props.onCreateBlankHotkey,
customStyles: this.props.styles.editableText
});
}
}, {
key: "renderBlank",
value: function renderBlank(stemItem) {
var _this5 = this;
var dismissible = !this.props.disabled;
var text = this.controller.textForStemItem(stemItem);
return (0, _emotion.jsx)(_uiTag.Tag, {
key: stemItem.id,
dismissible: dismissible,
elementRef: function elementRef(button) {
_this5.stemItemRefs[stemItem.id] = button;
},
onClick: dismissible ? (0, _partial["default"])(this.props.destroyBlank, stemItem) : null,
size: "large",
text: (0, _emotion.jsx)(_uiA11yContent.AccessibleContent, {
alt: (0, _formatMessage["default"])('Delete "{ text }" blank', {
text: text
})
}, text),
variant: "inline"
});
}
}, {
key: "render",
value: function render() {
this.stemItemRefs = {};
return (0, _emotion.jsx)("div", {
onFocus: (0, _partial["default"])(this.setFocus, true),
onBlur: (0, _partial["default"])(this.setFocus, false)
}, (0, _emotion.jsx)(_Errors["default"], {
errorList: this.props.errors
}, this.props.stemItems.map(this.renderStemItem)), (0, _emotion.jsx)(_uiView.View, {
as: "div",
borderWidth: "small none none none",
margin: "small none"
}));
}
}]);
}(_react.Component), (0, _defineProperty2["default"])(_EditStem, "displayName", 'EditStem'), (0, _defineProperty2["default"])(_EditStem, "componentId", "Quizzes".concat(_EditStem.displayName)), (0, _defineProperty2["default"])(_EditStem, "propTypes", {
disabled: _propTypes["default"].bool,
errors: _propTypes["default"].array,
destroyBlank: _propTypes["default"].func.isRequired,
onCreateBlankHotkey: _propTypes["default"].func.isRequired,
onStemChange: _propTypes["default"].func.isRequired,
setSelectedText: _propTypes["default"].func.isRequired,
stemItems: _propTypes["default"].array.isRequired,
styles: _propTypes["default"].object,
makeStyles: _propTypes["default"].func
}), (0, _defineProperty2["default"])(_EditStem, "defaultProps", {
disabled: false,
errors: void 0
}), _EditStem)) || _class);