feat: Modal support loading #48848
feat: Modal support loading #48848
Conversation
|
|
|
|
👁 Visual Regression Report for PR #48848 Failed ❌
Check Full Report for details |
size-limit report 📦
|
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## feature #48848 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 746 746
Lines 13010 13020 +10
Branches 3425 3429 +4
=========================================
+ Hits 13010 13020 +10 ☔ View full report in Codecov by Sentry. |
|
这个和直接写 Skeleton 有啥区别？如果是这个层面的封装，loading 属性意义不大，别加。 |
这里还有一个 PR，是替换全部的内容，但是豆酱大佬讨论之后说，要保留 title 部分和 footer 部分： |
|
那就没意义了，这个程度的 loading 不必加。新属性还是要能解决原来不能做或者做起来很麻烦的事情。 |
更新了，把 footer 也隐藏了，只保留 title |
|
|
|
标题右边加个 LoadingIcon？ |
done |
效果看起来不好，Skeleton active 看着够了 |
Signed-off-by: 二货爱吃白萝卜 <smith3816@gmail.com>
我也偏向这点， 如果真要做这个功能，可以考虑在 modalRender={(originNode, { Title, Content, Footer }) => {
// some code
// 在这里可以对 Modal 的结构进行调整，包括 Skeleton 骨架，并且行为和 footer 的 render 一样
}}开发者使用时的示例代码（不一定准确import { Button, Modal, Skeleton } from 'antd'
import * as React from 'react'
function useTimeout(callback: () => void, delay: number) {
const savedCallback = React.useRef<() => void>()
React.useEffect(() => {
savedCallback.current = callback
}, [callback])
React.useEffect(() => {
function tick() {
savedCallback.current?.()
}
if (delay !== null) {
const id = setTimeout(tick, delay)
return () => clearTimeout(id)
}
}, [delay])
}
function Bar() {
const [loading, setLoading] = React.useState(true)
useTimeout(() => {
setLoading(false)
}, 3000)
return (
<Modal
open
// modalRender={modal => (
// <Skeleton loading={loading} active>
// {modal}
// </Skeleton>
// )}
modalRender={(originNode, { Title, Content, Footer }) => {
// some code
// 在这里可以对 Modal 的结构进行调整，包括 Skeleton 骨架，并且行为和 footer 的 render 一样
}}
footer={(originNode, { CancelBtn, OkBtn }) => {
if (loading) {
return <>{CancelBtn}</>
}
return <>{originNode}</>
}}
>
<Button
onClick={() => {
setLoading(p => !p)
setTimeout(() => {
setLoading(p => !p)
}, 3000)
}}
type="primary"
>
Toggle loading
</Button>
</Modal>
)
}
export default Bar
|
|
貌似有一些自定义 body 的需求 |
这个看起来和 Loading 没什么关系…… |
一开始是老外提的 PR，替换了全部的内容，后面发布了就没办法删了，只能在之前的基础上做优化，另外 Drawer 组件也是这样做的，两个保持一致，看起来没啥问题 |
中文版模板 / Chinese template
🤔 This is a ...
🔗 Related issue link
💡 Background and solution
📝 Changelog
☑️ Self-Check before Merge