From 1561ee068dc02746a095c0d2609e9886f7417c81 Mon Sep 17 00:00:00 2001 From: Yiin Date: Mon, 20 Jan 2020 19:10:08 +0200 Subject: [PATCH] `size` prop for DialogModal Fixes https://gitlab.protontech.ch/ProtonVPN/web/protonvpn-settings/issues/65 --- components/modal/Confirm.js | 2 +- components/modal/{Dialog.js => Dialog.tsx} | 61 +++++++++++-------- .../modal/{FormModal.js => FormModal.tsx} | 42 ++++++------- components/modal/Input.js | 2 +- containers/invoices/InvoiceTextModal.js | 2 +- containers/invoices/PayInvoiceModal.js | 2 +- containers/login/UnlockModal.js | 2 +- containers/members/EditMemberModal.js | 2 +- containers/password/AskAuthModal.js | 2 +- containers/payments/EditCardModal.js | 2 +- containers/payments/GiftCodeModal.js | 2 +- containers/payments/PayPalModal.js | 2 +- .../payments/PaymentVerificationModal.js | 2 +- containers/themes/CustomThemeModal.js | 2 +- .../OpenVPNCredentialsModal.js | 2 +- index.ts | 2 +- 16 files changed, 68 insertions(+), 63 deletions(-) rename components/modal/{Dialog.js => Dialog.tsx} (50%) rename components/modal/{FormModal.js => FormModal.tsx} (80%) diff --git a/components/modal/Confirm.js b/components/modal/Confirm.js index aec45a092..324aaeae0 100644 --- a/components/modal/Confirm.js +++ b/components/modal/Confirm.js @@ -22,7 +22,7 @@ const Confirm = ({ title={title} close={cancel} submit={confirm} - small + size="small" {...rest} > {children} diff --git a/components/modal/Dialog.js b/components/modal/Dialog.tsx similarity index 50% rename from components/modal/Dialog.js rename to components/modal/Dialog.tsx index 8fde006ed..1ca4cd557 100644 --- a/components/modal/Dialog.js +++ b/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) => { + 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; diff --git a/components/modal/FormModal.js b/components/modal/FormModal.tsx similarity index 80% rename from components/modal/FormModal.js rename to components/modal/FormModal.tsx index ad11572f9..742be51e8 100644 --- a/components/modal/FormModal.js +++ b/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 , @@ -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; diff --git a/components/modal/Input.js b/components/modal/Input.js index 5bdca8e2b..c577120b7 100644 --- a/components/modal/Input.js +++ b/components/modal/Input.js @@ -48,7 +48,7 @@ const InputModal = ({ close={cancel} submit={submit} title={title} - small + size="small" {...rest} > diff --git a/containers/invoices/InvoiceTextModal.js b/containers/invoices/InvoiceTextModal.js index d1ce02b61..010e06d86 100644 --- a/containers/invoices/InvoiceTextModal.js +++ b/containers/invoices/InvoiceTextModal.js @@ -31,7 +31,7 @@ const InvoiceTextModal = ({ onClose, ...rest }) => { return ( { return ( withLoading(handleSubmit())} loading={loading} close={c('Action').t`Close`} diff --git a/containers/login/UnlockModal.js b/containers/login/UnlockModal.js index 46c907304..0800caa1f 100644 --- a/containers/login/UnlockModal.js +++ b/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} > diff --git a/containers/members/EditMemberModal.js b/containers/members/EditMemberModal.js index c006f61df..aeaff83e5 100644 --- a/containers/members/EditMemberModal.js +++ b/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} > diff --git a/containers/password/AskAuthModal.js b/containers/password/AskAuthModal.js index 279bffac1..f340dde61 100644 --- a/containers/password/AskAuthModal.js +++ b/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} > { return ( withLoading(handleSubmit(event))} onClose={onClose} title={title} diff --git a/containers/payments/GiftCodeModal.js b/containers/payments/GiftCodeModal.js index 509ba7b7a..015e1c436 100644 --- a/containers/payments/GiftCodeModal.js +++ b/containers/payments/GiftCodeModal.js @@ -41,7 +41,7 @@ const GiftCodeModal = ({ onClose, ...rest }) => { return ( withLoading(handleSubmit())} loading={loading} diff --git a/containers/payments/PayPalModal.js b/containers/payments/PayPalModal.js index f8ed93f79..68bebb3fe 100644 --- a/containers/payments/PayPalModal.js +++ b/containers/payments/PayPalModal.js @@ -20,7 +20,7 @@ const PayPalModal = ({ onChange, ...rest }) => { }; return ( - +
{loading ? ( diff --git a/containers/payments/PaymentVerificationModal.js b/containers/payments/PaymentVerificationModal.js index 0c1bbe116..3bf904d46 100644 --- a/containers/payments/PaymentVerificationModal.js +++ b/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 ? ( diff --git a/containers/themes/CustomThemeModal.js b/containers/themes/CustomThemeModal.js index 806cc68c7..5b9a674df 100644 --- a/containers/themes/CustomThemeModal.js +++ b/containers/themes/CustomThemeModal.js @@ -17,7 +17,7 @@ const CustomThemeModal = ({ onSave, theme: initialTheme = '', ...rest }) => { submit={{c('Action').t`Save`}} onSubmit={handleSubmit} title={c('Title').t`Custom Theme`} - small + size="small" {...rest} > {c('Warning') diff --git a/containers/vpn/OpenVPNAccountSection/OpenVPNCredentialsModal.js b/containers/vpn/OpenVPNAccountSection/OpenVPNCredentialsModal.js index 4c357df59..6011fa229 100644 --- a/containers/vpn/OpenVPNAccountSection/OpenVPNCredentialsModal.js +++ b/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} > diff --git a/index.ts b/index.ts index 2d77a0c2e..8018cf67f 100644 --- a/index.ts +++ b/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';