Refactored URLPopover to use React Hook (#23918)

WordPress · Jul 14, 2020 · d7af685 · d7af685
1 parent 0e2040f
commit d7af685
Show file tree

Hide file tree

Showing 2 changed files with 95 additions and 61 deletions.
diff --git a/packages/block-editor/src/components/url-popover/index.js b/packages/block-editor/src/components/url-popover/index.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Component } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import { Button, Popover } from '@wordpress/components';
 import { chevronDown } from '@wordpress/icons';
 
@@ -12,73 +12,55 @@ import { chevronDown } from '@wordpress/icons';
 import LinkViewer from './link-viewer';
 import LinkEditor from './link-editor';
 
-class URLPopover extends Component {
-	constructor() {
-		super( ...arguments );
+function URLPopover( {
+	additionalControls,
+	children,
+	renderSettings,
+	position = 'bottom center',
+	focusOnMount = 'firstElement',
+	...popoverProps
+} ) {
+	const [ isSettingsExpanded, setIsSettingsExpanded ] = useState( false );
 
-		this.toggleSettingsVisibility = this.toggleSettingsVisibility.bind(
-			this
-		);
+	const showSettings = !! renderSettings && isSettingsExpanded;
 
-		this.state = {
-			isSettingsExpanded: false,
-		};
-	}
+	const toggleSettingsVisibility = () => {
+		setIsSettingsExpanded( ! isSettingsExpanded );
+	};
 
-	toggleSettingsVisibility() {
-		this.setState( {
-			isSettingsExpanded: ! this.state.isSettingsExpanded,
-		} );
-	}
-
-	render() {
-		const {
-			additionalControls,
-			children,
-			renderSettings,
-			position = 'bottom center',
-			focusOnMount = 'firstElement',
-			...popoverProps
-		} = this.props;
-
-		const { isSettingsExpanded } = this.state;
-
-		const showSettings = !! renderSettings && isSettingsExpanded;
-
-		return (
-			<Popover
-				className="block-editor-url-popover"
-				focusOnMount={ focusOnMount }
-				position={ position }
-				{ ...popoverProps }
-			>
-				<div className="block-editor-url-popover__input-container">
-					<div className="block-editor-url-popover__row">
-						{ children }
-						{ !! renderSettings && (
-							<Button
-								className="block-editor-url-popover__settings-toggle"
-								icon={ chevronDown }
-								label={ __( 'Link settings' ) }
-								onClick={ this.toggleSettingsVisibility }
-								aria-expanded={ isSettingsExpanded }
-							/>
-						) }
-					</div>
-					{ showSettings && (
-						<div className="block-editor-url-popover__row block-editor-url-popover__settings">
-							{ renderSettings() }
-						</div>
+	return (
+		<Popover
+			className="block-editor-url-popover"
+			focusOnMount={ focusOnMount }
+			position={ position }
+			{ ...popoverProps }
+		>
+			<div className="block-editor-url-popover__input-container">
+				<div className="block-editor-url-popover__row">
+					{ children }
+					{ !! renderSettings && (
+						<Button
+							className="block-editor-url-popover__settings-toggle"
+							icon={ chevronDown }
+							label={ __( 'Link settings' ) }
+							onClick={ toggleSettingsVisibility }
+							aria-expanded={ isSettingsExpanded }
+						/>
 					) }
 				</div>
-				{ additionalControls && ! showSettings && (
-					<div className="block-editor-url-popover__additional-controls">
-						{ additionalControls }
+				{ showSettings && (
+					<div className="block-editor-url-popover__row block-editor-url-popover__settings">
+						{ renderSettings() }
 					</div>
 				) }
-			</Popover>
-		);
-	}
+			</div>
+			{ additionalControls && ! showSettings && (
+				<div className="block-editor-url-popover__additional-controls">
+					{ additionalControls }
+				</div>
+			) }
+		</Popover>
+	);
 }
 
 URLPopover.LinkEditor = LinkEditor;

diff --git a/packages/block-editor/src/components/url-popover/stories/index.js b/packages/block-editor/src/components/url-popover/stories/index.js
@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import { Button, ToggleControl } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { keyboardReturn } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import URLPopover from '../';
+
+export default { title: 'BlockEditor/URLPopover' };
+
+const TestURLPopover = () => {
+	const [ isVisible, setVisiblility ] = useState( false );
+	const [ url, setUrl ] = useState( '' );
+
+	const close = () => setVisiblility( false );
+	const setTarget = () => {};
+
+	return (
+		<>
+			<Button onClick={ () => setVisiblility( true ) }>Edit URL</Button>
+			{ isVisible && (
+				<URLPopover
+					onClose={ close }
+					renderSettings={ () => (
+						<ToggleControl
+							label={ __( 'Open in new tab' ) }
+							onChange={ setTarget }
+						/>
+					) }
+				>
+					<form onSubmit={ close }>
+						<input type="url" value={ url } onChange={ setUrl } />
+						<Button
+							icon={ keyboardReturn }
+							label={ __( 'Apply' ) }
+							type="submit"
+						/>
+					</form>
+				</URLPopover>
+			) }
+		</>
+	);
+};
+
+export const _default = () => {
+	return <TestURLPopover />;
+};