quiz-interactions/lib/components/essay/Take/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 = 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 _react = _interopRequireWildcard(require("react"));

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

var _uuid = require("uuid");

var _uiForms = require("@instructure/ui-forms");

var _uiA11y = require("@instructure/ui-a11y");

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

var _quizRce = require("@instructure/quiz-rce");

var _WordCount = _interopRequireDefault(require("../helpers/WordCount"));

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

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

var _dec, _class, _class2, _temp;

var styles = {
  componentId: 'eIbcm',
  template: function template(theme) {
    return "\n\n.eIbcm_dWZF{font-size:".concat(theme.shortStemFontSize || 'inherit', ";overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n\n.eIbcm_dWZF,.eIbcm_cloC{align-items:center;flex:20 20 auto;margin:0}\n\n.eIbcm_cloC{font-size:").concat(theme.stemFontSize || 'inherit', "}\n\n.eIbcm_VpyP{align-items:center;display:flex;flex-direction:row;margin-bottom:").concat(theme.headerSectionMargin || 'inherit', "}\n\n.eIbcm_cSuF{box-sizing:border-box;padding:").concat(theme.questionPaddingTop || 'inherit', " ").concat(theme.questionPaddingSide || 'inherit', " ").concat(theme.questionPaddingBottom || 'inherit', ";width:100%}");
  },
  'shortStem': 'eIbcm_dWZF',
  'stem': 'eIbcm_cloC',
  'headerSection': 'eIbcm_VpyP',
  'question': 'eIbcm_cSuF'
};
var EssayTake = (
/**
---
category: Essay
---
  Essay Take component

  ```jsx_example
  function Example (props) {
    const exampleProps = {
      itemBody: 'Why did the Roman Empire fall?',
      interactionData: {
        rce: true,
        spellCheck: true,
        wordCount: true,
        wordLimitEnabled: true,
        wordLimitMax: 10,
        wordLimitMin: 1,
        notes: 'Teachers grading notes'
      },
      userResponse: {
        value: 'So it could learn to pick itself back up again.'
      }
    }

    return (
      <EssayTake {...exampleProps} {...props} />
    )
  }

  <SettingsSwitcher locales={LOCALES}>
    <TakeStateProvider>
      <Example />
    </TakeStateProvider>
  </SettingsSwitcher>
  ```
**/
_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(EssayTake, _Component);

  function EssayTake(props) {
    var _this;

    (0, _classCallCheck2.default)(this, EssayTake);
    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(EssayTake).call(this, props));

    _this.handleOnBlur = function (event, rceContent) {
      if (!_this.props.readOnly) {
        var newVal = _this.props.interactionData.rce ? rceContent.editorContent : event.target.value;

        if (newVal !== void 0) {
          _this.props.handleResponseUpdate(newVal);

          _this.setState({
            workingEssayContent: newVal
          });
        }
      }
    };

    _this.handleOnChange = function (event, rceContent) {
      if (!_this.props.readOnly) {
        var newVal = _this.props.interactionData.rce ? rceContent.editorContent : event.target.value;

        if (newVal !== void 0) {
          _this.props.handleResponseUpdate(newVal);

          _this.setState({
            workingEssayContent: newVal
          });
        }
      }
    };

    _this.uniqId = (0, _uuid.v4)();
    _this.state = {
      workingEssayContent: props.userResponse && props.userResponse.value || ''
    };
    return _this;
  }

  (0, _createClass2.default)(EssayTake, [{
    key: "renderEditor",
    value: function renderEditor() {
      var commonProps = {
        label: _react.default.createElement(_uiA11y.ScreenReaderContent, null, (0, _formatMessage.default)('User Response Field')),
        readOnly: this.props.readOnly,
        onChange: this.handleOnChange,
        onBlur: this.handleOnBlur
      };

      if (this.props.interactionData.rce) {
        return _react.default.createElement(_quizRce.RichContentInput, Object.assign({}, commonProps, {
          textareaId: "rceTextArea_".concat(this.uniqId) // eslint-disable-line react/jsx-no-literals
          ,
          onKeyUp: this.handleOnChange,
          openImportModal: this.props.openImportModal,
          renderImportModal: this.props.renderImportModal,
          defaultContent: this.state.workingEssayContent,
          tinyMCEOptions: {
            browser_spellcheck: this.props.interactionData.spellCheck
          }
        }));
      }

      return _react.default.createElement(_uiForms.TextArea, Object.assign({}, commonProps, {
        value: this.state.workingEssayContent,
        resize: "vertical",
        spellCheck: this.props.interactionData.spellCheck,
        autoGrow: this.context.disableTextAreaAutoGrow ? false : null
      }));
    }
  }, {
    key: "renderWordCountMessage",
    value: function renderWordCountMessage() {
      var _this$props$interacti = this.props.interactionData,
          wordCount = _this$props$interacti.wordCount,
          wordLimitMin = _this$props$interacti.wordLimitMin,
          wordLimitEnabled = _this$props$interacti.wordLimitEnabled,
          wordLimitMax = _this$props$interacti.wordLimitMax;

      if (wordCount || wordLimitEnabled) {
        return _react.default.createElement(_uiA11y.ScreenReaderContent, null, wordLimitEnabled && wordLimitMin ? (0, _formatMessage.default)('This essay has a minimum word count of {wordLimitMin}.', {
          wordLimitMin: wordLimitMin
        }) : '', wordLimitEnabled && wordLimitMax ? (0, _formatMessage.default)('This essay has a maximum word count of {wordLimitMax}.', {
          wordLimitMax: wordLimitMax
        }) : '', wordCount ? (0, _formatMessage.default)('There is a word count below the text area.') : '');
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props = this.props,
          interactionData = _this$props.interactionData,
          itemBody = _this$props.itemBody,
          notifyScreenreader = _this$props.notifyScreenreader;
      return _react.default.createElement(_quizRce.ItemBodyWrapper, {
        itemBody: itemBody
      }, this.renderWordCountMessage(), this.renderEditor(), _react.default.createElement("div", {
        className: styles.statsContainer
      }, _react.default.createElement(_WordCount.default, {
        rce: interactionData.rce,
        essay: this.state.workingEssayContent,
        wordCount: interactionData.wordCount,
        wordLimitEnabled: interactionData.wordLimitEnabled,
        wordLimitMin: parseInt(interactionData.wordLimitMin, 10),
        wordLimitMax: parseInt(interactionData.wordLimitMax, 10),
        notifyScreenreader: notifyScreenreader
      })));
    }
  }]);
  EssayTake.displayName = "EssayTake";
  return EssayTake;
}(_react.Component), _class2.propTypes = {
  handleResponseUpdate: _propTypes.default.func,
  interactionData: _propTypes.default.object.isRequired,
  itemBody: _propTypes.default.string.isRequired,
  userResponse: _propTypes.default.object,
  notifyScreenreader: _propTypes.default.func,
  openImportModal: _propTypes.default.func,
  renderImportModal: _propTypes.default.func,
  readOnly: _propTypes.default.bool
}, _class2.defaultProps = {
  handleResponseUpdate: function handleResponseUpdate() {},
  openImportModal: function openImportModal() {},
  renderImportModal: function renderImportModal() {},
  readOnly: false,
  userResponse: void 0,
  notifyScreenreader: void 0
}, _class2.contextTypes = {
  disableTextAreaAutoGrow: _propTypes.default.bool
}, _temp)) || _class);
exports.default = EssayTake;