dialog
dialog copied to clipboard
fix: transformOrigin calculated by mousePosition on React 18
The latest updates on your projects. Learn more about Vercel for Git ↗︎
Name | Status | Preview | Updated |
---|---|---|---|
dialog | ✅ Ready (Inspect) | Visit Preview | Oct 29, 2022 at 9:20AM (UTC) |
Codecov Report
Merging #292 (ce40350) into master (c49bc5e) will not change coverage. The diff coverage is
100.00%
.
@@ Coverage Diff @@
## master #292 +/- ##
=======================================
Coverage 98.69% 98.69%
=======================================
Files 7 7
Lines 153 153
Branches 47 47
=======================================
Hits 151 151
Misses 1 1
Partials 1 1
Impacted Files | Coverage Δ | |
---|---|---|
src/Dialog/index.tsx | 100.00% <100.00%> (ø) |
:mega: We’re building smart automated test selection to slash your CI/CD build times. Learn more
这个问题原因是 rc-dialog
中 onEnterPrepare
函数里 offset
没有取到 left
和 top
参数,导致没有计算出 transformOrigin
。
原因是打开 Modal 的时候 .rc-dialog-wrap
元素上的 display: none
没有立即去掉,导致 el.getBoundingClientRect()
获取的值都是 0
。
改成 useLayoutEffect
后,的确可以让 setAnimatedVisible(true)
快点生效,从而让 display: none
立即去掉。
(因为父元素有 display: none
的时候,子元素是无法从 getBoundingClientRect()
得到结果的。)
<div
tabIndex={-1}
onKeyDown={onWrapperKeyDown}
className={classNames(`${prefixCls}-wrap`, wrapClassName)}
ref={wrapperRef}
onClick={onWrapperClick}
style={{ zIndex, ...wrapStyle, display: !animatedVisible ? 'none' : null }}
{...wrapProps}
>
不过这样 SSR 下不知道有没有坑。。好像改成 useMemo
也可以?
Next 下得跑跑看。。。没问题就合并叭。。。坐等解决
@zombieJ 大佬抽空看看8
@zombieJ 看看
我自己测试发现主要原因是useEffect和useLayoutEffect里setState后组件rerender的顺序,React17和React18下表现略有不同。
改为使用rc-util的useLayoutEffect,会判断在ssr环境中切换成useEffect
/rebase