Address code review suggestions partially, and refactor to use the ex…

…isting component
WordPress · Aug 25, 2021 · 90ceb3e · 90ceb3e
1 parent 18e0231
commit 90ceb3e
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 34 deletions.
diff --git a/packages/components/src/confirm/component.tsx b/packages/components/src/confirm/component.tsx
@@ -5,8 +5,10 @@
  */
 // eslint-disable-next-line no-restricted-imports
 import { confirmable } from 'react-confirm';
+/**
+ * WordPress dependencies
+ */
 import { __ } from '@wordpress/i18n';
-import { useMemo } from 'react';
 
 /**
  * Internal dependencies
@@ -20,40 +22,47 @@ import {
 	contextConnect,
 	PolymorphicComponentProps,
 } from '../ui/context';
-import { useConfirm } from './hook';
-import { useCx } from '../utils/hooks/use-cx';
+import { Flex } from '../flex';
 
 // @todo add type declarations for the react-confirm functions
 function Confirm(
 	props: PolymorphicComponentProps< OwnProps, 'div', false >,
 	forwardedRef: Ref< any >
 ) {
-	const { show, proceed, role, ...otherProps } = useContextSystem(
-		props,
-		'Confirm'
-	);
-	const cx = useCx();
-
-	const invisibleClassName = cx( ! show && styles.wrapperHidden );
-
-	console.log( show );
-	console.log( isVisible );
+	const {
+		show: isOpen = true,
+		proceed,
+		role,
+		message,
+		...otherProps
+	} = useContextSystem( props, 'Confirm' );
 
 	return (
-		<div
-			role={ role }
-			ref={ forwardedRef }
-			className={ invisibleClassName }
-		>
-			<Modal { ...otherProps } ref={ forwardedRef }>
-				<Button variant="secondary" onClick={ () => proceed( false ) }>
-					{ __( 'Cancel' ) }
-				</Button>
-				<Button variant="primary" onClick={ () => proceed( true ) }>
-					{ __( 'OK' ) }
-				</Button>
-			</Modal>
-		</div>
+		<>
+			{ isOpen && (
+				<Modal
+					title={ message }
+					onRequestClose={ () => proceed( false ) }
+					{ ...otherProps }
+					ref={ forwardedRef }
+				>
+					<Flex justify="right">
+						<Button
+							variant="secondary"
+							onClick={ () => proceed( false ) }
+						>
+							{ __( 'Cancel' ) }
+						</Button>
+						<Button
+							variant="primary"
+							onClick={ () => proceed( true ) }
+						>
+							{ __( 'OK' ) }
+						</Button>
+					</Flex>
+				</Modal>
+			) }
+		</>
 	);
 }
 

diff --git a/packages/components/src/confirm/stories/index.js b/packages/components/src/confirm/stories/index.js
@@ -19,10 +19,10 @@ export const _default = () => {
 	const [ confirmVal, setConfirmVal ] = useState();
 
 	async function triggerConfirm() {
-		if ( await confirm( { confirmation: 'Are you sure?' } ) ) {
-			setConfirmVal( 'You are sure!' );
+		if ( await confirm( { message: 'Are you sure?' } ) ) {
+			setConfirmVal( "Let's do it!" );
 		} else {
-			setConfirmVal( 'Ok, take more time to decide!' );
+			setConfirmVal( 'Ok, take your time!' );
 		}
 	}
 

diff --git a/packages/components/src/confirm/types.ts b/packages/components/src/confirm/types.ts
@@ -2,9 +2,8 @@
  * Internal dependencies
  */
 
-// TBD
 export interface OwnProps {
 	show: boolean;
-	proceed: Function;
-	confirmation: string;
+	proceed: ( flag: boolean ) => void;
+	confirmation: React.ReactNode;
 }
diff --git a/packages/editor/src/components/post-visibility/index.js b/packages/editor/src/components/post-visibility/index.js
@@ -38,7 +38,7 @@ export class PostVisibility extends Component {
 		if (
 			// eslint-disable-next-line no-alert
 			! ( await confirm( {
-				confirmation: __(
+				message: __(
 					'Would you like to privately publish this post now?'
 				),
 			} ) )