Skip to content

feat(empty): update empty #441

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

Merged
merged 8 commits into from
Sep 11, 2024
Merged

feat(empty): update empty #441

merged 8 commits into from
Sep 11, 2024

Conversation

LuckyFBB
Copy link
Collaborator

@LuckyFBB LuckyFBB commented Jan 31, 2024

#439

更新 Empty 组件

  1. 添加 size 属性,default | large 两个值,分别对应 height: 80 和 height: 100
  2. 删除 height 属性,使用 size 来设置两种类型,其余情况可以用使用 antd4.x Empty 的 imageStyle 来替代
  3. props 继承 antd4.x EmptyProps
之前的想法(已废弃)

新增 Empty.Placeholder 组件

背景
在我们产品中,经常出现如下代码,经常使用三元运算符来判断展示什么内容

{ruleGroupList.length ? (
   <div className="dt-header-content">Content</div>
) : (
  <Empty description={<span>暂无规则集</span>} />
)}

添加 Empty.Placeholder 来简化该操作

<Empty.Placeholder show={ruleGroupList.length} description={<span>暂无规则集</span>}>
  <div className="dt-header-content">Content</div>
</Empty.Placeholder>

存在问题
在目前的组件下,我们可以通过 props 传递一下属性给到 Empty 组件。除了 show 和 children 属性是给到 Empty.PlaceHolder 组件使用的,其他的属性都是通过 ...reset 给 Empty 组件使用

<Empty description={<span>暂无规则集</span>}>
  <Button type="primary" className="btn">创建规则集</Button>
</Empty>

当我们想要展示如上的 Empty 组件的时候,目前是无法达成的。

解决方案:

  1. 增加一个新的属性,例如 emptyChildren 来传递 Empty 的 children
  2. ...(大家有没有好的思路)

方案

直接扩展 Empty 组件,采用和 Spin 组件一样的思路,如果 spinning 为 true 展示 loading,否则展示 children

传入 empty 属性,为 false 展示 children,否则展示 Empty 组件

<Empty empty={false}>More Data</Empty>

上述废弃方案中提到 antd 的 empty 中的 children,通过 extra 来重写

<Empty empty={false} extra ={"antd empty children"}>More Data</Empty>

@liuxy0551
Copy link
Collaborator

LGTM

@LuckyFBB LuckyFBB changed the title update empty and add Empty.Placeholder update empty Feb 5, 2024
@LuckyFBB LuckyFBB requested a review from HaydenOrz February 23, 2024 02:39
@LuckyFBB LuckyFBB changed the title update empty feat(empty): update empty Aug 30, 2024
@liuxy0551
Copy link
Collaborator

我看最后一个 commit 是把 isEmpty 改名为 empty,但是好像直接看整个 PR 的 diff,发现还是有 isEmpty

@LuckyFBB
Copy link
Collaborator Author

LuckyFBB commented Sep 3, 2024

我看最后一个 commit 是把 isEmpty 改名为 empty,但是好像直接看整个 PR 的 diff,发现还是有 isEmpty

改了,在 check 一下吧

@liuxy0551 liuxy0551 merged commit 264a042 into DTStack:master Sep 11, 2024
1 check passed
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.

3 participants