Add drag element and improve modal component

Kubit · Kubit · commit b4d40ba9ec71 · 2024-09-24T09:50:12.000+02:00
diff --git a/src/components/modal/modal.styled.ts b/src/components/modal/modal.styled.ts
@@ -105,3 +105,7 @@ export const ModalContentStyled = styled.div<IModalStyled & ModalShowScrollType>
 export const ModalFooterStyled = styled.div<IModalStyled>`
   ${props => getStyles(props.$styles.footer)}
 `;
+
+export const DraggableIcon = styled.div<IModalStyled>`
+  ${props => getStyles(props.$styles?.dragIconContainer)}
+`;
diff --git a/src/components/modal/modalControlled.tsx b/src/components/modal/modalControlled.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { STYLES_NAME } from '@/constants';
-import { useMediaDevice, useScrollEffect, useStyles, useZoomEffect } from '@/hooks';
+import { useMediaDevice, useScrollEffect, useStyles, useSwipeDown, useZoomEffect } from '@/hooks';
 import { ErrorBoundary } from '@/provider/errorBoundary/errorBoundary';
 import { FallbackComponent } from '@/provider/errorBoundary/fallbackComponent';
 import { DeviceBreakpointsType } from '@/types';
@@ -40,17 +40,29 @@ const ModalControlledComponent = React.forwardRef(
     const zoomRef = useZoomEffect(CONTAINER_STYLES_EDIT, MAX_ZOOM);
     const zoomRefChild = useZoomEffect(CONTENT_STYLES_EDIT, MAX_ZOOM);
 
+    const { setPopoverRef, setDragIconRef } = useSwipeDown(props.popover?.animationOptions, () =>
+      props.onClose?.()
+    );
+
+    const handlePopoverCloseInternally = () => {
+      props.popover?.onCloseInternally?.();
+      props.onClose?.();
+    };
+
     const modalStructure = (
       <ModalStandAlone
         {...props}
         ref={ref}
         device={device}
+        dragIconRef={setDragIconRef}
+        popover={{ ...props.popover, forwardedRef: setPopoverRef }}
         resizeRef={resizeRef}
         scrollableRef={scrollableRef}
         shadowRef={shadowRef}
         styles={styles}
         zoomRef={zoomRef}
         zoomRefChild={zoomRefChild}
+        onPopoverCloseInternally={handlePopoverCloseInternally}
       />
     );
 
diff --git a/src/components/modal/modalStandAlone.tsx b/src/components/modal/modalStandAlone.tsx
@@ -12,6 +12,7 @@ import { useId } from '@/hooks';
 import { DeviceBreakpointsType } from '@/types';
 
 import {
+  DraggableIcon,
   ModalCloseButtonStyled,
   ModalContentStyled,
   ModalFooterStyled,
@@ -95,6 +96,7 @@ const ModalStandAloneComponent = (
       positionVariant={PopoverPositionVariantType.FIXED}
       trapFocusInsideModal={true}
       variant={props.styles.popoverVariant}
+      onCloseInternally={props.onPopoverCloseInternally}
       {...props.popover}
     >
       <ModalStyled
@@ -109,6 +111,11 @@ const ModalStandAloneComponent = (
         onKeyDown={event => props.onKeyDown?.(event)}
       >
         <ModalHeaderStyled ref={shadowRef} $styles={props.styles}>
+          {!props.blocked && props.dragIcon && (
+            <DraggableIcon ref={props.dragIconRef} $styles={props.styles}>
+              <ElementOrIcon customIconStyles={props.styles?.dragIcon} {...props.dragIcon} />
+            </DraggableIcon>
+          )}
           {!props.blocked && props.closeIcon?.icon && (
             <ModalCloseButtonStyled $styles={props.styles}>
               <ElementOrIcon
diff --git a/src/components/modal/modalUnControlled.tsx b/src/components/modal/modalUnControlled.tsx
@@ -51,6 +51,7 @@ const ModalUnControlledComponent = <V extends string | unknown>(
       open={open}
       popover={{ ...popover, onCloseInternally: handlePopoverCloseInternally }}
       variant={variant}
+      onClose={onClose}
       onKeyDown={onKeyDown}
     />
   );
diff --git a/src/components/modal/stories/modal.stories.tsx b/src/components/modal/stories/modal.stories.tsx
@@ -44,7 +44,12 @@ const StoryWithHooks = args => {
   return (
     <div style={{ width: 'fit-content' }}>
       <button onClick={handleOpen}>Open Modal</button>
-      <Story {...args} closeIcon={{ ...args.closeIcon, onClick: handleClose }} open={open} />
+      <Story
+        {...args}
+        closeIcon={{ ...args.closeIcon, onClick: handleClose }}
+        open={open}
+        onClose={handleClose}
+      />
     </div>
   );
 };
diff --git a/src/components/modal/types/modal.ts b/src/components/modal/types/modal.ts
@@ -57,6 +57,9 @@ export interface IModalStandAlone {
   device: DeviceBreakpointsType;
   dataTestId?: string;
   onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+  onPopoverCloseInternally?: () => void;
+  dragIcon?: IElementOrIcon;
+  dragIconRef?: (node) => void;
   /* To useScrollableEffect */
   scrollableRef: (node) => void;
   resizeRef: (node) => void;
@@ -73,16 +76,16 @@ type OmitProps =
   | 'resizeRef'
   | 'shadowRef'
   | 'zoomRef'
-  | 'zoomRefChild';
+  | 'zoomRefChild'
+  | 'dragIconRef';
 
 export interface IModalControlled<V = undefined extends string ? unknown : string>
   extends Omit<IModalStandAlone, OmitProps>,
     Omit<CustomTokenTypes<ModalBaseStylesType>, 'cts' | 'extraCt'> {
   variant: V;
   portalId?: string;
+  onClose?: () => void;
 }
 
 export interface IModalUnControlled<V = undefined extends string ? unknown : string>
-  extends IModalControlled<V> {
-  onClose?: () => void;
-}
+  extends IModalControlled<V> {}
diff --git a/src/components/modal/types/modalTheme.ts b/src/components/modal/types/modalTheme.ts
@@ -16,6 +16,8 @@ export type ModalBaseStylesType = {
   closeButton?: {
     buttonVariant?: string;
   };
+  dragIconContainer?: CommonStyleType;
+  dragIcon?: IconTypes;
 };
 
 export type ModalStylesType<P extends string | number | symbol> = {
diff --git a/src/components/modalV2/fragments/modalHeader.tsx b/src/components/modalV2/fragments/modalHeader.tsx
@@ -3,59 +3,76 @@ import React from 'react';
 import { Button } from '@/components/button';
 import { ElementOrIcon } from '@/components/elementOrIcon';
 import { Text, TextComponentType } from '@/components/text';
+import { DeviceBreakpointsType } from '@/types';
 
 import {
+  DraggableIcon,
   ModalCloseButtonStyled,
-  ModalFilledContainer,
   ModalHeaderStyled,
   TitleHiddenContainer,
 } from '../modal.styled';
 import { IModalStandAlone } from '../types';
 
-type PickedProps = 'styles' | 'dataTestId' | 'blocked' | 'closeIcon' | 'closeButton' | 'title';
+type PickedProps =
+  | 'styles'
+  | 'dataTestId'
+  | 'blocked'
+  | 'closeIcon'
+  | 'closeButton'
+  | 'title'
+  | 'dragIcon'
+  | 'dragIconRef'
+  | 'device';
 type ModalHeaderProps = Pick<IModalStandAlone, PickedProps> & {
   titleIdFinal: string;
 };
 
 const ModalHeaderComponent = (
   props: ModalHeaderProps,
   ref: React.ForwardedRef<HTMLDivElement> | undefined | null
-): JSX.Element => (
-  <ModalHeaderStyled ref={ref} $styles={props.styles}>
-    {/* This element is needed for aligment purpose */}
-    <ModalFilledContainer $styles={props.styles} />
-    {props.title?.visible === undefined || props.title.visible ? (
-      <>
-        <Text
-          component={TextComponentType.H1}
-          customTypography={props.styles.title}
-          dataTestId={`${props.dataTestId}Title`}
-          id={props.titleIdFinal}
-          {...props.title}
-        >
-          {props.title?.content}
-        </Text>
-      </>
-    ) : (
-      <TitleHiddenContainer id={props.titleIdFinal}>{props.title?.content}</TitleHiddenContainer>
-    )}
-    {!props.blocked && props.closeIcon?.icon && (
-      <ModalCloseButtonStyled $styles={props.styles}>
-        <ElementOrIcon
-          customIconStyles={props.styles?.closeButtonIcon}
-          dataTestId={`${props.dataTestId}CloseIcon`}
-          {...props.closeIcon}
-        />
-      </ModalCloseButtonStyled>
-    )}
-    {!props.blocked &&
-      props.closeButton?.content &&
-      (props.styles.closeButton?.buttonVariant || props.closeButton?.variant) && (
-        <Button variant={props.styles.closeButton?.buttonVariant} {...props.closeButton}>
-          {props.closeButton.content}
-        </Button>
+): JSX.Element => {
+  const isMobile = props.device === DeviceBreakpointsType.MOBILE;
+
+  return (
+    <ModalHeaderStyled ref={ref} $styles={props.styles}>
+      {isMobile && !props.blocked && props.dragIcon && (
+        <DraggableIcon ref={props.dragIconRef} $styles={props.styles}>
+          <ElementOrIcon customIconStyles={props.styles?.dragIcon} {...props.dragIcon} />
+        </DraggableIcon>
+      )}
+      {!props.blocked && props.closeIcon?.icon && (
+        <ModalCloseButtonStyled $styles={props.styles}>
+          <ElementOrIcon
+            customIconStyles={props.styles?.closeButtonIcon}
+            dataTestId={`${props.dataTestId}CloseIcon`}
+            {...props.closeIcon}
+          />
+        </ModalCloseButtonStyled>
       )}
-  </ModalHeaderStyled>
-);
+      {!props.blocked &&
+        props.closeButton?.content &&
+        (props.styles.closeButton?.buttonVariant || props.closeButton?.variant) && (
+          <Button variant={props.styles.closeButton?.buttonVariant} {...props.closeButton}>
+            {props.closeButton.content}
+          </Button>
+        )}
+      {props.title?.visible === undefined || props.title.visible ? (
+        <>
+          <Text
+            component={TextComponentType.H1}
+            customTypography={props.styles.title}
+            dataTestId={`${props.dataTestId}Title`}
+            id={props.titleIdFinal}
+            {...props.title}
+          >
+            {props.title?.content}
+          </Text>
+        </>
+      ) : (
+        <TitleHiddenContainer id={props.titleIdFinal}>{props.title?.content}</TitleHiddenContainer>
+      )}
+    </ModalHeaderStyled>
+  );
+};
 
 export const ModalHeader = React.forwardRef(ModalHeaderComponent);
diff --git a/src/components/modalV2/modal.styled.ts b/src/components/modalV2/modal.styled.ts
@@ -83,10 +83,6 @@ export const ModalHeaderStyled = styled.div<IModalStyled>`
   ${props => getStyles(props.$styles.headerContainer)}
 `;
 
-export const ModalFilledContainer = styled.div<IModalStyled>`
-  ${props => getStyles(props.$styles.closeButtonIcon)};
-`;
-
 export const TitleHiddenContainer = styled.span`
   display: none;
 `;
@@ -105,3 +101,7 @@ export const ModalContentStyled = styled.div<IModalStyled & ModalShowScrollType>
 export const ModalFooterStyled = styled.div<IModalStyled>`
   ${props => getStyles(props.$styles.footer)}
 `;
+
+export const DraggableIcon = styled.div<IModalStyled>`
+  ${props => getStyles(props.$styles?.dragIconContainer)}
+`;
diff --git a/src/components/modalV2/modalControlled.tsx b/src/components/modalV2/modalControlled.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { STYLES_NAME } from '@/constants';
-import { useMediaDevice, useScrollEffect, useStylesV2 } from '@/hooks';
+import { useMediaDevice, useScrollEffect, useStylesV2, useSwipeDown } from '@/hooks';
 import { ErrorBoundary } from '@/provider/errorBoundary/errorBoundary';
 import { FallbackComponent } from '@/provider/errorBoundary/fallbackComponent';
 
@@ -26,14 +26,26 @@ const ModalControlledComponent = React.forwardRef(
       shadowStyles: styles?.headerContainer?.box_shadow,
     });
 
+    const { setPopoverRef, setDragIconRef } = useSwipeDown(props.popover?.animationOptions, () =>
+      props.onClose?.()
+    );
+
+    const handlePopoverCloseInternally = () => {
+      props.popover?.onCloseInternally?.();
+      props.onClose?.();
+    };
+
     const modalStructure = (
       <ModalStandAlone
         {...props}
         ref={ref}
         device={device}
+        dragIconRef={setDragIconRef}
+        popover={{ ...props.popover, forwardedRef: setPopoverRef }}
         scrollableRef={scrollableRef}
         shadowRef={shadowRef}
         styles={styles as ModalBaseStylesType}
+        onPopoverCloseInternally={handlePopoverCloseInternally}
       />
     );
 
diff --git a/src/components/modalV2/modalStandAlone.tsx b/src/components/modalV2/modalStandAlone.tsx
@@ -3,7 +3,11 @@ import * as React from 'react';
 import { useId } from '@/hooks';
 
 import { Footer } from '../footer';
-import { Popover, PopoverComponentType, PopoverPositionVariantType } from '../popover';
+import {
+  PopoverControlled as Popover,
+  PopoverComponentType,
+  PopoverPositionVariantType,
+} from '../popover';
 import { ModalHeader } from './fragments';
 import { ModalContentStyled, ModalFooterStyled, ModalStyled } from './modal.styled';
 import { IModalStandAlone } from './types';
@@ -40,6 +44,7 @@ const ModalStandAloneComponent = <V extends string | unknown>(
       positionVariant={PopoverPositionVariantType.FIXED}
       trapFocusInsideModal={true}
       variant={props.styles.popoverVariant}
+      onCloseInternally={props.onPopoverCloseInternally}
       {...props.popover}
     >
       <ModalStyled
@@ -64,6 +69,9 @@ const ModalStandAloneComponent = <V extends string | unknown>(
           closeButton={props.closeButton}
           closeIcon={props.closeIcon}
           dataTestId={dataTestId}
+          device={props.device}
+          dragIcon={props.dragIcon}
+          dragIconRef={props.dragIconRef}
           styles={props.styles}
           title={props.title}
           titleIdFinal={titleIdFinal}
diff --git a/src/components/modalV2/modalUnControlled.tsx b/src/components/modalV2/modalUnControlled.tsx
@@ -51,6 +51,7 @@ const ModalUnControlledComponent = <V extends string | unknown>(
       open={open}
       popover={{ ...popover, onCloseInternally: handlePopoverCloseInternally }}
       variant={variant}
+      onClose={onClose}
       onKeyDown={onKeyDown}
     />
   );
diff --git a/src/components/modalV2/stories/modal.stories.tsx b/src/components/modalV2/stories/modal.stories.tsx
@@ -24,12 +24,36 @@ const meta = {
     figmaUrl:
       'https://www.figma.com/file/EYQkbENTFO5r8muvXlPoOy/Kubit-v.1.0.0?type=design&node-id=3922-22906&mode=dev',
   },
+  render: ({ ...args }) => <StoryWithHooks {...args} />,
 } satisfies Meta<typeof Story>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta> & { args: { themeArgs?: object } };
 
+const StoryWithHooks = args => {
+  const [open, setOpen] = React.useState(false);
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+  const handleOpen = () => {
+    setOpen(true);
+  };
+
+  return (
+    <div style={{ width: 'fit-content' }}>
+      <button onClick={handleOpen}>Open Modal</button>
+      <Story
+        {...args}
+        closeIcon={{ ...args.closeIcon, onClick: handleClose }}
+        open={open}
+        onClose={handleClose}
+      />
+    </div>
+  );
+};
+
 export const Modal: Story = {
   args: {
     variant: Object.values(variantsObject[themeSelected].ModalVariantType || {})[0] as string,
@@ -65,6 +89,7 @@ export const Modal: Story = {
         animationYEndPosition: '0px',
         animationXEndPosition: '0px',
       },
+      focusFirstDescendantAutomatically: false,
     },
     themeArgs: themesObject[themeSelected][STYLES_NAME.MODAL],
   },
diff --git a/src/components/modalV2/types/modal.ts b/src/components/modalV2/types/modal.ts
diff --git a/src/components/modalV2/types/modalTheme.ts b/src/components/modalV2/types/modalTheme.ts
