Merge pull request #10 from mattmogford/features/content-invis-at-start

Features/content invis at start

README.md

@@ -31,6 +31,7 @@ or
 |onRefresh|Promise|true|
 |triggerHeight|number|false|
 |backgroundColor|string|false|
+|startInvisible|boolean|false|
 
 ## Usage
 
@@ -55,6 +56,7 @@ import {PullDownContent, ReleaseContent, RefreshContent} from "react-js-pull-to-
   onRefresh={this.onRefresh}
   triggerHeight={50}
   backgroundColor='white'
+  startInvisible={true}
 >
   <div style={{height: '150vh', textAlign: 'center'}}>
     <div>PullToRefresh</div>

__tests__/components/PullToRefresh.spec.tsx

@@ -14,6 +14,7 @@ describe("PullToRefresh spec", () => {
                     pullDownThreshold={200}
                     triggerHeight={100}
                     backgroundColor="white"
+                    startInvisible={false}
                 >
                     <div>Test</div>
                 </PullToRefresh>

__tests__/components/__snapshots__/PullToRefresh.spec.tsx.snap

@@ -21,6 +21,7 @@ exports[`PullToRefresh spec App shows PullToRefresh 1`] = `
         "position": "absolute",
         "right": 0,
         "top": 0,
+        "visibility": "visible",
       }
     }
   >

src/components/PullToRefresh.tsx

@@ -8,6 +8,7 @@ export interface PullToRefreshProps {
     onRefresh: () => Promise<any>;
     triggerHeight?: number;
     backgroundColor?: string;
+    startInvisible?: boolean;
 }
 
 export interface PullToRefreshState {
@@ -115,6 +116,7 @@ export class PullToRefresh extends React.Component<PullToRefreshProps, PullToRef
 
         this.container.style.overflow = "visible";
         this.container.style.transform = `translate(0px, ${this.currentY - this.startY}px)`;
+        this.pullDown.style.visibility = "visible";
     }
 
     private onEnd() {
@@ -123,6 +125,7 @@ export class PullToRefresh extends React.Component<PullToRefreshProps, PullToRef
         this.currentY = 0;
 
         if (!this.state.pullToRefreshThresholdBreached) {
+            this.pullDown.style.visibility = this.props.startInvisible ? "hidden" : "visible";
             this.initContainer();
             return;
         }
@@ -154,7 +157,7 @@ export class PullToRefresh extends React.Component<PullToRefreshProps, PullToRef
     }
 
     private renderPullDownContent() {
-        const {releaseContent, pullDownContent, refreshContent} = this.props;
+        const {releaseContent, pullDownContent, refreshContent, startInvisible} = this.props;
         const {onRefreshing, pullToRefreshThresholdBreached} = this.state;
         const content = onRefreshing ? refreshContent : pullToRefreshThresholdBreached ? releaseContent : pullDownContent;
         const contentStyle: React.CSSProperties = {
@@ -163,6 +166,7 @@ export class PullToRefresh extends React.Component<PullToRefreshProps, PullToRef
             left: 0,
             right: 0,
             top: 0,
+            visibility: startInvisible ? "hidden" : "visible",
         };
         return (
             <div style={contentStyle} ref={this.pullDownRef}>