All files / src/components/common/CustomDrawer index.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/* eslint-disable react-hooks/exhaustive-deps */
import { useEffect, useRef } from "react";
import { motion } from "framer-motion";
import { CloseRounded } from "@mui/icons-material";
import useDrawerState from "../../../hooks/common/useDrawerState";
import { DrawerTypesKeys } from "../../../store/features/drawers/initialState";
 
type CustomDrawerPropTypes = {
  id: DrawerTypesKeys;
  children?: React.ReactNode;
  src?: string;
  openFrom?: "right" | "left";
  addtionalStyles?: string;
  showOverlay?: boolean;
  startFrom?: string;
  OnClose?: () => void;
};
 
const CustomDrawer = ({
  id,
  children,
  src = undefined,
  openFrom = "right",
  addtionalStyles,
  showOverlay = true,
  startFrom = "0",
  OnClose,
}: CustomDrawerPropTypes) => {
  const { isOpen, closeDrawer } = useDrawerState(id);
  const drawerRef = useRef<HTMLDivElement>(null);
  const drawerVariants = {
    open: { x: 0 },
    closed: { x: `${(openFrom === "right" ? 1 : -1) * 100}%` },
  };
 
  const close = () => {
    Iif (OnClose) {
      OnClose();
    }
    Iif (isOpen) closeDrawer();
  };
 
  // Handle keyboard interactions
  useEffect(() => {
    const handleKeyDown = (event) => {
      Iif (event.key === "Escape") {
        close();
      }
    };
 
    document.addEventListener("keydown", handleKeyDown);
    return () => document.removeEventListener("keydown", handleKeyDown);
  }, [close]);
 
  useEffect(() => {
    const handleClickOutside = (event) => {
      Iif (drawerRef?.current && !drawerRef?.current?.contains(event.target)) {
        close();
      }
    };
 
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [drawerRef]);
 
  return (
    <>
      {showOverlay && (
        <div
          style={{ display: isOpen ? "block" : "none", top: `${startFrom}px` }}
          className={`fixed left-0 bg-black opacity-25 w-screen h-screen z-[91] transition-all`}
        />
      )}
      <motion.div
        id={id}
        ref={drawerRef}
        initial="closed"
        animate={isOpen ? "open" : "closed"}
        variants={drawerVariants}
        style={{ top: `${startFrom}px` }}
        transition={{ type: "tween", stiffness: 260, damping: 20 }}
        className={`${addtionalStyles} fixed ${
          openFrom === "right" ? "right-0" : "left-0"
        } h-full bg-white shadow-lg z-[100] w-full lg:w-1/2`}>
        <div className={`flex ${openFrom === "left" ? "justify-end" : ""}`}>
          <button onClick={close} className="text-2xl p-2">
            <CloseRounded />
          </button>
        </div>
        <hr />
        {children && (
          <div className="pb-15 overflow-auto h-full">{children}</div>
        )}
        {src && isOpen && (
          <iframe
            src={src}
            id="drawer-iframe"
            frameBorder="0"
            width="100%"
            height="100%"
            allow="fullscreen"
            title="Embedded Page"
            className="pb-20"
          />
        )}
      </motion.div>
    </>
  );
};
 
export default CustomDrawer;