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 @@ ...@@ -2,14 +2,40 @@
exports[`PullDownContent spec App shows PullDownContent 1`] = ` exports[`PullDownContent spec App shows PullDownContent 1`] = `
<div <div
className="sc-bwzfXH kHYjaZ" id="container2"
height="200px"
> >
<div <div
className="sc-htpNat GucRt" id="arrow"
/> />
<span> <span>
Pull down to refresh Pull down to refresh
</span> </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> </div>
`; `;
__tests__/components/__snapshots__/RefreshContent.spec.tsx.snap
View file @ 691e9fdb
...@@ -2,8 +2,7 @@ ...@@ -2,8 +2,7 @@
exports[`RefreshContent spec App shows RefreshContent 1`] = ` exports[`RefreshContent spec App shows RefreshContent 1`] = `
<div <div
className="sc-bdVaJa bkDdBU" id="container"
height="200px"
> >
<div <div
className="sk-fading-circle" className="sk-fading-circle"
...@@ -45,5 +44,155 @@ exports[`RefreshContent spec App shows RefreshContent 1`] = ` ...@@ -45,5 +44,155 @@ exports[`RefreshContent spec App shows RefreshContent 1`] = `
className="sk-circle12 sk-circle" className="sk-circle12 sk-circle"
/> />
</div> </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> </div>
`; `;
__tests__/components/__snapshots__/ReleaseContent.spec.tsx.snap
View file @ 691e9fdb
...@@ -2,14 +2,41 @@ ...@@ -2,14 +2,41 @@
exports[`ReleaseContent spec App shows ReleaseContent 1`] = ` exports[`ReleaseContent spec App shows ReleaseContent 1`] = `
<div <div
className="sc-bxivhb hxSCts" id="container"
height="200px"
> >
<div <div
className="sc-ifAKCX jLYZjZ" id="arrow"
/> />
<span> <span>
Release to refresh Release to refresh
</span> </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> </div>
`; `;
examples/Basic.tsx
View file @ 691e9fdb
import * as React from "react"; import * as React from "react";
import styled from "styled-components";
import {PullToRefresh, ReleaseContent, RefreshContent, PullDownContent} from "../src"; import {PullToRefresh, ReleaseContent, RefreshContent, PullDownContent} from "../src";
export interface BasicProps { export interface BasicProps {
...@@ -26,31 +25,31 @@ export class Basic extends React.Component<BasicProps, BasicState> { ...@@ -26,31 +25,31 @@ export class Basic extends React.Component<BasicProps, BasicState> {
onRefresh={this.onRefresh} onRefresh={this.onRefresh}
backgroundColor="white" backgroundColor="white"
> >
<Container> <div id="basic-container">
<Label>PullToRefresh</Label> <div id="basic-label">PullToRefresh</div>
</Container>
</PullToRefresh>
</div> </div>
); <style>{`
} #basic-container {
}
const Container = styled.div`
height: 100vh; height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
background: darkslategray; background: darkslategray;
`; }
#basic-label {
const Label = styled.div`
user-select: none; user-select: none;
margin-top: 20px; margin-top: 20px;
color: aliceblue; color: aliceblue;
border: 1px solid aliceblue; border: 1px solid aliceblue;
border-radius: 6px; border-radius: 6px;
padding: 5px 2px; padding: 5px 2px;
&:hover { }
#basic-label:hover {
cursor: pointer; cursor: pointer;
} }
`; `}</style>
</PullToRefresh>
</div>
);
}
}
package.json
View file @ 691e9fdb
...@@ -42,7 +42,6 @@ ...@@ -42,7 +42,6 @@
"react-test-renderer": "^16.5.2", "react-test-renderer": "^16.5.2",
"rimraf": "^2.6.2", "rimraf": "^2.6.2",
"source-map-loader": "^0.2.3", "source-map-loader": "^0.2.3",
"styled-components": "^3.4.10",
"ts-jest": "^23.10.4", "ts-jest": "^23.10.4",
"tslint": "^5.8.0", "tslint": "^5.8.0",
"tslint-react": "^3.2.0", "tslint-react": "^3.2.0",
...@@ -53,7 +52,6 @@ ...@@ -53,7 +52,6 @@
}, },
"peerDependencies": { "peerDependencies": {
"react": "^16.5.2", "react": "^16.5.2",
"react-dom": "^16.5.2", "react-dom": "^16.5.2"
"styled-components": "^3.4.10"
} }
} }
src/components/PullDownContent.tsx
View file @ 691e9fdb
import * as React from "react"; import * as React from "react";
import styled from "styled-components";
export interface PullDownContentProps { export interface PullDownContentProps {
height?: string; height?: string;
...@@ -7,29 +6,27 @@ export interface PullDownContentProps { ...@@ -7,29 +6,27 @@ export interface PullDownContentProps {
label?: string; label?: string;
} }
export const PullDownContent: React.SFC<PullDownContentProps> = (props) => ( export const PullDownContent: React.SFC<PullDownContentProps> = ({height = "200px", background = "none", label = "Pull down to refresh"}) => (
<Container {...props}> <div id="container2">
<Arrow /> <div id="arrow" />
<span>{props.label || "Pull down to refresh"}</span> <span>{label}</span>
</Container> <style>
); {`
#container2 {
const Container = styled.div` background: ${background};
background: ${(props: PullDownContentProps) => props.background || "none"}; height: ${height};
height: ${(props: PullDownContentProps) => props.height || "200px"};
text-align: center; text-align: center;
`; }
#arrow {
const Arrow = styled.div`
margin: 10px auto; margin: 10px auto;
border-left: 15px solid transparent; border-left: 15px solid transparent;
border-right: 15px solid transparent; border-right: 15px solid transparent;
border-top: 15px solid #666666; border-top: 15px solid #666666;
height: 0; height: 0;
width: 0; width: 0;
-webkit-animation: fadein 1.5s infinite; -webkit-animation: fadein 1.5s infinite;
animation: fadein 1.5s infinite; animation: fadein 1.5s infinite;
}
@keyframes fadein { @keyframes fadein {
0%, 100% { 0%, 100% {
opacity: 0; opacity: 0;
...@@ -38,4 +35,7 @@ const Arrow = styled.div` ...@@ -38,4 +35,7 @@ const Arrow = styled.div`
opacity: 1; opacity: 1;
} }
} }
`; `}
</style>
</div>
);
src/components/RefreshContent.tsx
View file @ 691e9fdb
import * as React from "react"; import * as React from "react";
import styled from "styled-components";
export interface RefreshContentProps { export interface RefreshContentProps {
height?: string; height?: string;
background?: any; background?: any;
} }
export const RefreshContent: React.SFC<RefreshContentProps> = (props) => ( export const RefreshContent: React.SFC<RefreshContentProps> = ({height = "200px", background = "none"}) => (
<Container {...props}> <div id="container">
<div className="sk-fading-circle"> <div className="sk-fading-circle">
<div className="sk-circle1 sk-circle" /> <div className="sk-circle1 sk-circle" />
<div className="sk-circle2 sk-circle" /> <div className="sk-circle2 sk-circle" />
...@@ -22,22 +21,20 @@ export const RefreshContent: React.SFC<RefreshContentProps> = (props) => ( ...@@ -22,22 +21,20 @@ export const RefreshContent: React.SFC<RefreshContentProps> = (props) => (
<div className="sk-circle11 sk-circle" /> <div className="sk-circle11 sk-circle" />
<div className="sk-circle12 sk-circle" /> <div className="sk-circle12 sk-circle" />
</div> </div>
</Container> <style>{`
); #container {
const Container = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
background: ${(props: RefreshContentProps) => props.background || "none"}; background: ${background};
height: ${(props: RefreshContentProps) => props.height || "200px"}; height: ${height};
}
.sk-fading-circle { .sk-fading-circle {
width: 40px; width: 40px;
height: 40px; height: 40px;
position: relative; position: relative;
margin: auto; margin: auto;
} }
.sk-fading-circle .sk-circle { .sk-fading-circle .sk-circle {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -45,7 +42,6 @@ const Container = styled.div` ...@@ -45,7 +42,6 @@ const Container = styled.div`
left: 0; left: 0;
top: 0; top: 0;
} }
.sk-fading-circle .sk-circle:before { .sk-fading-circle .sk-circle:before {
content: ''; content: '';
display: block; display: block;
...@@ -172,4 +168,6 @@ const Container = styled.div` ...@@ -172,4 +168,6 @@ const Container = styled.div`
opacity: 1; opacity: 1;
} }
} }
`; `}</style>
</div>
);
src/components/ReleaseContent.tsx
View file @ 691e9fdb
import * as React from "react"; import * as React from "react";
import styled from "styled-components";
export interface ReleaseContentProps { export interface ReleaseContentProps {
height?: string; height?: string;
...@@ -7,20 +6,17 @@ export interface ReleaseContentProps { ...@@ -7,20 +6,17 @@ export interface ReleaseContentProps {
label?: string; label?: string;
} }
export const ReleaseContent: React.SFC<ReleaseContentProps> = (props) => ( export const ReleaseContent: React.SFC<ReleaseContentProps> = ({height = "200px", background = "none", label = "Release to refresh"}) => (
<Container {...props}> <div id="container">
<Arrow /> <div id="arrow"/>
<span>{props.label || "Release to refresh"}</span> <span>{label}</span>
</Container> <style>{`
); #container {
background: ${background || "none"};
const Container = styled.div` height: ${height || "200px"};
background: ${(props: ReleaseContentProps) => props.background || "none"};
height: ${(props: ReleaseContentProps) => props.height || "200px"};
text-align: center; text-align: center;
`; }
#arrow {
const Arrow = styled.div`
margin: 10px auto; margin: 10px auto;
border-left: 15px solid transparent; border-left: 15px solid transparent;
border-right: 15px solid transparent; border-right: 15px solid transparent;
...@@ -30,6 +26,7 @@ const Arrow = styled.div` ...@@ -30,6 +26,7 @@ const Arrow = styled.div`
-webkit-animation: fadein 1.5s infinite; -webkit-animation: fadein 1.5s infinite;
animation: fadein 1.5s infinite; animation: fadein 1.5s infinite;
}
@keyframes fadein { @keyframes fadein {
0%, 100% { 0%, 100% {
opacity: 0; opacity: 0;
...@@ -38,4 +35,6 @@ const Arrow = styled.div` ...@@ -38,4 +35,6 @@ const Arrow = styled.div`
opacity: 1; opacity: 1;
} }
} }
`; `}</style>
</div>
);
tslint.json
View file @ 691e9fdb
...@@ -10,6 +10,9 @@ ...@@ -10,6 +10,9 @@
"no-var-requires": true, "no-var-requires": true,
"no-unused-expression": false, "no-unused-expression": false,
"no-duplicate-imports": 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-object-literal-type-assertion": false,
"no-string-literal": false, "no-string-literal": false,
"object-literal-sort-keys": 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