quiz-interactions/lib/components/matching/Example/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 _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 _isEqual = _interopRequireDefault(require("lodash/isEqual"));

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

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

var _Edit = _interopRequireDefault(require("../Edit"));

var _Show = _interopRequireDefault(require("../Show"));

var _Take = _interopRequireDefault(require("../Take"));

var _Result = _interopRequireDefault(require("../Result"));

var _defaultTheme = _interopRequireDefault(require("../../common/example/defaultTheme"));

var _dec, _class, _class2, _temp;

var styles = {
  componentId: 'cjePi',
  template: function template(theme) {
    return "\n\n.egxol_dXOl{flex:1;padding:".concat(theme.panelPadding || 'inherit', "}\n\n.egxol_qOas{display:flex}");
  },
  'panel': 'egxol_dXOl',
  'row': 'egxol_qOas'
};
/**
---
category: Matching
---
  Matching Example.

  ```jsx_example
    <SettingsSwitcher locales={LOCALES}>
      <MatchingExample />
    </SettingsSwitcher>
  ```
**/

var _ref =
/*#__PURE__*/
_react.default.createElement(_uiElements.Heading, {
  level: "h2"
}, "Edit");

var _ref2 =
/*#__PURE__*/
_react.default.createElement(_uiElements.Heading, {
  level: "h2"
}, "Show");

var _ref3 =
/*#__PURE__*/
_react.default.createElement(_uiElements.Heading, {
  level: "h2"
}, "Take");

var _ref4 =
/*#__PURE__*/
_react.default.createElement(_uiElements.Heading, {
  level: "h2"
}, "Result");

var MatchingExample = (_dec = (0, _uiThemeable.themeable)(_defaultTheme.default, styles), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(MatchingExample, _Component);

  function MatchingExample(props) {
    var _this;

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

    _this.handleChangeItemState = function (itemState) {
      var newState = Object.assign({}, itemState, itemState.scoringData ? {
        scoredData: _this.transformScoredData(itemState.scoringData)
      } : null);

      _this.setState(newState);
    };

    _this.handleResponseUpdate = function (userResponse) {
      _this.setState({
        userResponse: {
          value: userResponse
        },
        scoredData: _this.transformScoredData(_this.state.scoringData)
      });
    };

    _this.state = {};

    if (props.useDefaultData) {
      Object.assign(_this.state, {
        interactionData: {
          questions: [{
            id: 'uuid1',
            itemBody: 'Condi Rice'
          }, {
            id: 'uuid2',
            itemBody: 'Alexander Haig'
          }, {
            id: 'uuid3',
            itemBody: 'John Kerry'
          }],
          answers: ['George W. Bush', 'Ronald Reagan', 'Barack Obama', 'George H.W. Bush', 'Bill Clinton']
        },
        itemBody: 'Match the Secretary of State with the President they served under.',
        properties: {
          shuffleRules: {
            questions: {
              shuffled: true
            }
          }
        },
        scoringData: {
          value: {
            uuid1: 'George W. Bush',
            uuid2: 'Ronald Reagan',
            uuid3: 'Barack Obama'
          }
        },
        scoredData: {
          value: [{
            id: 'uuid1',
            userResponded: 'Condi Rice',
            value: 'Condi Rice'
          }, {
            id: 'uuid2',
            userResponded: 'Alexander Haig',
            value: 'Alexander Haig'
          }, {
            id: 'uuid3',
            userResponded: 'John Kerry',
            value: 'John Kerry'
          }]
        },
        userResponse: {
          value: {}
        }
      });
    }

    return _this;
  }

  (0, _createClass2.default)(MatchingExample, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      // eslint-disable-next-line react/no-did-mount-set-state
      this.setState({
        scoredData: this.transformScoredData(this.state.scoringData)
      });
    }
  }, {
    key: "transformScoredData",
    value: function transformScoredData(scoringData) {
      var _this2 = this;

      return {
        correct: (0, _isEqual.default)(this.state.userResponse.value, scoringData.value),
        value: Object.keys(scoringData.value).map(function (currKey) {
          return {
            id: currKey,
            userResponded: _this2.state.userResponse.value[currKey],
            resultScore: Object.keys(scoringData.value).includes(currKey) ? 1 : 0,
            value: scoringData.value[currKey]
          };
        })
      };
    }
  }, {
    key: "renderEdit",
    value: function renderEdit() {
      return _react.default.createElement("div", {
        title: "edit"
      }, _ref, _react.default.createElement(_Edit.default, {
        changeItemState: this.handleChangeItemState,
        interactionData: this.state.interactionData,
        itemBody: this.state.itemBody,
        scoringData: this.state.scoringData,
        properties: this.state.properties,
        errors: {}
      }));
    }
  }, {
    key: "renderShow",
    value: function renderShow() {
      return _react.default.createElement("div", {
        title: "show"
      }, _ref2, _react.default.createElement(_Show.default, {
        interactionData: this.state.interactionData,
        itemBody: this.state.itemBody,
        scoringData: this.state.scoringData
      }));
    }
  }, {
    key: "renderTake",
    value: function renderTake() {
      return _react.default.createElement("div", {
        title: "take"
      }, _ref3, _react.default.createElement(_Take.default, {
        interactionData: this.state.interactionData,
        itemBody: this.state.itemBody,
        userResponse: this.state.userResponse,
        handleResponseUpdate: this.handleResponseUpdate
      }));
    }
  }, {
    key: "renderResult",
    value: function renderResult() {
      return _react.default.createElement("div", {
        title: "result"
      }, _ref4, _react.default.createElement(_Result.default, {
        interactionData: this.state.interactionData,
        itemBody: this.state.itemBody,
        userResponse: this.state.userResponse,
        scoredData: this.state.scoredData
      }));
    }
  }, {
    key: "render",
    value: function render() {
      return _react.default.createElement("div", null, _react.default.createElement("div", {
        className: styles.row
      }, _react.default.createElement("div", {
        className: styles.panel
      }, this.renderEdit()), _react.default.createElement("div", {
        className: styles.panel
      }, this.renderShow())), _react.default.createElement("div", {
        className: styles.row
      }, _react.default.createElement("div", {
        className: styles.panel
      }, this.renderTake()), _react.default.createElement("div", {
        className: styles.panel
      }, this.renderResult())));
    }
  }]);
  MatchingExample.displayName = "MatchingExample";
  return MatchingExample;
}(_react.Component), _class2.propTypes = {
  useDefaultData: _propTypes.default.bool
}, _class2.defaultProps = {
  useDefaultData: true
}, _temp)) || _class);
exports.default = MatchingExample;