diff --git a/src/components/PullToRefresh/PullToRefresh.css b/src/components/PullToRefresh/PullToRefresh.css index 30e4b5501e7..51fc92a96a3 100644 --- a/src/components/PullToRefresh/PullToRefresh.css +++ b/src/components/PullToRefresh/PullToRefresh.css @@ -1,22 +1,22 @@ .PullToRefresh { height: 100%; -} + } .PullToRefresh--refreshing { touch-action: none; pointer-events: none; -} + } .PullToRefresh__controls { left: 0; width: 100%; pointer-events: none; z-index: 100; -} + } .PullToRefresh--ios .PullToRefresh__controls { - z-index: -1; -} + z-index: 0; + } .PullToRefresh__spinner { display: flex; @@ -27,70 +27,70 @@ justify-content: center; box-sizing: border-box; transition: transform 300ms cubic-bezier(.1, 0, .25, 1), opacity 220ms ease-out; - opacity: 0; -} + opacity: 0; + } .PullToRefresh--ios .PullToRefresh__spinner { color: var(--activity_indicator_tint); -} + } .PullToRefresh--android .PullToRefresh__spinner { background: var(--background_suggestions); border-radius: 50%; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); color: var(--accent); -} + } .PullToRefresh--watching .PullToRefresh__spinner { - transition: opacity 220ms ease-out; -} + transition: opacity 220ms ease-out; + } .PullToRefresh__spinner-self { stroke: currentColor; -} + } .PullToRefresh--refreshing .PullToRefresh__spinner-self { animation: PullToRefreshToRefreshing 380ms ease-out; -} + } .PullToRefresh__spinner-path { transform: rotate(-90deg); transform-origin: center center; transition: stroke-dashoffset 167ms ease-out; -} + } .PullToRefresh--watching .PullToRefresh__spinner-path, .PullToRefresh--refreshing .PullToRefresh__spinner-path { transition: none; -} + } .PullToRefresh__spinner--on .PullToRefresh__spinner-path { animation: rotator var(--duration) linear infinite; -} + } .PullToRefresh__content { overflow: hidden; transition: transform 400ms var(--ios-easing); -} + } .PullToRefresh--watching .PullToRefresh__content { transition: none; -} + } @keyframes PullToRefreshToRefreshing { 0% { transform: scale(1); - } + } 30% { transform: scale(.6); - } + } 90% { transform: scale(1.1); - } + } 100% { transform: scale(1); + } } -} diff --git a/src/components/PullToRefresh/PullToRefresh.js b/src/components/PullToRefresh/PullToRefresh.js index 551f7945b44..0c4e5b95a86 100644 --- a/src/components/PullToRefresh/PullToRefresh.js +++ b/src/components/PullToRefresh/PullToRefresh.js @@ -106,7 +106,7 @@ export default class PullToRefresh extends PureComponent { }; onWindowTouchMove = (e) => { - this.state.refreshing && cancelEvent(e); + if (this.state.refreshing) cancelEvent(e); }; onTouchMove = (e) => {