Split Pane v2

[tomkp]

I'm working on an updated version of this library - using some updated methods and tooling.

I'll push a new branch soon for anyone interested in helping out...

[wiesson]

What kind of help do you need?

[tomkp]

First of all I need help in defining what a v2 would look like...

Here's a starter list:

• Simplify the API
• Multiple panes support
• Move away from using inline-style-prefixer- possibly use styled-components instead?
• Improve bundling of the component - rollup?
• All ideas welcome!

Multiple panes support

<SplitPane>
	<div>one</div>
	<div>two</div>
	<div>three</div>
</SplitPane>

and

<SplitPane>
	<Pane>one</Pane>
	<Pane>two</Pane>
	<Pane>three</Pane>
</SplitPane>

Move Pane specific Props onto the <Pane /> component.

<SplitPane>
	<Pane minSize="50px" maxSize="200px" className="pane1" style={pane1Styles}>one</Pane>
	<Pane>two</Pane>
</SplitPane>

I'm open to suggestions on any ideas - and what should take priority - and keen to involve any one who wants to help design / develop etc...

I'll try and push a branch that shows what I've got so far....

[whitecrownclown]

I'm up for lending a hand in developing.

[tomkp]

@whitecrownclown @wiesson Great! I'll get back soon with some plans - feel free to chip in with any ideas!

[rajsek]

Cool.. if possible, I too like contribute to this repo

[unconfident]

Would appreciate if percentage based panes could stay percentage based after resizing. Maybe put it behind a feature switch. It seems that in V1 it always uses pixels after manual resize

[wiesson]

If the split pane is mainly used for backend applications (or let's say modern browsers), then css grid could solve a lot of problems.

[tomkp]

I've just pushed my first v2 branch...

#240

It's very much a work in progress but demonstrates some of the ideas.

Check out the demo

Feel free to get involved - all help welcome!

Thanks
Tom

[rokoroku]

Could you add support to allow custom classname for .disabled state ? because I use css-loader configured to transform local css class names into uglified hash.

[marbemac]

This looks preeetty freaking sweet! Not expecting it to be ready now or anything, but anything we should know if we want to try it out ourselves? Known major bugs or anything?

Also, any idea when onChange/events might be supported? Really the only thing we need (to preserve position in local storage) that is not yet in there.

[hongbo-miao]

Maybe publish to npm as next version, so we can easily try it? Thanks

[tomkp]

@hongbo-miao good idea....
You should be able to now install it as react-split-pane@next... hope it all goes well!
Happy to take a look at any PRs...
Thanks

[jaotors]

@tomkp hi, how do I import the Pane? I'm testing it and don't know if it is import SplitPane, { Pane } from 'react-split-pane' or import Pane from 'react-split-pane/Pane'

[jacargentina]

@tomkp I cant see there is some way to pass className to the subcomponents; for example, in my current project, i'm using postcss for styling, so would be nice for example to style the Resizer with a given className. ie:

import theme from './styles.css';

<SplitPane resizerClassName={theme.resizer}>
   ...
</SplitPane>

Any change to get this new prop?