kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
Merge branch 'ptr-improvements' into 'develop'
PullToRefresh improvements See merge request soapbox-pub/soapbox-fe!898merge-requests/899/head
commit
94f3133dd4
|
@ -0,0 +1,20 @@
|
|||
/**
|
||||
* iOS style loading spinner.
|
||||
* It's mostly CSS, adapted from: https://loading.io/css/
|
||||
*/
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const LoadingSpinner = ({ size = 30 }) => (
|
||||
<div class='lds-spinner' style={{ width: size, height: size }}>
|
||||
{Array(12).fill().map(i => (
|
||||
<div />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
||||
LoadingSpinner.propTypes = {
|
||||
size: PropTypes.number,
|
||||
};
|
||||
|
||||
export default LoadingSpinner;
|
|
@ -1,6 +1,7 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import PTRComponent from 'react-simple-pull-to-refresh';
|
||||
import LoadingSpinner from 'soapbox/components/loading_spinner';
|
||||
|
||||
/**
|
||||
* PullToRefresh:
|
||||
|
@ -32,7 +33,10 @@ export default class PullToRefresh extends React.Component {
|
|||
onRefresh={this.handleRefresh}
|
||||
pullingContent={null}
|
||||
// `undefined` will fallback to the default, while `null` will render nothing
|
||||
refreshingContent={onRefresh ? undefined : null}
|
||||
refreshingContent={onRefresh ? <LoadingSpinner size={30} /> : null}
|
||||
pullDownThreshold={67}
|
||||
maxPullDownDistance={95}
|
||||
resistance={2}
|
||||
{...rest}
|
||||
>
|
||||
{children}
|
||||
|
|
|
@ -229,3 +229,114 @@
|
|||
.ptr__children {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.ptr .lds-spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.ptr__pull-down {
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
/**
|
||||
* iOS style loading spinner.
|
||||
* Adapted from: https://loading.io/css/
|
||||
* With some help scaling it: https://signalvnoise.com/posts/2577-loading-spinner-animation-using-css-and-webkit
|
||||
*/
|
||||
.lds-spinner {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
|
||||
div {
|
||||
position: absolute;
|
||||
transform-origin: 50% 50%;
|
||||
animation: lds-spinner 1.2s linear infinite;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&::after {
|
||||
content: ' ';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 3.75%;
|
||||
left: 46.25%;
|
||||
width: 7.5%;
|
||||
height: 22.5%;
|
||||
border-radius: 20%;
|
||||
background: var(--primary-text-color);
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
transform: rotate(0deg);
|
||||
animation-delay: -1.1s;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
transform: rotate(30deg);
|
||||
animation-delay: -1s;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
transform: rotate(60deg);
|
||||
animation-delay: -0.9s;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
transform: rotate(90deg);
|
||||
animation-delay: -0.8s;
|
||||
}
|
||||
|
||||
&:nth-child(5) {
|
||||
transform: rotate(120deg);
|
||||
animation-delay: -0.7s;
|
||||
}
|
||||
|
||||
&:nth-child(6) {
|
||||
transform: rotate(150deg);
|
||||
animation-delay: -0.6s;
|
||||
}
|
||||
|
||||
&:nth-child(7) {
|
||||
transform: rotate(180deg);
|
||||
animation-delay: -0.5s;
|
||||
}
|
||||
|
||||
&:nth-child(8) {
|
||||
transform: rotate(210deg);
|
||||
animation-delay: -0.4s;
|
||||
}
|
||||
|
||||
&:nth-child(9) {
|
||||
transform: rotate(240deg);
|
||||
animation-delay: -0.3s;
|
||||
}
|
||||
|
||||
&:nth-child(10) {
|
||||
transform: rotate(270deg);
|
||||
animation-delay: -0.2s;
|
||||
}
|
||||
|
||||
&:nth-child(11) {
|
||||
transform: rotate(300deg);
|
||||
animation-delay: -0.1s;
|
||||
}
|
||||
|
||||
&:nth-child(12) {
|
||||
transform: rotate(330deg);
|
||||
animation-delay: 0s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes lds-spinner {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
|
Ładowanie…
Reference in New Issue