From 72cd96b1856c1e5e5f04fc2443fa18f97a5ced0d Mon Sep 17 00:00:00 2001
From: Marcelo Serpa <81248+fullofcaffeine@users.noreply.github.com>
Date: Wed, 18 Aug 2021 21:42:43 -0500
Subject: [PATCH] Proof of Concept
---
docs/manifest.json | 6 ++
package-lock.json | 6 ++
packages/components/package.json | 1 +
packages/components/src/confirm/README.md | 3 +
packages/components/src/confirm/component.tsx | 63 +++++++++++++++++++
packages/components/src/confirm/hook.ts | 32 ++++++++++
packages/components/src/confirm/index.ts | 15 +++++
.../components/src/confirm/stories/index.js | 18 ++++++
packages/components/src/confirm/styles.ts | 24 +++++++
packages/components/src/confirm/test/index.js | 1 +
packages/components/src/confirm/types.ts | 10 +++
packages/components/src/index.js | 1 +
packages/components/tsconfig.json | 1 +
.../src/components/post-visibility/index.js | 12 ++--
14 files changed, 188 insertions(+), 5 deletions(-)
create mode 100644 packages/components/src/confirm/README.md
create mode 100644 packages/components/src/confirm/component.tsx
create mode 100644 packages/components/src/confirm/hook.ts
create mode 100644 packages/components/src/confirm/index.ts
create mode 100644 packages/components/src/confirm/stories/index.js
create mode 100644 packages/components/src/confirm/styles.ts
create mode 100644 packages/components/src/confirm/test/index.js
create mode 100644 packages/components/src/confirm/types.ts
diff --git a/docs/manifest.json b/docs/manifest.json
index 3fa9280108d4fb..e424b1381a3c6a 100644
--- a/docs/manifest.json
+++ b/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",
diff --git a/package-lock.json b/package-lock.json
index 629b31cb939cbf..ac5226529cc7b3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18162,6 +18162,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",
@@ -52416,6 +52417,11 @@
"integrity": "sha512-lAge4syxosZg9SX8fJiwOLd9ZJSW3poPBtypnz1aMiFoHsRnK5G3+INGGx9DGtsrso4h5uFYbiFpjAfWyK3Kag==",
"dev": true
},
+ "react-confirm": {
+ "version": "0.1.24",
+ "resolved": "https://registry.npmjs.org/react-confirm/-/react-confirm-0.1.24.tgz",
+ "integrity": "sha512-96qA+mbZyBRmh/3Y5aDgrYLwLndbaRjkP3GlXQtPEQbIH0P66xGcHJ7ui6y/MN85AZWq/V3drA1fJOiEcVkAVA=="
+ },
"react-dates": {
"version": "17.2.0",
"resolved": "https://registry.npmjs.org/react-dates/-/react-dates-17.2.0.tgz",
diff --git a/packages/components/package.json b/packages/components/package.json
index 8af8b32f533b10..640e4d739f8e63 100644
--- a/packages/components/package.json
+++ b/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",
diff --git a/packages/components/src/confirm/README.md b/packages/components/src/confirm/README.md
new file mode 100644
index 00000000000000..3586c12eeb86e1
--- /dev/null
+++ b/packages/components/src/confirm/README.md
@@ -0,0 +1,3 @@
+# `Confirm`
+
+TBD
diff --git a/packages/components/src/confirm/component.tsx b/packages/components/src/confirm/component.tsx
new file mode 100644
index 00000000000000..5f58b88ea5f023
--- /dev/null
+++ b/packages/components/src/confirm/component.tsx
@@ -0,0 +1,63 @@
+// @ts-nocheck (for now)
+
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import type { Ref } 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';
+
+// @todo deal with overlay click event, close dialog
+// @todo add type declarations for the react-confirm functions
+function Confirm(
+ props: PolymorphicComponentProps< OwnProps, 'div', false >,
+ forwardedRef: Ref< any >
+) {
+ const {
+ role,
+ wrapperClassName,
+ show,
+ proceed,
+ confirmation,
+ ...otherProps
+ } = useConfirm( props );
+
+ return (
+
+
+
+ { confirmation }
+
+
+
+
+
+
+
+ );
+}
+
+export default confirmable( contextConnect( Confirm, 'Confirm' ) );
diff --git a/packages/components/src/confirm/hook.ts b/packages/components/src/confirm/hook.ts
new file mode 100644
index 00000000000000..5ed593f4020911
--- /dev/null
+++ b/packages/components/src/confirm/hook.ts
@@ -0,0 +1,32 @@
+/**
+ * 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.overlayWrapper );
+ const dialogWrapperClassName = cx( styles.dialogWrapper );
+
+ console.log( otherProps );
+
+ return {
+ className: classes,
+ wrapperClassName,
+ dialogWrapperClassName,
+ ...otherProps,
+ };
+}
diff --git a/packages/components/src/confirm/index.ts b/packages/components/src/confirm/index.ts
new file mode 100644
index 00000000000000..51bfc98fc1b4d5
--- /dev/null
+++ b/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 };
diff --git a/packages/components/src/confirm/stories/index.js b/packages/components/src/confirm/stories/index.js
new file mode 100644
index 00000000000000..29c336e215f6f3
--- /dev/null
+++ b/packages/components/src/confirm/stories/index.js
@@ -0,0 +1,18 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { Confirm } from '..';
+
+export default {
+ component: Confirm,
+ title: 'Components (Experimental)/Confirm',
+};
+
+export const _default = () => {
+ return ;
+};
diff --git a/packages/components/src/confirm/styles.ts b/packages/components/src/confirm/styles.ts
new file mode 100644
index 00000000000000..ba5fbfe8a515bb
--- /dev/null
+++ b/packages/components/src/confirm/styles.ts
@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+import { css } from '@emotion/react';
+
+export const overlayWrapper = 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;
+ display: flex;
+ justify-content: center;
+ -ms-align-items: center;
+ align-items: center;
+`;
+
+export const dialogWrapper = css``;
diff --git a/packages/components/src/confirm/test/index.js b/packages/components/src/confirm/test/index.js
new file mode 100644
index 00000000000000..954ddd236b585a
--- /dev/null
+++ b/packages/components/src/confirm/test/index.js
@@ -0,0 +1 @@
+// TBD
diff --git a/packages/components/src/confirm/types.ts b/packages/components/src/confirm/types.ts
new file mode 100644
index 00000000000000..f917d36434c556
--- /dev/null
+++ b/packages/components/src/confirm/types.ts
@@ -0,0 +1,10 @@
+/**
+ * Internal dependencies
+ */
+
+// TBD
+export interface OwnProps {
+ show: boolean;
+ proceed: Function;
+ confirmation: string;
+}
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index 04146b32a2fb16..827e12c73d4592 100644
--- a/packages/components/src/index.js
+++ b/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
diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json
index 77809950efbdd5..e479cda0ce936e 100644
--- a/packages/components/tsconfig.json
+++ b/packages/components/tsconfig.json
@@ -24,6 +24,7 @@
"src/base-field/**/*",
"src/button/**/*",
"src/card/**/*",
+ "src/confirm/**/*",
"src/dashicon/**/*",
"src/disabled/**/*",
"src/divider/**/*",
diff --git a/packages/editor/src/components/post-visibility/index.js b/packages/editor/src/components/post-visibility/index.js
index 7d86880def97db..52d71dae6a9c17 100644
--- a/packages/editor/src/components/post-visibility/index.js
+++ b/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;
}