import { Modal as BS5Modal, ModalProps, ModalHeaderProps, ModalTitleProps, ModalBody, ModalFooterProps, } from 'react-bootstrap-5' import { Modal as BS3Modal, ModalProps as BS3ModalProps, ModalHeaderProps as BS3ModalHeaderProps, ModalTitleProps as BS3ModalTitleProps, ModalBodyProps as BS3ModalBodyProps, ModalFooterProps as BS3ModalFooterProps, } from 'react-bootstrap' import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher' import AccessibleModal from '@/shared/components/accessible-modal' type OLModalProps = ModalProps & { bs3Props?: Record size?: 'sm' | 'lg' onHide: () => void } type OLModalHeaderProps = ModalHeaderProps & { bs3Props?: Record } type OLModalTitleProps = ModalTitleProps & { bs3Props?: Record } type OLModalBodyProps = React.ComponentProps & { bs3Props?: Record } type OLModalFooterProps = ModalFooterProps & { bs3Props?: Record } export default function OLModal({ children, ...props }: OLModalProps) { const { bs3Props, ...bs5Props } = props const bs3ModalProps: BS3ModalProps = { bsClass: bs5Props.bsPrefix, bsSize: bs5Props.size, show: bs5Props.show, onHide: bs5Props.onHide, backdrop: bs5Props.backdrop, animation: bs5Props.animation, id: bs5Props.id, className: bs5Props.className, backdropClassName: bs5Props.backdropClassName, ...bs3Props, } return ( {children}} bs5={{children}} /> ) } export function OLModalHeader({ children, ...props }: OLModalHeaderProps) { const { bs3Props, ...bs5Props } = props const bs3ModalProps: BS3ModalHeaderProps = { bsClass: bs5Props.bsPrefix, onHide: bs5Props.onHide, closeButton: bs5Props.closeButton, closeLabel: bs5Props.closeLabel, } return ( {children}} bs5={{children}} /> ) } export function OLModalTitle({ children, ...props }: OLModalTitleProps) { const { bs3Props, ...bs5Props } = props const bs3ModalProps: BS3ModalTitleProps = { componentClass: bs5Props.as, } return ( {children}} bs5={{children}} /> ) } export function OLModalBody({ children, ...props }: OLModalBodyProps) { const { bs3Props, ...bs5Props } = props const bs3ModalProps: BS3ModalBodyProps = { componentClass: bs5Props.as, className: bs5Props.className, } return ( {children}} bs5={{children}} /> ) } export function OLModalFooter({ children, ...props }: OLModalFooterProps) { const { bs3Props, ...bs5Props } = props const bs3ModalProps: BS3ModalFooterProps = { componentClass: bs5Props.as, className: bs5Props.className, } return ( {children}} bs5={{children}} /> ) }