From ac7035531182eaabc12a3cb56e6f3f439e482fc0 Mon Sep 17 00:00:00 2001
From: TimofeyBoyko <fognir742@gmail.com>
Date: Tue, 6 Sep 2022 16:54:15 +0300
Subject: [PATCH] Web:Components:ModalDialog: add available use modal dialog as
 container for people or room selector

---
 .../handlers/childrenParseHandler.js          |  11 +-
 packages/components/modal-dialog/index.js     |  10 +-
 .../modal-dialog/modal-dialog.stories.js      |   7 +-
 .../modal-dialog/views/modal-aside.js         | 100 ++++++++++--------
 4 files changed, 76 insertions(+), 52 deletions(-)

diff --git a/packages/components/modal-dialog/handlers/childrenParseHandler.js b/packages/components/modal-dialog/handlers/childrenParseHandler.js
index a8ee8c1186..3596be9436 100644
--- a/packages/components/modal-dialog/handlers/childrenParseHandler.js
+++ b/packages/components/modal-dialog/handlers/childrenParseHandler.js
@@ -2,11 +2,13 @@ export const parseChildren = (
   children,
   headerDisplayName,
   bodyDisplayName,
-  footerDisplayName
+  footerDisplayName,
+  containerDisplayName
 ) => {
   let header = null,
     body = null,
-    footer = null;
+    footer = null,
+    container = null;
 
   children.forEach((child) => {
     const childType =
@@ -22,9 +24,12 @@ export const parseChildren = (
       case footerDisplayName:
         footer = child;
         break;
+      case containerDisplayName:
+        container = child;
+        break;
       default:
         break;
     }
   });
-  return [header, body, footer];
+  return [header, body, footer, container];
 };
diff --git a/packages/components/modal-dialog/index.js b/packages/components/modal-dialog/index.js
index 781cf08345..102d6fe966 100644
--- a/packages/components/modal-dialog/index.js
+++ b/packages/components/modal-dialog/index.js
@@ -19,6 +19,9 @@ Body.displayName = "DialogBody";
 const Footer = () => null;
 Footer.displayName = "DialogFooter";
 
