DialogWrap.js 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
  3. import Portal from '@rc-component/portal';
  4. import * as React from 'react';
  5. import { RefContext } from "./context";
  6. import Dialog from "./Dialog";
  7. // fix issue #10656
  8. /*
  9. * getContainer remarks
  10. * Custom container should not be return, because in the Portal component, it will remove the
  11. * return container element here, if the custom container is the only child of it's component,
  12. * like issue #10656, It will has a conflict with removeChild method in react-dom.
  13. * So here should add a child (div element) to custom container.
  14. * */
  15. var DialogWrap = function DialogWrap(props) {
  16. var visible = props.visible,
  17. getContainer = props.getContainer,
  18. forceRender = props.forceRender,
  19. _props$destroyOnClose = props.destroyOnClose,
  20. destroyOnClose = _props$destroyOnClose === void 0 ? false : _props$destroyOnClose,
  21. _afterClose = props.afterClose,
  22. panelRef = props.panelRef;
  23. var _React$useState = React.useState(visible),
  24. _React$useState2 = _slicedToArray(_React$useState, 2),
  25. animatedVisible = _React$useState2[0],
  26. setAnimatedVisible = _React$useState2[1];
  27. var refContext = React.useMemo(function () {
  28. return {
  29. panel: panelRef
  30. };
  31. }, [panelRef]);
  32. React.useEffect(function () {
  33. if (visible) {
  34. setAnimatedVisible(true);
  35. }
  36. }, [visible]);
  37. // Destroy on close will remove wrapped div
  38. if (!forceRender && destroyOnClose && !animatedVisible) {
  39. return null;
  40. }
  41. return /*#__PURE__*/React.createElement(RefContext.Provider, {
  42. value: refContext
  43. }, /*#__PURE__*/React.createElement(Portal, {
  44. open: visible || forceRender || animatedVisible,
  45. autoDestroy: false,
  46. getContainer: getContainer,
  47. autoLock: visible || animatedVisible
  48. }, /*#__PURE__*/React.createElement(Dialog, _extends({}, props, {
  49. destroyOnClose: destroyOnClose,
  50. afterClose: function afterClose() {
  51. _afterClose === null || _afterClose === void 0 || _afterClose();
  52. setAnimatedVisible(false);
  53. }
  54. }))));
  55. };
  56. DialogWrap.displayName = 'Dialog';
  57. export default DialogWrap;