Split Pane v2 - simplified API

[tomkp]

This PR is for a new v2 of react-split-pane.

Checkout the demo

Try it out today:

npm install react-split-pane@next

or

yarn add react-split-pane@next

The intention is to simplify the API by allowing Panes within the SplitPane to take props such as minSize, maxSize, initialSize, className, style etc.

<SplitPane split="vertical">
          <Pane>You can use a Pane component</Pane>
          <div>or you can use a plain old div</div>
          <Pane initialSize="25%" minSize="10%" maxSize="500px">Using a Pane allows you to specify any constraints directly</Pane>
</SplitPane>

I'm happy for any / all contributions!

Some things todo (in no particular order)

• Allow <Pane> or plain old div
• Multiple panes
• Minimum size
• Maximum size
• Initial size
• Allow % or px
• Proportional resizing
• Initial setup of Storybook
• Add examples to Storybook
• Overriding classes
• Overriding styles
• TypeScript bindings
• Step - resize panes by specific increments
• Snap to position
• Event handling
• Test coverage
• Performance enhancements
• Allow custom <Resizer>
• Standardise styling approach (Glamorous vs Styled-Components vs inline-style-prefixer)
• Update readme
• Cross browser testing

[coveralls]

Coverage decreased (-28.3%) to 62.637% when pulling 7fec1bf on v2 into 88fa530 on master.

[coveralls]

Coverage decreased (-29.8%) to 61.194% when pulling 82efd67 on v2 into 88fa530 on master.

[coveralls]

Coverage decreased (-4.4%) to 86.567% when pulling 58d12cd on v2 into 88fa530 on master.

[coveralls]

Coverage decreased (-4.4%) to 86.567% when pulling 1dc52b6 on v2 into 88fa530 on master.

[coveralls]

Coverage decreased (-0.3%) to 90.672% when pulling f355497 on v2 into 88fa530 on master.

[coveralls]

Coverage decreased (-0.3%) to 90.672% when pulling 4107ad4 on v2 into 88fa530 on master.

[ndelangen]

👏

[adamchenwei]

Go @tomkp go! this is very exciting!

[ndelangen]

@tomkp could you give me a heads-up when you think this is stable enough to usage in storybook? Happy to test this for you.

With usage you'll likely get more/better feedback.

[ndelangen]

You'll probably want to:

• Switch to emotion
• Expose Pane (export so it can be used)
• Add position: relative on the pane div by default
• The onChange callback should happen after setState https://github.com/tomkp/react-split-pane/blob/v2/src/SplitPane.js#L330-L334

I recommend removing this from your demos:

[wuweiweiwu]

@ndelangen I'll put that on my TODO list. I haven't worked much on v2 but I'll touch base with @tomkp . 👍

[ndelangen]

I hit some bugs with the minSize, and I think this code right here needs rethinking / optimisation:
https://github.com/tomkp/react-split-pane/blob/v2/src/SplitPane.js#L105

Currently when the parent re-renders, the pane-sizes reset to default.

[walerun]

Hi @ndelangen, could you provide an example with issue you described?

[tsaiDavid]

@wuweiweiwu @tomkp - is there something I could help with?

[tomkp]

@tsaiDavid Yes! I'd love some help :-)

I'll have a think about what would be most useful - but off the top of my head I think that I was keen to get the ability to listen on events working.

eg:

onDragStarted
This callback is invoked when a drag starts.

onDragFinished
This callback is invoked when a drag ends.

onChange
This callback is invoked with the current drag during a drag event. It is recommended that it is wrapped in a debounce function.

[josgraha]

@wuweiweiwu @tomkp any thoughts of moving the website to Create React App (CRA)?

[twolf2919]

Hi Tom - awesome demo examples!
But I'm getting exceptions using the splitter. Here's my very simple App.js's render():
render() { return( <SplitPane split="horizontal"> <Pane initialSize="50px" minSize="50px" maxSize="50px"> Navigation </Pane> <Pane> Content </Pane> </SplitPane> ); }
But when I run the app, the browser complains:
`
TypeError: undefined is not an object (evaluating 'child.props['size']')
(anonymous function)
node_modules/react-split-pane/lib/SplitPane.js:329
326 | key: 'getPanePropSize',
327 | value: function getPanePropSize(props) {
328 | return _react2.default.Children.map(props.children, function (child) {

329 | var value = child.props['size'] || child.props['initialSize'];
| ^ 330 |
331 | if (value === undefined) {
332 | return DEFAULT_PANE_SIZE;
`
Any help is much appreciated. I'm pretty much a Javascript/react newbie.

[fsjobeck]

Hi, just like to say this is probably the smoothes split-pane component i've found out there so far, great job!
Is the v2 being actively work on these days? Seems it's gone a bit stale?

[wuweiweiwu]

@fsjobeck will pick back up when I get some free time!

[miso-belica]

Ou, this seems abandoned from the previous year what is sad, because the API looks nice and also it seems working pretty good. I wanted to mention only 1 issue I had: The example import in the https://www.npmjs.com/package/react-split-pane#new-version does not work. I needed to import Pane like this import Pane from 'react-split-pane/lib/Pane'.

Hope this will be finished someday. It's a nice library and also this PR. Thanks.

[alexisthual]

To me, an interesting improvement would be to let the user set the key for Pane components.
I implemented an add / remove logic for panes using a DOM structure similar to

<SplitPane>
  {panes.map((paneId: string) => 
    <Pane key={`scene-pane-${paneId}`}>
        ...
    </Pane>
  }
</SplitPane>

In my example, panes is a state variable consisting of a list of unique pane identifiers. When I close a pane, a callback simply removes its id from the list. However, because this librairy rewrites key for Pane, I get inconsistent results.
Please consider using something like nanoid to generate unique ids for panes rather than using their position in the list of panes.

[shakiba]

It would be great if this can be used with CSSTransition.

[vishal-vc]

@tomkp any update on this release

[daveleee]

Ou, this seems abandoned from the previous year what is sad, because the API looks nice and also it seems working pretty good. I wanted to mention only 1 issue I had: The example import in the https://www.npmjs.com/package/react-split-pane#new-version does not work. I needed to import Pane like this import Pane from 'react-split-pane/lib/Pane'.

Hope this will be finished someday. It's a nice library and also this PR. Thanks.

@miso-belica
Thanks man, it's such a nice discovery that saved my time 😉

[hqwlkj]

Could not find a declaration file for module  react-split-pane/lib/Pane