import React from "react" ; import clsx from "clsx" ; import { Backdrop , Modal , Paper , Theme } from "@mui/material" ; import createStyles from "@mui/styles/createStyles" ; import makeStyles from "@mui/styles/makeStyles" ; import { SlideFade } from "./SlideFadeTransition" ; export interface EntityDrawerProps { /**
     * The contents of the drawer.
     */ children : React . ReactNode ; param { object } event onClose ? : ( ) => void ; /**
     * If `true`, the drawer is open.
     */ open : boolean ; /**
     * The offset position of this view determines if it needs to be translated
     * when nested
     */ offsetPosition : number ; onExitAnimation ? : ( ) => void ; } export interface StyleProps { offsetPosition : number ; } const useStyles = makeStyles < Theme , StyleProps > ( ( theme ) => createStyles ( { root : { } , paper : { height : "100%" , WebkitOverflowScrolling : "touch" , position : "fixed" , outline : 0 } , paperAnchorRight : ( { offsetPosition } ) => ( { left : "auto" , right : 0 } ) , modal : { } } ) ) ; const defaultTransitionDuration = { enter : 225 , exit : 175 } ; /**
 * The props of the [Modal](/api/modal/) component are available
 * when `variant="temporary"` is set.
 */ export const SideDialogDrawer = React . forwardRef < HTMLDivElement , EntityDrawerProps > ( function EntityDrawer ( props , ref ) { const { children , onClose , open , offsetPosition , onExitAnimation } = props ; const classes = useStyles ( { offsetPosition } ) ; const drawer = ( < Paper elevation = { 1 } square style = { { transition : "transform 1000ms cubic-bezier(0.33, 1, 0.68, 1)" , transform : `translateX(-${ ( offsetPosition ) * 240 }px)` } } className = { clsx ( classes . paper , classes . paperAnchorRight ) } > { children } < /Paper>); const slidingDrawer = ( < SlideFade in = { open } timeout = { defaultTransitionDuration } onExitAnimation = { onExitAnimation } > { drawer } < /SlideFade>); return ( < Modal BackdropProps = { { transitionDuration : defaultTransitionDuration } } BackdropComponent = { Backdrop } className = { clsx ( classes . root , classes . modal ) } open = { open } onClose = { onClose } ref = { ref } keepMounted = { true } disableEnforceFocus = { true } > { slidingDrawer } < /Modal>); } ) ;