Optional "Handle" for Panels

[pdfowler]

trafficstars

I've seen a handful of implementations of panels like this where there's a small "handle" on the resizer divider. This can be really useful for mobile (eg: #16 )since it is often more useful to "toggle" panels on mobile rather than drag to resize.

This is something I'm looking at doing, but wanted to file an issue first to see if anyone in the community had implemented something like this.

Proposed Behavior:

1. Add an optional parameter "handle" to the panelWidths configs object
2. Default behavior would toggle between the "minSize" and the "maxSize" (see #20 & my associated PR)
3. Additional callback onHandleClick called with arguments panels (like current onUpdate method), along with the panelIndex of the selected panel divider.
4. Dragging a panel handle would act the same as dragging the panel divider (eg: onHandleClick would only fire onMouseUp if isDragging === false

Questions:

What does panelIndex refer to?

If a handle is placed on panel 0, it is placed on the divider between panels 0 and 1. This is straightforward. In a three column layout with a stretch column between two sidebars, does the handle for the righthand sidebar go on panel 1 or panel 2?

possible solution: handle could take either a single DOM element (as described above, ie: "basic config mode"), or it could take an object with properties: handle.component, handle.direction, etc

[DanFessler]

I like this proposal. I have some followup comments/questions

• Unless you can make an argument that you'd want the handle DOM element different per panel (which I don't think makes much sense), then it should be supplied as a prop of the PanelGroup component itself rather than within the panelWidths object - separate from any collapsing functionality. I've been meaning to allow user-supplied border element for a while now.
• What happens when a panel is between minSize and maxSize when you toggle? Defaults to minSize first? What other potential behavior can you imagine being useful?
• What would a new callback be useful for that wouldn't otherwise be provided by onUpdate (which should be triggered by any resize event)? Can you provide an example where you'd want to know the panelIndex of the clicked divider?
• It makes sense to have a new property in the panelWidths object. That way, a panel essentially subscribes to which border it wants to be controlled by rather than being assumed. That said, I'm not a fan of the name. handle is a little ambiguous as any panel could have up to two handles without specifying this property at all. The property name should indicate that you're selecting which of the available handles to use as its controller. clickHandle? borderController? I'll have to think on this for a while. Whatever we name it, it shouldn't be .direction as that will be relative to its vertical/horizontal layout. Perhaps .position which takes values of null, before, or after

[vladp]

May be name could be 'dividerHandle' as the handle applies to dividers. Example that I found with 'a handle' (may be not the prettiest one) is https://codepen.io/rstrahl/pen/eJZQej

Also, since this would be great for Mobile, ability to recognize gestures is important (but please do not use Hammer.js for those, as Hammer.JS does not support server-side deployment, which is a problem, at least for me :-) )

[lrengunst]

I want to remove the cursor in the content tag