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.

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

feat: add ScrollLocker #179

Merged
merged 8 commits into from Dec 24, 2020
Merged

feat: add ScrollLocker #179

merged 8 commits into from Dec 24, 2020

Conversation

shaodahong
Copy link
Member

No description provided.

@coveralls
Copy link

coveralls commented Dec 15, 2020

Coverage Status

Coverage increased (+2.5%) to 46.147% when pulling f861bee on scrolllocker into 37aacd6 on master.

@zombieJ
Copy link
Member

zombieJ commented Dec 15, 2020

会用到哪些组件里?

@shaodahong
Copy link
Member Author

会用到哪些组件里?

ModalDrawer,以前的太耦合了,issue 不下十个

@afc163
Copy link
Member

afc163 commented Dec 17, 2020

ant-design/ant-design#28391

#174 (comment)

统一解决一下?

@afc163
Copy link
Member

afc163 commented Dec 17, 2020

import switchScrollingEffect from './switchScrollingEffect';
里有类似的功能,两者是重复的么?

@shaodahong
Copy link
Member Author

import switchScrollingEffect from './switchScrollingEffect';

里有类似的功能,两者是重复的么?

差不多,但是这个 switchScrollingEffect openCount 是耦合的,用了这个后可以废弃掉了, openCount 的黑魔法太多了

@shaodahong shaodahong changed the title feat: add ScrollLocker [WIP] feat: add ScrollLocker Dec 17, 2020
@shaodahong shaodahong changed the title [WIP] feat: add ScrollLocker feat: add ScrollLocker Dec 17, 2020
@afc163
Copy link
Member

afc163 commented Dec 17, 2020

试试 strict 模式。#174

@shaodahong
Copy link
Member Author

strict 应该不会影响,这个可以等到上层组件的时候加下看看

document.body.className = addClassName.trim();
}
}
};
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

看看这个文件有没有被 antd 和 rc-*** 依赖到。

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

没有,但是这个改造完要发 marjor,不然 rc-drawer 和 rc-dialog 别人重装会出问题

@afc163
Copy link
Member

afc163 commented Dec 24, 2020

npm 和 GitHub 都给你加了权限,自行推进吧。

另外如果升大版本,所有 rc 都要升一遍。

@shaodahong
Copy link
Member Author

npm 和 GitHub 都给你加了权限,自行推进吧。

另外如果升大版本,所有 rc 都要升一遍。

👌,那 switchScrollingEffect.js 先不删了,留着,这样发个 minor 就够了,不然发版头疼

@shaodahong shaodahong merged commit a470f80 into master Dec 24, 2020
@delete-merged-branch delete-merged-branch bot deleted the scrolllocker branch December 24, 2020 11:19
this.scrollLocker = new ScrollLocker({
container: getParent(props.getContainer) as HTMLElement,
});
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

switchScrollingEffect 里的 overflow 相关代码是不是应该清理掉。

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

另外,这里的滚动条是否出现是依赖 openCount 的。

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

switchScrollingEffect 里的 overflow 相关代码是不是应该清理掉。

switchScrollingEffect 不能动,动了算是 breaking 了,要改的东西有点多,现在这种是多了个 scrollLocker 方法供上层用

这里的滚动条是否出现是依赖 openCount 的。

不依赖 openCount ,openCount 并不是 effectCount,我现在的做法是给类似观察者,每一个 dialog 都有个属于自己的 scrollLocker,你想要锁定或者解锁都只要根据自己的业务逻辑来就行,Dialog 那边比较简单,显示就 lock,隐藏就 unLock,Drawer 有逻辑判断,并不是所有的显示都会 lock,这时候就比较好用了,还没改到 Drawer,预计问题不大,就是 Drawer 的代码有点乱,比较多的 dom 操作

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Drawer 是依赖的,多层抽屉只有关掉所有才会 unLock。

https://ant.design/components/drawer-cn/#components-drawer-demo-multi-level-drawer 这个之前是好的,后来某个版本给改挂了。

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

嗯,现在改成不依赖了,多层抽屉就是多个 Dialog,�底层都是用的这个 portal,改挂了算是意料之中,因为 openCount 所有由 portal 创建弹层的共享,我打开一个 Modal 再打开一个 Drawer 也会出问题

import switchScrollingEffect from './switchScrollingEffect';
import setStyle from './setStyle';
import canUseDom from './Dom/canUseDom';
import ScrollLocker from './Dom/scrollLocker';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里把 master 的 js 体积搞大了,看看是否是必要的。

图片

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

等都迁移了就可以把上面的 switchScrollingEffect 删了

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

不能删,老的 antd 版本会挂。

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

antd 3 么还是

@jljsj33
Copy link
Member

jljsj33 commented Dec 25, 2020

你们干了什么??咋就突然挂了???

@jljsj33
Copy link
Member

jljsj33 commented Dec 25, 2020

要不把 modal 和 drawer 重构成一个组件,,感觉两玩意是一个东西,,就样式不一样。。。

@shaodahong
Copy link
Member Author

你们干了什么??咋就突然挂了???

不知道,老的 openCount 太难改了,所以加了个 ScrollLocker,长痛不如短痛

@jljsj33
Copy link
Member

jljsj33 commented Dec 25, 2020

你们干了什么??咋就突然挂了???

不知道,老的 openCount 太难改了,所以加了个 ScrollLocker,长痛不如短痛

openCount 不就是 PortalWrapper 里的一个值,,关闭和 willUnmount 时清掉不就行了?? scrollLocker 需要改造下,,不能禁 document touchmove,问题我在 drawer 里说了。。

@jljsj33
Copy link
Member

jljsj33 commented Dec 25, 2020

我感觉你在走我的老路。。。这个滚禁只能手动去禁,滑动这玩意全部在 document 执行的,所以条件是这样,,如果是drawer 里的元素,且元素内部不出现滚动条或不在滚动范围内才使用 preventDefault,,

@shaodahong
Copy link
Member Author

那换成 document.body 就行了吧

@jljsj33
Copy link
Member

jljsj33 commented Dec 25, 2020

我记得好像也不行。不过你可以试试。。

@jljsj33
Copy link
Member

jljsj33 commented Dec 25, 2020

body 层拦掉了,,都到不了 document ,,不一样的吗??

@jljsj33
Copy link
Member

jljsj33 commented Dec 25, 2020

内容里的滚动也需要 document 的 move 来触发的。。

@jljsj33
Copy link
Member

jljsj33 commented Dec 25, 2020

要不把 modal 和 drawer 重构成一个组件,,感觉两玩意是一个东西,,就样式不一样。。。

你要不把 Portal 这块东西重构下,,,modal 和 drawer 两组件只管内容样式层的东西。。

@shaodahong
Copy link
Member Author

要不把 modal 和 drawer 重构成一个组件,,感觉两玩意是一个东西,,就样式不一样。。。

你要不把 Portal 这块东西重构下,,,modal 和 drawer 两组件只管内容样式层的东西。。

重构挺费时间的,一时半会忙不完,而且线上有问题了,不能再等了,我先删除 touchmove,把这版上了之后再好好弄下

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants