Move & Resize portal (ToolJet#3224)

jbzhang99 · Jun 8, 2022 · 5280e9d · 5280e9d
1 parent 86ea2ce
commit 5280e9d
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 30 deletions.
diff --git a/frontend/src/Editor/CodeBuilder/CodeHinter.jsx b/frontend/src/Editor/CodeBuilder/CodeHinter.jsx
@@ -296,6 +296,7 @@ export function CodeHinter({
                 optionalProps={{ styles: { height: 300 }, cls: className }}
                 darkMode={darkMode}
                 selectors={{ className: 'preview-block-portal' }}
+                dragResizePortal={true}
               >
                 <CodeMirror
                   value={typeof initialValue === 'string' ? initialValue : ''}

diff --git a/frontend/src/_components/Portal/Portal.jsx b/frontend/src/_components/Portal/Portal.jsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import { ReactPortal } from './ReactPortal.js';
+import { Rnd } from 'react-rnd';
 
 const Portal = ({ children, ...restProps }) => {
-  const { isOpen, trigger, styles, className, componentName } = restProps;
+  const { isOpen, trigger, styles, className, componentName, dragResizePortal } = restProps;
   const [name, setName] = React.useState(componentName);
   const handleClose = (e) => {
     e.stopPropagation();
@@ -41,6 +42,7 @@ const Portal = ({ children, ...restProps }) => {
           darkMode={darkMode}
           styles={styles}
           componentName={name}
+          dragResizePortal={dragResizePortal}
         >
           {children}
         </Portal.Modal>
@@ -53,39 +55,62 @@ const Container = ({ children, ...restProps }) => {
   return <ReactPortal {...restProps}>{children}</ReactPortal>;
 };
 
-const Modal = ({ children, handleClose, portalStyles, styles, componentName, darkMode }) => {
-  return (
-    <div className="modal-dialog" role="document">
-      <div className="modal-content" style={{ ...portalStyles, ...styles }}>
-        <div className={`portal-header d-flex ${darkMode ? 'dark-mode-border' : ''}`} style={{ ...portalStyles }}>
-          <div className="w-100">
-            <code className="mx-2 text-info">{componentName ?? 'Editor'}</code>
-          </div>
-
-          <button
-            type="button"
-            className="btn mx-2 btn-light"
-            onClick={handleClose}
-            data-tip="Hide code editor modal"
-            style={{ backgroundColor: darkMode && '#42546a' }}
-          >
-            <img
-              style={{ transform: 'rotate(-90deg)', filter: darkMode && 'brightness(0) invert(1)' }}
-              src="/assets/images/icons/portal-close.svg"
-              width="12"
-              height="12"
-            />
-          </button>
+const Modal = ({ children, handleClose, portalStyles, styles, componentName, darkMode, dragResizePortal }) => {
+  const renderModalContent = () => (
+    <div className="modal-content" style={{ ...portalStyles, ...styles }}>
+      <div
+        className={`resize-handle portal-header d-flex ${darkMode ? 'dark-mode-border' : ''}`}
+        style={{ ...portalStyles }}
+      >
+        <div className="w-100">
+          <code className="mx-2 text-info">{componentName ?? 'Editor'}</code>
         </div>
-        <div
-          className={`modal-body ${darkMode ? 'dark-mode-border' : ''}`}
-          style={{ background: 'transparent', height: 300 }}
+
+        <button
+          type="button"
+          className="btn mx-2 btn-light"
+          onClick={handleClose}
+          data-tip="Hide code editor modal"
+          style={{ backgroundColor: darkMode && '#42546a' }}
         >
-          {children}
-        </div>
+          <img
+            style={{ transform: 'rotate(-90deg)', filter: darkMode && 'brightness(0) invert(1)' }}
+            src="/assets/images/icons/portal-close.svg"
+            width="12"
+            height="12"
+          />
+        </button>
+      </div>
+      <div
+        className={`modal-body ${darkMode ? 'dark-mode-border' : ''}`}
+        style={{ background: 'transparent', height: 300 }}
+      >
+        {children}
       </div>
     </div>
   );
+
+  return (
+    <div className={dragResizePortal ? 'resize-modal' : 'modal-dialog'} role="document">
+      {dragResizePortal ? (
+        <Rnd
+          default={{
+            x: -150,
+            y: 0,
+            height: 350,
+          }}
+          bounds="body"
+          dragHandleClassName={'resize-handle'}
+          minWidth={'500px'}
+          minHeight={'350px'}
+        >
+          {renderModalContent()}
+        </Rnd>
+      ) : (
+        renderModalContent()
+      )}
+    </div>
+  );
 };
 
 Portal.Container = Container;

diff --git a/frontend/src/_hooks/use-portal.jsx b/frontend/src/_hooks/use-portal.jsx
@@ -11,6 +11,7 @@ const usePortal = ({ children, ...restProps }) => {
     forceUpdate,
     optionalProps = {},
     selectors = {},
+    dragResizePortal = false,
   } = restProps;
 
   const renderCustomComponent = ({ component, ...restProps }) => {
@@ -29,7 +30,13 @@ const usePortal = ({ children, ...restProps }) => {
   return (
     <React.Fragment>
       {isOpen && (
-        <Portal className="modal-portal-wrapper" isOpen={isOpen} trigger={callback} componentName={componentName}>
+        <Portal
+          className={`modal-portal-wrapper ${dragResizePortal && 'resize-modal-portal'}`}
+          isOpen={isOpen}
+          trigger={callback}
+          componentName={componentName}
+          dragResizePortal={dragResizePortal}
+        >
           <div className={`editor-container ${optionalProps.cls ?? ''}`} key={key}>
             {React.cloneElement(children, { ...styleProps })}
           </div>

diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss
@@ -3795,6 +3795,32 @@ input[type="text"] {
   width: 12px;
 }
 
+.resize-modal-portal {
+  z-index: 3;
+  .resize-modal {
+    .modal-content {
+      width: 100% !important;
+      height: 100%;
+      .modal-body {
+        width: 100% !important;
+        height: calc(100% - 44px) !important;
+        .editor-container {
+          height: 100%;
+          .CodeMirror {
+            height: 100% !important;
+          }
+        }
+      }
+    }
+    .portal-header {
+      width: 100% !important;
+    }
+    .resize-handle {
+      cursor: move;
+    }
+  }
+}
+
 .modal-portal-wrapper {
   justify-content: center;
   align-items: center;