Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Components: ResizableBox, add showHandle prop #18097

Merged
merged 5 commits into from Nov 9, 2019
Merged
Changes from all commits
Commits
File filter...
Filter file types
Jump to…
Jump to file or symbol
Failed to load files and symbols.

Always

Just for now

@@ -53,3 +53,11 @@ const Edit = ( props ) => {
);
}
```

### Props

This comment has been minimized.

Copy link
@gziolo

gziolo Oct 30, 2019

Member

By the way, this is why I like when you abstract away external code, you get the freedom to tailor it to your needs 👍

This comment has been minimized.

Copy link
@ItsJonQ

ItsJonQ Oct 30, 2019

Author Contributor

Yay! Thank you 🙌


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).
@@ -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(
@@ -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 } }>

This comment has been minimized.

Copy link
@gziolo

gziolo Oct 29, 2019

Member

What do you think about refactoring Example to be ResizableBoxWithState to return only this part:

<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>

and moving unrelated styling to the parent component?

This way we could see more code in the preview in Storybook. By the way, height and width can be set to initial values from the parent component and wrapped with knobs so folks could tweak initial value as well.

<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>
);
};
@@ -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

This comment has been minimized.

Copy link
@gziolo

gziolo Oct 29, 2019

Member

Can you combine those 2 rules which set display:block into one? They seem to have the same purpose.

This comment has been minimized.

Copy link
@ItsJonQ

ItsJonQ Oct 29, 2019

Author Contributor

Sure thing!

.components-resizable-box__container.is-selected &,
.components-resizable-box__container.has-show-handle & {
display: block;
}
}
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.