[RefreshIndicator] Add new component. #1312
Conversation
| @@ -20,6 +20,7 @@ class Components extends React.Component { | |||
| { route: 'menus', text: 'Menus'}, | |||
| { route: 'paper', text: 'Paper'}, | |||
| { route: 'progress', text: 'Progress'}, | |||
| { route: 'refresh-indicator', text: 'RefreshIndicator'}, | |||
There was a problem hiding this comment.
Please add a space to the text 'Refresh Indicator`
| name: 'percentage', | ||
| type: 'number', | ||
| header: 'default: 0', | ||
| desc: 'The confirmation progress to fetch data. Max value is 100' |
There was a problem hiding this comment.
According to the design specs, the refresh arrow doesn't seem to indicate percent complete progress - rather, it's just part of a swipe animation - https://www.google.com/design/spec/patterns/swipe-to-refresh.html#swipe-to-refresh-swipe-to-refresh
I'm not sure if this actually changes the implementation of this component since we can still use this prop to implement the swipe animation. However, it does change how we explain this prop and what we name it.
There was a problem hiding this comment.
Thank you very much for your patience.
In fact, It can be set status to be loading at any percentage in the container component. The defination is my own opinion, and the arrow will be highlighted when percentage equals 100.
Android's SwipeRefreshLayout component has setDistanceToTriggerSync and setRefreshing methods. They almost have the same meaning with my implementation.
The difference between my implementation and specs is the highlight behavior. I add it because I think it can make much sense to the user.
|
@maoziliang Thank you for this PR! Please see my comments above. |
|
I'll merge the commits into one if every thing is ok. |
| AutoPrefix.set(wrapper.style, "transitionDuration", "0ms"); | ||
|
|
||
| setTimeout(() => { | ||
| AutoPrefix.set(wrapper.style, "transform", "rotate(1800deg)"); |
There was a problem hiding this comment.
May be we should assert that the component is still mounted?
There was a problem hiding this comment.
@oliviertassinari Thanks! I'll fix it. But the isMounted() method maybe deprecated in the future facebook/react#3220. However, I think it's ok to use it at this version.
[RefreshIndicator] Add new component.
|
Thanks @maoziliang ! |
I just merge my component into material-ui. But the implementation of my original and the current is different, by the animation implementation. css3 version against setTimeout version.
Perhaps the component's name is not suitabe. And the code need to be reviewed.
More detail code and examples at here: RefreshIndicator