Add Drawer custom animation props

reaviz · Oct 23, 2024 · 2d66edc · 2d66edc
1 parent 93ff9d6
commit 2d66edc
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 4 deletions.
diff --git a/src/layers/Drawer/Drawer.story.tsx b/src/layers/Drawer/Drawer.story.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, useState } from 'react';
 import { useDrawer } from './useDrawer';
 import { Drawer } from './Drawer';
 import { Button } from '../../elements';
@@ -78,3 +78,26 @@ export const CustomHeader = () => {
     </Fragment>
   );
 };
+
+export const CustomAnimation = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <Fragment>
+      <Drawer
+        className="max-w-[400px] mr-10 max-h-[90vh] my-auto rounded-xl"
+        initial={{ x: '120%', opacity: 0 }}
+        animate={{ x: 0, opacity: 1 }}
+        exit={{ x: '120%', opacity: 0 }}
+        transition={{ duration: 0.5, ease: [0.12, 0.78, 0.32, 0.98] }}
+        open={isOpen}
+        onClose={() => setIsOpen(false)}
+      >
+        <p>Hello There!</p>
+      </Drawer>
+      <Button type="button" onClick={() => setIsOpen(!isOpen)}>
+        Open
+      </Button>
+    </Fragment>
+  );
+};
diff --git a/src/layers/Drawer/Drawer.tsx b/src/layers/Drawer/Drawer.tsx
@@ -2,14 +2,16 @@ import React, { FC, ReactElement } from 'react';
 import FocusTrap from 'focus-trap-react';
 import { useId, CloneElement } from '@/utils';
 import { GlobalOverlay, GlobalOverlayProps } from '@/utils/Overlay';
-import { motion } from 'framer-motion';
+import { motion, MotionProps } from 'framer-motion';
 import { variants } from './variants';
 import { DrawerHeader, DrawerHeaderProps } from './DrawerHeader';
 import { twMerge } from 'tailwind-merge';
 import { DrawerTheme } from './DrawerTheme';
 import { useComponentTheme } from '@/utils';
 
-export interface DrawerProps extends Omit<GlobalOverlayProps, 'children'> {
+export interface DrawerProps
+  extends Omit<GlobalOverlayProps, 'children'>,
+    MotionProps {
   /**
    * Position of the drawer.
    */
@@ -82,7 +84,8 @@ export const Drawer: FC<Partial<DrawerProps>> = ({
   disablePadding = false,
   showCloseButton = true,
   onClose,
-  theme: customTheme
+  theme: customTheme,
+  ...rest
 }) => {
   const id = useId();
   const variant = variants[position];
@@ -129,6 +132,7 @@ export const Drawer: FC<Partial<DrawerProps>> = ({
                 disablePadding && theme.disablePadding,
                 className
               )}
+              {...rest}
             >
               {(header || headerElement) && (
                 <CloneElement<DrawerHeaderProps>