@e-group/redux-modules/dialogs/withReduxDialog.js

eGroup team react-redux modules that share across projects.

"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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

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

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

var _react = _interopRequireWildcard(require("react"));

var _reactRedux = require("react-redux");

var _actions = require("./actions");

var _selectors = require("./selectors");

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

/**
 * Please read this article for more info.
 * https://medium.com/@martin_hotell/react-refs-with-typescript-a32d56c4d315
 * @param name
 */
const withReduxDialog = name => WrappedComponent => {
  const WithReduxDialog = props => {
    const forwardedRef = props.forwardedRef,
          initializeDialog = props.initializeDialog,
          closeDialog = props.closeDialog,
          other = (0, _objectWithoutProperties2.default)(props, ["forwardedRef", "initializeDialog", "closeDialog"]);
    (0, _react.useEffect)(() => {
      initializeDialog(name); // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);
    return /*#__PURE__*/_react.default.createElement(WrappedComponent, (0, _extends2.default)({
      ref: forwardedRef
    }, other));
  };
  /**
   * Connect before forwardRef
   * https://github.com/reduxjs/react-redux/issues/914
   */


  const mapStateToProps = state => _objectSpread({}, (0, _selectors.getDialogStates)(state, name));

  const mapDispatchToProps = dispatch => ({
    initializeDialog: name => dispatch((0, _actions.initializeDialog)(name)),
    closeDialog: name => dispatch((0, _actions.closeDialog)(name)),
    handleClose: () => {
      dispatch((0, _actions.closeDialog)(name));
    }
  });

  const ConnectedComponent = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(WithReduxDialog);
  /**
   * Forwarding refs in higher-order components
   * https://reactjs.org/docs/forwarding-refs.html#forwarding-refs-in-higher-order-components
   */

  function RefForwardingFactory(props, ref) {
    return /*#__PURE__*/_react.default.createElement(ConnectedComponent, (0, _extends2.default)({}, props, {
      forwardedRef: ref
    }));
  } // Give this component a more helpful display name in DevTools.


  const componentName = WrappedComponent.displayName || WrappedComponent.name;
  RefForwardingFactory.displayName = "withReduxDialog(".concat(componentName, ")");
  return /*#__PURE__*/(0, _react.forwardRef)(RefForwardingFactory);
};

var _default = withReduxDialog;
exports.default = _default;