Skip to content
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

new(vx-brush): add initialBrushPosition #618

Merged
merged 5 commits into from
Apr 15, 2020
Merged

Conversation

maryschmidt
Copy link
Contributor

@maryschmidt maryschmidt commented Feb 1, 2020

💥 Breaking Changes

  • None

🚀 Enhancements

  • Brush now listens to when a mouseup event happens on the window to disable brush drag
  • Brush accepts an optional prop to default the scrubber state to an initial value

📝 Documentation

🐛 Bug Fix

🏠 Internal

Copy link
Collaborator

@williaster williaster left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks for the PR @maryschmidt ! I think a window event listener is a reasonable approach, but have one major suggested change.

packages/vx-brush/src/BaseBrush.tsx Outdated Show resolved Hide resolved
@williaster williaster changed the title chore: handle window mouseup new(vx-brush): handle mouseup outside of Brush extent Feb 2, 2020
@williaster williaster added this to the v0.0.194 milestone Feb 2, 2020
@williaster
Copy link
Collaborator

One other thought is that we need to prevent duplicate invocations of onDragEnd/onChange with the addition of this feature.

@maryschmidt
Copy link
Contributor Author

Sounds good, I'll update the PR

@williaster
Copy link
Collaborator

this one won't make 0.0.194

@williaster williaster removed this from the v0.0.194 milestone Feb 14, 2020
@maryschmidt
Copy link
Contributor Author

Sorry for the delay on this. Things have been absolutely crazy lately...

After some thought, I believe we can address the vast majority of use cases for #577 by allowing users to provide a starting range for the selected area controller (I'm calling it scrubber). My reasoning is that Brush should own BrushState calculations + state. I certainly don't want to reproduce that logic in my own UI components... But would I like to be able to deep-link users to regions within a Brush + accompanying chart? Why yes, yes I would 😀

Thoughts?

Copy link
Collaborator

@williaster williaster left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@maryschmidt I agree that this this is a good way to support #577.

overall looks great but had a couple of suggestions esp re naming 😄 then we can get this puppy 🐶 merged!

packages/vx-brush/src/BaseBrush.tsx Outdated Show resolved Hide resolved
packages/vx-brush/src/types.ts Outdated Show resolved Hide resolved
packages/vx-brush/src/Brush.tsx Outdated Show resolved Hide resolved
};

componentWillUnmount = () => {
window.removeEventListener('mouseup', this.handleDragEnd);
};

componentDidUpdate(prevProps: BaseBrushProps) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think ideally we would update state if the initialBrushState updates, but don't want to add a ton of checks in this method. I guess for now users could force re-render with a new component key 🤔 not sure if @hshoff has thoughts here.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a tough one... I've been thinking about this as well.

For now, I think pairing key with initialBrushState makes the most sense in this context. - It avoids the hazards of getting into "semi-controlled component" territory where users would re-default initial values but the component would otherwise manage its own logic.

  • The behavior would be consistent with conventions around setting default values on other input elements (dropdowns, date pickers, HTML inputs, etc.)

The downside I see is this wouldn't support animating between changes. My own immediate use case for this is for linking to different regions of a chart, so that would definitely be nice to have, but like you said, I would like to avoid adding checks everywhere...

packages/vx-brush/src/BaseBrush.tsx Outdated Show resolved Hide resolved
packages/vx-brush/src/BaseBrush.tsx Outdated Show resolved Hide resolved
packages/vx-brush/src/BaseBrush.tsx Show resolved Hide resolved
Copy link
Collaborator

@williaster williaster left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM once we update the constructor syntax. thanks for iterating on this, it's going to be super useful!

@emeeks is waiting for it! 💖

@williaster williaster added this to the v0.0.196 milestone Apr 15, 2020
@maryschmidt
Copy link
Contributor Author

Updated! Thanks for the feedback 😄

Copy link
Collaborator

@williaster williaster left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

woot! not sure CI actually ran but will merge and fix that separately if need be

@williaster williaster merged commit 0e04ff4 into airbnb:master Apr 15, 2020
@hshoff
Copy link
Member

hshoff commented Apr 16, 2020

Awesome, thanks for the contribution @maryschmidt!

@williaster
Copy link
Collaborator

sorry for the delay in the release, I'm testing this now and it doesn't really work :( will have a fix out soon / then release.

@williaster williaster changed the title new(vx-brush): handle mouseup outside of Brush extent new(vx-brush): add initialBrushPosition May 2, 2020
@williaster
Copy link
Collaborator

out in 0.0.196

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

Successfully merging this pull request may close these issues.

None yet

3 participants