@instructure/quiz-interactions/es/components/fill_blank/Edit/EditStem/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, _EditStem;
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 ReactDOM from 'react-dom';
import debounce from 'lodash/debounce';
import partial from 'lodash/partial';
import { jsx } from '@instructure/emotion';
import { AccessibleContent, ScreenReaderContent } from '@instructure/ui-a11y-content';
import { Tag } from '@instructure/ui-tag';
import { View } from '@instructure/ui-view';
import Errors from '../../../common/edit/components/Errors';
import ContentEditable from '../../../common/edit/components/ContentEditable';
import EditStemController from './editStemController';
import generateStyle from './styles';
import generateComponentTheme from './theme';
import t from '@instructure/quiz-i18n/es/format-message';
import { withStyleOverrides } from '@instructure/quiz-common';
var NBSP_CHAR_CODE = 160;
var EditStem = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_EditStem = /*#__PURE__*/function (_Component) {
  function EditStem(props) {
    var _this2;
    _classCallCheck(this, EditStem);
    _this2 = _callSuper(this, EditStem, [props]);
    _defineProperty(_this2, "state", {
      isFocused: false
    });
    _defineProperty(_this2, "handlePaste", function (stemItem, e) {
      _this2.controller.handlePaste(e);
      _this2.props.onStemChange(stemItem, e);
    });
    _defineProperty(_this2, "setFocus", function (isFocused) {
      _this2.setState({
        isFocused: isFocused
      });
    });
    _defineProperty(_this2, "renderStemItem", function (stemItem) {
      return stemItem.type === 'text' ? _this2.renderContentEditable(stemItem) : _this2.renderBlank(stemItem);
    });
    _this2.controller = new EditStemController(props);
    _this2.stemItemRefs = {};
    return _this2;
  }
  _inherits(EditStem, _Component);
  return _createClass(EditStem, [{
    key: "_clearInterval",
    value:
    // own functions for stubbing purposes
    function _clearInterval(cb) {
      clearInterval(cb);
    }
  }, {
    key: "_setInterval",
    value: function _setInterval(cb, time) {
      setInterval(cb, time);
    }

    // =============
    //   LIFECYCLE
    // =============
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this3 = this;
      this.props.makeStyles();
      var oldOnSelectionChange = document.onselectionchange;
      this._dom = ReactDOM.findDOMNode(this);
      var newOnSelectionChange = debounce(function () {
        var sel = window.getSelection();
        var anchor = sel.anchorNode;
        if (!anchor) return;
        if (_this3._dom.contains(anchor) ||
        // next line needed because of weird IE11 behavior
        _this3._dom.contains(anchor.parentNode)) {
          _this3.props.setSelectedText(sel.toString());
        }
      }, 100);
      document.onselectionchange = function (e) {
        oldOnSelectionChange && oldOnSelectionChange(e);
        newOnSelectionChange();
      };
      this._oldOnSelectionChange = oldOnSelectionChange;
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      document.onselectionchange = this._oldOnSelectionChange;
    }
  }, {
    key: "UNSAFE_componentWillReceiveProps",
    value: function UNSAFE_componentWillReceiveProps(nextProps) {
      this.controller.UNSAFE_componentWillReceiveProps(nextProps);
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps) {
      this.props.makeStyles();
      if (!this.state.isFocused) {
        return;
      }
      var focusData = this.controller.getFocusData(prevProps);
      if (!focusData) {
        return;
      }
      var focusRef = this.stemItemRefs[focusData.stemItem.id];
      focusData.stemItem.type === 'blank' ? focusRef.focus() : focusRef.focusAndSetCursorOnPosition(focusData.cursorPosition);
    }
  }, {
    key: "renderContentEditable",
    value:
    // =============
    //   RENDERING
    // =============

    function renderContentEditable(stemItem) {
      var _this4 = this;
      var usePlaceholder = this.props.stemItems.length <= 1;
      var placeholder = usePlaceholder ? t('Type a statement...') : '';
      var content = this.controller.textForStemItem(stemItem);
      if (!content || content === String.fromCharCode(NBSP_CHAR_CODE)) {
        // nbsp is used to give a width to a final stem item if blank
        // if we only have one stem, just use the placeholder to do this
        content = usePlaceholder ? '' : String.fromCharCode(NBSP_CHAR_CODE);
      }
      return jsx(ContentEditable, {
        label: jsx(ScreenReaderContent, null, t('Statement')),
        key: stemItem.id,
        id: stemItem.id,
        ref: function ref(span) {
          _this4.stemItemRefs[stemItem.id] = span;
        },
        placeholder: placeholder,
        enableFormatting: false,
        disabled: this.props.disabled,
        content: content,
        onChange: partial(this.props.onStemChange, stemItem),
        onPaste: partial(this.handlePaste, stemItem),
        onKeyDown: this.props.onCreateBlankHotkey,
        customStyles: this.props.styles.editableText
      });
    }
  }, {
    key: "renderBlank",
    value: function renderBlank(stemItem) {
      var _this5 = this;
      var dismissible = !this.props.disabled;
      var text = this.controller.textForStemItem(stemItem);
      return jsx(Tag, {
        key: stemItem.id,
        dismissible: dismissible,
        elementRef: function elementRef(button) {
          _this5.stemItemRefs[stemItem.id] = button;
        },
        onClick: dismissible ? partial(this.props.destroyBlank, stemItem) : null,
        size: "large",
        text: jsx(AccessibleContent, {
          alt: t('Delete "{ text }" blank', {
            text: text
          })
        }, text),
        variant: "inline"
      });
    }
  }, {
    key: "render",
    value: function render() {
      this.stemItemRefs = {};
      return jsx("div", {
        onFocus: partial(this.setFocus, true),
        onBlur: partial(this.setFocus, false)
      }, jsx(Errors, {
        errorList: this.props.errors
      }, this.props.stemItems.map(this.renderStemItem)), jsx(View, {
        as: "div",
        borderWidth: "small none none none",
        margin: "small none"
      }));
    }
  }]);
}(Component), _defineProperty(_EditStem, "displayName", 'EditStem'), _defineProperty(_EditStem, "componentId", "Quizzes".concat(_EditStem.displayName)), _defineProperty(_EditStem, "propTypes", {
  disabled: PropTypes.bool,
  errors: PropTypes.array,
  destroyBlank: PropTypes.func.isRequired,
  onCreateBlankHotkey: PropTypes.func.isRequired,
  onStemChange: PropTypes.func.isRequired,
  setSelectedText: PropTypes.func.isRequired,
  stemItems: PropTypes.array.isRequired,
  styles: PropTypes.object,
  makeStyles: PropTypes.func
}), _defineProperty(_EditStem, "defaultProps", {
  disabled: false,
  errors: void 0
}), _EditStem)) || _class);
export { EditStem as default };