feat: Vertical and horizontal resize handles supported

[RaoHai]

• close PR: horizontal and vertical resize handler supported #75
• For more friendly interactions, offer horizontal and vertical resize handlers.
• Add a props resizer to restricts resize handles
  • Default to both, show right-bottom resize handle.
  • x: only show right resize handle.
  • y: only show bottom resize handle.
  • all: show all (right, bottom, and bottom-right corner) resize handlers.
  • none: never show resize handle.
• ResizeCallbackData add an extra param axis, shows which direction that user now resize in.

•    <ResizableBox onResize={(event, { element, size, axis}) => {...}} />

[abenhamdine]

This should be soooo useful. @STRML any chance you can look at this ?

[nreese]

@STRML Are you still maintaining this project? I would like to create a similar PR that adds handlers to all 4 corners but am a little nervous that the effort would be wasted since this PR never got merged or a response.

[STRML]

This is a nice PR, unfortunately I missed it. I would accept an update @nreese - otherwise, @RaoHai , I would accept this PR if it did not update the version number, added a test, and an example.

[RaoHai]

@STRML Thanks. I've rebase my PR to master, but actually it have no independent example or test, because all origin examples will have this feature by default.

Should I add an extra props like resizer to restricts the visibility of resize handlers ?

[STRML]

Yes that would be good, as this would otherwise be a change for all users. We want this to be opt-in not opt-out as not to cause breakage.

[RaoHai]

I've add an extra prop resizers to restricts resize handles and some examples https://github.com/STRML/react-resizable/pull/76/files#diff-bfdc1995d9b6914d3bd61585d9d4dea9

• Default to both, show right-bottom resize handle.
• x: only show right resize handle.
• y: only show bottom resize handle.
• all: show all (right, bottom, and bottom-right corner) resize handlers.
• none: never show resize handle.

[RoccoC]

This is great! However, I am wondering if it would make more sense for the resizer prop type to be more specific and granular, e.g.:

• r show right resize handle.
• b: show bottom resize handle.
• br: show bottom-right resize handle.

This would be a bit more future-proof and would allow extending to support handles on the top and left sides, e.g.:

• l: show left resize handle.
• t: show top resize handle.
• tl: show top-left-right resize handle.
• bl: show bottom-left resize handle.
• tr: show to-right resize handle.

In this case the resizer prop could accept an array to allow any combination of handles:

// show right, bottom, and bottom-right handles
<Resizable resizer={['r', 'b', 'br']} />

// show bottom-right handle only (default)
<Resizable resizer={['br']} />

// show handles on each corner
<Resizable resizer={['tl', 'tr', 'bl', 'br']} />

The support for other handles may be out of scope for this PR (I'd be happy to pick this up once this get merged), but updating the resizer prop per above would make this a logical and simple change to implement. :)

Thoughts?

[STRML]

I don't mind it. Any prior art in other libs you can find for this? The strings feel a bit messy but not horrible.

…

On Thu, Jan 10, 2019, 9:23 PM Rocco Cataldo ***@***.*** wrote: This is great! However, I am wondering if it would make more sense for the resizer prop type to be a bit more specific, e.g.: - 'r': show right resize handle. - 'b': show bottom resize handle. - 'br': show bottom-right resize handle. This would be a bit more future-proof and would allow extending to support handles on the top and left sides, e.g.: - 'l': show left resize handle. - 't': show top resize handle. - 'tl': show top-left-right resize handle. - 'bl': show bottom-left resize handle. - 'tr': show to-right resize handle. In this case the resizer prop could accept an array to allow any combination of handles: // show right, bottom, and bottom-right handles <Resizable resizer={['r', 'b', 'br']} /> // show bottom-right handle only (default) <Resizable resizer={['br']} /> // show handles on each corner <Resizable resizer={['tl', 'tr', 'bl', 'br']} /> Thoughts? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#76 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABJFPz42r4cnMWM92K86InSoRZ1edc8Wks5vCAOigaJpZM4PSjQH> .

[RoccoC]

Just did a quick search and found re-resizable, which follows a similar pattern:

export type Direction = 'top' | 'right' | 'bottom' | 'left' | 'topRight' | 'bottomRight' | 'bottomLeft' | 'topLeft';

react-resizable-component supports this as well, but uses cardinal directions (s, w, e, n, sw, nw, se, ne).

[RaoHai]

I prefer (s, w, e, n, sw, nw, se, ne)...

[RoccoC]

I prefer (s, w, e, n, sw, nw, se, ne)...

Works for me! Will you be updating your PR, or shall I submit one?

[abenhamdine]

@RaoHai any chance you could go forward with this PR ? There are conflicts.

[RoccoC]

@RaoHai , I hope you don't mind, but I took the liberty of raising a new PR with these changes: #101

This PR includes support for handles in each corner/side as we discussed earlier in this thread. :)

[RaoHai]

thanks @RoccoC

[RaoHai]

see #101