From add5b80b34317a5d3219f1e5457b115be49be915 Mon Sep 17 00:00:00 2001
From: navaneeth <navaneethpk@outlook.com>
Date: Mon, 10 May 2021 13:29:17 +0530
Subject: [PATCH] Feature: Size & title properties for modals

---
 frontend/src/Editor/Components/Modal.jsx | 31 +++++++++++++++---------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/frontend/src/Editor/Components/Modal.jsx b/frontend/src/Editor/Components/Modal.jsx
index dcf5356dc4..0c9853c749 100644
--- a/frontend/src/Editor/Components/Modal.jsx
+++ b/frontend/src/Editor/Components/Modal.jsx
@@ -1,5 +1,5 @@
 import React, { useRef, useState, useEffect } from 'react';
-import { default as BootstrapModal} from 'react-bootstrap/Modal';
+import { default as BootstrapModal } from 'react-bootstrap/Modal';
 import Button from 'react-bootstrap/Button';
 import { SubCustomDragLayer } from '../SubCustomDragLayer';
 import { SubContainer } from '../SubContainer';
@@ -10,10 +10,15 @@ export const Modal = function Modal({
   height,
   containerProps
 }) {
-
   const [show, showModal] = useState(false);
   const parentRef = useRef(null);
 
+  const titleProp = component.definition.properties.title;
+  const title = titleProp ? titleProp.value : '';
+
+  const sizeProp = component.definition.properties.size;
+  const size = sizeProp ? sizeProp.value : 'lg';
+
   useEffect(() => {
     const componentState = containerProps.currentState.components[component.name];
     const canShowModel = componentState ? componentState.show : false;
@@ -27,19 +32,21 @@ export const Modal = function Modal({
 
   return (
     <div>
-      <BootstrapModal 
+      <BootstrapModal
         contentClassName="modal-component"
-        show={show} 
+        show={show}
         container={document.getElementsByClassName('real-canvas')[0]}
-        size="lg" 
-        backdrop="static" 
-        keyboard={true} 
+        size={size}
+        backdrop="static"
+        keyboard={true}
         animation={false}
-        
+        onClick={() => containerProps.onComponentClick(id, component)}
         onEscapeKeyDown={() => showModal(false)}
       >
         <BootstrapModal.Header>
-          <BootstrapModal.Title></BootstrapModal.Title>
+          <BootstrapModal.Title>
+            {title}
+          </BootstrapModal.Title>
           <div>
             <Button variant="light" size="sm" onClick={hideModal}>
               x
@@ -47,14 +54,14 @@ export const Modal = function Modal({
           </div>
         </BootstrapModal.Header>
 
-        <BootstrapModal.Body style={{height}} ref={parentRef}>
+        <BootstrapModal.Body style={{ height }} ref={parentRef}>
             <SubContainer
               parent={id}
               {...containerProps}
               parentRef={parentRef}
             />
-            <SubCustomDragLayer 
-              snapToGrid={true} 
+            <SubCustomDragLayer
+              snapToGrid={true}
               parentRef={parentRef}
             />
         </BootstrapModal.Body>