quiz-interactions/lib/components/fill_blank/Take/take_components/TakeStem.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 _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 _sortBy = _interopRequireDefault(require("lodash/fp/sortBy"));

var _map = _interopRequireDefault(require("lodash/fp/map"));

var _flatten = _interopRequireDefault(require("lodash/fp/flatten"));

var _find = _interopRequireDefault(require("lodash/fp/find"));

var _flow = _interopRequireDefault(require("lodash/fp/flow"));

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

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

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

var _uiTextInput = require("@instructure/ui-text-input");

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

var _BlankDropTarget = _interopRequireDefault(require("../../drag_components/BlankDropTarget"));

var _punctuation = require("../../helpers/punctuation");

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

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

var _dec, _class, _class2, _temp;

var styles = {
  componentId: 'dDjkZ',
  template: function template(theme) {
    return "\n\n.dDjkZ_Okcu{flex:20 20 auto;flex-wrap:wrap;margin-bottom:".concat(theme.stemWrapperMarginBottom || 'inherit', ";margin-left:").concat(theme.stemWrapperMarginLeft || 'inherit', "}\n\n.dDjkZ_ebhk,.dDjkZ_Okcu{align-items:center;display:flex}\n\n.dDjkZ_ebhk{font-size:").concat(theme.stemItemFontSize || 'inherit', ";margin:").concat(theme.stemItemMargin || 'inherit', "}\n\n.dDjkZ_bprN{color:").concat(theme.selectPlaceholderColor || 'inherit', "}");
  },
  'stemWrapper': 'dDjkZ_Okcu',
  'stemItem': 'dDjkZ_ebhk',
  'selectPlaceholder': 'dDjkZ_bprN'
};
var TakeStem = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(TakeStem, _Component);

  function TakeStem() {
    var _getPrototypeOf2;

    var _this;

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

    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)(TakeStem)).call.apply(_getPrototypeOf2, [this].concat(args)));

    _this.renderStemItem = function (stemItem) {
      if (stemItem.type === 'text') {
        return _react.default.createElement(_uiElements.Text, {
          color: "primary",
          key: stemItem.id
        }, (0, _punctuation.trimPunctuation)(stemItem, _this.props.interactionData.stemItems));
      }

      var punctuation = (0, _punctuation.getTrimmedPunctuation)(stemItem, _this.props.interactionData.stemItems);
      return _react.default.createElement("span", {
        key: stemItem.id,
        className: styles.stemItem
      }, punctuation.start, _this.renderBlank(stemItem), punctuation.end);
    };

    return _this;
  }

  (0, _createClass2.default)(TakeStem, [{
    key: "getWordbankChoiceById",
    value: function getWordbankChoiceById(choiceId) {
      return (0, _flow.default)((0, _map.default)(function (b) {
        return b.answerType === 'wordbank' ? b.choices : [];
      }), _flatten.default, (0, _find.default)({
        id: choiceId
      }))(this.props.interactionData.blanks);
    }
  }, {
    key: "updateUserResponse",
    value: function updateUserResponse(blankId, blankValue) {
      var newResponses = this.props.userResponses.filter(function (blank) {
        return blank.id !== blankId;
      }).concat([{
        id: blankId,
        value: blankValue,
        type: 'Text'
      }]);
      this.props.onUpdate(newResponses);
    }
  }, {
    key: "getValueForBlank",
    value: function getValueForBlank(blankId) {
      var objectForBlank = this.props.userResponses.find(function (response) {
        return response.id === blankId;
      });
      return objectForBlank && 'value' in objectForBlank ? objectForBlank.value : null;
    } // =============
    //   RENDERING
    // =============

  }, {
    key: "renderDropdown",
    value: function renderDropdown(stemItem, blank) {
      var _this2 = this;

      return _react.default.createElement(_uiForms.Select, {
        selectedOption: this.getValueForBlank(blank.id),
        label: _react.default.createElement(_uiA11y.ScreenReaderContent, null, (0, _formatMessage.default)('Blank Options')),
        onChange: function onChange(event, _ref) {
          var value = _ref.value;
          return _this2.updateUserResponse(stemItem.blankId, value);
        },
        readOnly: this.props.readOnly
      }, _react.default.createElement("option", {
        value: "",
        className: styles.selectPlaceholder
      }, (0, _formatMessage.default)('choose your answer...')), blank.choices.map(function (choice) {
        return _react.default.createElement("option", {
          key: choice.id,
          value: choice.id
        }, choice.itemBody);
      }));
    }
  }, {
    key: "renderWordbankBlank",
    value: function renderWordbankBlank(stemItem, blank) {
      var _this3 = this;

      var selectedChoiceId = this.getValueForBlank(blank.id);
      return _react.default.createElement(_BlankDropTarget.default, {
        key: blank.id,
        choices: blank.choices,
        choice: this.getWordbankChoiceById(selectedChoiceId),
        blankId: blank.id,
        onChange: function onChange(event, choice) {
          return _this3.updateUserResponse(stemItem.blankId, choice);
        },
        onDrop: function onDrop(droppedChoice) {
          return _this3.updateUserResponse(blank.id, droppedChoice.id);
        },
        returnChoiceToWordbank: function returnChoiceToWordbank(choiceId) {
          return _this3.props.returnChoiceToWordbank(blank.id, choiceId);
        },
        stemItem: stemItem,
        value: selectedChoiceId,
        readOnly: this.props.readOnly
      });
    }
  }, {
    key: "renderOpenEntry",
    value: function renderOpenEntry(stemItem, blank) {
      var _this4 = this;

      var value = this.getValueForBlank(blank.id);
      return _react.default.createElement(_uiTextInput.TextInput, {
        label: _react.default.createElement(_uiA11y.ScreenReaderContent, null, (0, _formatMessage.default)('Question Blank')),
        placeholder: (0, _formatMessage.default)('type your answer...') // use defaultValue for Take (uncontrolled)
        ,
        defaultValue: this.props.readOnly ? void 0 : value // use value for Show (controlled, so it updates when changed)
        ,
        value: this.props.readOnly ? value : void 0,
        onChange: function onChange(e) {
          return _this4.updateUserResponse(stemItem.blankId, e.target.value.trim());
        },
        readOnly: this.props.readOnly,
        "data-automation": "sdk-fitb-taking-answer"
      });
    }
  }, {
    key: "renderBlank",
    value: function renderBlank(stemItem) {
      var blank = (0, _find.default)({
        id: stemItem.blankId
      }, this.props.interactionData.blanks);

      switch (blank.answerType) {
        case 'openEntry':
          return this.renderOpenEntry(stemItem, blank);

        case 'dropdown':
          return this.renderDropdown(stemItem, blank);

        default:
          return this.renderWordbankBlank(stemItem, blank);
      }
    }
  }, {
    key: "render",
    value: function render() {
      return _react.default.createElement("div", {
        className: styles.stemWrapper,
        "data-automation": "take-stem-wrapper"
      }, (0, _flow.default)((0, _sortBy.default)(['position']), (0, _map.default)(this.renderStemItem))(this.props.interactionData.stemItems));
    }
  }]);
  TakeStem.displayName = "TakeStem";
  return TakeStem;
}(_react.Component), _class2.propTypes = {
  onUpdate: _propTypes.default.func.isRequired,
  interactionData: _propTypes.default.object.isRequired,
  returnChoiceToWordbank: _propTypes.default.func,
  userResponses: _propTypes.default.array,
  readOnly: _propTypes.default.bool
}, _class2.defaultProps = {
  returnChoiceToWordbank: void 0,
  userResponses: [],
  readOnly: false // =============
  //   HELPERS
  // =============

}, _temp)) || _class);
exports.default = TakeStem;