51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import { ModalConfig } from './core/types';
|
|
import ModalFactory from './ModalFactory';
|
|
|
|
interface TableContent {
|
|
columns: Array<{
|
|
field: string;
|
|
header: string;
|
|
}>;
|
|
data: Array<Record<string, unknown>>;
|
|
}
|
|
|
|
interface ModalContainerProps {
|
|
modals: ModalConfig[];
|
|
onClose: (id: string) => void;
|
|
}
|
|
|
|
const ModalContainer: React.FC<ModalContainerProps> = ({ modals, onClose }) => {
|
|
return (
|
|
<div className="absolute inset-0">
|
|
<style>{`
|
|
.modal-transition {
|
|
transition: all 0.3s ease-in-out;
|
|
}
|
|
`}</style>
|
|
{modals.map((modal) => (
|
|
<div
|
|
key={modal.id}
|
|
className="absolute modal-transition"
|
|
style={{
|
|
left: `${modal.position.x}%`,
|
|
top: `${modal.position.y}%`,
|
|
width: modal.position.width,
|
|
height: modal.position.height,
|
|
transform: 'translate(-50%, -50%)',
|
|
}}
|
|
>
|
|
<ModalFactory
|
|
id={modal.id}
|
|
type={modal.type}
|
|
position={modal.position}
|
|
content={modal.content as TableContent}
|
|
onClose={onClose}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ModalContainer;
|