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

Better control over ripple and animation durations #71

Closed
wants to merge 2 commits into
base: master
from

Conversation

Projects
None yet
2 participants
@slorber
Contributor

slorber commented Feb 15, 2018

Current implementation does not provide enough control over Ripple effect.

In particular, the ripple effect should not be based on the dropdown opacity animation duration but rather have its own duration.
That's also the case for the animation delay.

For example, if I want to disable totally the Ripple effect, I currently have no choice than setting opacity 0 to the ripple effect. But this is not enough, because of the delay, the first feedback the user see is delayed. And I don't want to set the opacity animation to 0 to remove that delay.

This PR permit to easily disable the ripple effect, and decouple ripple animation duration from dropdown opacity animation duration

slorber added some commits Feb 15, 2018

Better control over ripple
Current implementation does not provide enough control over Ripple effect.

In particular, the ripple effect should not be based on the dropdown opacity animation duration but rather have its own duration.
That's also the case for the animation delay.

For example, if I want to disable totally the Ripple effect, I currently have no choice than setting opacity 0 to the ripple effect. But this is not enough, because of the delay, the first feedback the user see is delayed. And I don't want to set the opacity animation to 0 to remove that delay.

This PR permit to easily disable the ripple effect, and decouple ripple animation duration from dropdown opacity animation duration

@slorber slorber changed the title from Better control over ripple to Better control over ripple and animation durations Feb 15, 2018

@n4kz

This comment has been minimized.

Owner

n4kz commented Feb 15, 2018

Thanks for PR! I've separated rippleDuration from AnimationDuration in 0.8.0 release. I'm planning to do a massive refactoring to completely separate dropdown component from TextField and Ripple wrapper for base component, so there is no point in rippleDisabled prop. I'm also planning to eliminate setTimeout calls for animation synchronisation in near future as they were implemented as quick and easy solution.

@n4kz n4kz closed this Feb 15, 2018

@slorber

This comment has been minimized.

Contributor

slorber commented Feb 15, 2018

great to know thanks

@slorber

This comment has been minimized.

Contributor

slorber commented Feb 15, 2018

@n4kz could you also make the label optional? I'm using fontSize 0 currently for my app as a workaround

@n4kz

This comment has been minimized.

Owner

n4kz commented Feb 15, 2018

It's not obvious, but you can use label='' and adjust labelHeight and other related TextField props (more details on height styling in n4kz/react-native-material-textfield#30).

@n4kz

This comment has been minimized.

Owner

n4kz commented Feb 21, 2018

Hi, @slorber.

I have released 0.9.0 with a new prop propsExtractor and it's possible to override item props for each dropdown item. For example now you can have different ripple colors for each item.

@slorber

This comment has been minimized.

Contributor

slorber commented Feb 21, 2018

thanks, I'll take a look as soon as I work on that and tell you if I get everything I need

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