@instructure/quiz-interactions/es/components/essay/Edit/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, _EssayEdit;
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(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
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 { Checkbox } from '@instructure/ui-checkbox';
import NumberInput from '@instructure/quiz-number-input';
import { ScreenReaderContent } from '@instructure/ui-a11y-content';
import { jsx } from '@instructure/emotion';
import EssayInteractionType from '../../../records/interactions/essay';
import QuestionSettingsContainer from '../../common/edit/components/QuestionSettingsContainer';
import QuestionContainer from '../../common/edit/components/QuestionContainer';
import generateStyle from './styles';
import generateComponentTheme from './theme';
import withEditTools from '../../../util/withEditTools';
import t from '@instructure/quiz-i18n/es/format-message';
import QuestionSettingsPanel from '../../common/edit/components/QuestionSettingsPanel';
import CalculatorOptionWithOqaatAlert from '../../common/edit/components/CalculatorOptionWithOqaatAlert';
import { TextArea, withStyleOverrides, FormFieldGroup } from '@instructure/quiz-common';

/**
---
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>
  ```
**/
var EssayEdit = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), withEditTools(_class = _dec(_class = (_EssayEdit = /*#__PURE__*/function (_Component) {
  function EssayEdit(props) {
    var _this2;
    _classCallCheck(this, EssayEdit);
    _this2 = _callSuper(this, EssayEdit, [props]);
    // =============
    //   HANDLERS
    // =============
    _defineProperty(_this2, "handleCalculatorTypeChange", function (e, value) {
      _this2.props.changeItemState({
        calculatorType: value
      });
    });
    _defineProperty(_this2, "handleCheckboxChange", function (event) {
      _this2.mergeInteractionData(_defineProperty({}, event.target.value, !_this2.props.interactionData[event.target.value]));
    });
    _defineProperty(_this2, "handleNotesChange", function (event) {
      _this2.props.changeItemState({
        scoringData: {
          value: event.target.value
        }
      });
    });
    _defineProperty(_this2, "handleWordLimitMinChange", function (event, value, normalizedValue) {
      _this2.setState({
        wordLimitMin: value,
        normalizedWordLimitMin: normalizedValue
      });
    });
    _defineProperty(_this2, "handleWordLimitMaxChange", function (event, value, normalizedValue) {
      _this2.setState({
        wordLimitMax: value,
        normalizedWordLimitMax: normalizedValue
      });
    });
    _defineProperty(_this2, "handleWordLimitBlur", function (key, normalizedKey) {
      if (_this2.state[normalizedKey] == null) {
        _this2.mergeInteractionData(_defineProperty({}, key, null));
        _this2.setState(_defineProperty({}, key, null));
      } else {
        var wordLimit = parseInt(_this2.state[normalizedKey], 10) || 0;
        _this2.mergeInteractionData(_defineProperty({}, key, wordLimit.toString()));
        _this2.setState(_defineProperty({}, key, wordLimit));
      }
    });
    _defineProperty(_this2, "handleWordLimitMinBlur", function () {
      _this2.handleWordLimitBlur('wordLimitMin', 'normalizedWordLimitMin');
    });
    _defineProperty(_this2, "handleWordLimitMaxBlur", function () {
      _this2.handleWordLimitBlur('wordLimitMax', 'normalizedWordLimitMax');
    });
    _defineProperty(_this2, "handleDescriptionChange", function (itemBody) {
      return _this2.props.changeItemState({
        itemBody: itemBody
      });
    });
    var _props$interactionDat = props.interactionData,
      wordLimitMin = _props$interactionDat.wordLimitMin,
      wordLimitMax = _props$interactionDat.wordLimitMax;
    _this2.state = {
      wordLimitMin: wordLimitMin && Number(wordLimitMin),
      wordLimitMax: wordLimitMax && Number(wordLimitMax),
      normalizedWordLimitMin: wordLimitMin,
      normalizedWordLimitMax: wordLimitMax
    };
    return _this2;
  }

  // =============
  //   HELPERS
  // =============
  _inherits(EssayEdit, _Component);
  return _createClass(EssayEdit, [{
    key: "mergeInteractionData",
    value: function mergeInteractionData(intDataDiff) {
      this.props.changeItemState({
        interactionData: Object.assign({}, this.props.interactionData, intDataDiff)
      });
    }
  }, {
    key: "renderGradingNotes",
    value:
    // =============
    //   RENDERING
    // =============

    function renderGradingNotes() {
      return jsx(TextArea, {
        disabled: this.props.overrideEditableForRegrading,
        label: jsx(ScreenReaderContent, null, t('Grading Notes')),
        value: this.props.scoringData.value,
        onChange: this.handleNotesChange,
        autoGrow: this.context.disableTextAreaAutoGrow ? false : null,
        "data-automation": "sdk-essay-grading-notes-text-area"
      });
    }
  }, {
    key: "renderOptions",
    value: function renderOptions() {
      var description = jsx(ScreenReaderContent, null, t('Essay options'));
      return jsx(FormFieldGroup, {
        rowSpacing: "small",
        description: description
      }, this.props.showCalculatorOption && jsx(CalculatorOptionWithOqaatAlert, {
        disabled: this.props.overrideEditableForRegrading,
        calculatorValue: this.props.calculatorType,
        onCalculatorTypeChange: this.handleCalculatorTypeChange,
        oqaatChecked: this.props.oneQuestionAtATime,
        onOqaatChange: this.props.setOneQuestionAtATime
      }), jsx(Checkbox, {
        disabled: this.props.overrideEditableForRegrading,
        value: "rce",
        "data-automation": "sdk-essay-rce-checkbox",
        label: t('Rich Content Editor'),
        onChange: this.handleCheckboxChange,
        checked: this.props.interactionData.rce
      }), jsx(Checkbox, {
        disabled: this.props.overrideEditableForRegrading,
        value: "spellCheck",
        "data-automation": "sdk-essay-spellcheck-checkbox",
        label: t('Spell-check'),
        onChange: this.handleCheckboxChange,
        checked: this.props.interactionData.spellCheck
      }), jsx(Checkbox, {
        disabled: this.props.overrideEditableForRegrading,
        value: "wordCount",
        "data-automation": "sdk-essay-wordcount-checkbox",
        label: t('Show Word Count'),
        onChange: this.handleCheckboxChange,
        checked: this.props.interactionData.wordCount
      }), jsx(Checkbox, {
        disabled: this.props.overrideEditableForRegrading,
        value: "wordLimitEnabled",
        "data-automation": "sdk-essay-wordlimit-checkbox",
        label: t('Set Word Limit'),
        onChange: this.handleCheckboxChange,
        checked: this.props.interactionData.wordLimitEnabled
      }), this.renderWordLimitInput());
    }
  }, {
    key: "renderWordLimitInput",
    value: function renderWordLimitInput() {
      if (this.props.interactionData.wordLimitEnabled) {
        var currentMinValue = this.state.wordLimitMin == null ? '' : this.state.wordLimitMin;
        var currentMaxValue = this.state.wordLimitMax == null ? '' : this.state.wordLimitMax;
        return jsx("div", null, jsx("div", {
          css: this.props.styles.wordLimitInputsContainer
        }, jsx("div", {
          css: this.props.styles.wordLimitInput
        }, jsx(NumberInput, {
          disabled: this.props.overrideEditableForRegrading,
          "data-automation": "sdk-essay-wordlimit-min",
          min: "0",
          width: "8rem",
          renderLabel: t('Minimum'),
          placeholder: t('Limit'),
          value: currentMinValue,
          onChange: this.handleWordLimitMinChange,
          onBlur: this.handleWordLimitMinBlur,
          messages: this.props.getErrors('interactionData.$errors'),
          "aria-valuetext": "".concat(currentMinValue, " ").concat(t('Words minimum'))
        })), jsx("div", {
          css: this.props.styles.wordLimitInput
        }, jsx(NumberInput, {
          disabled: this.props.overrideEditableForRegrading,
          "data-automation": "sdk-essay-wordlimit-max",
          min: "0",
          width: "8rem",
          renderLabel: t('Maximum'),
          placeholder: t('Limit'),
          value: currentMaxValue,
          onChange: this.handleWordLimitMaxChange,
          onBlur: this.handleWordLimitMaxBlur,
          "aria-valuetext": "".concat(currentMaxValue, " ").concat(t('Words maximum'))
        }))));
      }
    }
  }, {
    key: "renderQuestionConfigContainer",
    value: function renderQuestionConfigContainer() {
      return jsx(QuestionSettingsContainer, {
        additionalOptions: this.props.additionalOptions
      }, jsx(QuestionSettingsPanel, {
        label: t('Options'),
        defaultExpanded: true
      }, this.renderOptions()), jsx(QuestionSettingsPanel, {
        label: t('Grading Notes')
      }, this.renderGradingNotes()));
    }
  }, {
    key: "render",
    value: function render() {
      return jsx("div", null, jsx(QuestionContainer, {
        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,
        stemErrors: this.props.getErrors('itemBody'),
        automationData: "sdk-essay-rce"
      }), this.renderQuestionConfigContainer());
    }
  }]);
}(Component), _defineProperty(_EssayEdit, "displayName", 'EssayEdit'), _defineProperty(_EssayEdit, "componentId", "Quizzes".concat(_EssayEdit.displayName)), _defineProperty(_EssayEdit, "interactionType", EssayInteractionType), _defineProperty(_EssayEdit, "propTypes", _objectSpread(_objectSpread({
  additionalOptions: PropTypes.array,
  calculatorType: PropTypes.string,
  changeItemState: PropTypes.func.isRequired,
  enableRichContentEditor: PropTypes.bool,
  interactionData: PropTypes.object.isRequired,
  itemBody: PropTypes.string.isRequired,
  onModalClose: PropTypes.func,
  onModalOpen: PropTypes.func,
  oneQuestionAtATime: PropTypes.bool,
  openImportModal: PropTypes.func,
  overrideEditableForRegrading: PropTypes.bool,
  scoringData: PropTypes.shape({
    value: PropTypes.string.isRequired
  }).isRequired,
  setOneQuestionAtATime: PropTypes.func
}, withEditTools.injectedProps), {}, {
  styles: PropTypes.object,
  showCalculatorOption: PropTypes.bool
})), _defineProperty(_EssayEdit, "defaultProps", {
  calculatorType: 'none',
  enableRichContentEditor: true,
  oneQuestionAtATime: false,
  overrideEditableForRegrading: false,
  additionalOptions: [],
  setOneQuestionAtATime: Function.prototype,
  onModalClose: void 0,
  onModalOpen: void 0,
  openImportModal: void 0,
  showCalculatorOption: true
}), _defineProperty(_EssayEdit, "contextTypes", {
  disableTextAreaAutoGrow: PropTypes.bool
}), _EssayEdit)) || _class) || _class);
export { EssayEdit as default };