From 0471a9ea883e94778c9f1aa58ab3685295312cc7 Mon Sep 17 00:00:00 2001 From: FairyYang <269291280@qq.com> Date: Thu, 5 Sep 2024 16:03:47 +0800 Subject: [PATCH] fix(Overlay): overlay support SSR, close #4205 --- components/overlay/overlay.tsx | 16 ++++++++++------ components/overlay/position.tsx | 7 ++++++- 2 files changed, 16 insertions(+), 7 deletions(-) diff --git a/components/overlay/overlay.tsx b/components/overlay/overlay.tsx index 9bcf3a8a7b..9bac732527 100644 --- a/components/overlay/overlay.tsx +++ b/components/overlay/overlay.tsx @@ -311,8 +311,8 @@ class Overlay extends Component { switch ((align as Array)[0]) { case 't': return { - // 为了防止有的用户 js升级了而css没升级,所以把两个动画都保留了。 - // 动画不会叠加,会替代,顺序根据 src/animate/main.scss 中的样式先后顺序遵循css覆盖原则 + // 为了防止有的用户 js 升级了而 css 没升级,所以把两个动画都保留了。 + // 动画不会叠加,会替代,顺序根据 src/animate/main.scss 中的样式先后顺序遵循 css 覆盖原则 // fadeInDownSmall fadeOutUpSmall 优先级更高 in: 'expandInDown fadeInDownSmall', out: 'expandOutUp fadeOutUpSmall', @@ -331,6 +331,9 @@ class Overlay extends Component { } addAnimationEvents() { + if (typeof window === 'undefined') { + return; + } setTimeout(() => { const node = this.getContentNode(); if (node) { @@ -399,8 +402,8 @@ class Overlay extends Component { }); this.onLeaved(); - // dom结构首次出现 触发的是entering - // dom结构已经存在(例如设置了cache),触发的是mounting + // dom 结构首次出现 触发的是 entering + // dom 结构已经存在(例如设置了 cache),触发的是 mounting } else if (this.state.status === 'entering' || this.state.status === 'mounting') { this.setState({ status: 'none', @@ -562,10 +565,11 @@ class Overlay extends Component { * document global event */ addDocumentEvents() { - // FIXME: canCloseByEsc、canCloseByOutSideClick、canCloseByMask仅在didMount时生效,update时不生效 + // FIXME: canCloseByEsc、canCloseByOutSideClick、canCloseByMask 仅在 didMount 时生效,update 时不生效 const { useCapture } = this.props; // use capture phase listener to be compatible with react17 // https://reactjs.org/blog/2020/08/10/react-v17-rc.html#fixing-potential-issues + if (typeof document === 'undefined') return; if (this.props.canCloseByEsc) { this._keydownEvents = events.on( document, @@ -690,7 +694,7 @@ class Overlay extends Component { this.gatewayRef = ref; }; - // 兼容过去的用法: this.popupRef.getInstance().overlay.getInstance().getContentNode() + // 兼容过去的用法:this.popupRef.getInstance().overlay.getInstance().getContentNode() getInstance() { return this; } diff --git a/components/overlay/position.tsx b/components/overlay/position.tsx index 1d8642e76a..c768de4fba 100644 --- a/components/overlay/position.tsx +++ b/components/overlay/position.tsx @@ -62,7 +62,9 @@ export default class Position extends Component { this.setPosition(); if (this.props.needListenResize) { - events.on(window, 'resize', this.handleResize); + if (typeof window !== 'undefined') { + events.on(window, 'resize', this.handleResize); + } this.observe(); } } @@ -102,6 +104,9 @@ export default class Position extends Component { shouldIgnorePosition = () => { const node = this.getContentNode(); + if (typeof window === 'undefined') { + return true; + } if (!node) { return true; }