EPMRPP-89804 || code review fixes - 1

reportportal · Jul 23, 2024 · 4e71583 · 4e71583
1 parent e3beb8c
commit 4e71583
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 25 deletions.
diff --git a/src/components/modal/README.md b/src/components/modal/README.md
@@ -9,15 +9,14 @@ 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
 - **cancelButton**: _object_, optional, default = null
 - **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
@@ -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: (
       <>
         <p style={{ marginBlockEnd: 0, marginBlockStart: 0 }}>

diff --git 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<ModalProps> = ({
   title,
-  headerNode,
   children,
   footerNode,
   okButton,
@@ -57,8 +54,7 @@ export const Modal: FC<ModalProps> = ({
   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<ModalProps> = ({
   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<ModalProps> = ({
             animate={{ opacity: 1, marginTop: modalMargin }}
             exit={{ opacity: 0, marginTop: -modalMargin }}
             transition={{ duration: 0.3 }}
-            onAnimationComplete={() => modalRef.current?.focus()}
+            onAnimationStart={() => modalRef.current?.focus()}
           >
-            <ModalHeader
-              title={title}
-              onClose={closeModal}
-              withDescription={!!headerNode || !!headerDescription}
-            />
-            {headerNode && headerNode}
-            {headerDescription && (
-              <span className={cx('modal-header-description')}>{headerDescription}</span>
-            )}
+            <ModalHeader title={title} onClose={closeModal} withDescription={!!description} />
             {scrollable ? (
               <Scrollbars autoHeight autoHeightMax={getContentMaxHeight()} hideTracksWhenNotNeeded>
+                {description && (
+                  <span className={cx('modal-header-description')}>{description}</span>
+                )}
                 <ModalContent>{children}</ModalContent>
               </Scrollbars>
             ) : (
-              <ModalContent>{children}</ModalContent>
+              <>
+                {description && (
+                  <span className={cx('modal-header-description')}>{description}</span>
+                )}
+                <ModalContent>{children}</ModalContent>
+              </>
             )}
             {!withoutFooter &&
               (CustomFooter ? (