quiz-interactions/lib/components/essay/Edit/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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

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 _uiFormField = require("@instructure/ui-form-field");

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

var _quizNumberInput = _interopRequireDefault(require("@instructure/quiz-number-input"));

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

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

var _Errors = _interopRequireDefault(require("../../common/edit/components/Errors"));

var _essay = _interopRequireDefault(require("../../../records/interactions/essay"));

var _QuestionSettingsContainer = _interopRequireDefault(require("../../common/edit/components/QuestionSettingsContainer"));

var _QuestionContainer = _interopRequireDefault(require("../../common/edit/components/QuestionContainer"));

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

var _withEditTools = _interopRequireDefault(require("../../../util/withEditTools"));

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

var _QuestionSettingsPanel = _interopRequireDefault(require("../../common/edit/components/QuestionSettingsPanel"));

var _CalculatorOptionWithOqaatAlert = _interopRequireDefault(require("../../common/edit/components/CalculatorOptionWithOqaatAlert"));

var _dec, _class, _class2, _temp;

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

var styles = {
  componentId: 'ctubK',
  template: function template(theme) {
    return "\n\n.ctubK_bgyh{display:flex;margin-bottom:0;margin-left:".concat(theme.wordLimitInputContainerMarginLeft || 'inherit', ";margin-top:").concat(theme.wordLimitInputsContainerMarginTop || 'inherit', "}\n\n.ctubK_eQqJ{padding-right:").concat(theme.wordLimitInputPadding || 'inherit', "}");
  },
  'wordLimitInputsContainer': 'ctubK_bgyh',
  'wordLimitInput': 'ctubK_eQqJ'
};
var EssayEdit = (
/**
---
category: Essay
---
  Essay Edit component

  ```jsx_example
  function Example (props) {
    const exampleProps = {
      itemBody: 'Please enter Question/Prompt...',
      interactionData: {
        rce: false,
        spellCheck: false,
        wordCount: false,
        wordLimitEnabled: false,
        wordLimitMax: '',
        wordLimitMin: '',
        notes: ''
      },
      scoringData: { value: 'goths and food shortage' },
      additionalOptions: []
    }

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

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

  function EssayEdit(props) {
    var _this;

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

    _this.handleCalculatorTypeChange = function (e, value) {
      _this.props.changeItemState({
        calculatorType: value
      });
    };

    _this.handleCheckboxChange = function (event) {
      _this.mergeInteractionData((0, _defineProperty2.default)({}, event.target.value, !_this.props.interactionData[event.target.value]));
    };

    _this.handleNotesChange = function (event) {
      _this.props.changeItemState({
        scoringData: {
          value: event.target.value
        }
      });
    };

    _this.handleWordLimitMinChange = function (event, value, normalizedValue) {
      _this.setState({
        wordLimitMin: value,
        normalizedWordLimitMin: normalizedValue
      });
    };

    _this.handleWordLimitMaxChange = function (event, value, normalizedValue) {
      _this.setState({
        wordLimitMax: value,
        normalizedWordLimitMax: normalizedValue
      });
    };

    _this.handleWordLimitBlur = function (key, normalizedKey) {
      if (_this.state[normalizedKey] == null) {
        _this.mergeInteractionData((0, _defineProperty2.default)({}, key, null));

        _this.setState((0, _defineProperty2.default)({}, key, null));
      } else {
        var wordLimit = parseInt(_this.state[normalizedKey], 10) || 0;

        _this.mergeInteractionData((0, _defineProperty2.default)({}, key, wordLimit.toString()));

        _this.setState((0, _defineProperty2.default)({}, key, wordLimit));
      }
    };

    _this.handleWordLimitMinBlur = function () {
      _this.handleWordLimitBlur('wordLimitMin', 'normalizedWordLimitMin');
    };

    _this.handleWordLimitMaxBlur = function () {
      _this.handleWordLimitBlur('wordLimitMax', 'normalizedWordLimitMax');
    };

    _this.handleDescriptionChange = function (itemBody) {
      return _this.props.changeItemState({
        itemBody: itemBody
      });
    };

    var _props$interactionDat = props.interactionData,
        wordLimitMin = _props$interactionDat.wordLimitMin,
        wordLimitMax = _props$interactionDat.wordLimitMax;
    _this.state = {
      wordLimitMin: wordLimitMin && Number(wordLimitMin),
      wordLimitMax: wordLimitMax && Number(wordLimitMax),
      normalizedWordLimitMin: wordLimitMin,
      normalizedWordLimitMax: wordLimitMax
    };
    return _this;
  } // =============
  //   HELPERS
  // =============


  (0, _createClass2.default)(EssayEdit, [{
    key: "mergeInteractionData",
    value: function mergeInteractionData(intDataDiff) {
      this.props.changeItemState({
        interactionData: Object.assign({}, this.props.interactionData, intDataDiff)
      });
    } // =============
    //   HANDLERS
    // =============

  }, {
    key: "renderGradingNotes",
    // =============
    //   RENDERING
    // =============
    value: function renderGradingNotes() {
      return _react.default.createElement(_uiForms.TextArea, {
        disabled: this.props.overrideEditableForRegrading,
        label: _react.default.createElement(_uiA11y.ScreenReaderContent, null, (0, _formatMessage.default)('Grading Notes')),
        value: this.props.scoringData.value,
        onChange: this.handleNotesChange,
        autoGrow: this.context.disableTextAreaAutoGrow ? false : null
      });
    }
  }, {
    key: "renderOptions",
    value: function renderOptions() {
      var description = _react.default.createElement(_uiA11y.ScreenReaderContent, null, (0, _formatMessage.default)('Essay options'));

      return _react.default.createElement(_uiFormField.FormFieldGroup, {
        rowSpacing: "small",
        description: description
      }, !this.props.hiddenOptions.calculator && _react.default.createElement(_CalculatorOptionWithOqaatAlert.default, {
        disabled: this.props.overrideEditableForRegrading,
        calculatorValue: this.props.calculatorType,
        onCalculatorTypeChange: this.handleCalculatorTypeChange,
        oqaatChecked: this.props.oneQuestionAtATime,
        onOqaatChange: this.props.setOneQuestionAtATime
      }), _react.default.createElement(_uiForms.Checkbox, {
        disabled: this.props.overrideEditableForRegrading,
        value: "rce",
        "data-automation": "sdk-essay-rce-checkbox",
        label: (0, _formatMessage.default)('Rich Content Editor'),
        onChange: this.handleCheckboxChange,
        checked: this.props.interactionData.rce
      }), _react.default.createElement(_uiForms.Checkbox, {
        disabled: this.props.overrideEditableForRegrading,
        value: "spellCheck",
        "data-automation": "sdk-essay-spellcheck-checkbox",
        label: (0, _formatMessage.default)('Spell-check'),
        onChange: this.handleCheckboxChange,
        checked: this.props.interactionData.spellCheck
      }), _react.default.createElement(_uiForms.Checkbox, {
        disabled: this.props.overrideEditableForRegrading,
        value: "wordCount",
        "data-automation": "sdk-essay-wordcount-checkbox",
        label: (0, _formatMessage.default)('Show Word Count'),
        onChange: this.handleCheckboxChange,
        checked: this.props.interactionData.wordCount
      }), _react.default.createElement(_uiForms.Checkbox, {
        disabled: this.props.overrideEditableForRegrading,
        value: "wordLimitEnabled",
        "data-automation": "sdk-essay-wordlimit-checkbox",
        label: (0, _formatMessage.default)('Set Word Limit'),
        onChange: this.handleCheckboxChange,
        checked: this.props.interactionData.wordLimitEnabled
      }), this.renderWordLimitInput());
    }
  }, {
    key: "renderWordLimitInput",
    value: function renderWordLimitInput() {
      if (this.props.interactionData.wordLimitEnabled) {
        return _react.default.createElement(_Errors.default, {
          errorList: this.props.getErrors('interactionData.$errors')
        }, _react.default.createElement("div", {
          className: styles.wordLimitInputsContainer
        }, _react.default.createElement("div", {
          className: styles.wordLimitInput
        }, _react.default.createElement(_quizNumberInput.default, {
          disabled: this.props.overrideEditableForRegrading,
          min: "0",
          width: "8rem",
          label: (0, _formatMessage.default)('Minimum'),
          placeholder: (0, _formatMessage.default)('Limit'),
          value: this.state.wordLimitMin == null ? '' : this.state.wordLimitMin,
          onChange: this.handleWordLimitMinChange,
          onBlur: this.handleWordLimitMinBlur
        })), _react.default.createElement("div", {
          className: styles.wordLimitInput
        }, _react.default.createElement(_quizNumberInput.default, {
          disabled: this.props.overrideEditableForRegrading,
          min: "0",
          width: "8rem",
          label: (0, _formatMessage.default)('Maximum'),
          placeholder: (0, _formatMessage.default)('Limit'),
          value: this.state.wordLimitMax == null ? '' : this.state.wordLimitMax,
          onChange: this.handleWordLimitMaxChange,
          onBlur: this.handleWordLimitMaxBlur
        }))));
      }
    }
  }, {
    key: "renderQuestionConfigContainer",
    value: function renderQuestionConfigContainer() {
      return _react.default.createElement(_QuestionSettingsContainer.default, {
        additionalOptions: this.props.additionalOptions
      }, _react.default.createElement(_QuestionSettingsPanel.default, {
        label: (0, _formatMessage.default)('Options'),
        defaultExpanded: true
      }, this.renderOptions()), _react.default.createElement(_QuestionSettingsPanel.default, {
        label: (0, _formatMessage.default)('Grading Notes')
      }, this.renderGradingNotes()));
    }
  }, {
    key: "render",
    value: function render() {
      return _react.default.createElement("div", null, _react.default.createElement(_QuestionContainer.default, {
        disabled: this.props.overrideEditableForRegrading,
        enableRichContentEditor: this.props.enableRichContentEditor,
        itemBody: this.props.itemBody,
        onDescriptionChange: this.handleDescriptionChange,
        onModalClose: this.props.onModalClose,
        onModalOpen: this.props.onModalOpen,
        openImportModal: this.props.openImportModal,
        placeholder: (0, _formatMessage.default)('Enter Question/Prompt...'),
        renderImportModal: this.props.renderImportModal,
        stemErrors: this.props.getErrors('itemBody')
      }), this.renderQuestionConfigContainer());
    }
  }]);
  EssayEdit.displayName = "EssayEdit";
  return EssayEdit;
}(_react.Component), _class2.interactionType = _essay.default, _class2.propTypes = _objectSpread({
  additionalOptions: _propTypes.default.array,
  calculatorType: _propTypes.default.string,
  changeItemState: _propTypes.default.func.isRequired,
  enableRichContentEditor: _propTypes.default.bool,
  hiddenOptions: _propTypes.default.shape({
    calculator: _propTypes.default.bool
  }),
  interactionData: _propTypes.default.object.isRequired,
  itemBody: _propTypes.default.string.isRequired,
  onModalClose: _propTypes.default.func,
  onModalOpen: _propTypes.default.func,
  oneQuestionAtATime: _propTypes.default.bool,
  openImportModal: _propTypes.default.func,
  overrideEditableForRegrading: _propTypes.default.bool,
  renderImportModal: _propTypes.default.func,
  scoringData: _propTypes.default.shape({
    value: _propTypes.default.string.isRequired
  }).isRequired,
  setOneQuestionAtATime: _propTypes.default.func
}, _withEditTools.default.injectedProps), _class2.defaultProps = {
  calculatorType: 'none',
  enableRichContentEditor: true,
  hiddenOptions: {
    calculator: true
  },
  oneQuestionAtATime: false,
  overrideEditableForRegrading: false,
  additionalOptions: [],
  setOneQuestionAtATime: Function.prototype,
  onModalClose: void 0,
  onModalOpen: void 0,
  openImportModal: void 0,
  renderImportModal: void 0
}, _class2.contextTypes = {
  disableTextAreaAutoGrow: _propTypes.default.bool
}, _temp)) || _class) || _class);
exports.default = EssayEdit;