@instructure/quiz-interactions
Version:
A React UI component Library for quiz interaction types.
189 lines (188 loc) • 8.89 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.showWordCount = exports.getRceEssayContent = exports.countWords = exports.WordCount = 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 _striptags = _interopRequireDefault(require("striptags"));
var _htmlencode = require("htmlencode");
var _uiText = require("@instructure/ui-text");
var _emotion = require("@instructure/emotion");
var _xregexp = _interopRequireDefault(require("xregexp"));
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 _uiIcons = require("@instructure/ui-icons");
var _uiView = require("@instructure/ui-view");
var _dec, _class, _WordCount;
/** @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));
}
// XRegExp supports unicode so we can use the codepoints for all {L}etters and {N}umbers
// See "Unicode Categories" here https://www.regular-expressions.info/unicode.html
var WORD_REGEX = (0, _xregexp["default"])("[-_'\\p{L}\\p{N}]+", 'gu');
var countWords = exports.countWords = function countWords(content) {
if (!content) {
return 0;
}
var matches = content.match(WORD_REGEX);
return matches ? matches.length : 0;
};
var getRceEssayContent = exports.getRceEssayContent = function getRceEssayContent(essay) {
return (0, _htmlencode.htmlDecode)((0, _striptags["default"])(essay));
};
var showWordCount = exports.showWordCount = function showWordCount(wordCount, rce, isEditing) {
if (!wordCount) return false;
if (rce && isEditing) return false;
return true;
};
var WordCount = exports.WordCount = (_dec = (0, _quizCommon.withStyleOverrides)(_styles["default"], _theme["default"]), _dec(_class = (_WordCount = /*#__PURE__*/function (_Component) {
function WordCount() {
var _this2;
(0, _classCallCheck2["default"])(this, WordCount);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this2 = _callSuper(this, WordCount, [].concat(args));
(0, _defineProperty2["default"])(_this2, "count", function () {
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this2.props;
return countWords(props.rce ? getRceEssayContent(props.essay) : props.essay);
});
return _this2;
}
(0, _inherits2["default"])(WordCount, _Component);
return (0, _createClass2["default"])(WordCount, [{
key: "UNSAFE_componentWillReceiveProps",
value: function UNSAFE_componentWillReceiveProps(nextProps) {
var errorMessage = this.getErrorMessage();
var nextErrorMessage = this.getErrorMessage(nextProps);
var errorMessageChanged = errorMessage !== nextErrorMessage;
var overLimit = nextErrorMessage && this.isOverWordLimit(nextProps);
var wordCountChangedAndOverLimit = overLimit && this.count() !== this.count(nextProps);
if (this.props.notifyScreenreader && (errorMessageChanged || wordCountChangedAndOverLimit) && nextErrorMessage) {
this.props.notifyScreenreader(nextErrorMessage);
}
}
}, {
key: "isOverWordLimit",
value: function isOverWordLimit() {
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props;
return props.wordLimitMax != null && this.count(props) > props.wordLimitMax;
}
}, {
key: "getErrorMessage",
value: function getErrorMessage() {
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props;
var wordLimitMin = props.wordLimitMin,
wordLimitEnabled = props.wordLimitEnabled;
var minError = wordLimitMin && this.count(props) < wordLimitMin;
var maxError = this.isOverWordLimit(props);
var countError = wordLimitEnabled && (minError || maxError);
var minErrorText = (0, _formatMessage["default"])("{wordLimitMin, plural,\n =1 {Must use at least # word}\n other {Must use at least # words}}", {
wordLimitMin: wordLimitMin
});
var maxErrorText = (0, _formatMessage["default"])('Maximum words exceeded!');
var errorText = this.count(props) < wordLimitMin ? minErrorText : maxErrorText;
return countError ? errorText : '';
}
}, {
key: "getLimitsText",
value: function getLimitsText() {
if (this.props.wordLimitEnabled) {
var limits = [];
if (this.props.wordLimitMin) {
limits.push((0, _formatMessage["default"])('{wordLimitMin} min', {
wordLimitMin: this.props.wordLimitMin
}));
}
if (this.props.wordLimitMax) {
limits.push((0, _formatMessage["default"])('{wordLimitMax} max', {
wordLimitMax: this.props.wordLimitMax
}));
}
var limit = limits.join(' / ');
return (0, _emotion.jsx)(_uiText.Text, {
color: "secondary",
size: "small"
}, limit, ' ', (0, _emotion.jsx)(_uiText.Text, {
color: "primary",
size: "small"
}, (0, _formatMessage["default"])('(word limit)')));
}
}
}, {
key: "renderWordCount",
value: function renderWordCount() {
var wordLimitEnabled = this.props.wordLimitEnabled;
var maxError = this.isOverWordLimit();
return (0, _emotion.jsx)("span", {
css: this.props.styles.countText
}, (0, _emotion.jsx)(_uiText.Text, {
size: "small",
color: wordLimitEnabled && maxError ? 'danger' : 'primary',
weight: "bold"
}, (0, _formatMessage["default"])('{wordcount, plural, =1 {# word} other {# words}}', {
wordcount: this.count()
})));
}
}, {
key: "render",
value: function render() {
var _this$props = this.props,
rce = _this$props.rce,
wordCount = _this$props.wordCount,
isEditing = _this$props.isEditing;
var maxError = this.isOverWordLimit();
return (0, _emotion.jsx)("div", {
className: "fs-mask",
css: this.props.styles.newWordCount
}, showWordCount(wordCount, rce, isEditing) && this.renderWordCount(), this.getLimitsText(), (0, _emotion.jsx)("div", null, (0, _emotion.jsx)(_uiText.Text, {
color: maxError ? 'danger' : null,
size: "small"
}, maxError && (0, _emotion.jsx)(_uiIcons.IconWarningSolid, null), ' ', (0, _emotion.jsx)(_uiView.View, {
display: "inline-block",
margin: "0 0 0 xxx-small"
}, this.getErrorMessage()))));
}
}]);
}(_react.Component), (0, _defineProperty2["default"])(_WordCount, "displayName", 'WordCount'), (0, _defineProperty2["default"])(_WordCount, "componentId", "Quizzes".concat(_WordCount.displayName)), (0, _defineProperty2["default"])(_WordCount, "propTypes", {
essay: _propTypes["default"].string,
rce: _propTypes["default"].bool,
isEditing: _propTypes["default"].bool,
wordCount: _propTypes["default"].bool,
wordLimitEnabled: _propTypes["default"].bool,
wordLimitMin: _propTypes["default"].number,
wordLimitMax: _propTypes["default"].number,
notifyScreenreader: _propTypes["default"].func,
styles: _propTypes["default"].object
}), (0, _defineProperty2["default"])(_WordCount, "defaultProps", {
essay: void 0,
rce: void 0,
isEditing: true,
wordCount: void 0,
wordLimitEnabled: void 0,
wordLimitMin: void 0,
wordLimitMax: void 0,
notifyScreenreader: void 0
}), _WordCount)) || _class);