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

Jump to bottom

feat: Modal.xxx supports footer #39048

Merged
merged 11 commits into from Dec 7, 2022
Merged

feat: Modal.xxx supports footer #39048

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
0b241ff
Add Func Modal footer
owjs3901 Nov 28, 2022
1eabc72
Update ConfirmDialog.tsx
owjs3901 Dec 1, 2022
bc536a5
Add test
owjs3901 Dec 5, 2022
4c7399d
Update snap
owjs3901 Dec 5, 2022
17ed0bf
Update snap
owjs3901 Dec 5, 2022
e4238d5
Rollback package.json
owjs3901 Dec 5, 2022
5ddacce
refactor(Menu): rewrite CC => FC (#38751)
li-jia-nan Nov 21, 2022
5097f3a
feat(tour): TourStepProps ButtonProps ts definition update (#38939)
ONLY-yours Nov 24, 2022
f71c9d7
Merge branch 'feature' of https://github.com/ant-design/ant-design in…
owjs3901 Dec 5, 2022
9e0441a
Update components/modal/index.zh-CN.md
afc163 Dec 7, 2022
709cbd8
Update components/modal/index.en-US.md
afc163 Dec 7, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
40 changes: 20 additions & 20 deletions components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
View file
Open in desktop
Expand Up @@ -40280,7 +40280,7 @@ exports[`ConfigProvider components Tree configProvider 1`] = `
<div
aria-hidden="true"
class="config-tree-treenode"
style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
>
<div
class="config-tree-indent"
Expand Down Expand Up @@ -40345,7 +40345,7 @@ exports[`ConfigProvider components Tree configProvider 1`] = `
<div
aria-hidden="true"
class="config-tree-treenode"
style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
>
<div
class="config-tree-indent"
Expand Down Expand Up @@ -40438,7 +40438,7 @@ exports[`ConfigProvider components Tree configProvider componentDisabled 1`] = `
<div
aria-hidden="true"
class="config-tree-treenode"
style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
>
<div
class="config-tree-indent"
Expand Down Expand Up @@ -40503,7 +40503,7 @@ exports[`ConfigProvider components Tree configProvider componentDisabled 1`] = `
<div
aria-hidden="true"
class="config-tree-treenode"
style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
>
<div
class="config-tree-indent"
Expand Down Expand Up @@ -40596,7 +40596,7 @@ exports[`ConfigProvider components Tree configProvider componentSize large 1`] =
<div
aria-hidden="true"
class="config-tree-treenode"
style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
owjs3901 marked this conversation as resolved.
Show resolved Hide resolved
>
<div
class="config-tree-indent"
Expand Down Expand Up @@ -40661,7 +40661,7 @@ exports[`ConfigProvider components Tree configProvider componentSize large 1`] =
<div
aria-hidden="true"
class="config-tree-treenode"
style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
>
<div
class="config-tree-indent"
Expand Down Expand Up @@ -40754,7 +40754,7 @@ exports[`ConfigProvider components Tree configProvider componentSize middle 1`]
<div
aria-hidden="true"
class="config-tree-treenode"
style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
>
<div
class="config-tree-indent"
Expand Down Expand Up @@ -40819,7 +40819,7 @@ exports[`ConfigProvider components Tree configProvider componentSize middle 1`]
<div
aria-hidden="true"
class="config-tree-treenode"
style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
>
<div
class="config-tree-indent"
Expand Down Expand Up @@ -40912,7 +40912,7 @@ exports[`ConfigProvider components Tree configProvider virtual and dropdownMatch
<div
aria-hidden="true"
class="ant-tree-treenode"
style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
>
<div
class="ant-tree-indent"
Expand Down Expand Up @@ -40977,7 +40977,7 @@ exports[`ConfigProvider components Tree configProvider virtual and dropdownMatch
<div
aria-hidden="true"
class="ant-tree-treenode"
style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
>
<div
class="ant-tree-indent"
Expand Down Expand Up @@ -41070,7 +41070,7 @@ exports[`ConfigProvider components Tree normal 1`] = `
<div
aria-hidden="true"
class="ant-tree-treenode"
style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
>
<div
class="ant-tree-indent"
Expand Down Expand Up @@ -41135,7 +41135,7 @@ exports[`ConfigProvider components Tree normal 1`] = `
<div
aria-hidden="true"
class="ant-tree-treenode"
style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
>
<div
class="ant-tree-indent"
Expand Down Expand Up @@ -41228,7 +41228,7 @@ exports[`ConfigProvider components Tree prefixCls 1`] = `
<div
aria-hidden="true"
class="prefix-Tree-treenode"
style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
>
<div
class="prefix-Tree-indent"
Expand Down Expand Up @@ -41293,7 +41293,7 @@ exports[`ConfigProvider components Tree prefixCls 1`] = `
<div
aria-hidden="true"
class="prefix-Tree-treenode"
style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
>
<div
class="prefix-Tree-indent"
Expand Down Expand Up @@ -41422,7 +41422,7 @@ exports[`ConfigProvider components TreeSelect configProvider 1`] = `
<div
aria-hidden="true"
class="config-select-tree-treenode"
style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
>
<div
class="config-select-tree-indent"
Expand Down Expand Up @@ -41620,7 +41620,7 @@ exports[`ConfigProvider components TreeSelect configProvider componentSize large
<div
aria-hidden="true"
class="config-select-tree-treenode"
style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
>
<div
class="config-select-tree-indent"
Expand Down Expand Up @@ -41757,7 +41757,7 @@ exports[`ConfigProvider components TreeSelect configProvider componentSize middl
<div
aria-hidden="true"
class="config-select-tree-treenode"
style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
>
<div
class="config-select-tree-indent"
Expand Down Expand Up @@ -41894,7 +41894,7 @@ exports[`ConfigProvider components TreeSelect configProvider virtual and dropdow
<div
aria-hidden="true"
class="ant-select-tree-treenode"
style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
>
<div
class="ant-select-tree-indent"
Expand Down Expand Up @@ -42031,7 +42031,7 @@ exports[`ConfigProvider components TreeSelect normal 1`] = `
<div
aria-hidden="true"
class="ant-select-tree-treenode"
style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
>
<div
class="ant-select-tree-indent"
Expand Down Expand Up @@ -42168,7 +42168,7 @@ exports[`ConfigProvider components TreeSelect prefixCls 1`] = `
<div
aria-hidden="true"
class="prefix-TreeSelect-tree-treenode"
style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
>
<div
class="prefix-TreeSelect-tree-indent"
Expand Down
6 changes: 3 additions & 3 deletions components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
View file
Open in desktop
Expand Up @@ -2764,7 +2764,7 @@ Array [
<div
aria-hidden="true"
class="ant-select-tree-treenode"
style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
>
<div
class="ant-select-tree-indent"
Expand Down Expand Up @@ -9875,7 +9875,7 @@ exports[`renders ./components/form/demo/size.tsx extend context correctly 1`] =
<div
aria-hidden="true"
class="ant-select-tree-treenode"
style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
>
<div
class="ant-select-tree-indent"
Expand Down Expand Up @@ -24461,7 +24461,7 @@ exports[`renders ./components/form/demo/validate-static.tsx extend context corre
<div
aria-hidden="true"
class="ant-select-tree-treenode"
style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
>
<div
class="ant-select-tree-indent"
Expand Down
32 changes: 18 additions & 14 deletions components/modal/ConfirmDialog.tsx
View file
Open in desktop
Expand Up @@ -41,7 +41,7 @@ export function ConfirmContent(
rootPrefixCls,
type,
okCancel,

footer,
// Legacy for static function usage
locale: staticLocale,
} = props;
Expand Down Expand Up @@ -107,19 +107,23 @@ export function ConfirmContent(
)}
<div className={`${confirmPrefixCls}-content`}>{props.content}</div>
</div>
<div className={`${confirmPrefixCls}-btns`}>
{cancelButton}
<ActionButton
type={okType}
actionFn={onOk}
close={close}
autoFocus={autoFocusButton === 'ok'}
buttonProps={okButtonProps}
prefixCls={`${rootPrefixCls}-btn`}
>
{okText || (mergedOkCancel ? mergedLocale?.okText : mergedLocale?.justOkText)}
</ActionButton>
</div>
{footer !== undefined ? (
footer
) : (
<div className={`${confirmPrefixCls}-btns`}>
{cancelButton}
<ActionButton
type={okType}
actionFn={onOk}
close={close}
autoFocus={autoFocusButton === 'ok'}
buttonProps={okButtonProps}
prefixCls={`${rootPrefixCls}-btn`}
>
{okText || (mergedOkCancel ? mergedLocale?.okText : mergedLocale?.justOkText)}
</ActionButton>
</div>
)}
</div>
);
}}
Expand Down
1 change: 1 addition & 0 deletions components/modal/Modal.tsx
View file
Open in desktop
Expand Up @@ -131,6 +131,7 @@ export interface ModalFuncProps {
direction?: DirectionType;
bodyStyle?: React.CSSProperties;
closeIcon?: React.ReactNode;
footer?: React.ReactNode;
modalRender?: (node: React.ReactNode) => React.ReactNode;
focusTriggerAfterClose?: boolean;
}
Expand Down
24 changes: 24 additions & 0 deletions components/modal/__tests__/confirm.test.tsx
View file
Open in desktop
Expand Up @@ -703,4 +703,28 @@ describe('Modal.confirm triggers callbacks correctly', () => {
jest.useRealTimers();
errSpy.mockRestore();
});

it('null of Footer', async () => {
Modal.confirm({
footer: null,
});

await waitFakeTimer();

expect($$('.ant-modal-confirm-btns')).toHaveLength(0);
});

it('Update Footer', async () => {
Modal.confirm({
footer: (
<div>
<button className="custom-modal-footer" type="button">
Custom Modal Footer
</button>
</div>
),
});
await waitFakeTimer();
expect($$('.custom-modal-footer')).toHaveLength(1);
});
});
1 change: 1 addition & 0 deletions components/modal/index.en-US.md
View file
Open in desktop
Expand Up @@ -97,6 +97,7 @@ The items listed above are all functions, expecting a settings object as paramet
| closable | Whether a close (x) button is visible on top right of the confirm dialog or not | boolean | false | 4.9.0 |
| closeIcon | Custom close icon | ReactNode | undefined | 4.9.0 |
| content | Content | ReactNode | - | |
| footer | Footer content, set as `footer: null` when you don't need default buttons | ReactNode | - | |
afc163 marked this conversation as resolved.
Show resolved Hide resolved
| getContainer | Return the mount node for Modal | HTMLElement \| () => HTMLElement \| Selectors \| false | document.body | |
| icon | Custom icon | ReactNode | &lt;QuestionCircle /> | |
| keyboard | Whether support press esc to close | boolean | true | |
Expand Down
1 change: 1 addition & 0 deletions components/modal/index.zh-CN.md
View file
Open in desktop
Expand Up @@ -100,6 +100,7 @@ demo:
| closable | 是否显示右上角的关闭按钮 | boolean | false | 4.9.0 |
| closeIcon | 自定义关闭图标 | ReactNode | undefined | 4.9.0 |
| content | 内容 | ReactNode | - | |
| footer | 底部内容，当不需要默认底部按钮时，可以设为 `footer: null` | ReactNode | - | |
afc163 marked this conversation as resolved.
Show resolved Hide resolved
| getContainer | 指定 Modal 挂载的 HTML 节点, false 为挂载在当前 dom | HTMLElement \| () => HTMLElement \| Selectors \| false | document.body | |
| icon | 自定义图标 | ReactNode | &lt;QuestionCircle /> | |
| keyboard | 是否支持键盘 esc 关闭 | boolean | true | |
Expand Down
2 changes: 1 addition & 1 deletion components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
View file
Open in desktop
Expand Up @@ -7973,7 +7973,7 @@ exports[`renders ./components/space/demo/compact.tsx extend context correctly 1`
<div
aria-hidden="true"
class="ant-select-tree-treenode"
style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
>
<div
class="ant-select-tree-indent"
Expand Down
4 changes: 2 additions & 2 deletions components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
View file
Open in desktop
Expand Up @@ -7131,7 +7131,7 @@ exports[`renders ./components/table/demo/filter-in-tree.tsx extend context corre
<div
aria-hidden="true"
class="ant-tree-treenode"
style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
>
<div
class="ant-tree-indent"
Expand Down Expand Up @@ -8127,7 +8127,7 @@ exports[`renders ./components/table/demo/filter-search.tsx extend context correc
<div
aria-hidden="true"
class="ant-tree-treenode"
style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
>
<div
class="ant-tree-indent"
Expand Down
2 changes: 1 addition & 1 deletion components/transfer/__tests__/__snapshots__/demo-extend.test.ts.snap
View file
Open in desktop
Expand Up @@ -7788,7 +7788,7 @@ exports[`renders ./components/transfer/demo/tree-transfer.tsx extend context cor
<div
aria-hidden="true"
class="ant-tree-treenode"
style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
>
<div
class="ant-tree-indent"
Expand Down
2 changes: 1 addition & 1 deletion components/transfer/__tests__/__snapshots__/demo.test.ts.snap
View file
Open in desktop
Expand Up @@ -5153,7 +5153,7 @@ exports[`renders ./components/transfer/demo/tree-transfer.tsx correctly 1`] = `
<div
aria-hidden="true"
class="ant-tree-treenode"
style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
>
<div
class="ant-tree-indent"
Expand Down