slim the package size

691e9fdb · Carlos · 34a1a850 · 691e9fdb · 691e9fdb · 691e9fdb
Commit 691e9fdb authored Oct 13, 2018 by Carlos
10 changed files
--- a/__tests__/components/__snapshots__/PullDownContent.spec.tsx.snap
+++ b/__tests__/components/__snapshots__/PullDownContent.spec.tsx.snap
@@ -2,14 +2,40 @@
 exports[`PullDownContent spec App shows PullDownContent 1`] = `
 <div
-  className="sc-bwzfXH kHYjaZ"
+  id="container2"
-  height="200px"
 >
  <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>
 `;
--- a/__tests__/components/__snapshots__/RefreshContent.spec.tsx.snap
+++ b/__tests__/components/__snapshots__/RefreshContent.spec.tsx.snap
@@ -2,8 +2,7 @@
 exports[`RefreshContent spec App shows RefreshContent 1`] = `
 <div
-  className="sc-bdVaJa bkDdBU"
+  id="container"
-  height="200px"
 >
  <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>
 `;
--- a/__tests__/components/__snapshots__/ReleaseContent.spec.tsx.snap
+++ b/__tests__/components/__snapshots__/ReleaseContent.spec.tsx.snap
@@ -2,14 +2,41 @@
 exports[`ReleaseContent spec App shows ReleaseContent 1`] = `
 <div
-  className="sc-bxivhb hxSCts"
+  id="container"
-  height="200px"
 >
  <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>
 `;
--- a/examples/Basic.tsx
+++ b/examples/Basic.tsx
 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>
+                    <div id="basic-container">
-                        <Label>PullToRefresh</Label>
+                        <div id="basic-label">PullToRefresh</div>
-                    </Container>
+                    </div>
+                    <style>{`
+                        #basic-container {
+                            height: 100vh;
+                            display: flex;
+                            flex-direction: column;
+                            align-items: center;
+                            background: darkslategray;
+                        }
+                        #basic-label {
+                            user-select: none;
+                            margin-top: 20px;
+                            color: aliceblue;
+                            border: 1px solid aliceblue;
+                            border-radius: 6px;
+                            padding: 5px 2px;
+                        }
+                        #basic-label:hover {
+                            cursor: pointer;
+                        }
+                    `}</style>
                </PullToRefresh>
            </div>
        );
    }
 }
-const Container = styled.div`
-    height: 100vh;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    background: darkslategray;
-`;
-const Label = styled.div`
-    user-select: none;
-    margin-top: 20px;
-    color: aliceblue;
-    border: 1px solid aliceblue;
-    border-radius: 6px;
-    padding: 5px 2px;
-    &:hover {
-        cursor: pointer;
-    }
-`;
--- a/package.json
+++ b/package.json
@@ -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",
+    "react-dom": "^16.5.2"
-    "styled-components": "^3.4.10"
  }
 }
--- a/src/components/PullDownContent.tsx
+++ b/src/components/PullDownContent.tsx
 import * as React from "react";
