Mustajab Ikram
bd2e4307d2
* feat: Add separate constants in theme for modal sizes and paddings * feat: Implement dynamic sizing and padding for Modal * feat: use dynamic modal feature for csv import * fix: Remove redundant props from spreadsheet-import * fix: use theme.spacing() instead * fix: place types to Modal.tsx, convert ternary to switch-case, give default value * fix: give px to modal sizes * enhance: add color style to modal * feat: add modal to storybook
48 lines
1.1 KiB
TypeScript
48 lines
1.1 KiB
TypeScript
import type React from 'react';
|
|
import styled from '@emotion/styled';
|
|
|
|
import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
|
|
import { Modal } from '@/ui/modal/components/Modal';
|
|
import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
|
|
|
|
import { ModalCloseButton } from './ModalCloseButton';
|
|
|
|
const StyledModal = styled(Modal)`
|
|
height: 61%;
|
|
min-height: 600px;
|
|
min-width: 800px;
|
|
position: relative;
|
|
width: 63%;
|
|
@media (max-width: ${MOBILE_VIEWPORT}px) {
|
|
min-width: auto;
|
|
min-height: auto;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
`;
|
|
|
|
const StyledRtlLtr = styled.div`
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
`;
|
|
|
|
type Props = {
|
|
children: React.ReactNode;
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
};
|
|
|
|
export const ModalWrapper = ({ children, isOpen, onClose }: Props) => {
|
|
const { rtl } = useSpreadsheetImportInternal();
|
|
|
|
return (
|
|
<StyledModal isOpen={isOpen} size="large">
|
|
<StyledRtlLtr dir={rtl ? 'rtl' : 'ltr'}>
|
|
<ModalCloseButton onClose={onClose} />
|
|
{children}
|
|
</StyledRtlLtr>
|
|
</StyledModal>
|
|
);
|
|
};
|