New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Split Pane v2 - simplified API #240

Open
wants to merge 51 commits into
base: master
from

Conversation

Projects
None yet
9 participants
@tomkp
Copy link
Owner

tomkp commented Dec 31, 2017

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

tomkp added some commits Dec 31, 2017

@tomkp tomkp added the v2 label Dec 31, 2017

@tomkp tomkp referenced this pull request Dec 31, 2017

Open

Split Pane v2 #233

tomkp added some commits Dec 31, 2017

@coveralls

This comment has been minimized.

Copy link

coveralls commented Jan 1, 2018

Coverage Status

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

tomkp added some commits Jan 1, 2018

@coveralls

This comment has been minimized.

Copy link

coveralls commented Jan 1, 2018

Coverage Status

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

@coveralls

This comment has been minimized.

Copy link

coveralls commented Jan 1, 2018

Coverage Status

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

tomkp added some commits Jan 2, 2018

@coveralls

This comment has been minimized.

Copy link

coveralls commented Jan 2, 2018

Coverage Status

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

tomkp added some commits Jan 2, 2018

@coveralls

This comment has been minimized.

Copy link

coveralls commented Jan 2, 2018

Coverage Status

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

@coveralls

This comment has been minimized.

Copy link

coveralls commented Jan 2, 2018

Coverage Status

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

@coveralls

This comment has been minimized.

Copy link

coveralls commented Jan 9, 2018

Coverage Status

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

@kidkkr

This comment has been minimized.

Copy link

kidkkr commented Feb 4, 2018

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

@adamchenwei

This comment has been minimized.

Copy link

adamchenwei commented Mar 7, 2018

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

tomkp added some commits Mar 10, 2018

@ndelangen

This comment has been minimized.

Copy link

ndelangen commented May 10, 2018

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

walerun and others added some commits May 16, 2018

Persist size units after resizing (#264)
* persist size units

* add babel plugin

* update example

* WIP fix tests

* WIP tests

* fix resizing, update tests

* WIP add tests

* fix test

* replace double-quote

* get rid of findDOMNode

* simplified resize processing
Filter out null children (#283)
* use src files in storybook, not lib

* don't break when a child is null

* Remove changes to storybook

* Remove changes to storybook

* Remove changes to storybook
@ndelangen

This comment has been minimized.

Copy link

ndelangen commented Jul 27, 2018

👏

@adamchenwei

This comment has been minimized.

Copy link

adamchenwei commented Jul 27, 2018

Go @tomkp go! this is very exciting!

@ndelangen

This comment has been minimized.

Copy link

ndelangen commented Sep 7, 2018

@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

This comment has been minimized.

Copy link

ndelangen commented Sep 10, 2018

You'll probably want to:

I recommend removing this from your demos:
screen shot 2018-09-10 at 22 49 21

@wuweiweiwu

This comment has been minimized.

Copy link
Collaborator

wuweiweiwu commented Sep 10, 2018

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

@ndelangen

This comment has been minimized.

Copy link

ndelangen commented Sep 11, 2018

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

This comment has been minimized.

Copy link

walerun commented Sep 11, 2018

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

@tsaiDavid

This comment has been minimized.

Copy link

tsaiDavid commented Dec 18, 2018

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

@tomkp

This comment has been minimized.

Copy link
Owner

tomkp commented Dec 19, 2018

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

@wuweiweiwu wuweiweiwu added this to the 2.0.0 milestone Jan 18, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment