glide-design-system
Version:
Glide design system is an open-source React component library. It offers numerous benefits that make them essential tools for design and development teams.
63 lines (60 loc) • 1.95 kB
JavaScript
import React, { useEffect, useRef } from "react";
import PropTypes from "prop-types";
/**
* Drwaer layout
* @param {*} position The position from which the drawer should slide in.
* @param {*} onClose A callback function to be executed when the user clicks on the overlay area of the drawer. This can be used to handle the event when the drawer is closed.
* @param {*} open Controls whether the drawer is open or closed.
* @param {*} children The content to be rendered inside the drawer. This can be any valid React element or component.
* @param {string} className - custom class for styles
*/
export default function Drawer({
position = "right",
onClose,
open = true,
children,
style,
className,
paperClass,
paperStyle,
}) {
const combinedStyle = {
height:
position === "right" || position === "left" ? "100%" : open ? "300px" : 0,
width:
position === "top" || position === "bottom" ? "100%" : open ? "300px" : 0,
top:
position === "right" || position === "left" || position === "top"
? 0
: "",
right: position === "right" || position === "bottom" ? 0 : "",
left: position === "left" || position === "top" ? 0 : "",
bottom: position === "bottom" ? 0 : "",
transition: "0.2s ease",
boxShadow: open
? "rgb(0 0 0 / 20%) 0px 8px 10px -5px, rgb(0 0 0 / 14%) 0px 16px 24px 2px, rgb(0 0 0 / 12%) 0px 6px 30px 5px"
: "",
...style,
};
return (
<div>
<div
className={`drawerPaper ${paperClass ? paperClass : ""}`}
style={{ display: open ? "block" : "none", ...paperStyle }}
onClick={() => onClose && onClose()}
></div>
<div
id="drawer"
style={combinedStyle}
className={`drawer ${className ? className : ""}`}
>
{children}
</div>
</div>
);
}
Drawer.propTypes = {
position: PropTypes.string,
onClose: PropTypes.func,
open: PropTypes.bool,
};