add default content components

951c7386 · AFOC-1709091830\echou · 2bf09d41 · 951c7386 · 951c7386 · 951c7386
Commit 951c7386 authored Jan 03, 2018 by $AFOC-1709091830\echou's avatar$ AFOC-1709091830\echou
6 changed files
--- a/examples/Basic.tsx
+++ b/examples/Basic.tsx
 import * as React from "react";
-import {PullToRefresh} from "../src";
+import styled from "styled-components";
+import {PullToRefresh, ReleaseContent, RefreshContent, PullDownContent} from "../src";
 export interface BasicProps {
 }
@@ -18,17 +19,36 @@ export class Basic extends React.Component<BasicProps, BasicState> {
        return (
            <div style={{overflow: "scroll"}}>
                <PullToRefresh
-                    pullDownContent={<div style={{backgroundColor: "grey", height: "200px", textAlign: "center"}}>Pull down to refresh</div>}
+                    pullDownContent={<PullDownContent />}
-                    releaseContent={<div style={{backgroundColor: "green", height: "200px", textAlign: "center"}}>Release to refresh</div>}
+                    releaseContent={<ReleaseContent />}
-                    refreshContent={<div style={{backgroundColor: "yellow", height: "200px", textAlign: "center"}}>Refreshing</div>}
+                    refreshContent={<RefreshContent />}
                    pullDownThreshold={200}
                    onRefresh={this.onRefresh}
                >
-                    <div style={{height: "150vh", textAlign: "center"}}>
+                    <Container>
-                        <div>PullToRefresh</div>
+                        <Label>PullToRefresh</Label>
-                    </div>
+                    </Container>
                </PullToRefresh>
            </div>
        );
    }
 }
+const Container = styled.div`
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: darkslategray;
+`;
+const Label = styled.div`
+    margin-top: 20px;
+    color: aliceblue;
+    border: 1px solid aliceblue;
+    border-radius: 6px;
+    padding: 5px 2px;
+    &:hover {
+        cursor: pointer;
+    }
+`;
--- a/package.json
+++ b/package.json
@@ -29,11 +29,12 @@
  "dependencies": {
    "core-decorators": "^0.20.0",
    "react": "^16.2.0",
-    "react-dom": "^16.2.0"
+    "react-dom": "^16.2.0",
+    "styled-components": "^2.4.0"
  },
  "devDependencies": {
-    "@types/react": "^16.0.31",
    "@types/core-decorators": "^0.10.32",
+    "@types/react": "^16.0.31",
    "@types/react-dom": "^16.0.3",
    "awesome-typescript-loader": "^3.4.1",
    "path": "^0.12.7",

--- a/src/components/PullDownContent.tsx
+++ b/src/components/PullDownContent.tsx
+import * as React from "react";
+import styled from "styled-components";
+export interface PullDownContentProps {
+    height?: number;
+    background?: any;
+    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"};
+    text-align: center;
+`;
+const Arrow = styled.div`
+    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;
+        }
+    }
+`;
--- a/src/components/RefreshContent.tsx
+++ b/src/components/RefreshContent.tsx
+import * as React from "react";
+import styled from "styled-components";
+export interface RefreshContentProps {
+    height?: number;
+    background?: any;
+}
+export const RefreshContent: React.SFC<RefreshContentProps> = (props) => (
+    <Container {...props}>
+        <div className="sk-fading-circle">
+            <div className="sk-circle1 sk-circle" />
+            <div className="sk-circle2 sk-circle" />
+            <div className="sk-circle3 sk-circle" />
+            <div className="sk-circle4 sk-circle" />
+            <div className="sk-circle5 sk-circle" />
+            <div className="sk-circle6 sk-circle" />
+            <div className="sk-circle7 sk-circle" />
+            <div className="sk-circle8 sk-circle" />
+            <div className="sk-circle9 sk-circle" />
+            <div className="sk-circle10 sk-circle" />
+            <div className="sk-circle11 sk-circle" />
+            <div className="sk-circle12 sk-circle" />
+        </div>
+    </Container>
+);
+const Container = styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    background: ${(props: RefreshContentProps) => props.background || "none"};
+    height: ${(props: RefreshContentProps) => props.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;
+        }
+    }
+`;
--- a/src/components/ReleaseContent.tsx
+++ b/src/components/ReleaseContent.tsx
+import * as React from "react";
+import styled from "styled-components";
+export interface ReleaseContentProps {
+    height?: number;
+    background?: any;
+    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"};
+    text-align: center;
+`;
+const Arrow = styled.div`
+    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;
+        }
+    }
+`;
--- a/src/index.ts
+++ b/src/index.ts
 import {PullToRefresh} from "./PullToRefresh";
-export {PullToRefresh};
+import {RefreshContent} from "./components/RefreshContent";
+import {PullDownContent} from "./components/PullDownContent";
+import {ReleaseContent} from "./components/ReleaseContent";
+export {PullToRefresh, RefreshContent, PullDownContent, ReleaseContent};