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

eGroup team react-redux modules that share across projects.

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";

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) { _defineProperty(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; }

import React, { forwardRef, useEffect } from 'react';
import { connect } from 'react-redux';
import { initializeDialog as _initializeDialog, closeDialog as _closeDialog } from './actions';
import { getDialogStates } from './selectors';

/**
 * 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 = _objectWithoutProperties(props, ["forwardedRef", "initializeDialog", "closeDialog"]);

    useEffect(() => {
      initializeDialog(name); // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);
    return /*#__PURE__*/React.createElement(WrappedComponent, _extends({
      ref: forwardedRef
    }, other));
  };
  /**
   * Connect before forwardRef
   * https://github.com/reduxjs/react-redux/issues/914
   */


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

  const mapDispatchToProps = dispatch => ({
    initializeDialog: name => dispatch(_initializeDialog(name)),
    closeDialog: name => dispatch(_closeDialog(name)),
    handleClose: () => {
      dispatch(_closeDialog(name));
    }
  });

  const ConnectedComponent = 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.createElement(ConnectedComponent, _extends({}, 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__*/forwardRef(RefForwardingFactory);
};

export default withReduxDialog;