+const Container = () => null;
+Container.displayName = "DialogContainer";
+
 const ModalDialog = ({
   id,
   style,
@@ -69,11 +72,12 @@ const ModalDialog = ({
     };
   }, []);
 
-  const [header, body, footer] = parseChildren(
+  const [header, body, footer, container] = parseChildren(
     children,
     Header.displayName,
     Body.displayName,
-    Footer.displayName
+    Footer.displayName,
+    Container.displayName
   );
 
   return (
@@ -96,6 +100,7 @@ const ModalDialog = ({
           header={header}
           body={body}
           footer={footer}
+          container={container}
           visible={visible}
           modalSwipeOffset={modalSwipeOffset}
         />
@@ -173,5 +178,6 @@ ModalDialog.defaultProps = {
 ModalDialog.Header = Header;
 ModalDialog.Body = Body;
 ModalDialog.Footer = Footer;
+ModalDialog.Container = Container;
 
 export default ModalDialog;
diff --git a/packages/components/modal-dialog/modal-dialog.stories.js b/packages/components/modal-dialog/modal-dialog.stories.js
index 35c437e7c4..1face3c048 100644
--- a/packages/components/modal-dialog/modal-dialog.stories.js
+++ b/packages/components/modal-dialog/modal-dialog.stories.js
@@ -55,6 +55,11 @@ const Template = ({ onOk, ...args }) => {
             onClick={closeModal}
           />
         </ModalDialog.Footer>
+        <ModalDialog.Container>
+          <div style={{ width: "100%", height: "100%", background: "red" }}>
+            123
+          </div>
+        </ModalDialog.Container>
       </ModalDialog>
     </>
   );
@@ -68,7 +73,7 @@ export const Default = Template.bind({});
 Default.args = {
   displayType: "aside",
   displayTypeDetailed: {
-    desktop: "modal",
+    desktop: "aside",
     tablet: "aside",
     smallTablet: "modal",
     mobile: "aside",
diff --git a/packages/components/modal-dialog/views/modal-aside.js b/packages/components/modal-dialog/views/modal-aside.js
index b86e58ec28..a7b9e7ee7a 100644
--- a/packages/components/modal-dialog/views/modal-aside.js
+++ b/packages/components/modal-dialog/views/modal-aside.js
@@ -32,6 +32,7 @@ const Modal = ({
   header,
   body,
   footer,
+  container,
   visible,
   withFooterBorder,
   modalSwipeOffset,
@@ -39,6 +40,7 @@ const Modal = ({
   const headerComponent = header ? header.props.children : null;
   const bodyComponent = body ? body.props.children : null;
   const footerComponent = footer ? footer.props.children : null;
+  const containerComponent = container ? container.props.children : null;
 
   const validateOnMouseDown = (e) => {
     if (e.target.id === "modal-onMouseDown-close") onClose();
@@ -90,54 +92,60 @@ const Modal = ({
               )
             ) : (
               <>
-                {header && (
-                  <StyledHeader
-                    id="modal-header-swipe"
-                    className={`modal-header ${header.props.className}`}
-                    currentDisplayType={currentDisplayType}
-                    {...header.props}
-                  >
-                    <Heading
-                      level={1}
-                      className={"heading"}
-                      size="medium"
-                      truncate={true}
-                    >
-                      {headerComponent}
-                    </Heading>
-                  </StyledHeader>
-                )}
-                {body && (
-                  <StyledBody
-                    className={`modal-body ${body.props.className}`}
-                    withBodyScroll={withBodyScroll}
-                    isScrollLocked={isScrollLocked}
-                    hasFooter={1 && footer}
-                    currentDisplayType={currentDisplayType}
-                    {...body.props}
-                  >
-                    {currentDisplayType === "aside" && withBodyScroll ? (
-                      <Scrollbar
-                        stype="mediumBlack"
-                        id="modal-scroll"
-                        className="modal-scroll"
+                {container && currentDisplayType !== "modal" ? (
+                  <>{containerComponent}</>
+                ) : (
+                  <>
+                    {header && (
+                      <StyledHeader
+                        id="modal-header-swipe"
+                        className={`modal-header ${header.props.className}`}
+                        currentDisplayType={currentDisplayType}
+                        {...header.props}
                       >
-                        {bodyComponent}
-                      </Scrollbar>
-                    ) : (
-                      bodyComponent
+                        <Heading
+                          level={1}
+                          className={"heading"}
+                          size="medium"
+                          truncate={true}
+                        >
+                          {headerComponent}
+                        </Heading>
+                      </StyledHeader>
                     )}
-                  </StyledBody>
-                )}
-                {footer && (
-                  <StyledFooter
-                    className={`modal-footer ${footer.props.className}`}
-                    withFooterBorder={withFooterBorder}
-                    currentDisplayType={currentDisplayType}
-                    {...footer.props}
-                  >
-                    {footerComponent}
-                  </StyledFooter>
+                    {body && (
+                      <StyledBody
+                        className={`modal-body ${body.props.className}`}
+                        withBodyScroll={withBodyScroll}
+                        isScrollLocked={isScrollLocked}
+                        hasFooter={1 && footer}
+                        currentDisplayType={currentDisplayType}
+                        {...body.props}
+                      >
+                        {currentDisplayType === "aside" && withBodyScroll ? (
+                          <Scrollbar
+                            stype="mediumBlack"
+                            id="modal-scroll"
+                            className="modal-scroll"
+                          >
+                            {bodyComponent}
+                          </Scrollbar>
+                        ) : (
+                          bodyComponent
+                        )}
+                      </StyledBody>
+                    )}
+                    {footer && (
+                      <StyledFooter
+                        className={`modal-footer ${footer.props.className}`}
+                        withFooterBorder={withFooterBorder}
+                        currentDisplayType={currentDisplayType}
+                        {...footer.props}
+                      >
+                        {footerComponent}
+                      </StyledFooter>
+                    )}
+                  </>
                 )}
               </>
             )}