@instructure/quiz-interactions/es/components/essay/helpers/WordCount/index.js

A React UI component Library for quiz interaction types.

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";
var _dec, _class, _WordCount;
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));
}
/** @jsx jsx */
import { Component } from 'react';
import PropTypes from 'prop-types';
import striptags from 'striptags';
import { htmlDecode } from 'htmlencode';
import { Text } from '@instructure/ui-text';
import { jsx } from '@instructure/emotion';
import XRegExp from 'xregexp';
import generateStyle from './styles';
import generateComponentTheme from './theme';
import t from '@instructure/quiz-i18n/es/format-message';
import { withStyleOverrides } from '@instructure/quiz-common';
import { IconWarningSolid } from '@instructure/ui-icons';
import { View } from '@instructure/ui-view';

// 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 = XRegExp("[-_'\\p{L}\\p{N}]+", 'gu');
export var countWords = function countWords(content) {
  if (!content) {
    return 0;
  }
  var matches = content.match(WORD_REGEX);
  return matches ? matches.length : 0;
};
export var getRceEssayContent = function getRceEssayContent(essay) {
  return htmlDecode(striptags(essay));
};
export var showWordCount = function showWordCount(wordCount, rce, isEditing) {
  if (!wordCount) return false;
  if (rce && isEditing) return false;
  return true;
};
export var WordCount = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_WordCount = /*#__PURE__*/function (_Component) {
  function WordCount() {
    var _this2;
    _classCallCheck(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));
    _defineProperty(_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;
  }
  _inherits(WordCount, _Component);
  return _createClass(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 = t("{wordLimitMin, plural,\n      =1 {Must use at least # word}\n      other {Must use at least # words}}", {
        wordLimitMin: wordLimitMin
      });
      var maxErrorText = t('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(t('{wordLimitMin} min', {
            wordLimitMin: this.props.wordLimitMin
          }));
        }
        if (this.props.wordLimitMax) {
          limits.push(t('{wordLimitMax} max', {
            wordLimitMax: this.props.wordLimitMax
          }));
        }
        var limit = limits.join(' / ');
        return jsx(Text, {
          color: "secondary",
          size: "small"
        }, limit, ' ', jsx(Text, {
          color: "primary",
          size: "small"
        }, t('(word limit)')));
      }
    }
  }, {
    key: "renderWordCount",
    value: function renderWordCount() {
      var wordLimitEnabled = this.props.wordLimitEnabled;
      var maxError = this.isOverWordLimit();
      return jsx("span", {
        css: this.props.styles.countText
      }, jsx(Text, {
        size: "small",
        color: wordLimitEnabled && maxError ? 'danger' : 'primary',
        weight: "bold"
      }, t('{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 jsx("div", {
        className: "fs-mask",
        css: this.props.styles.newWordCount
      }, showWordCount(wordCount, rce, isEditing) && this.renderWordCount(), this.getLimitsText(), jsx("div", null, jsx(Text, {
        color: maxError ? 'danger' : null,
        size: "small"
      }, maxError && jsx(IconWarningSolid, null), ' ', jsx(View, {
        display: "inline-block",
        margin: "0 0 0 xxx-small"
      }, this.getErrorMessage()))));
    }
  }]);
}(Component), _defineProperty(_WordCount, "displayName", 'WordCount'), _defineProperty(_WordCount, "componentId", "Quizzes".concat(_WordCount.displayName)), _defineProperty(_WordCount, "propTypes", {
  essay: PropTypes.string,
  rce: PropTypes.bool,
  isEditing: PropTypes.bool,
  wordCount: PropTypes.bool,
  wordLimitEnabled: PropTypes.bool,
  wordLimitMin: PropTypes.number,
  wordLimitMax: PropTypes.number,
  notifyScreenreader: PropTypes.func,
  styles: PropTypes.object
}), _defineProperty(_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);