Split Pane v2 - simplified API

[tomkp]

trafficstars

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)

• [x] Allow <Pane> or plain old div
• [x] Multiple panes
• [x] Minimum size
• [x] Maximum size
• [x] Initial size
• [x] Allow % or px
• [x] Proportional resizing
• [x] 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 7fec1bf801073a13d2eb0df567b1dddbd24b9868 on v2 into 88fa5300ef4ac38bafe3c60d9ae208fcfb50927c on master.

[coveralls]

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

[coveralls]

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

[coveralls]

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

[coveralls]

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

[coveralls]

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

[coveralls]

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

[coveralls]

Coverage increased (+0.09%) to 91.045% when pulling 006547d5a7e48cb77ea99f5c5764421bb1a4c540 on v2 into 88fa5300ef4ac38bafe3c60d9ae208fcfb50927c on master.

[coveralls]

Coverage increased (+0.1%) to 91.078% when pulling ad736c9d76767457383c0a894a57f107f69888b9 on v2 into 88fa5300ef4ac38bafe3c60d9ae208fcfb50927c on master.

[coveralls]

Coverage increased (+0.1%) to 91.078% when pulling 855ee6a745a6f183619cbf5fa14d4be63dcd5c92 on v2 into 88fa5300ef4ac38bafe3c60d9ae208fcfb50927c on master.

[coveralls]

Coverage decreased (-1.1%) to 89.818% when pulling e585082b42ca3c6d74bb275b9b2916d490568e46 on v2 into 88fa5300ef4ac38bafe3c60d9ae208fcfb50927c on master.

[coveralls]

Coverage decreased (-1.1%) to 89.818% when pulling fae4201b6373a608c120124bd284bbdd09812830 on v2 into 88fa5300ef4ac38bafe3c60d9ae208fcfb50927c on master.

[coveralls]

Coverage decreased (-1.1%) to 89.818% when pulling eea81b77c2cfe3b9235ec2ef1078163df0073d8f on v2 into 88fa5300ef4ac38bafe3c60d9ae208fcfb50927c on master.

[coveralls]

Coverage increased (+0.5%) to 91.489% when pulling 9e9caafb0a1356439d36df8ee962973da405eae0 on v2 into 88fa5300ef4ac38bafe3c60d9ae208fcfb50927c on master.

[coveralls]

Coverage increased (+0.5%) to 91.489% when pulling c368f32389fa8f279262d81b1d5747d30ff2da90 on v2 into 88fa5300ef4ac38bafe3c60d9ae208fcfb50927c on master.

[ghost]

Any idea for collapsing or breaks? (Just like zeplin.io sidebar does.)

[adamchenwei]

wow the new one has really nice demo, very very nice! thanks for putting it together! looking forward for the v2

[ndelangen]

I like where this is going, looking forward to start using this in Storybook.

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