From 0efcde3172f66796ba59a682d33b35987206bccb Mon Sep 17 00:00:00 2001 From: Pig Fang Date: Sat, 28 Mar 2020 16:09:12 +0800 Subject: [PATCH] tweak modal types --- resources/assets/src/components/Modal.tsx | 20 ++++++----------- resources/assets/src/components/ModalBody.tsx | 22 +++++++++---------- .../assets/src/components/ModalContent.tsx | 4 ++-- .../assets/src/components/ModalFooter.tsx | 9 +++++--- .../assets/src/components/ModalHeader.tsx | 11 ++++++---- .../assets/src/components/ModalInput.tsx | 17 ++++++++------ 6 files changed, 43 insertions(+), 40 deletions(-) diff --git a/resources/assets/src/components/Modal.tsx b/resources/assets/src/components/Modal.tsx index 0e9a111f..3ec6c203 100644 --- a/resources/assets/src/components/Modal.tsx +++ b/resources/assets/src/components/Modal.tsx @@ -5,29 +5,23 @@ import { trans } from '../scripts/i18n' import ModalHeader from './ModalHeader' import ModalBody from './ModalBody' import ModalFooter from './ModalFooter' +import type { Props as HeaderProps } from './ModalHeader' +import type { Props as BodyProps } from './ModalBody' +import type { Props as FooterProps } from './ModalFooter' -export type ModalOptions = { +type BasicOptions = { mode?: 'alert' | 'confirm' | 'prompt' show?: boolean - title?: string - text?: string - dangerousHTML?: string input?: string - placeholder?: string - inputType?: string validator?(value: any): string | boolean | undefined - choices?: { text: string; value: string }[] type?: string showHeader?: boolean center?: boolean - okButtonText?: string - okButtonType?: string - cancelButtonText?: string - cancelButtonType?: string - flexFooter?: boolean children?: React.ReactNode } +export type ModalOptions = BasicOptions & HeaderProps & BodyProps & FooterProps + type Props = { id?: string children?: React.ReactNode @@ -41,7 +35,7 @@ export type ModalResult = { value: string } -const Modal: React.FC = props => { +const Modal: React.FC = (props) => { const { mode = 'confirm', title = trans('general.tip'), diff --git a/resources/assets/src/components/ModalBody.tsx b/resources/assets/src/components/ModalBody.tsx index ef66893b..9b38b366 100644 --- a/resources/assets/src/components/ModalBody.tsx +++ b/resources/assets/src/components/ModalBody.tsx @@ -1,21 +1,21 @@ import React from 'react' import ModalContent from './ModalContent' import ModalInput from './ModalInput' +import type { Props as ContentProps } from './ModalContent' +import type { + Props as InputProps, + InternalProps as InputInteralProps, +} from './ModalInput' -interface Props { - text?: string - dangerousHTML?: string +interface InternalProps { showInput: boolean - inputType?: string - value?: string - choices?: { text: string; value: string }[] - onChange?: React.ChangeEventHandler - placeholder?: string - invalid?: boolean - validatorMessage?: string } -const ModalBody: React.FC = props => { +export type Props = ContentProps & InputProps + +const ModalBody: React.FC = ( + props, +) => { return (
diff --git a/resources/assets/src/components/ModalContent.tsx b/resources/assets/src/components/ModalContent.tsx index cb0ac8a5..2d03d188 100644 --- a/resources/assets/src/components/ModalContent.tsx +++ b/resources/assets/src/components/ModalContent.tsx @@ -1,11 +1,11 @@ import React from 'react' -interface Props { +export interface Props { text?: string dangerousHTML?: string } -const ModalContent: React.FC = props => { +const ModalContent: React.FC = (props) => { if (props.children) { return <>{props.children} } else if (props.text) { diff --git a/resources/assets/src/components/ModalFooter.tsx b/resources/assets/src/components/ModalFooter.tsx index dc26b81f..63084f90 100644 --- a/resources/assets/src/components/ModalFooter.tsx +++ b/resources/assets/src/components/ModalFooter.tsx @@ -1,17 +1,20 @@ import React from 'react' -interface Props { - showCancelButton: boolean +export interface Props { flexFooter?: boolean okButtonText?: string okButtonType?: string cancelButtonText?: string cancelButtonType?: string +} + +interface InternalProps { + showCancelButton: boolean onConfirm?(): void onDismiss?(): void } -const ModalFooter: React.FC = props => { +const ModalFooter: React.FC = (props) => { const classes = ['modal-footer'] if (props.flexFooter) { classes.push('d-flex', 'justify-content-between') diff --git a/resources/assets/src/components/ModalHeader.tsx b/resources/assets/src/components/ModalHeader.tsx index b363639f..761daf07 100644 --- a/resources/assets/src/components/ModalHeader.tsx +++ b/resources/assets/src/components/ModalHeader.tsx @@ -1,12 +1,15 @@ import React from 'react' -interface Props { - show?: boolean +export interface Props { title?: string - onDismiss?(): void } -const ModalHeader: React.FC = props => +interface InternalProps { + onDismiss?(): void + show?: boolean +} + +const ModalHeader: React.FC = (props) => props.show ? (
{props.title}
diff --git a/resources/assets/src/components/ModalInput.tsx b/resources/assets/src/components/ModalInput.tsx index f6d01acd..88cd3505 100644 --- a/resources/assets/src/components/ModalInput.tsx +++ b/resources/assets/src/components/ModalInput.tsx @@ -1,20 +1,23 @@ import React from 'react' -interface Props { +export interface Props { inputType?: string - value?: string choices?: { text: string; value: string }[] - onChange?: React.ChangeEventHandler placeholder?: string - invalid?: boolean - validatorMessage?: string } -const ModalInput: React.FC = props => ( +export interface InternalProps { + value?: string + invalid?: boolean + validatorMessage?: string + onChange?: React.ChangeEventHandler +} + +const ModalInput: React.FC = (props) => ( <> {props.inputType === 'radios' && props.choices ? ( <> - {props.choices.map(choice => ( + {props.choices.map((choice) => (