quiz-interactions/lib/util/withEditTools.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 = withEditTools;

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

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 _get = _interopRequireDefault(require("lodash/get"));

var _isEqual = _interopRequireDefault(require("lodash/isEqual"));

var _pick = _interopRequireDefault(require("lodash/pick"));

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(source, true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

// TODO: Kill this HOC and use composition instead.  This thing is a nightmare to maintain...

/**
* Higher Order Component used in Edit views to pass generic helper functions
*/
function withEditTools(WrappedComponent) {
  var Wrapper =
  /*#__PURE__*/
  function (_Component) {
    (0, _inherits2.default)(Wrapper, _Component);

    function Wrapper() {
      var _getPrototypeOf2;

      var _this;

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

      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)(Wrapper)).call.apply(_getPrototypeOf2, [this].concat(args)));
      _this.node = null;

      _this.handleDescriptionChange = function (itemBody) {
        return _this.props.changeItemState({
          itemBody: itemBody
        });
      };

      _this.getErrors = function (path) {
        var fallback = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : [];
        var errors = (0, _get.default)(_this.props.errors, path);

        if (errors != null && _this.props.errorsAreShowing) {
          return formatErrors(errors);
        }

        return fallback;
      };

      _this.getWrappedComponent = function () {
        return _this.node;
      };

      _this.handleRef = function (node) {
        _this.node = node;
      };

      return _this;
    }

    (0, _createClass2.default)(Wrapper, [{
      key: "componentDidMount",
      // If the props passed to the component on mount result in validation
      // errors, call the changeItemState callback with the validation errors to
      // notify the parent component
      value: function componentDidMount() {
        var itemState = this.getItemState();

        if (Object.keys(itemState.errors).length > 0) {
          this.props.changeItemState(itemState);
        }
      }
    }, {
      key: "componentDidUpdate",
      value: function componentDidUpdate(prevProps) {
        var itemState = this.getItemState();

        if (!(0, _isEqual.default)(itemState.errors, prevProps.errors)) {
          this.props.changeItemState(itemState);
        }
      }
    }, {
      key: "getItem",
      value: function getItem() {
        var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : this.props;
        return (0, _pick.default)(props, ['calculatorType', 'interactionData', 'itemBody', 'properties', 'scoringAlgorithm', 'scoringData']);
      }
    }, {
      key: "getItemErrors",
      value: function getItemErrors(item) {
        return WrappedComponent.interactionType.getErrors(item);
      }
    }, {
      key: "getItemState",
      value: function getItemState() {
        var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : this.props;
        var item = this.getItem(props);
        var errors = this.getItemErrors(item);
        return _objectSpread({}, item, {
          errors: errors
        });
      }
      /**
      * default handling of stem changes
      */

    }, {
      key: "render",

      /**
      * render the decorated component, passing helpers through props
      */
      value: function render() {
        return _react.default.createElement(WrappedComponent, Object.assign({
          ref: this.handleRef,
          onDescriptionChange: this.handleDescriptionChange,
          getErrors: this.getErrors
        }, this.props));
      }
    }]);
    Wrapper.displayName = "Wrapper";
    return Wrapper;
  }(_react.Component);

  Wrapper.displayName = "".concat(Wrapper.name, "(").concat(WrappedComponent.displayName, ")");
  Wrapper.propTypes = {
    changeItemState: _propTypes.default.func.isRequired,
    errors: _propTypes.default.object,
    errorsAreShowing: _propTypes.default.bool,
    interactionData: _propTypes.default.object,
    itemBody: _propTypes.default.string,
    properties: _propTypes.default.object,
    scoringData: _propTypes.default.object,
    children: _propTypes.default.node
  };
  Wrapper.defaultProps = {
    errors: void 0,
    errorsAreShowing: void 0,
    interactionData: void 0,
    itemBody: void 0,
    properties: void 0,
    scoringData: void 0,
    children: void 0
  };
  Wrapper.WrappedComponent = WrappedComponent;
  return Wrapper;
} // These can be included by components that use withEditTools, to provide
// propType validation without including these private, internal props in the
// auto-generated documentation.


withEditTools.injectedProps = {
  getErrors: _propTypes.default.func.isRequired,
  onDescriptionChange: _propTypes.default.func.isRequired
};

function formatErrors(node) {
  if (typeof node === 'string') {
    return {
      text: node,
      type: 'error'
    };
  } else if (Array.isArray(node)) {
    return node.map(formatErrors);
  } else if (typeof node === 'object') {
    return Object.keys(node).reduce(function (obj, key) {
      return _objectSpread({}, obj, (0, _defineProperty2.default)({}, key, formatErrors(node[key])));
    }, {});
  }

  return node;
}