quiz-interactions/lib/components/ordering/Take/index.js

A React UI component Library for quiz interaction types.

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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 _striptags = _interopRequireDefault(require("striptags"));

var _findIndex = _interopRequireDefault(require("lodash/findIndex"));

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

var _OrderGroup = _interopRequireDefault(require("../common/OrderGroup"));

var _ReorderChoiceButton = _interopRequireDefault(require("../common/ReorderChoiceButton"));

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

/**
---
category: Ordering
---
  Ordering Take component

   ```jsx_example
   const WrappedExample = DragDropContext(HTML5Backend)(OrderingTake)

   function Example () {
    const props = {
      itemBody: 'Order these characters from tallest to shortest:',
      interactionData: {
        choices: {
          uuid6: { id: 'uuid6', itemBody: 'Gandalf the Grey or Gandalf the White' },
          uuid5: { id: 'uuid5', itemBody: 'Legolas' },
          uuid4: { id: 'uuid4', itemBody: 'Aragorn' },
          uuid3: { id: 'uuid3', itemBody: 'Gimli' },
          uuid2: { id: 'uuid2', itemBody: 'Frodo' },
          uuid1: { id: 'uuid1', itemBody: 'Gollum' },
        }
      },
      properties: {
        displayAnswersParagraph: true,
        includeLabels: true,
        topLabel: 'Taller',
        bottomLabel: 'Shorter'
      },
      userResponse: {
        value: ['uuid5', 'uuid6', 'uuid4', 'uuid3', 'uuid2']
      }
    }

    return (
      <TakeStateProvider>
        <WrappedExample {...props} />
      </TakeStateProvider>
    )
  }

  <SettingsSwitcher locales={LOCALES}>
    <Example />
  </SettingsSwitcher>
  ```
**/
var OrderingTake =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(OrderingTake, _Component);

  function OrderingTake() {
    var _getPrototypeOf2;

    var _this;

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

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

    _this.handleMoveChoice = function (currI, targetI) {
      // Create a new array to preserve immutability
      var choices = _this.props.userResponse.value.slice(0); // Use destructuring to swap the two values


      var _ref = [choices[currI], choices[targetI]];
      choices[targetI] = _ref[0];
      choices[currI] = _ref[1];

      _this.props.handleResponseUpdate(choices);
    };

    _this.handleMoveChoiceUp = function (choiceId) {
      var position = (0, _findIndex.default)(_this.props.userResponse.value, function (i) {
        return i === choiceId;
      });

      _this.handleMoveChoice(position, position - 1);
    };

    _this.handleMoveChoiceDown = function (choiceId) {
      var position = (0, _findIndex.default)(_this.props.userResponse.value, function (i) {
        return i === choiceId;
      });

      _this.handleMoveChoice(position, position + 1);
    };

    _this.renderActionsContent = function (choiceId, isFinalChoice, isFirstChoice) {
      return _react.default.createElement(_ReorderChoiceButton.default, {
        buttonSize: "small",
        id: choiceId,
        isFinalChoice: isFinalChoice,
        isFirstChoice: isFirstChoice,
        onMoveChoiceUp: _this.handleMoveChoiceUp,
        onMoveChoiceDown: _this.handleMoveChoiceDown,
        screenReaderText: (0, _formatMessage.default)('Reorder Choice: {choice}', {
          choice: (0, _striptags.default)(_this.props.interactionData.choices[choiceId].itemBody)
        })
      });
    };

    return _this;
  }

  (0, _createClass2.default)(OrderingTake, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
          userResponse = _this$props.userResponse,
          interactionData = _this$props.interactionData,
          properties = _this$props.properties;
      return _react.default.createElement(_quizRce.ItemBodyWrapper, {
        itemBody: this.props.itemBody
      }, _react.default.createElement(_OrderGroup.default, {
        actionsContent: this.renderActionsContent,
        bottomLabel: properties.bottomLabel,
        choiceOrder: userResponse.value,
        choices: interactionData.choices,
        displayAnswersParagraph: properties.displayAnswersParagraph,
        includeLabels: properties.includeLabels,
        onMoveChoice: this.handleMoveChoice,
        topLabel: properties.topLabel
      }));
    }
  }]);
  OrderingTake.displayName = "OrderingTake";
  return OrderingTake;
}(_react.Component);

exports.default = OrderingTake;
OrderingTake.propTypes = {
  handleResponseUpdate: _propTypes.default.func.isRequired,
  interactionData: _propTypes.default.shape({
    choices: _propTypes.default.objectOf(_propTypes.default.shape({
      id: _propTypes.default.string.isRequired,
      itemBody: _propTypes.default.string.isRequired
    })).isRequired
  }).isRequired,
  itemBody: _propTypes.default.string.isRequired,
  properties: _propTypes.default.shape({
    displayAnswersParagraph: _propTypes.default.bool,
    includeLabels: _propTypes.default.bool,
    topLabel: _propTypes.default.string,
    bottomLabel: _propTypes.default.string
  }).isRequired,
  userResponse: _propTypes.default.shape({
    value: _propTypes.default.arrayOf(_propTypes.default.string).isRequired
  }).isRequired
};