Refactor modals to use size property

components/modal/Confirm.js

@@ -22,7 +22,7 @@ const Confirm = ({
             title={title}
             close={cancel}
             submit={confirm}
-            small
+            size="small"
             {...rest}
         >
             {children}

components/modal/Dialog.js → components/modal/Dialog.tsx

@@ -1,32 +1,46 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import Portal from '../portal/Portal';
 import { classnames } from '../../helpers/component';
 
 const CLASSES = {
     MODAL: 'pm-modal',
     MODAL_OUT: 'pm-modalOut',
-    MODAL_SMALL: 'pm-modal--smaller'
+    MODAL_SMALL: 'pm-modal--smaller',
+    MODAL_WIDE: 'pm-modal--wider',
+    MODAL_FULL: 'pm-modal--full',
+    MODAL_AUTO: 'pm-modal--auto'
 };
 
-/** @type any */
+export interface Props {
+    onExit: () => void;
+    onClose: () => void;
+    children: React.ReactNode;
+    modalTitleID: string;
+    className?: string;
+    size?: 'small' | 'wide' | 'full' | 'auto';
+    isBehind?: boolean;
+    isClosing?: boolean;
+}
+
 const Dialog = ({
     onExit,
-    small: isSmall = false,
+    size,
     isClosing = false,
-    // eslint-disable-next-line no-unused-vars,@typescript-eslint/no-unused-vars
-    isFirst = false,
-    // eslint-disable-next-line no-unused-vars,@typescript-eslint/no-unused-vars
-    isLast = false,
     isBehind = false,
     modalTitleID,
     children,
     className: extraClassNames = '',
     ...rest
-}) => {
-    const handleAnimationEnd = ({ animationName }) => {
-        if (animationName === CLASSES.MODAL_OUT && isClosing) {
-            onExit && onExit();
+}: Props) => {
+    const handleAnimationEnd = ({ animationName }: React.AnimationEvent<HTMLDialogElement>) => {
+        if (animationName !== CLASSES.MODAL_OUT) {
+            return;
+        }
+        if (!isClosing) {
+            return;
+        }
+        if (onExit) {
+            onExit();
         }
     };
 
@@ -40,8 +54,14 @@ const Dialog = ({
                     open
                     className={classnames([
                         CLASSES.MODAL,
-                        isSmall && CLASSES.MODAL_SMALL,
-                        isSmall && 'pm-modal--shorterLabels',
+                        size &&
+                            {
+                                small: CLASSES.MODAL_SMALL,
+                                wide: CLASSES.MODAL_WIDE,
+                                full: CLASSES.MODAL_FULL,
+                                auto: CLASSES.MODAL_AUTO
+                            }[size],
+                        size === 'small' && 'pm-modal--shorterLabels',
                         isClosing && CLASSES.MODAL_OUT,
                         extraClassNames
                     ])}
@@ -55,17 +75,4 @@ const Dialog = ({
     );
 };
 
-Dialog.propTypes = {
-    onExit: PropTypes.func.isRequired,
-    onClose: PropTypes.func.isRequired,
-    children: PropTypes.node.isRequired,
-    modalTitleID: PropTypes.string.isRequired,
-    className: PropTypes.string,
-    small: PropTypes.bool,
-    isBehind: PropTypes.bool,
-    isFirst: PropTypes.bool,
-    isLast: PropTypes.bool,
-    isClosing: PropTypes.bool
-};
-
 export default Dialog;

components/modal/FormModal.js → components/modal/FormModal.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import {
     FooterModal,
     DialogModal,
+    DialogModalProps,
     HeaderModal,
     ContentModal,
     InnerModal,
@@ -11,7 +11,24 @@ import {
 } from 'react-components';
 import { c } from 'ttag';
 
-/** @type any */
+interface Props extends DialogModalProps {
+    modalTitleID?: string;
+    footer?: React.ReactNode;
+    onClose: () => void;
+    onSubmit?: () => void;
+    title: React.ReactNode;
+    children: React.ReactNode;
+    loading?: boolean;
+    submit?: React.ReactNode;
+    close?: React.ReactNode;
+    noValidate?: boolean;
+    background?: boolean;
+    hasSubmit?: boolean;
+    hasClose?: boolean;
+    disableCloseOnLocation?: boolean;
+    disableCloseOnOnEscape?: boolean;
+}
+
 const Modal = ({
     onClose,
     onSubmit,
@@ -31,7 +48,7 @@ const Modal = ({
     // eslint-disable-next-line no-unused-vars,@typescript-eslint/no-unused-vars
     disableCloseOnOnEscape,
     ...rest
-}) => {
+}: Props) => {
     // Because we will forget
     if (!['isClosing', 'isBehind', 'onExit'].every((key) => rest.hasOwnProperty(key))) {
         console.warn(`You must pass props to <FormModal ...rest>,
@@ -93,23 +110,4 @@ function DemoModal({ onAdd, ...rest }) {
     );
 };
 
-Modal.propTypes = {
-    ...DialogModal.propTypes,
-    modalTitleID: PropTypes.string,
-    onClose: PropTypes.func.isRequired,
-    onSubmit: PropTypes.func,
-    title: PropTypes.node,
-    children: PropTypes.node.isRequired,
-    loading: PropTypes.bool,
-    submit: PropTypes.node,
-    close: PropTypes.node,
-    noValidate: PropTypes.bool,
-    small: PropTypes.bool,
-    background: PropTypes.bool,
-    hasSubmit: PropTypes.bool,
-    hasClose: PropTypes.bool,
-    disableCloseOnLocation: PropTypes.bool,
-    disableCloseOnOnEscape: PropTypes.bool
-};
-
 export default Modal;

components/modal/Input.js

@@ -48,7 +48,7 @@ const InputModal = ({
             close={cancel}
             submit={submit}
             title={title}
-            small
+            size="small"
             {...rest}
         >
             <Row>

containers/invoices/InvoiceTextModal.js

@@ -31,7 +31,7 @@ const InvoiceTextModal = ({ onClose, ...rest }) => {
 
     return (
         <FormModal
-            small
+            size="small"
             onClose={onClose}
             onSubmit={handleSubmit}
             loading={loading}

containers/invoices/PayInvoiceModal.js

@@ -43,7 +43,7 @@ const PayInvoiceModal = ({ invoice, fetchInvoices, ...rest }) => {
 
     return (
         <FormModal
-            small
+            size="small"
             onSubmit={() => withLoading(handleSubmit())}
             loading={loading}
             close={c('Action').t`Close`}

containers/login/UnlockModal.js

@@ -34,7 +34,7 @@ const UnlockModal = ({ onClose, onSuccess, ...rest }) => {
             close={c('Label').t`Cancel`}
             submit={c('Label').t`Submit`}
             loading={loading}
-            small
+            size="small"
             {...rest}
         >
             <Row>

containers/members/EditMemberModal.js

@@ -54,7 +54,7 @@ const EditMemberModal = ({ onClose, member, ...rest }) => {
             loading={loading}
             save={c('Action').t`Save`}
             title={c('Title').t`Edit user`}
-            small
+            size="small"
             {...rest}
         >
             <Row>

containers/password/AskAuthModal.js

@@ -18,7 +18,7 @@ const AskAuthModal = ({ onClose, onSubmit, error, hideTotp, ...rest }) => {
             close={c('Label').t`Cancel`}
             submit={c('Label').t`Submit`}
             error={error}
-            small
+            size="small"
             {...rest}
         >
             <PasswordTotpInputs

containers/payments/EditCardModal.js

@@ -43,7 +43,7 @@ const EditCardModal = ({ card: existingCard, onClose, onChange, ...rest }) => {
 
     return (
         <FormModal
-            small
+            size="small"
             onSubmit={(event) => withLoading(handleSubmit(event))}
             onClose={onClose}
             title={title}

containers/payments/GiftCodeModal.js

@@ -41,7 +41,7 @@ const GiftCodeModal = ({ onClose, ...rest }) => {
 
     return (
         <FormModal
-            small
+            size="small"
             onClose={onClose}
             onSubmit={() => withLoading(handleSubmit())}
             loading={loading}

containers/payments/PayPalModal.js

@@ -20,7 +20,7 @@ const PayPalModal = ({ onChange, ...rest }) => {
     };
 
     return (
-        <FormModal title={c('Title').t`Add PayPal payment method`} small footer={null} {...rest}>
+        <FormModal title={c('Title').t`Add PayPal payment method`} size="small" footer={null} {...rest}>
             <div className="pb1">
                 {loading ? (
                     <Loader />

containers/payments/PaymentVerificationModal.js

@@ -93,7 +93,7 @@ const PaymentVerificationModal = ({
             title={TITLES[step]}
             onSubmit={handleSubmit}
             onClose={handleCancel}
-            small={true}
+            size="small"
             hasClose={false}
             footer={
                 step === STEPS.REDIRECT ? (

containers/themes/CustomThemeModal.js

@@ -17,7 +17,7 @@ const CustomThemeModal = ({ onSave, theme: initialTheme = '', ...rest }) => {
             submit={<PrimaryButton type="submit">{c('Action').t`Save`}</PrimaryButton>}
             onSubmit={handleSubmit}
             title={c('Title').t`Custom Theme`}
-            small
+            size="small"
             {...rest}
         >
             <Alert type="warning">{c('Warning')

containers/vpn/OpenVPNAccountSection/OpenVPNCredentialsModal.js

@@ -46,7 +46,7 @@ const OpenVPNCredentialsModal = ({ username = '', password = '', fetchUserVPN, .
             close={c('Action').t`Cancel`}
             submit={c('Action').t`Update`}
             onSubmit={() => withLoading(handleSubmit())}
-            small={true}
+            size="small"
             {...rest}
         >
             <Row>

index.ts

@@ -98,7 +98,7 @@ export { default as Toolbar } from './components/toolbar/Toolbar';
 export { default as ToolbarButton } from './components/toolbar/ToolbarButton';
 export { default as ToolbarLink } from './components/toolbar/ToolbarLink';
 export { default as Paragraph } from './components/paragraph/Paragraph';
-export { default as DialogModal } from './components/modal/Dialog';
+export { default as DialogModal, Props as DialogModalProps } from './components/modal/Dialog';
 export { default as ContentModal } from './components/modal/Content';
 export { default as InnerModal } from './components/modal/Inner';
 export { default as InputModal } from './components/modal/Input';