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

improve(design): Modal destroyOnClose set to true by default #530

Merged
merged 1 commit into from
Mar 27, 2024
Merged

improve(design): Modal destroyOnClose set to true by default #530

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
2 changes: 2 additions & 0 deletions packages/design/src/drawer/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ nav:
- 按钮区和主按钮位置居左展示。
- 内容区滚动时，动态设置页头和页脚的阴影。
- 当内容高度大于等于抽屉高度时，页脚会置底展示；当内容高度小于抽屉高度时，`footer` 会跟随内容展示。
- 📢 `destroyOnClose` 属性的默认值为 true。
- 🆕 新增 `footer` 属性，用于设置抽屉的底部内容，默认为 `取消` 和 `确定` 按钮。
- 🆕 新增 `footerExtra` 属性，用于设置抽屉底部的额外内容，仅默认页脚生效。
- 🆕 新增 `onOk` 和 `onCancel` 属性，用于设置 `取消` 和 `确定` 按钮的回调。
Expand Down Expand Up @@ -39,6 +40,7 @@ nav:

| 参数 | 说明 | 类型 | 默认值 | 版本 |
| :------------- | :--------------------------------- | :------------------- | :----- | :--- |
| destroyOnClose | 关闭时销毁 Modal 里的子元素 | boolean | true | - |
| onOk | 点击确定回调，设置时会开启默认页脚 | (e) => void | - | - |
| onCancel | 点击取消按钮的回调 | (e) => void | - | - |
| cancelText | 设置取消按钮文字 | string | 取消 | - |
Expand Down
9 changes: 8 additions & 1 deletion packages/design/src/modal/Modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,14 @@ const Modal = ({ prefixCls: customizePrefixCls, className, ...restProps }: Modal
const { wrapSSR } = useStyle(prefixCls);
const modalCls = classNames(className);

return wrapSSR(<AntModal prefixCls={customizePrefixCls} className={modalCls} {...restProps} />);
return wrapSSR(
<AntModal
destroyOnClose={true}
prefixCls={customizePrefixCls}
className={modalCls}
{...restProps}
/>
);
};

// 替换 Modal 上的静态方法，支持消费 ConfigProvider 配置
Expand Down
8 changes: 7 additions & 1 deletion packages/design/src/modal/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ nav:

- 🔥 完全继承 antd [Modal](https://ant.design/components/modal-cn) 的能力和 API，可无缝切换。
- 💄 定制主题和样式，符合 OceanBase Design 设计规范。
- 📢 `destroyOnClose` 属性的默认值为 true。
- 🆕 新增 `Modal.Progress` 组件，可用于异步任务或耗时较长的场景。
- 🆕 `Modal.method()` 静态方法，支持消费 `ConfigProvider` 全局配置。

Expand All @@ -23,14 +24,19 @@ nav:

### Modal

- 详见 antd Modal 文档: https://ant.design/components/modal-cn#api
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| :------------- | :-------------------------- | :------ | :----- | :---- |
| destroyOnClose | 关闭时销毁 Modal 里的子元素 | boolean | true | 0.3.1 |

- 更多 API 详见 antd Modal 文档: https://ant.design/components/modal-cn#api

### Modal.Progress

| 参数 | 说明 | 类型 | 默认值 | 版本 |
| :-- | :-- | :-- | :-- | :-- |
| width | 对话框宽度 | string \| number | 480 | - |
| maskClosable | 点击蒙层是否允许关闭 | boolean | false | - |
| destroyOnClose | 关闭时销毁 Modal 里的子元素 | boolean | true | 0.3.1 |
| title | 标题 | ReactNode | - | - |
| loading | 是否加载中 | boolean | false | - |
| progress | 进度条属性 | [ProgressProps](https://ant-design.antgroup.com/components/progress-cn#api) | `{ type: 'circle', size: 150 }` | - |
Expand Down
Loading