tweak modal types

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<ModalOptions & Props> = props => {
+const Modal: React.FC<ModalOptions & Props> = (props) => {
   const {
     mode = 'confirm',
     title = trans('general.tip'),

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<HTMLInputElement>
-  placeholder?: string
-  invalid?: boolean
-  validatorMessage?: string
 }
 
-const ModalBody: React.FC<Props> = props => {
+export type Props = ContentProps & InputProps
+
+const ModalBody: React.FC<InternalProps & InputInteralProps & Props> = (
+  props,
+) => {
   return (
     <div className="modal-body">
       <ModalContent text={props.text} dangerousHTML={props.dangerousHTML}>

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> = props => {
+const ModalContent: React.FC<Props> = (props) => {
   if (props.children) {
     return <>{props.children}</>
   } else if (props.text) {

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> = props => {
+const ModalFooter: React.FC<InternalProps & Props> = (props) => {
   const classes = ['modal-footer']
   if (props.flexFooter) {
     classes.push('d-flex', 'justify-content-between')

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> = props =>
+interface InternalProps {
+  onDismiss?(): void
+  show?: boolean
+}
+
+const ModalHeader: React.FC<Props & InternalProps> = (props) =>
   props.show ? (
     <div className="modal-header">
       <h5 className="modal-title">{props.title}</h5>

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<HTMLInputElement>
   placeholder?: string
-  invalid?: boolean
-  validatorMessage?: string
 }
 
-const ModalInput: React.FC<Props> = props => (
+export interface InternalProps {
+  value?: string
+  invalid?: boolean
+  validatorMessage?: string
+  onChange?: React.ChangeEventHandler<HTMLInputElement>
+}
+
+const ModalInput: React.FC<InternalProps & Props> = (props) => (
   <>
     {props.inputType === 'radios' && props.choices ? (
       <>
-        {props.choices.map(choice => (
+        {props.choices.map((choice) => (
           <div key={choice.value}>
             <input
               type="radio"