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.

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
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
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
1 change: 1 addition & 0 deletions README.md
Expand Up @@ -65,6 +65,7 @@ ReactDOM.render(
| title | String\|React.Element | | Title of the dialog | |
| footer | React.Element | | footer of the dialog | |
| closable | Boolean | true | whether show close button | |
| closeBtnIsDisabled | Boolean | false | whether close button is disabled | |
Ke1sy marked this conversation as resolved.
Show resolved Hide resolved
| 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
Expand Up @@ -46,6 +46,10 @@
opacity: .2;
text-decoration: none;

&:disabled {
pointer-events: none;
}

&-x:after {
content: '×'
}
Expand Down
10 changes: 9 additions & 1 deletion src/Dialog/Content/Panel.tsx
Expand Up @@ -32,6 +32,7 @@ const Panel = React.forwardRef<ContentRef, PanelProps>((props, ref) => {
footer,
closable,
closeIcon,
closeBtnIsDisabled,
onClose,
children,
bodyStyle,
Expand Down Expand Up @@ -113,7 +114,14 @@ const Panel = React.forwardRef<ContentRef, PanelProps>((props, ref) => {
let closer: React.ReactNode;
if (closable) {
closer = (
<button type="button" onClick={onClose} aria-label="Close" {...ariaProps} className={`${prefixCls}-close`}>
<button
type="button"
onClick={onClose}
aria-label="Close"
{...ariaProps}
className={`${prefixCls}-close`}
disabled={closeBtnIsDisabled}
>
{closableObj.closeIcon}
</button>
);
Expand Down
1 change: 1 addition & 0 deletions src/IDialogPropTypes.tsx
Expand Up @@ -29,6 +29,7 @@ export type IDialogPropTypes = {
afterOpenChange?: (open: boolean) => void;
onClose?: (e: SyntheticEvent) => any;
closable?: boolean | ({ closeIcon?: React.ReactNode } & React.AriaAttributes);
closeBtnIsDisabled?: boolean;
maskClosable?: boolean;
visible?: boolean;
destroyOnClose?: boolean;
Expand Down
20 changes: 20 additions & 0 deletions tests/index.spec.tsx
Expand Up @@ -102,6 +102,26 @@ describe('dialog', () => {
expect(onClose).toHaveBeenCalledTimes(1);
});

it('closeBtnIsDisabled', () => {
const onClose = jest.fn();
const wrapper = mount(<Dialog onClose={onClose} visible closeBtnIsDisabled />);
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();
});

describe('destroyOnClose', () => {
it('default is false', () => {
const wrapper = mount(
Expand Down