diff --git a/src/components/modal/README.md b/src/components/modal/README.md index 9247f72..b8ea51a 100644 --- a/src/components/modal/README.md +++ b/src/components/modal/README.md @@ -9,7 +9,6 @@ Default width - 480px, height 100% ### Props : - **title**: _string_, optional, default = "" -- **headerNode**: _node_, optional, default = null - **children**: _node_, optional, default = null - **footerNode**: _node_, optional, default = null - **okButton**: _object_, optional, default = null @@ -17,7 +16,7 @@ Default width - 480px, height 100% - **className**: _string_, optional, default = "" - **size**: _string_, optional, default = "default" - **onClose**: _function_, optional, default = () => {} -- **contextHeight**: _boolean_, optional, default = undefined +- **description**: _node_, optional, default = null ### Variants diff --git a/src/components/modal/modal.stories.tsx b/src/components/modal/modal.stories.tsx index e544017..6544c13 100644 --- a/src/components/modal/modal.stories.tsx +++ b/src/components/modal/modal.stories.tsx @@ -37,7 +37,7 @@ export const Default: Story = { export const WithoutFooter: Story = { args: { withoutFooter: true, - headerDescription: 'title description', + description: 'title description', }, }; @@ -98,6 +98,7 @@ export const OverlayLightCyan: Story = { export const Scrollable: Story = { args: { scrollable: true, + description: 'title description', children: ( <>

diff --git a/src/components/modal/modal.tsx b/src/components/modal/modal.tsx index 5346f53..803dd7c 100644 --- a/src/components/modal/modal.tsx +++ b/src/components/modal/modal.tsx @@ -23,7 +23,6 @@ type ModalOverlay = 'default' | 'light-cyan'; interface ModalProps { onClose?: () => void; title?: ReactNode; - headerNode?: ReactNode; children?: ReactNode; footerNode?: ReactNode; className?: string; @@ -36,14 +35,12 @@ interface ModalProps { scrollable?: boolean; withoutFooter?: boolean; CustomFooter?: FC<{ closeHandler: () => void }>; - headerDescription?: string; - contextHeight?: number; + description?: ReactNode; } // TODO: Fix issue with modal positioning export const Modal: FC = ({ title, - headerNode, children, footerNode, okButton, @@ -57,8 +54,7 @@ export const Modal: FC = ({ scrollable = false, withoutFooter = false, CustomFooter = null, - headerDescription = '', - contextHeight, + description = null, }) => { const [isShown, setShown] = useState(false); const [modalHeight, setModalHeight] = useState(0); @@ -69,16 +65,12 @@ export const Modal: FC = ({ const modalMaxHeight = windowHeight * MODAL_MAX_RATIO; const modalMargin = (windowHeight - modalHeight) / 2; const getContentMaxHeight = () => { - if (contextHeight) { - return contextHeight; - } - let contentMaxHeight = modalMaxHeight - MODAL_LAYOUT_PADDING; if (!withoutFooter) { contentMaxHeight = contentMaxHeight - MODAL_FOOTER_HEIGHT; } - if (headerDescription) { + if (description) { contentMaxHeight = contentMaxHeight - MODAL_HEADER_WITH_DESCRIPTION_HEIGHT; } else { contentMaxHeight = contentMaxHeight - MODAL_HEADER_HEIGHT; @@ -129,23 +121,23 @@ export const Modal: FC = ({ animate={{ opacity: 1, marginTop: modalMargin }} exit={{ opacity: 0, marginTop: -modalMargin }} transition={{ duration: 0.3 }} - onAnimationComplete={() => modalRef.current?.focus()} + onAnimationStart={() => modalRef.current?.focus()} > - - {headerNode && headerNode} - {headerDescription && ( - {headerDescription} - )} + {scrollable ? ( + {description && ( + {description} + )} {children} ) : ( - {children} + <> + {description && ( + {description} + )} + {children} + )} {!withoutFooter && (CustomFooter ? (