-import styled from "styled-components";
 export interface PullDownContentProps {
    height?: string;
@@ -7,35 +6,36 @@ export interface PullDownContentProps {
    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 {
+                    background: ${background};
+                    height: ${height};
+                    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>
 );
-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?: string;
    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-circle1 sk-circle" />
            <div className="sk-circle2 sk-circle" />
@@ -22,154 +21,153 @@ export const RefreshContent: React.SFC<RefreshContentProps> = (props) => (
            <div className="sk-circle11 sk-circle" />
            <div className="sk-circle12 sk-circle" />
        </div>
-    </Container>
+        <style>{`
+            #container {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                background: ${background};
+                height: ${height};
+            }
+            .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>
 );
-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?: string;
@@ -7,35 +6,35 @@ export interface ReleaseContentProps {
    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"};
+                text-align: center;
-    height: ${(props: ReleaseContentProps) => props.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;
-const Arrow = styled.div`
+                -webkit-animation: fadein 1.5s infinite;
-    margin: 10px auto;
+                animation: fadein 1.5s infinite;
-    border-left: 15px solid transparent;
+            }
-    border-right: 15px solid transparent;
+            @keyframes fadein {
-    border-bottom: 15px solid #666666;
+                0%, 100% {
-    height: 0;
+                    opacity: 0;
-    width: 0;
+                }
+                45%, 55% {
-    -webkit-animation: fadein 1.5s infinite;
+                    opacity: 1;
-    animation: fadein 1.5s infinite;
+                }
-    @keyframes fadein {
+            }
-        0%, 100% {
+        `}</style>
-            opacity: 0;
+    </div>
-        }
+);
-        45%, 55% {
-            opacity: 1;
-        }
-    }
-`;
--- a/tslint.json
+++ b/tslint.json
@@ -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,
@@ -18,4 +21,4 @@
    "ordered-imports": false,
    "member-ordering": false
  }
 }
\ No newline at end of file
--- a/yarn.lock
+++ b/yarn.lock
@@ -428,11 +428,6 @@ arrify@^1.0.1:
  resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
  integrity sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=
-asap@~2.0.3:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
-  integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
 asn1.js@^4.0.0:
  version "4.10.1"
  resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.10.1.tgz#b9c2bf5805f1e64aadeed6df3a2bfafb5a73f5a0"
@@ -918,14 +913,6 @@ buffer@^4.3.0:
    ieee754 "^1.1.4"
    isarray "^1.0.0"
-buffer@^5.0.3:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.2.1.tgz#dd57fa0f109ac59c602479044dca7b8b3d0b71d6"
-  integrity sha512-c+Ko0loDaFfuPWiL02ls9Xd3GO3cPVmUobQ6t3rXNUk304u6hGq+8N/kFi+QEIKhzK3uwolVhLzszmfLmMLnqg==
-  dependencies:
-    base64-js "^1.0.2"
-    ieee754 "^1.1.4"
 builtin-modules@^1.0.0, builtin-modules@^1.1.1:
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
@@ -1256,11 +1243,6 @@ core-decorators@^0.20.0:
  resolved "https://registry.yarnpkg.com/core-decorators/-/core-decorators-0.20.0.tgz#605896624053af8c28efbe735c25a301a61c65c5"
  integrity sha1-YFiWYkBTr4wo775zXCWjAaYcZcU=
-core-js@^1.0.0:
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
-  integrity sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=
 core-js@^2.4.0, core-js@^2.5.0:
  version "2.5.7"
  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.7.tgz#f972608ff0cead68b841a16a932d0b183791814e"
@@ -1339,20 +1321,6 @@ crypto-browserify@^3.11.0:
    randombytes "^2.0.0"
    randomfill "^1.0.3"
-css-color-keywords@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
-  integrity sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=
-css-to-react-native@^2.0.3:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.2.2.tgz#c077d0f7bf3e6c915a539e7325821c9dd01f9965"
-  integrity sha512-w99Fzop1FO8XKm0VpbQp3y5mnTnaS+rtCvS+ylSEOK76YXO5zoHQx/QMB1N54Cp+Ya9jB9922EHrh14ld4xmmw==
-  dependencies:
-    css-color-keywords "^1.0.0"
-    fbjs "^0.8.5"
-    postcss-value-parser "^3.3.0"
 cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0":
  version "0.3.4"
  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.4.tgz#8cd52e8a3acfd68d3aed38ee0a640177d2f9d797"
@@ -1659,13 +1627,6 @@ encodeurl@~1.0.2:
  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
  integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
-encoding@^0.1.11:
-  version "0.1.12"
-  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
-  integrity sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=
-  dependencies:
-    iconv-lite "~0.4.13"
 end-of-stream@^1.0.0, end-of-stream@^1.1.0:
  version "1.4.1"
  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.1.tgz#ed29634d19baba463b6ce6b80a37213eab71ec43"
@@ -2034,19 +1995,6 @@ fb-watchman@^2.0.0:
  dependencies:
    bser "^2.0.0"
-fbjs@^0.8.16, fbjs@^0.8.5:
-  version "0.8.17"
-  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
-  integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
-  dependencies:
-    core-js "^1.0.0"
-    isomorphic-fetch "^2.1.1"
-    loose-envify "^1.0.0"
-    object-assign "^4.1.0"
-    promise "^7.1.1"
-    setimmediate "^1.0.5"
-    ua-parser-js "^0.7.18"
 filename-regex@^2.0.0:
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.1.tgz#c1c4b9bee3e09725ddb106b75c1e301fe2f18b26"
@@ -2555,7 +2503,7 @@ iconv-lite@0.4.23:
  dependencies:
    safer-buffer ">= 2.1.2 < 3"
-iconv-lite@0.4.24, iconv-lite@^0.4.4, iconv-lite@~0.4.13:
+iconv-lite@0.4.24, iconv-lite@^0.4.4:
  version "0.4.24"
  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
  integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
@@ -2906,7 +2854,7 @@ is-regex@^1.0.4:
  dependencies:
    has "^1.0.1"
-is-stream@^1.0.1, is-stream@^1.1.0:
+is-stream@^1.1.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
  integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
@@ -2960,14 +2908,6 @@ isobject@^3.0.0, isobject@^3.0.1:
  resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
  integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
-isomorphic-fetch@^2.1.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
-  integrity sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=
-  dependencies:
-    node-fetch "^1.0.1"
-    whatwg-fetch ">=0.10.0"
 isstream@~0.1.2:
  version "0.1.2"
  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
@@ -3981,14 +3921,6 @@ nice-try@^1.0.4:
  resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
  integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==
-node-fetch@^1.0.1:
-  version "1.7.3"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
-  integrity sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==
-  dependencies:
-    encoding "^0.1.11"
-    is-stream "^1.0.1"
 node-forge@0.7.5:
  version "0.7.5"
  resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.7.5.tgz#6c152c345ce11c52f465c2abd957e8639cd674df"
@@ -4532,11 +4464,6 @@ posix-character-classes@^0.1.0:
  resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
  integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=
-postcss-value-parser@^3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz#87f38f9f18f774a4ab4c8a232f5c5ce8872a9d15"
-  integrity sha1-h/OPnxj3dKSrTIojL1xc6IcqnRU=
 prelude-ls@~1.1.2:
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@@ -4580,13 +4507,6 @@ promise-inflight@^1.0.1:
  resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
  integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
-promise@^7.1.1:
-  version "7.3.1"
-  resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
-  integrity sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==
-  dependencies:
-    asap "~2.0.3"
 prompts@^0.1.9:
  version "0.1.14"
  resolved "https://registry.yarnpkg.com/prompts/-/prompts-0.1.14.tgz#a8e15c612c5c9ec8f8111847df3337c9cbd443b2"
@@ -4595,7 +4515,7 @@ prompts@^0.1.9:
    kleur "^2.0.1"
    sisteransi "^0.1.1"
-prop-types@^15.5.4, prop-types@^15.6.1, prop-types@^15.6.2:
+prop-types@^15.6.1, prop-types@^15.6.2:
  version "15.6.2"
  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
  integrity sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==
@@ -4761,7 +4681,7 @@ react-hot-loader@^4.3.11:
    react-lifecycles-compat "^3.0.4"
    shallowequal "^1.0.2"
-react-is@^16.3.1, react-is@^16.5.2:
+react-is@^16.5.2:
  version "16.5.2"
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.5.2.tgz#e2a7b7c3f5d48062eb769fcb123505eb928722e3"
  integrity sha512-hSl7E6l25GTjNEZATqZIuWOgSnpXb3kD0DVCujmg46K5zLxsbiKaaT6VO9slkSBDPZfYs30lwfJwbOFOnoEnKQ==
@@ -5148,7 +5068,7 @@ set-value@^2.0.0:
    is-plain-object "^2.0.3"
    split-string "^3.0.1"
-setimmediate@^1.0.4, setimmediate@^1.0.5:
+setimmediate@^1.0.4:
  version "1.0.5"
  resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
  integrity sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=
@@ -5521,37 +5441,12 @@ strip-json-comments@~2.0.1:
  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
  integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
-styled-components@^3.4.10:
-  version "3.4.10"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-3.4.10.tgz#9a654c50ea2b516c36ade57ddcfa296bf85c96e1"
-  integrity sha512-TA8ip8LoILgmSAFd3r326pKtXytUUGu5YWuqZcOQVwVVwB6XqUMn4MHW2IuYJ/HAD81jLrdQed8YWfLSG1LX4Q==
-  dependencies:
-    buffer "^5.0.3"
-    css-to-react-native "^2.0.3"
-    fbjs "^0.8.16"
-    hoist-non-react-statics "^2.5.0"
-    prop-types "^15.5.4"
-    react-is "^16.3.1"
-    stylis "^3.5.0"
-    stylis-rule-sheet "^0.0.10"
-    supports-color "^3.2.3"
-stylis-rule-sheet@^0.0.10:
-  version "0.0.10"
-  resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430"
-  integrity sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==
-stylis@^3.5.0:
-  version "3.5.3"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.3.tgz#99fdc46afba6af4deff570825994181a5e6ce546"
-  integrity sha512-TxU0aAscJghF9I3V9q601xcK3Uw1JbXvpsBGj/HULqexKOKlOEzzlIpLFRbKkCK990ccuxfXUqmPbIIo7Fq/cQ==
 supports-color@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
  integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=
-supports-color@^3.1.2, supports-color@^3.2.3:
+supports-color@^3.1.2:
  version "3.2.3"
  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
  integrity sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=
@@ -5777,11 +5672,6 @@ typescript@^3.1.2:
  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.1.2.tgz#c03a5d16f30bb60ad8bb6fe8e7cb212eedeec950"
  integrity sha512-gOoGJWbNnFAfP9FlrSV63LYD5DJqYJHG5ky1kOXSl3pCImn4rqWy/flyq1BRd4iChQsoCqjbQaqtmXO4yCVPCA==
-ua-parser-js@^0.7.18:
-  version "0.7.18"
-  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.18.tgz#a7bfd92f56edfb117083b69e31d2aa8882d4b1ed"
-  integrity sha512-LtzwHlVHwFGTptfNSgezHp7WUlwiqb0gA9AALRbKaERfxwJoiX0A73QbTToxteIAuIaFshhgIZfqK8s7clqgnA==
 uglify-es@^3.3.4:
  version "3.3.9"
  resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.3.9.tgz#0c1c4f0700bed8dbc124cdb304d2592ca203e677"
@@ -6137,11 +6027,6 @@ whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3:
  dependencies:
    iconv-lite "0.4.24"
-whatwg-fetch@>=0.10.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz#fc804e458cc460009b1a2b966bc8817d2578aefb"
-  integrity sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q==
 whatwg-mimetype@^2.1.0:
  version "2.2.0"
  resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.2.0.tgz#a3d58ef10b76009b042d03e25591ece89b88d171"