Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(Overlay): overlay support SSR, close #4205 #4923

Merged
merged 1 commit into from
Sep 5, 2024
Merged

fix(Overlay): overlay support SSR, close #4205 #4923

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 10 additions & 6 deletions components/overlay/overlay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -311,8 +311,8 @@
switch ((align as Array<string>)[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',
Expand All @@ -331,6 +331,9 @@
}

addAnimationEvents() {
if (typeof window === 'undefined') {
return;
}
setTimeout(() => {
const node = this.getContentNode();
if (node) {
Expand Down Expand Up @@ -399,8 +402,8 @@
});

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',
Expand Down Expand Up @@ -562,10 +565,11 @@
* 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,
Expand Down Expand Up @@ -690,7 +694,7 @@
this.gatewayRef = ref;
};

// 兼容过去的用法: this.popupRef.getInstance().overlay.getInstance().getContentNode()
// 兼容过去的用法：this.popupRef.getInstance().overlay.getInstance().getContentNode()
getInstance() {
return this;
}
Expand Down Expand Up @@ -790,7 +794,7 @@
children = (
<div className={wrapperClazz} style={newWrapperStyle} dir={rtl ? 'rtl' : undefined}>
{hasMask ? (
<div

Check warning on line 797 in components/overlay/overlay.tsx

View workflow job for this annotation

GitHub Actions / changed 

Visible, non-interactive elements with click handlers must have at least one keyboard listener

Check warning on line 797 in components/overlay/overlay.tsx

View workflow job for this annotation

GitHub Actions / changed 

Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element
className={maskClazz}
onClick={this.handleMaskClick}
onMouseEnter={onMaskMouseEnter}
Expand Down
7 changes: 6 additions & 1 deletion components/overlay/position.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,9 @@ export default class Position extends Component<PositionProps> {
this.setPosition();
eternalsky marked this conversation as resolved.
Show resolved Hide resolved

if (this.props.needListenResize) {
events.on(window, 'resize', this.handleResize);
if (typeof window !== 'undefined') {
events.on(window, 'resize', this.handleResize);
}
this.observe();
}
}
Expand Down Expand Up @@ -102,6 +104,9 @@ export default class Position extends Component<PositionProps> {

shouldIgnorePosition = () => {
const node = this.getContentNode();
if (typeof window === 'undefined') {
return true;
}
if (!node) {
return true;
}
Expand Down
Loading