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

Feat: Add prop to disable close button #416

Merged
merged 6 commits into from
May 28, 2024
+38 −2
Merged

Feat: Add prop to disable close button #416

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
18884a1
Add prop to disable close button
Apr 24, 2024
e6f8250
renamed prop to `disableCloseBtn`
Apr 29, 2024
fc6c5c4
Merge branch 'master' into feat/disable-close-button
Ke1sy May 16, 2024
4f074bd
removed empty line
Ke1sy May 16, 2024
f2f6725
added 'disable' to closable
May 28, 2024
fc6f5b6
readme update
May 28, 2024
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: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ ReactDOM.render(
| maskTransitionName | String | | mask animation css class name | |
| title | String\|React.Element | | Title of the dialog | |
| footer | React.Element | | footer of the dialog | |
| closable | Boolean | true | whether show close button | |
| closable | Boolean \| ({ closeIcon?: React.ReactNode; disabled?: boolean } & React.AriaAttributes | true | whether show close button | |
| mask | Boolean | true | whether show mask | |
| maskClosable | Boolean | true | whether click mask to close | |
| keyboard | Boolean | true | whether support press esc to close | |
Expand Down
4 changes: 4 additions & 0 deletions assets/index/Dialog.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,10 @@
opacity: .2;
text-decoration: none;

&:disabled {
pointer-events: none;
}

&-x:after {
content: '×'
}
Expand Down
2 changes: 2 additions & 0 deletions src/Dialog/Content/Panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,7 @@ const Panel = React.forwardRef<ContentRef, PanelProps>((props, ref) => {
}, [closable, closeIcon, prefixCls]);

const ariaProps = pickAttrs(closableObj, true);
const closeBtnIsDisabled = typeof(closable) === 'object' && closable.disabled;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

原来 typeof 还能当函数调用，学到了

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

是的，typeof 后面跟着括号的用法在 JavaScript 中是有效的，但这实际上与函数调用不同。当你写 typeof(123) 时，括号在这里起到的是分组操作符的作用，而不是表示函数调用。这意味着括号内的表达式会被首先计算，然后 typeof 操作符应用于该表达式的结果。

这里是一些例子来说明这一点:

console.log(typeof(123)); // 输出: "number"
console.log(typeof("hello")); // 输出: "string"
console.log(typeof(true)); // 输出: "boolean"

在以上例子中，括号的使用并没有改变 typeof 的行为。它们仅仅是在语法上明确了 typeof 操作符作用的对象，特别是在表达式较为复杂时，使用括号可以帮助提高代码的可读性。

此外，你会注意到无论是使用括号 typeof(123) 还是不使用括号 typeof 123，结果都是相同的。这是因为 typeof 后面紧跟着的表达式（无论是否包含在括号中）都会被评估，然后 typeof 返回该表达式的类型。因此，即使 typeof 可以与括号一起使用，这并不意味着它是以函数的形式被调用。


const closerNode = closable ? (
<button
Expand All @@ -120,6 +121,7 @@ const Panel = React.forwardRef<ContentRef, PanelProps>((props, ref) => {
aria-label="Close"
{...ariaProps}
className={`${prefixCls}-close`}
disabled={closeBtnIsDisabled}
>
{closableObj.closeIcon}
</button>
Expand Down
2 changes: 1 addition & 1 deletion src/IDialogPropTypes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export type IDialogPropTypes = {
afterClose?: () => any;
afterOpenChange?: (open: boolean) => void;
onClose?: (e: SyntheticEvent) => any;
closable?: boolean | ({ closeIcon?: React.ReactNode } & React.AriaAttributes);
closable?: boolean | ({ closeIcon?: React.ReactNode; disabled?: boolean } & React.AriaAttributes);
maskClosable?: boolean;
visible?: boolean;
destroyOnClose?: boolean;
Expand Down
30 changes: 30 additions & 0 deletions tests/index.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -665,6 +665,36 @@ describe('dialog', () => {
wrapper.update();
expect(onClose).toHaveBeenCalledTimes(1);
});

it('support disable button in closable', () => {
const onClose = jest.fn();
const wrapper = mount(
<Dialog
closable={{
closeIcon:"test",
disabled: true,
}}
visible
onClose={onClose}
/>
);
jest.runAllTimers();
wrapper.update();

const btn = wrapper.find('.rc-dialog-close');
expect(btn.prop('disabled')).toBe(true);
btn.simulate('click');

jest.runAllTimers();
wrapper.update();
expect(onClose).not.toHaveBeenCalled();

btn.simulate('keydown', { key: 'Enter' });
jest.runAllTimers();
wrapper.update();
expect(onClose).not.toHaveBeenCalled();
});

it('should not display closeIcon when closable is false', () => {
const onClose = jest.fn();
const wrapper = mount(
Expand Down
Loading