react-split-pane Split Pane v2

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

Nov 12 '17 19:11 tomkp

What kind of help do you need?

Nov 20 '17 11:11 wiesson

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

Nov 20 '17 11:11 tomkp

I'm up for lending a hand in developing.

Nov 22 '17 12:11 whitecrownclown

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

Nov 27 '17 16:11 tomkp

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

Nov 29 '17 18:11 rajsek

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

Dec 06 '17 13:12 unconfident

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.

Dec 06 '17 14:12 wiesson

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

https://github.com/tomkp/react-split-pane/pull/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

Dec 31 '17 16:12 tomkp

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.

Jan 24 '18 15:01 rokoroku

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.

Feb 01 '18 23:02 marbemac

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

Mar 06 '18 08:03 hongbo-miao

@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

Mar 10 '18 13:03 tomkp

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

Mar 21 '18 07:03 jaotors

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

Apr 17 '18 19:04 jacargentina

@tomkp v2 demo looks really good. I'd like to contribute some improvements. I've made some experiments, you can find example here and my fork. Here are my suggestions:

Currently, you can set the initial size of the pane in px, but it's converted to % and it's a bit confusing when you resize the window the initial size in px will be lost. What if the units would stay as they were initially? As it's based on CSS flex you can use px, %, and ratio units all together as they combine well via css. I've submitted PR#264
To build layout dynamically it would be useful to have Layout component that builds the layout by config. The API for that could be similar like in react-mosaic So you would have a choice to use one Layout component with config or just build the layout using Pane and SplitPane as it is now.

What do you think about it guys? If it's reasonable It would be my pleasure to make this great lib better.

Apr 23 '18 08:04 walerun

Are there API changes/breaking changes in Version 2.0? I don't see any docs to reference. Maybe I'm not looking in the right place.

Thanks for the amazing project @tomkp

Jun 09 '18 22:06 Nantris

@Slapbox there are no updated docs. But you can find some details from PR

Jun 14 '18 07:06 walerun

How to import the Pane component? @jaotors had ask these question, but no answers was given.

Jul 10 '18 09:07 Bizarrus

@jaotors i've found the solution!

You can impot the Pane component as follow:

import Pane from 'react-split-pane/lib/Pane';

Jul 12 '18 23:07 Bizarrus

is version 2 stable? seems stop update here

Aug 21 '18 04:08 orlowang

hi all, is version 2 released?

Feb 22 '19 11:02 mk48

I think there's a problem when there's multiple <Pane> with props sharing the same parent <SplitPane>. For example in the demo, if you try to resize using the first resizer from the left, you will see something weird. Maybe it's some weird interaction between initialSize, minSize and maxSize.

UPDATE: Also, I cannot reproduce reliably, but sometimes, while using <Pane> component, I got an error like this:

TypeError: _this.props.innerRef is not a function Pane._this.setRef node_modules/react-split-pane/lib/Pane.js:126 123 | } 124 | 125 | return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref2 = Pane.proto || > Object.getPrototypeOf(Pane)).call.apply(_ref2, [this].concat(args))), _this), _this.setRef = function (element) { 126 | _this.props.innerRef(_this.props.index, element); | ^ 127 | }, _temp), _possibleConstructorReturn(_this, _ret); 128 | } 129 |

but then if I use <div> instead, it works fine

Also, any progress on v2 release @wuweiweiwu @tomkp ?