fix modal position within table

scality · Mar 2, 2022 · 2f81d7c · 2f81d7c
1 parent 9a4d787
commit 2f81d7c
Show file tree

Hide file tree

Showing 2 changed files with 125 additions and 18 deletions.
diff --git a/src/lib/components/modal/Modal.component.js b/src/lib/components/modal/Modal.component.js
@@ -1,9 +1,10 @@
 //@flow
-import React from 'react';
+import React, { useEffect } from 'react';
 import styled from 'styled-components';
 import * as defaultTheme from '../../style/theme';
 import type { Node } from 'react';
 import { getThemePropSelector } from '../../utils';
+import ReactDom from 'react-dom';
 
 type Props = {
   isOpen: boolean,
@@ -65,22 +66,34 @@ const ModalClose = styled.div`
 `;
 
 const Modal = ({ isOpen, close, title, children, footer, ...rest }: Props) => {
-  return isOpen ? (
-    <ModalContainer className="sc-modal" {...rest}>
-      <ModalContent className="sc-modal-content">
-        <ModalHeader className="sc-modal-header">
-          <ModalHeaderTitle>{title}</ModalHeaderTitle>
-          <ModalClose onClick={close}>
-            <i className="fas fa-times" />
-          </ModalClose>
-        </ModalHeader>
-        <ModalBody className="sc-modal-body">{children}</ModalBody>
-        {footer && (
-          <ModalFooter className="sc-modal-footer">{footer}</ModalFooter>
-        )}
-      </ModalContent>
-    </ModalContainer>
-  ) : null;
+  const modalContainer = document.createElement('div');
+
+  useEffect(() => {
+    document.body && document.body.appendChild(modalContainer);
+    return () => {
+      document.body && document.body.removeChild(modalContainer);
+    };
+  }, [modalContainer]);
+
+  return isOpen
+    ? ReactDom.createPortal(
+        <ModalContainer className="sc-modal" {...rest}>
+          <ModalContent className="sc-modal-content">
+            <ModalHeader className="sc-modal-header">
+              <ModalHeaderTitle>{title}</ModalHeaderTitle>
+              <ModalClose onClick={close}>
+                <i className="fas fa-times" />
+              </ModalClose>
+            </ModalHeader>
+            <ModalBody className="sc-modal-body">{children}</ModalBody>
+            {footer && (
+              <ModalFooter className="sc-modal-footer">{footer}</ModalFooter>
+            )}
+          </ModalContent>
+        </ModalContainer>,
+        modalContainer,
+      )
+    : null;
 };
 
 export default Modal;
diff --git a/stories/modal.stories.js b/stories/modal.stories.js
@@ -1,9 +1,10 @@
 //@flow
-import React from 'react';
+import React, { useState } from 'react';
 import Modal from '../src/lib/components/modal/Modal.component';
 import Button from '../src/lib/components/button/Button.component';
 import { action } from '@storybook/addon-actions';
 import { Wrapper } from './common';
+import Table from '../src/lib/components/tablev2/Tablev2.component';
 
 export default {
   title: 'Components/Notification/Modal',
@@ -39,3 +40,96 @@ export const Default = () => {
     </Wrapper>
   );
 };
+
+const Action = () => {
+  const [displayed, setDisplayed] = useState(false);
+  return (
+    <>
+      <Button
+        text={'Show modal'}
+        onClick={() => setDisplayed((disp) => !disp)}
+      />
+      <Modal
+        close={action('close clicked')}
+        isOpen={displayed}
+        title="Hello"
+        footer={
+          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+            <Button
+              text="No"
+              size="base"
+              outlined
+              onClick={action('No clicked')}
+            />
+            <Button
+              variant="buttonSecondary"
+              text="Yes"
+              size="base"
+              onClick={action('Yes clicked')}
+            />
+          </div>
+        }
+      >
+        <span>Do you want a cookie?</span>
+      </Modal>
+    </>
+  );
+};
+
+export const WithinTable = () => {
+  const columns = [
+    {
+      Header: 'First Name',
+      accessor: 'firstName',
+      cellStyle: { textAlign: 'left' },
+    },
+    {
+      Header: 'Actions',
+      accessor: 'health',
+      Cell: Action,
+      // disable the sorting on this column
+      disableSortBy: true,
+    },
+  ];
+
+  const data = [
+    {
+      firstName: 'Sotiria',
+      lastName: 'Agathangelou',
+      age: undefined,
+      health: 'healthy',
+    },
+    {
+      firstName: 'Stefania',
+      lastName: 'Evgenios',
+      age: 27,
+      health: 'warning',
+    },
+    {
+      firstName: 'Yohann',
+      lastName: 'Rodolph',
+      age: 27,
+      health: 'critical',
+    },
+    {
+      firstName: 'Ninette',
+      lastName: 'Caroline',
+      age: 31,
+      health: 'healthy',
+    },
+  ];
+
+  return (
+    <Wrapper>
+      <div style={{ height: '300px', paddingTop: '20px' }}>
+        <Table columns={columns} data={data} defaultSortingKey={'firstName'}>
+          <Table.SingleSelectableContent
+            rowHeight="h32"
+            separationLineVariant="backgroundLevel3"
+            backgroundVariant="backgroundLevel1"
+          />
+        </Table>
+      </div>
+    </Wrapper>
+  );
+};