quiz-interactions/lib/components/essay/helpers/WordCount/index.js

A React UI component Library for quiz interaction types.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.getRceEssayContent = exports.countWords = 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 _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _striptags = _interopRequireDefault(require("striptags"));

var _htmlencode = require("htmlencode");

var _uiElements = require("@instructure/ui-elements");

var _uiThemeable = require("@instructure/ui-themeable");

var _xregexp = _interopRequireDefault(require("xregexp"));

var _theme = _interopRequireDefault(require("./theme"));

var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/lib/format-message"));

var _dec, _class, _class2, _temp;

var styles = {
  componentId: 'bstoJ',
  template: function template(theme) {
    return "\n\n.bstoJ_dAAC{padding-right:".concat(theme.countTextPadding || 'inherit', "}");
  },
  'countText': 'bstoJ_dAAC'
};
// 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 = function countWords(content) {
  if (!content) {
    return 0;
  }

  var matches = content.match(WORD_REGEX);
  return matches ? matches.length : 0;
};

exports.countWords = countWords;

var getRceEssayContent = function getRceEssayContent(essay) {
  return (0, _htmlencode.htmlDecode)((0, _striptags.default)(essay));
};

exports.getRceEssayContent = getRceEssayContent;
var WordCount = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(WordCount, _Component);

  function WordCount() {
    var _getPrototypeOf2;

    var _this;

    (0, _classCallCheck2.default)(this, WordCount);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(WordCount)).call.apply(_getPrototypeOf2, [this].concat(args)));

    _this.count = function () {
      var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : _this.props;
      return countWords(props.rce ? getRceEssayContent(props.essay) : props.essay);
    };

    return _this;
  }

  (0, _createClass2.default)(WordCount, [{
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      var errorMessage = this.getErrorMessage();
      var nextErrorMessage = this.getErrorMessage(nextProps);
      var errorMessageChanged = errorMessage !== nextErrorMessage;

      if (this.props.notifyScreenreader && errorMessageChanged && nextErrorMessage) {
        this.props.notifyScreenreader(nextErrorMessage);
      }
    }
  }, {
    key: "getErrorMessage",
    value: function getErrorMessage() {
      var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : this.props;
      var wordLimitMax = props.wordLimitMax,
          wordLimitMin = props.wordLimitMin,
          wordLimitEnabled = props.wordLimitEnabled;
      var minError = wordLimitMin && this.count(props) < wordLimitMin;
      var maxError = wordLimitMax && this.count(props) > wordLimitMax;
      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
          }));
        }

        return limits.join(' / ');
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props = this.props,
          wordLimitMax = _this$props.wordLimitMax,
          wordLimitEnabled = _this$props.wordLimitEnabled,
          wordCount = _this$props.wordCount;
      var maxError = wordLimitMax && this.count() > wordLimitMax;
      return _react.default.createElement("div", null, wordCount && _react.default.createElement("span", {
        className: styles.countText
      }, _react.default.createElement(_uiElements.Text, {
        size: "small",
        color: wordLimitEnabled && maxError ? 'error' : 'primary',
        weight: "bold"
      }, (0, _formatMessage.default)('{wordcount, plural, =1 {# word} other {# words}}', {
        wordcount: this.count()
      }))), _react.default.createElement(_uiElements.Text, {
        color: "secondary",
        size: "small"
      }, this.getLimitsText()), _react.default.createElement("div", null, _react.default.createElement(_uiElements.Text, {
        color: maxError ? 'error' : null,
        size: "small"
      }, this.getErrorMessage())));
    }
  }]);
  WordCount.displayName = "WordCount";
  return WordCount;
}(_react.Component), _class2.propTypes = {
  essay: _propTypes.default.string,
  rce: _propTypes.default.bool,
  wordCount: _propTypes.default.bool,
  wordLimitEnabled: _propTypes.default.bool,
  wordLimitMin: _propTypes.default.number,
  wordLimitMax: _propTypes.default.number,
  notifyScreenreader: _propTypes.default.func
}, _class2.defaultProps = {
  essay: void 0,
  rce: void 0,
  wordCount: void 0,
  wordLimitEnabled: void 0,
  wordLimitMin: void 0,
  wordLimitMax: void 0,
  notifyScreenreader: void 0
}, _temp)) || _class);
exports.default = WordCount;