diff --git a/src/components/Datagrid/FullScreenContainer.tsx b/src/components/Datagrid/FullScreenContainer.tsx index 7204f27e5..a40717aed 100644 --- a/src/components/Datagrid/FullScreenContainer.tsx +++ b/src/components/Datagrid/FullScreenContainer.tsx @@ -50,12 +50,14 @@ const useAnimationStyles = (isOpen: boolean, duration: number) => { }; }; -interface FullScreenContainerProps { - open?: boolean; - className?: string; -} +type FullScreenContainerProps = FC< + PropsWithChildren<{ + open?: boolean; + className?: string; + }> +>; -const Portal = ({ className, children, open }) => { +const Portal: FullScreenContainerProps = ({ className, children, open }) => { const { delayedState: delayedOpen, duration } = useDelayedState(open); const styles = useAnimationStyles(open, duration); @@ -67,13 +69,12 @@ const Portal = ({ className, children, open }) => { ); }; -export const FullScreenContainer: FC> = ({ children, open, className }) => ( +export const FullScreenContainer: FullScreenContainerProps = ({ + children, + ...rest +}) => ( <> - - {children} - + {children} {children} ); diff --git a/src/components/Datagrid/useFullScreenMode.ts b/src/components/Datagrid/useFullScreenMode.ts index 27ed6528a..ddc277090 100644 --- a/src/components/Datagrid/useFullScreenMode.ts +++ b/src/components/Datagrid/useFullScreenMode.ts @@ -2,6 +2,7 @@ import { usePreventHistoryBack } from "@saleor/hooks/usePreventHistoryBack"; import { useEffect, useState } from "react"; import { useDelayedState } from "./useDelayedState"; +import { usePressEscKey } from "./usePressEscKey"; export const useFullScreenMode = () => { const { enable, disable } = usePreventHistoryBack(document.body, { @@ -11,6 +12,10 @@ export const useFullScreenMode = () => { const { delayedState: delayedOpen } = useDelayedState(!open); const togglePreventHistory = open ? disable : enable; + usePressEscKey(() => { + setOpen(false); + }); + const toggle = () => { setOpen(p => !p); togglePreventHistory(); diff --git a/src/components/Datagrid/usePressEscKey.tsx b/src/components/Datagrid/usePressEscKey.tsx new file mode 100644 index 000000000..829950293 --- /dev/null +++ b/src/components/Datagrid/usePressEscKey.tsx @@ -0,0 +1,14 @@ +import { useEffect } from "react"; + +export const usePressEscKey = (callback?: () => void) => { + useEffect(() => { + const handler = (event: KeyboardEvent) => { + if (event.code === "Escape") { + callback(); + } + }; + + document.addEventListener("keydown", handler); + return () => document.removeEventListener("keydown", handler); + }, [callback]); +};