From 0552712059ac5519fad0aeab6dddc5b84f049192 Mon Sep 17 00:00:00 2001
From: Jon Quach <hello@jonquach.com>
Date: Sat, 9 Nov 2019 16:01:05 -0500
Subject: [PATCH] Components: ResizableBox, add showHandle prop (#18097)

* Components: ResizableBox, Add showHandle prop

This update adds a new prop to the ResizableBox component. This new prop
`showHandle` (`bool`) determines if the draggable resize handles should be
visible or not.

* Add ResizableBox storybook example

This update adds a default story for ResizableBox. Knobs have been added
to the story to better demonstrate the effects of the props.

* Rename is-show-handle to has-show-handle

Refactor styles to consolidate selected and show handle

* Refactor ResizableBox story example

Moves the inline-styled div to the parent. Allows for the Example
component to read more clearly.
---
 .../components/src/resizable-box/README.md    |  8 ++
 .../components/src/resizable-box/index.js     |  5 +-
 .../src/resizable-box/stories/index.js        | 83 +++++++++++++++++++
 .../components/src/resizable-box/style.scss   |  6 +-
 4 files changed, 98 insertions(+), 4 deletions(-)
 create mode 100644 packages/components/src/resizable-box/stories/index.js

diff --git a/packages/components/src/resizable-box/README.md b/packages/components/src/resizable-box/README.md
index 42302f93b08b0..7cc42ce60603b 100644
--- a/packages/components/src/resizable-box/README.md
+++ b/packages/components/src/resizable-box/README.md
@@ -53,3 +53,11 @@ const Edit = ( props ) => {
 	);
 }
 ```
+
+### Props
+
+Name | Type | Default | Description
+--- | --- | --- | ---
+`showHandle` | `bool` | `false` | Determines of the resize handles are visible.
+
+For additional props, check out [re-resizable](https://github.com/bokuweb/re-resizable#props).
\ No newline at end of file
diff --git a/packages/components/src/resizable-box/index.js b/packages/components/src/resizable-box/index.js
index fc63dd126a24e..1426f0b48b83e 100644
--- a/packages/components/src/resizable-box/index.js
+++ b/packages/components/src/resizable-box/index.js
@@ -4,7 +4,7 @@
 import classnames from 'classnames';
 import { Resizable } from 're-resizable';
 
-function ResizableBox( { className, ...props } ) {
+function ResizableBox( { className, showHandle = false, ...props } ) {
 	// Removes the inline styles in the drag handles.
 	const handleStylesOverrides = {
 		width: null,
@@ -23,7 +23,8 @@ function ResizableBox( { className, ...props } ) {
 		<Resizable
 			className={ classnames(
 				'components-resizable-box__container',
-				className,
+				showHandle && 'has-show-handle',
+				className
 			) }
 			handleClasses={ {
 				top: classnames(
diff --git a/packages/components/src/resizable-box/stories/index.js b/packages/components/src/resizable-box/stories/index.js
new file mode 100644
index 0000000000000..0e8b8a336adbb
--- /dev/null
+++ b/packages/components/src/resizable-box/stories/index.js
@@ -0,0 +1,83 @@
+/**
+ * External dependencies
+ */
+import { boolean, number, text } from '@storybook/addon-knobs';
+
+/**
+ * Internal dependencies
+ */
+import ResizableBox from '../';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+export default { title: 'ResizableBox', component: ResizableBox };
+
+const Example = ( props ) => {
+	const [ attributes, setAttributes ] = useState( { height: 200, width: 400 } );
+	const { height, width } = attributes;
+	const { children, ...restProps } = props;
+
+	return (
+		<div style={ { margin: 30 } }>
+			<ResizableBox
+				{ ...restProps }
+				size={ {
+					height,
+					width,
+				} }
+				onResizeStop={ ( event, direction, elt, delta ) => {
+					setAttributes( {
+						height: parseInt( height + delta.height, 10 ),
+						width: parseInt( width + delta.width, 10 ),
+					} );
+				} }
+			>
+				{ children }
+			</ResizableBox>
+		</div>
+	);
+};
+
+export const _default = () => {
+	const content = text( 'Example: Content', 'Resize' );
+	const showHandle = boolean( 'showHandle', true );
+	const minHeight = number( 'minHeight', 50 );
+	const minWidth = number( 'minWidth', 50 );
+	const enable = {
+		top: boolean( 'enable.top', false ),
+		right: boolean( 'enable.right', true ),
+		bottom: boolean( 'enable.bottom', true ),
+		left: boolean( 'enable.left', false ),
+		topRight: boolean( 'enable.topRight', false ),
+		bottomRight: boolean( 'enable.bottomRight', true ),
+		bottomLeft: boolean( 'enable.bottomLeft', false ),
+		topLeft: boolean( 'enable.topLeft', false ),
+	};
+
+	const props = {
+		enable,
+		minHeight,
+		minWidth,
+		showHandle,
+	};
+
+	return (
+		<Example { ...props }>
+			<div
+				style={ {
+					background: '#eee',
+					display: 'flex',
+					height: '100%',
+					width: '100%',
+					alignItems: 'center',
+					justifyContent: 'center',
+				} }
+			>
+				<span>{ content }</span>
+			</div>
+		</Example>
+	);
+};
diff --git a/packages/components/src/resizable-box/style.scss b/packages/components/src/resizable-box/style.scss
index 4297038291124..7231ef4326a7d 100644
--- a/packages/components/src/resizable-box/style.scss
+++ b/packages/components/src/resizable-box/style.scss
@@ -5,8 +5,10 @@
 	width: $resize-handler-container-size;
 	height: $resize-handler-container-size;
 
-	// Show the resize handle when selected.
-	.components-resizable-box__container.is-selected & {
+	// Show the resize handle when selected OR
+	// Show the resize handle if set in props
+	.components-resizable-box__container.is-selected &,
+	.components-resizable-box__container.has-show-handle & {
 		display: block;
 	}
 }