Skip to content
This repository was archived by the owner on Aug 11, 2021. It is now read-only.

Commit 29e1b98

Browse files
YiinYiin
committed
size prop for DialogModal
Fixes https://gitlab.protontech.ch/ProtonVPN/web/protonvpn-settings/issues/65
1 parent d65a9dc commit 29e1b98

File tree

16 files changed

+68
-63
lines changed

16 files changed

+68
-63
lines changed

‎components/modal/Confirm.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ const Confirm = ({
2222
title={title}
2323
close={cancel}
2424
submit={confirm}
25-
small
25+
size="small"
2626
{...rest}
2727
>
2828
{children}

components/modal/Dialog.js renamed to components/modal/Dialog.tsx

Lines changed: 34 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,46 @@
11
import React from 'react';
2-
import PropTypes from 'prop-types';
32
import Portal from '../portal/Portal';
43
import { classnames } from '../../helpers/component';
54

65
const CLASSES = {
76
MODAL: 'pm-modal',
87
MODAL_OUT: 'pm-modalOut',
9-
MODAL_SMALL: 'pm-modal--smaller'
8+
MODAL_SMALL: 'pm-modal--smaller',
9+
MODAL_WIDE: 'pm-modal--wider',
10+
MODAL_FULL: 'pm-modal--full',
11+
MODAL_AUTO: 'pm-modal--auto'
1012
};
1113

12-
/** @type any */
14+
export interface Props {
15+
onExit: () => void;
16+
onClose: () => void;
17+
children: React.ReactNode;
18+
modalTitleID: string;
19+
className?: string;
20+
size?: 'small' | 'wide' | 'full' | 'auto';
21+
isBehind?: boolean;
22+
isClosing?: boolean;
23+
}
24+
1325
const Dialog = ({
1426
onExit,
15-
small: isSmall = false,
27+
size,
1628
isClosing = false,
17-
// eslint-disable-next-line no-unused-vars,@typescript-eslint/no-unused-vars
18-
isFirst = false,
19-
// eslint-disable-next-line no-unused-vars,@typescript-eslint/no-unused-vars
20-
isLast = false,
2129
isBehind = false,
2230
modalTitleID,
2331
children,
2432
className: extraClassNames = '',
2533
...rest
26-
}) => {
27-
const handleAnimationEnd = ({ animationName }) => {
28-
if (animationName === CLASSES.MODAL_OUT && isClosing) {
29-
onExit && onExit();
34+
}: Props) => {
35+
const handleAnimationEnd = ({ animationName }: React.AnimationEvent<HTMLDialogElement>) => {
36+
if (animationName !== CLASSES.MODAL_OUT) {
37+
return;
38+
}
39+
if (!isClosing) {
40+
return;
41+
}
42+
if (onExit) {
43+
onExit();
3044
}
3145
};
3246

@@ -40,8 +54,14 @@ const Dialog = ({
4054
open
4155
className={classnames([
4256
CLASSES.MODAL,
43-
isSmall && CLASSES.MODAL_SMALL,
44-
isSmall && 'pm-modal--shorterLabels',
57+
size &&
58+
{
59+
small: CLASSES.MODAL_SMALL,
60+
wide: CLASSES.MODAL_WIDE,
61+
full: CLASSES.MODAL_FULL,
62+
auto: CLASSES.MODAL_AUTO
63+
}[size],
64+
size === 'small' && 'pm-modal--shorterLabels',
4565
isClosing && CLASSES.MODAL_OUT,
4666
extraClassNames
4767
])}
@@ -55,17 +75,4 @@ const Dialog = ({
5575
);
5676
};
5777

58-
Dialog.propTypes = {
59-
onExit: PropTypes.func.isRequired,
60-
onClose: PropTypes.func.isRequired,
61-
children: PropTypes.node.isRequired,
62-
modalTitleID: PropTypes.string.isRequired,
63-
className: PropTypes.string,
64-
small: PropTypes.bool,
65-
isBehind: PropTypes.bool,
66-
isFirst: PropTypes.bool,
67-
isLast: PropTypes.bool,
68-
isClosing: PropTypes.bool
69-
};
70-
7178
export default Dialog;

components/modal/FormModal.js renamed to components/modal/FormModal.tsx

Lines changed: 20 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from 'react';
2-
import PropTypes from 'prop-types';
32
import {
43
FooterModal,
54
DialogModal,
5+
DialogModalProps,
66
HeaderModal,
77
ContentModal,
88
InnerModal,
@@ -11,7 +11,24 @@ import {
1111
} from 'react-components';
1212
import { c } from 'ttag';
1313

14-
/** @type any */
14+
interface Props extends DialogModalProps {
15+
modalTitleID?: string;
16+
footer?: React.ReactNode;
17+
onClose: () => void;
18+
onSubmit?: () => void;
19+
title: string;
20+
children: React.ReactNode;
21+
loading?: boolean;
22+
submit?: React.ReactNode;
23+
close?: React.ReactNode;
24+
noValidate?: boolean;
25+
background?: boolean;
26+
hasSubmit?: boolean;
27+
hasClose?: boolean;
28+
disableCloseOnLocation?: boolean;
29+
disableCloseOnOnEscape?: boolean;
30+
}
31+
1532
const Modal = ({
1633
onClose,
1734
onSubmit,
@@ -31,7 +48,7 @@ const Modal = ({
3148
// eslint-disable-next-line no-unused-vars,@typescript-eslint/no-unused-vars
3249
disableCloseOnOnEscape,
3350
...rest
34-
}) => {
51+
}: Props) => {
3552
// Because we will forget
3653
if (!['isClosing', 'isBehind', 'onExit'].every((key) => rest.hasOwnProperty(key))) {
3754
console.warn(`You must pass props to <FormModal ...rest>,
@@ -93,23 +110,4 @@ function DemoModal({ onAdd, ...rest }) {
93110
);
94111
};
95112

96-
Modal.propTypes = {
97-
...DialogModal.propTypes,
98-
modalTitleID: PropTypes.string,
99-
onClose: PropTypes.func.isRequired,
100-
onSubmit: PropTypes.func,
101-
title: PropTypes.string.isRequired,
102-
children: PropTypes.node.isRequired,
103-
loading: PropTypes.bool,
104-
submit: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
105-
close: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
106-
noValidate: PropTypes.bool,
107-
small: PropTypes.bool,
108-
background: PropTypes.bool,
109-
hasSubmit: PropTypes.bool,
110-
hasClose: PropTypes.bool,
111-
disableCloseOnLocation: PropTypes.bool,
112-
disableCloseOnOnEscape: PropTypes.bool
113-
};
114-
115113
export default Modal;

‎components/modal/Input.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ const InputModal = ({
4848
close={cancel}
4949
submit={submit}
5050
title={title}
51-
small
51+
size="small"
5252
{...rest}
5353
>
5454
<Row>

‎containers/invoices/InvoiceTextModal.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const InvoiceTextModal = ({ onClose, ...rest }) => {
3131

3232
return (
3333
<FormModal
34-
small
34+
size="small"
3535
onClose={onClose}
3636
onSubmit={handleSubmit}
3737
loading={loading}

‎containers/invoices/PayInvoiceModal.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ const PayInvoiceModal = ({ invoice, fetchInvoices, ...rest }) => {
4343

4444
return (
4545
<FormModal
46-
small
46+
size="small"
4747
onSubmit={() => withLoading(handleSubmit())}
4848
loading={loading}
4949
close={c('Action').t`Close`}

‎containers/login/UnlockModal.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ const UnlockModal = ({ onClose, onSuccess, ...rest }) => {
3434
close={c('Label').t`Cancel`}
3535
submit={c('Label').t`Submit`}
3636
loading={loading}
37-
small
37+
size="small"
3838
{...rest}
3939
>
4040
<Row>

‎containers/members/EditMemberModal.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ const EditMemberModal = ({ onClose, member, ...rest }) => {
5454
loading={loading}
5555
save={c('Action').t`Save`}
5656
title={c('Title').t`Edit user`}
57-
small
57+
size="small"
5858
{...rest}
5959
>
6060
<Row>

‎containers/password/AskAuthModal.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const AskAuthModal = ({ onClose, onSubmit, error, hideTotp, ...rest }) => {
1818
close={c('Label').t`Cancel`}
1919
submit={c('Label').t`Submit`}
2020
error={error}
21-
small
21+
size="small"
2222
{...rest}
2323
>
2424
<PasswordTotpInputs

‎containers/payments/EditCardModal.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ const EditCardModal = ({ card: existingCard, onClose, onChange, ...rest }) => {
4343

4444
return (
4545
<FormModal
46-
small
46+
size="small"
4747
onSubmit={(event) => withLoading(handleSubmit(event))}
4848
onClose={onClose}
4949
title={title}

0 commit comments

Comments
 (0)