Improve UX to more closely resembles a native confirm

WordPress · Aug 20, 2021 · 335053a · 335053a
1 parent 72cd96b
commit 335053a
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 13 deletions.
diff --git a/packages/components/src/confirm/component.tsx b/packages/components/src/confirm/component.tsx
@@ -4,7 +4,7 @@
  * External dependencies
  */
 // eslint-disable-next-line no-restricted-imports
-import type { Ref } from 'react';
+import { Ref, useEffect } from 'react';
 import { confirmable } from 'react-confirm';
 
 /**
@@ -16,6 +16,8 @@ import { Card, CardHeader, CardFooter } from '../card';
 import { Heading } from '../heading';
 import { contextConnect, PolymorphicComponentProps } from '../ui/context';
 import { useConfirm } from './hook';
+import type { KeyboardEvent } from 'react';
+import { ESCAPE } from '@wordpress/keycodes';
 
 // @todo deal with overlay click event, close dialog
 // @todo add type declarations for the react-confirm functions
@@ -26,21 +28,35 @@ function Confirm(
 	const {
 		role,
 		wrapperClassName,
+		overlayClassName,
 		show,
 		proceed,
 		confirmation,
 		...otherProps
 	} = useConfirm( props );
 
+	function handleEscapePress( event: KeyboardEvent< HTMLDivElement > ) {
+		// `keyCode` is depreacted, so let's use `key`
+		if ( event.key === 'Escape' ) {
+			proceed( false );
+		}
+	}
+
+	useEffect( () => {
+		document.addEventListener( 'keydown', handleEscapePress );
+		return () =>
+			document.removeEventListener( 'keydown', handleEscapePress );
+	} );
+
 	return (
 		<div
 			{ ...otherProps }
 			role={ role }
-			className={ wrapperClassName }
 			ref={ forwardedRef }
+			className={ wrapperClassName }
 			style={ { visibility: show ? 'visible' : 'hidden' } }
 		>
-			<Card>
+			<Card onMouseDown={ ( event ) => event.preventDefault() }>
 				<CardHeader>
 					<Heading level="4">{ confirmation }</Heading>
 				</CardHeader>
@@ -56,6 +72,10 @@ function Confirm(
 					</Button>
 				</CardFooter>
 			</Card>
+			<div
+				className={ overlayClassName }
+				onClick={ () => proceed( false ) }
+			></div>
 		</div>
 	);
 }

diff --git a/packages/components/src/confirm/hook.ts b/packages/components/src/confirm/hook.ts
@@ -18,15 +18,15 @@ export function useConfirm(
 	const cx = useCx();
 
 	const classes = cx( className );
-	const wrapperClassName = cx( styles.overlayWrapper );
-	const dialogWrapperClassName = cx( styles.dialogWrapper );
+	const wrapperClassName = cx( styles.wrapper );
+	const overlayClassName = cx( styles.overlay );
 
 	console.log( otherProps );
 
 	return {
 		className: classes,
 		wrapperClassName,
-		dialogWrapperClassName,
+		overlayClassName,
 		...otherProps,
 	};
 }
diff --git a/packages/components/src/confirm/styles.ts b/packages/components/src/confirm/styles.ts
@@ -3,22 +3,27 @@
  */
 import { css } from '@emotion/react';
 
-export const overlayWrapper = css`
+export const wrapper = css`
 	position: fixed;
 	top: 0;
 	left: 0;
 	right: 0;
 	bottom: 0;
-	z-index: 99;
-	background: rgba( 0, 0, 0, 0.5 );
-	display: -webkit-flex;
-	display: -moz-flex;
-	display: -ms-flex;
-	display: -o-flex;
+	z-index: 9999999;
 	display: flex;
 	justify-content: center;
 	-ms-align-items: center;
 	align-items: center;
 `;
 
+export const overlay = css`
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	z-index: -1;
+	background: rgba( 0, 0, 0, 0.5 );
+`;
+
 export const dialogWrapper = css``;