Skip to content

R
react-pull-to-refresh
Commit 691e9fdb authored by Carlos's avatar Carlos
Browse files
Options

slim the package size

parent 34a1a850
Expand all Show whitespace changes
Inline Side-by-side
Showing with 458 additions and 374 deletions
__tests__/components/__snapshots__/PullDownContent.spec.tsx.snap
View file @ 691e9fdb
......@@ -2,14 +2,40 @@
exports[`PullDownContent spec App shows PullDownContent 1`] = `
<div
className="sc-bwzfXH kHYjaZ"
height="200px"
id="container2"
>
<div
className="sc-htpNat GucRt"
id="arrow"
/>
<span>
Pull down to refresh
</span>
<style>
#container2 {
background: #CCC;
height: 200px;
text-align: center;
}
#arrow {
margin: 10px auto;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid #666666;
height: 0;
width: 0;
-webkit-animation: fadein 1.5s infinite;
animation: fadein 1.5s infinite;
}
@keyframes fadein {
0%, 100% {
opacity: 0;
}
45%, 55% {
opacity: 1;
}
}
</style>
</div>
`;
__tests__/components/__snapshots__/RefreshContent.spec.tsx.snap
View file @ 691e9fdb
......@@ -2,8 +2,7 @@
exports[`RefreshContent spec App shows RefreshContent 1`] = `
<div
className="sc-bdVaJa bkDdBU"
height="200px"
id="container"
>
<div
className="sk-fading-circle"
......@@ -45,5 +44,155 @@ exports[`RefreshContent spec App shows RefreshContent 1`] = `
className="sk-circle12 sk-circle"
/>
</div>
<style>
#container {
display: flex;
flex-direction: column;
justify-content: center;
background: #CCC;
height: 200px;
}
.sk-fading-circle {
width: 40px;
height: 40px;
position: relative;
margin: auto;
}
.sk-fading-circle .sk-circle {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.sk-fading-circle .sk-circle:before {
content: '';
display: block;
margin: 0 auto;
width: 15%;
height: 15%;
background-color: #333;
border-radius: 100%;
-webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
}
.sk-fading-circle .sk-circle2 {
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
.sk-fading-circle .sk-circle3 {
-webkit-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg);
}
.sk-fading-circle .sk-circle4 {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.sk-fading-circle .sk-circle5 {
-webkit-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg);
}
.sk-fading-circle .sk-circle6 {
-webkit-transform: rotate(150deg);
-ms-transform: rotate(150deg);
transform: rotate(150deg);
}
.sk-fading-circle .sk-circle7 {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.sk-fading-circle .sk-circle8 {
-webkit-transform: rotate(210deg);
-ms-transform: rotate(210deg);
transform: rotate(210deg);
}
.sk-fading-circle .sk-circle9 {
-webkit-transform: rotate(240deg);
-ms-transform: rotate(240deg);
transform: rotate(240deg);
}
.sk-fading-circle .sk-circle10 {
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
.sk-fading-circle .sk-circle11 {
-webkit-transform: rotate(300deg);
-ms-transform: rotate(300deg);
transform: rotate(300deg);
}
.sk-fading-circle .sk-circle12 {
-webkit-transform: rotate(330deg);
-ms-transform: rotate(330deg);
transform: rotate(330deg);
}
.sk-fading-circle .sk-circle2:before {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.sk-fading-circle .sk-circle3:before {
-webkit-animation-delay: -1s;
animation-delay: -1s;
}
.sk-fading-circle .sk-circle4:before {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.sk-fading-circle .sk-circle5:before {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
.sk-fading-circle .sk-circle6:before {
-webkit-animation-delay: -0.7s;
animation-delay: -0.7s;
}
.sk-fading-circle .sk-circle7:before {
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s;
}
.sk-fading-circle .sk-circle8:before {
-webkit-animation-delay: -0.5s;
animation-delay: -0.5s;
}
.sk-fading-circle .sk-circle9:before {
-webkit-animation-delay: -0.4s;
animation-delay: -0.4s;
}
.sk-fading-circle .sk-circle10:before {
-webkit-animation-delay: -0.3s;
animation-delay: -0.3s;
}
.sk-fading-circle .sk-circle11:before {
-webkit-animation-delay: -0.2s;
animation-delay: -0.2s;
}
.sk-fading-circle .sk-circle12:before {
-webkit-animation-delay: -0.1s;
animation-delay: -0.1s;
}
@-webkit-keyframes sk-circleFadeDelay {
0%, 39%, 100% {
opacity: 0;
}
40% {
opacity: 1;
}
}
@keyframes sk-circleFadeDelay {
0%, 39%, 100% {
opacity: 0;
}
40% {
opacity: 1;
}
}
</style>
</div>
`;
__tests__/components/__snapshots__/ReleaseContent.spec.tsx.snap
View file @ 691e9fdb
......@@ -2,14 +2,41 @@
exports[`ReleaseContent spec App shows ReleaseContent 1`] = `
<div
className="sc-bxivhb hxSCts"
height="200px"
id="container"
>
<div
className="sc-ifAKCX jLYZjZ"
id="arrow"
/>
<span>
Release to refresh
</span>
<style>
#container {
background: #CCC;
height: 200px;
text-align: center;
}
#arrow {
margin: 10px auto;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid #666666;
height: 0;
width: 0;
-webkit-animation: fadein 1.5s infinite;
animation: fadein 1.5s infinite;
}
@keyframes fadein {
0%, 100% {
opacity: 0;
}
45%, 55% {
opacity: 1;
}
}
</style>
</div>
`;
examples/Basic.tsx
View file @ 691e9fdb
import * as React from "react";
import styled from "styled-components";
import {PullToRefresh, ReleaseContent, RefreshContent, PullDownContent} from "../src";
export interface BasicProps {
......@@ -26,31 +25,31 @@ export class Basic extends React.Component<BasicProps, BasicState> {
onRefresh={this.onRefresh}
backgroundColor="white"
>
<Container>
<Label>PullToRefresh</Label>
</Container>
</PullToRefresh>
<div id="basic-container">
<div id="basic-label">PullToRefresh</div>
</div>
);
}
}
const Container = styled.div`
<style>{`
#basic-container {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
background: darkslategray;
`;
const Label = styled.div`
}
#basic-label {
user-select: none;
margin-top: 20px;
color: aliceblue;
border: 1px solid aliceblue;
border-radius: 6px;
padding: 5px 2px;
&:hover {
}
#basic-label:hover {
cursor: pointer;
}
`;
`}</style>
</PullToRefresh>
</div>
);
}
}
package.json
View file @ 691e9fdb
......@@ -42,7 +42,6 @@
"react-test-renderer": "^16.5.2",
"rimraf": "^2.6.2",
"source-map-loader": "^0.2.3",
"styled-components": "^3.4.10",
"ts-jest": "^23.10.4",
"tslint": "^5.8.0",
"tslint-react": "^3.2.0",
......@@ -53,7 +52,6 @@
},
"peerDependencies": {
"react": "^16.5.2",
"react-dom": "^16.5.2",
"styled-components": "^3.4.10"
"react-dom": "^16.5.2"
}
}
src/components/PullDownContent.tsx
View file @ 691e9fdb
import * as React from "react";
import styled from "styled-components";
export interface PullDownContentProps {
height?: string;
......@@ -7,29 +6,27 @@ export interface PullDownContentProps {
label?: string;
}
export const PullDownContent: React.SFC<PullDownContentProps> = (props) => (
<Container {...props}>
<Arrow />
<span>{props.label || "Pull down to refresh"}</span>
</Container>
);
const Container = styled.div`
background: ${(props: PullDownContentProps) => props.background || "none"};
height: ${(props: PullDownContentProps) => props.height || "200px"};
export const PullDownContent: React.SFC<PullDownContentProps> = ({height = "200px", background = "none", label = "Pull down to refresh"}) => (
<div id="container2">
<div id="arrow" />
<span>{label}</span>
<style>
{`
#container2 {
background: ${background};
height: ${height};
text-align: center;
`;
const Arrow = styled.div`
}
#arrow {
margin: 10px auto;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid #666666;
height: 0;
width: 0;
-webkit-animation: fadein 1.5s infinite;
animation: fadein 1.5s infinite;
}
@keyframes fadein {
0%, 100% {
opacity: 0;
......@@ -38,4 +35,7 @@ const Arrow = styled.div`
opacity: 1;
}
}
`;
`}
</style>
</div>
);
src/components/RefreshContent.tsx
View file @ 691e9fdb
import * as React from "react";
import styled from "styled-components";
export interface RefreshContentProps {
height?: string;
background?: any;
}
export const RefreshContent: React.SFC<RefreshContentProps> = (props) => (
<Container {...props}>
export const RefreshContent: React.SFC<RefreshContentProps> = ({height = "200px", background = "none"}) => (
<div id="container">
<div className="sk-fading-circle">
<div className="sk-circle1 sk-circle" />
<div className="sk-circle2 sk-circle" />
......@@ -22,22 +21,20 @@ export const RefreshContent: React.SFC<RefreshContentProps> = (props) => (
<div className="sk-circle11 sk-circle" />
<div className="sk-circle12 sk-circle" />
</div>
</Container>
);
const Container = styled.div`
<style>{`
#container {
display: flex;
flex-direction: column;
justify-content: center;
background: ${(props: RefreshContentProps) => props.background || "none"};
height: ${(props: RefreshContentProps) => props.height || "200px"};
background: ${background};
height: ${height};
}
.sk-fading-circle {
width: 40px;
height: 40px;
position: relative;
margin: auto;
}
.sk-fading-circle .sk-circle {
width: 100%;
height: 100%;
......@@ -45,7 +42,6 @@ const Container = styled.div`
left: 0;
top: 0;
}
.sk-fading-circle .sk-circle:before {
content: '';
display: block;
......@@ -172,4 +168,6 @@ const Container = styled.div`
opacity: 1;
}
}
`;
`}</style>
</div>
);
src/components/ReleaseContent.tsx
View file @ 691e9fdb
import * as React from "react";
import styled from "styled-components";
export interface ReleaseContentProps {
height?: string;
......@@ -7,20 +6,17 @@ export interface ReleaseContentProps {
label?: string;
}
export const ReleaseContent: React.SFC<ReleaseContentProps> = (props) => (
<Container {...props}>
<Arrow />
<span>{props.label || "Release to refresh"}</span>
</Container>
);
const Container = styled.div`
background: ${(props: ReleaseContentProps) => props.background || "none"};
height: ${(props: ReleaseContentProps) => props.height || "200px"};
export const ReleaseContent: React.SFC<ReleaseContentProps> = ({height = "200px", background = "none", label = "Release to refresh"}) => (
<div id="container">
<div id="arrow"/>
<span>{label}</span>
<style>{`
#container {
background: ${background || "none"};
height: ${height || "200px"};
text-align: center;
`;
const Arrow = styled.div`
}
#arrow {
margin: 10px auto;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
......@@ -30,6 +26,7 @@ const Arrow = styled.div`
-webkit-animation: fadein 1.5s infinite;
animation: fadein 1.5s infinite;
}
@keyframes fadein {
0%, 100% {
opacity: 0;
......@@ -38,4 +35,6 @@ const Arrow = styled.div`
opacity: 1;
}
}
`;
`}</style>
</div>
);
tslint.json
View file @ 691e9fdb
......@@ -10,6 +10,9 @@
"no-var-requires": true,
"no-unused-expression": false,
"no-duplicate-imports": false,
"no-trailing-whitespace": false,
"jsx-no-multiline-js": false,
"jsx-boolean-value": false,
"no-object-literal-type-assertion": false,
"no-string-literal": false,
"object-literal-sort-keys": false,
......
yarn.lock
View file @ 691e9fdb
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment