50 lines
1.1 KiB
TypeScript
50 lines
1.1 KiB
TypeScript
import React from 'react'
|
|
|
|
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<InternalProps & Props> = (props) => {
|
|
const classes = ['modal-footer']
|
|
if (props.flexFooter) {
|
|
classes.push('d-flex', 'justify-content-between')
|
|
}
|
|
const footerClass = classes.join(' ')
|
|
|
|
return props.children ? (
|
|
<div className={footerClass}>{props.children}</div>
|
|
) : (
|
|
<div className={footerClass}>
|
|
{props.showCancelButton && (
|
|
<button
|
|
type="button"
|
|
className={`btn btn-${props.cancelButtonType}`}
|
|
data-dismiss="modal"
|
|
onClick={props.onDismiss}
|
|
>
|
|
{props.cancelButtonText}
|
|
</button>
|
|
)}
|
|
<button
|
|
type="button"
|
|
className={`btn btn-${props.okButtonType}`}
|
|
onClick={props.onConfirm}
|
|
>
|
|
{props.okButtonText}
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ModalFooter
|