@majoo-ui/react 2.0.1 → 2.1.0-rc.1

package/components/pageDialog/PageDialog.esm.js

@@ -0,0 +1,291 @@
+import 'core-js/modules/es.iterator.constructor.js';
+import 'core-js/modules/es.iterator.find.js';
+import 'core-js/modules/es.iterator.to-array.js';
+import { __rest } from 'tslib';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useCallback } from 'react';
+import { styled } from '../../config/stitches.config.esm.js';
+import Box from '../../layout/box/Box.esm.js';
+import Dialog, { DialogTrigger, DialogContent, DialogClose, DialogTitle, DialogPortal } from '../dialog/Dialog.esm.js';
+import Heading from '../heading/Heading.esm.js';
+import { Image } from '../image/Image.esm.js';
+import { ConditionalWrapper } from '../../wrapper/ConditionalWrapper.esm.js';
+import { CloseOutline } from '@majoo-ui/icons';
+import useMediaQuery from '../../utils/useMediaQuery.esm.js';
+
+const PageDialogFooter = styled('div');
+PageDialogFooter.displayName = 'PageDialogFooter';
+const PageDialogTitle = styled('div');
+PageDialogTitle.displayName = 'PageDialogTitle';
+const PageDialogContent = styled('div', {});
+PageDialogContent.displayName = 'PageDialogContent';
+const PageDialogTrigger = styled('div');
+PageDialogTrigger.displayName = 'PageDialogTrigger';
+const ContentWrapper = styled(Box, {
+  animationName: 'unset !important',
+  variants: {
+    wrapperSize: {
+      md: {
+        padding: '40px 24px',
+        marginLeft: 'auto',
+        marginRight: 'auto',
+        //982 + padding horizontal
+        maxWidth: 1030
+      },
+      lg: {
+        padding: '40px 24px',
+        marginLeft: 'auto',
+        marginRight: 'auto',
+        //1318 + padding horizontal
+        maxWidth: 1366
+      }
+    }
+  }
+});
+const PageDialogLogo = styled('div', {
+  width: 124,
+  height: 40,
+  backgroundImage: 'var(--brandAssets-logo)',
+  backgroundSize: 'contain',
+  backgroundRepeat: 'no-repeat',
+  backgroundPosition: 'center'
+});
+const findNodeChild = (array, displayName) => {
+  const result = array.find(child => {
+    if (/*#__PURE__*/React__default.isValidElement(child)) {
+      const reactElement = child;
+      if (typeof reactElement.type !== 'string') {
+        const reactFC = reactElement.type;
+        if (reactFC.displayName === displayName) {
+          return true;
+        }
+      }
+    }
+    return false;
+  });
+  return result;
+};
+const FOOTER_HEIGHT = 64;
+const HEADER_HEIGHT = 56;
+const HEADER_HEIGHT_MOBILE = 60;
+const PageDialog = props => {
+  var _a, _b;
+  const {
+      children,
+      size,
+      css,
+      layer,
+      isMobile: _isMobile,
+      onOpenAutoFocus,
+      onCloseAutoFocus,
+      onPointerDownOutside,
+      onInteractOutside,
+      disabledCloseButton,
+      withPortal = true,
+      logo
+    } = props,
+    rest = __rest(props, ["children", "size", "css", "layer", "isMobile", "onOpenAutoFocus", "onCloseAutoFocus", "onPointerDownOutside", "onInteractOutside", "disabledCloseButton", "withPortal", "logo"]);
+  const childArray = React__default.Children.toArray(children);
+  const footerChildren = findNodeChild(childArray, 'PageDialogFooter');
+  const headerTitle = findNodeChild(childArray, 'PageDialogTitle');
+  const pageDialogChildren = findNodeChild(childArray, 'PageDialogContent');
+  const pageDialogTrigger = findNodeChild(childArray, 'PageDialogTrigger');
+  const autoQuery = useMediaQuery('(max-width: 767px)');
+  const isMobile = _isMobile === undefined ? autoQuery : _isMobile;
+  const ref = useCallback(node => {
+    if (node !== null) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'auto';
+    }
+  }, []);
+  const ClossedIcon = () => jsx("svg", {
+    width: "10",
+    height: "10",
+    viewBox: "0 0 10 10",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M0.292894 1.70711C-0.0976312 1.31658 -0.0976312 0.683417 0.292894 0.292893C0.683418 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L5 3.58579L8.29289 0.292893C8.68342 -0.0976311 9.31658 -0.0976311 9.70711 0.292893C10.0976 0.683417 10.0976 1.31658 9.70711 1.70711L6.41421 5L9.70711 8.29289C10.0976 8.68342 10.0976 9.31658 9.70711 9.70711C9.31658 10.0976 8.68342 10.0976 8.29289 9.70711L5 6.41421L1.70711 9.70711C1.31658 10.0976 0.683418 10.0976 0.292894 9.70711C-0.0976306 9.31658 -0.0976306 8.68342 0.292894 8.29289L3.58579 5L0.292894 1.70711Z",
+      fill: "#404545"
+    })
+  });
+  return jsxs(Dialog, Object.assign({}, rest, {
+    modal: false,
+    children: [pageDialogTrigger && jsx(DialogTrigger, Object.assign({}, pageDialogTrigger.props)), jsx(ConditionalWrapper, {
+      condition: withPortal,
+      wrapper: _child => jsx(DialogPortal, {
+        children: _child
+      }),
+      children: jsx(DialogContent, {
+        size: size,
+        css: Object.assign(Object.assign({}, css), {
+          height: '100%',
+          minHeight: 'unset',
+          zIndex: layer
+        }),
+        ref: ref,
+        onOpenAutoFocus: e => {
+          if (!onOpenAutoFocus) {
+            e.preventDefault();
+          } else {
+            onOpenAutoFocus(e);
+          }
+        },
+        onCloseAutoFocus: e => {
+          if (!onCloseAutoFocus) {
+            e.preventDefault();
+          } else {
+            onCloseAutoFocus(e);
+          }
+        },
+        onPointerDownOutside: e => {
+          if (!onPointerDownOutside) {
+            e.preventDefault();
+          } else {
+            onPointerDownOutside(e);
+          }
+        },
+        onInteractOutside: e => {
+          if (!onInteractOutside) {
+            e.preventDefault();
+          } else {
+            onInteractOutside(e);
+          }
+        },
+        children: jsxs(Box, {
+          css: {
+            backgroundColor: isMobile ? '$white' : '$gray50',
+            height: '100%',
+            display: 'flex',
+            flexDirection: 'column'
+          },
+          children: [jsxs(Box, {
+            css: {
+              backgroundColor: '$white',
+              padding: isMobile ? '24px 16px' : '4px 24px',
+              display: 'flex',
+              alignItems: 'center',
+              position: 'relative',
+              boxShadow: '$small',
+              zIndex: isMobile ? 11 : 1,
+              height: isMobile ? HEADER_HEIGHT_MOBILE : HEADER_HEIGHT
+            },
+            children: [jsxs(Box, {
+              css: {
+                justifyContent: isMobile ? 'flex-end' : 'flex-start',
+                flexDirection: isMobile ? 'row-reverse' : 'row',
+                width: '100%',
+                display: 'flex',
+                alignItems: 'center',
+                gap: isMobile ? '$spacing-04' : '$cozy'
+              },
+              children: [!isMobile && jsx(ConditionalWrapper, {
+                condition: !disabledCloseButton,
+                wrapper: children => jsx(DialogClose, {
+                  asChild: true,
+                  children: children
+                }),
+                children: jsx(Box, {
+                  css: {
+                    width: 48,
+                    height: 48,
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    backgroundColor: '$gray150',
+                    borderRadius: '$lg',
+                    cursor: disabledCloseButton ? 'not-allowed' : 'pointer'
+                  },
+                  children: jsx(CloseOutline, {
+                    size: "16"
+                  })
+                })
+              }), jsx(DialogTitle, {
+                css: {
+                  margin: 0,
+                  zIndex: isMobile ? 11 : 'unset'
+                },
+                children: headerTitle && jsx(Heading, Object.assign({
+                  as: "p",
+                  heading: "pageTitle"
+                }, headerTitle.props))
+              }), isMobile && jsx(ConditionalWrapper, {
+                condition: !disabledCloseButton,
+                wrapper: children => jsx(DialogClose, {
+                  asChild: true,
+                  children: children
+                }),
+                children: jsx(Box, {
+                  css: {
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    cursor: disabledCloseButton ? 'not-allowed' : 'pointer',
+                    padding: '$spacing-02',
+                    backgroundColor: '$gray50',
+                    borderRadius: 50
+                  },
+                  children: jsx(ClossedIcon, {})
+                })
+              })]
+            }), !isMobile && jsx(Box, {
+              css: {
+                position: 'absolute',
+                left: '50%',
+                top: '50%',
+                transform: 'translate(-50%,-50%)'
+              },
+              children: logo ? jsx(Image, {
+                src: logo,
+                alt: "logo",
+                width: 124,
+                height: 40,
+                objectFit: "contain",
+                className: undefined,
+                fallback: undefined
+              }) : jsx(PageDialogLogo, {})
+            })]
+          }), pageDialogChildren && jsx(Box, Object.assign({}, pageDialogChildren.props, {
+            ref: pageDialogChildren === null || pageDialogChildren === void 0 ? void 0 : pageDialogChildren.ref,
+            css: Object.assign({
+              flexGrow: 1,
+              maxHeight: footerChildren ? `calc(100vh - ${isMobile ? HEADER_HEIGHT_MOBILE : HEADER_HEIGHT}px - ${FOOTER_HEIGHT}px)` : `calc(100vh - ${isMobile ? HEADER_HEIGHT_MOBILE : HEADER_HEIGHT}px)`,
+              overflow: 'auto'
+            }, pageDialogChildren.props.css),
+            children: jsx(ContentWrapper, Object.assign({}, !isMobile ? {
+              wrapperSize: (_a = pageDialogChildren.props) === null || _a === void 0 ? void 0 : _a.wrapperSize
+            } : {
+              css: {
+                display: 'contents'
+              }
+            }, {
+              children: (_b = pageDialogChildren.props) === null || _b === void 0 ? void 0 : _b.children
+            }))
+          })), footerChildren && jsx(Box, Object.assign({}, footerChildren.props, {
+            css: Object.assign({
+              boxShadow: '$small',
+              backgroundColor: '$white',
+              padding: '16px 24px',
+              display: 'flex',
+              justifyContent: 'flex-end',
+              height: FOOTER_HEIGHT
+            }, footerChildren.props.css)
+          }))]
+        })
+      })
+    })]
+  }));
+};
+PageDialog.Trigger = PageDialogTrigger;
+PageDialog.Title = PageDialogTitle;
+PageDialog.Content = PageDialogContent;
+PageDialog.Footer = PageDialogFooter;
+PageDialog.defaultProps = {
+  size: 'full',
+  layer: '$modal'
+};
+
+export { PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger };