Components: Add experimental ConfirmDialog

docs/manifest.json

@@ -785,6 +785,12 @@
 		"markdown_source": "../packages/components/src/combobox-control/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "Confirm",
+		"slug": "confirm",
+		"markdown_source": "../packages/components/src/confirm/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "CustomSelectControl",
 		"slug": "custom-select-control",

packages/components/package.json

@@ -60,6 +60,7 @@
 		"moment": "^2.22.1",
 		"re-resizable": "^6.4.0",
 		"react-colorful": "^5.3.0",
+		"react-confirm": "0.1.24",
 		"react-dates": "^17.1.1",
 		"react-resize-aware": "^3.1.0",
 		"react-use-gesture": "^9.0.0",

packages/components/src/confirm/README.md

@@ -0,0 +1,3 @@
+# `Confirm`
+
+TBD

packages/components/src/confirm/component.tsx

@@ -0,0 +1,80 @@
+// @ts-nocheck (for now)
+
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import { Ref, useEffect } from 'react';
+import { confirmable } from 'react-confirm';
+
+/**
+ * Internal dependencies
+ */
+import Button from '../button';
+import type { OwnProps } from './types';
+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';
+
+// @todo add type declarations for the react-confirm functions
+function Confirm(
+	props: PolymorphicComponentProps< OwnProps, 'div', false >,
+	forwardedRef: Ref< any >
+) {
+	const {
+		role,
+		wrapperClassName,
+		overlayClassName,
+		show,
+		proceed,
+		confirmation,
+		...otherProps
+	} = useConfirm( props );
+
+	function handleEscapePress( event: KeyboardEvent< HTMLDivElement > ) {
+		// `keyCode` is deprecated, so let's use `key`
+		if ( event.key === 'Escape' ) {
+			proceed( false );
+		}
+	}
+
+	useEffect( () => {
+		document.addEventListener( 'keydown', handleEscapePress );
+		return () =>
+			document.removeEventListener( 'keydown', handleEscapePress );
+	} );
+
+	return (
+		<div
+			role={ role }
+			ref={ forwardedRef }
+			className={ wrapperClassName }
+			style={ { visibility: show ? 'visible' : 'hidden' } }
+		>
+			<Card onMouseDown={ ( event ) => event.preventDefault() }>
+				<CardHeader>
+					<Heading level="4">{ confirmation }</Heading>
+				</CardHeader>
+				<CardFooter justify="center">
+					<Button
+						variant="secondary"
+						onClick={ () => proceed( false ) }
+					>
+						Cancel
+					</Button>
+					<Button variant="primary" onClick={ () => proceed( true ) }>
+						OK
+					</Button>
+				</CardFooter>
+			</Card>
+			<div
+				className={ overlayClassName }
+				onClick={ () => proceed( false ) }
+			></div>
+		</div>
+	);
+}
+
+export default confirmable( contextConnect( Confirm, 'Confirm' ) );

packages/components/src/confirm/hook.ts

@@ -0,0 +1,30 @@
+/**
+ * Internal dependencies
+ */
+import { useContextSystem, PolymorphicComponentProps } from '../ui/context';
+
+/**
+ * Internal dependencies
+ */
+import * as styles from './styles';
+import { useCx } from '../utils/hooks/use-cx';
+import type { OwnProps } from './types';
+
+export function useConfirm(
+	props: PolymorphicComponentProps< OwnProps, 'div' >
+) {
+	const { className, ...otherProps } = useContextSystem( props, 'Confirm' );
+
+	const cx = useCx();
+
+	const classes = cx( className );
+	const wrapperClassName = cx( styles.wrapper );
+	const overlayClassName = cx( styles.overlay );
+
+	return {
+		className: classes,
+		wrapperClassName,
+		overlayClassName,
+		...otherProps,
+	};
+}

packages/components/src/confirm/index.ts

@@ -0,0 +1,15 @@
+//@ts-nocheck
+
+/**
+ * External dependencies
+ */
+import { createConfirmation } from 'react-confirm';
+
+/**
+ * Internal dependencies
+ */
+import Confirm from './component';
+
+const confirm = createConfirmation( Confirm );
+
+export { Confirm, confirm };

packages/components/src/confirm/stories/index.js

@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+import React, { useState } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import Button from '../../button';
+import { Confirm, confirm } from '..';
+
+export default {
+	component: Confirm,
+	title: 'Components (Experimental)/Confirm',
+	argTypes: { proceed: { action: 'proceed' } },
+};
+
+export const _default = () => {
+	const [ confirmVal, setConfirmVal ] = useState();
+
+	async function triggerConfirm() {
+		if ( await confirm( { confirmation: 'Are you sure?' } ) ) {
+			setConfirmVal( 'You are sure!' );
+		} else {
+			setConfirmVal( 'Ok, take more time to decide!' );
+		}
+	}
+
+	return (
+		<>
+			<Button variant="primary" onClick={ triggerConfirm }>
+				Trigger Confirm
+			</Button>
+			{ confirmVal && <h1>{ confirmVal }</h1> }
+		</>
+	);
+};

packages/components/src/confirm/styles.ts

@@ -0,0 +1,29 @@
+/**
+ * External dependencies
+ */
+import { css } from '@emotion/react';
+
+export const wrapper = css`
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	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``;

packages/components/src/confirm/test/index.js

@@ -0,0 +1 @@
+// TBD

packages/components/src/confirm/types.ts

@@ -0,0 +1,10 @@
+/**
+ * Internal dependencies
+ */
+
+// TBD
+export interface OwnProps {
+	show: boolean;
+	proceed: Function;
+	confirmation: string;
+}

packages/components/src/index.js

@@ -184,3 +184,4 @@ export {
 } from './higher-order/with-focus-return';
 export { default as withNotices } from './higher-order/with-notices';
 export { default as withSpokenMessages } from './higher-order/with-spoken-messages';
+export { confirm } from './confirm'; // @todo make it experimental

packages/components/tsconfig.json

@@ -24,6 +24,7 @@
 		"src/base-field/**/*",
 		"src/button/**/*",
 		"src/card/**/*",
+		"src/confirm/**/*",
 		"src/dashicon/**/*",
 		"src/disabled/**/*",
 		"src/divider/**/*",

packages/editor/src/components/post-visibility/index.js

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
-import { VisuallyHidden } from '@wordpress/components';
+import { VisuallyHidden, confirm } from '@wordpress/components';
 import { withInstanceId, compose } from '@wordpress/compose';
 import { withSelect, withDispatch } from '@wordpress/data';
 
@@ -34,12 +34,14 @@ export class PostVisibility extends Component {
 		this.setState( { hasPassword: false } );
 	}
 
-	setPrivate() {
+	async setPrivate() {
 		if (
 			// eslint-disable-next-line no-alert
-			! window.confirm(
-				__( 'Would you like to privately publish this post now?' )
-			)
+			! ( await confirm( {
+				confirmation: __(
+					'Would you like to privately publish this post now?'
+				),
+			} ) )
 		) {
 			return;
 		}