File download (#1608)

* support downloading of files * lint and test * working desktop downloads * mobile support * update mobile rendring
NewSpring · Dec 18, 2016 · 5bd2eed · 5bd2eed
1 parent 50ca498
commit 5bd2eed
Show file tree

Hide file tree

Showing 8 changed files with 383 additions and 4 deletions.
diff --git a/imports/pages/give/history/Layout.js b/imports/pages/give/history/Layout.js
@@ -61,6 +61,8 @@ type ILayout = {
   reloading: boolean,
   family: [Object],
   filterTransactions: Function,
+  onPrintClick: Function,
+  printLoading: boolean,
 };
 
 export default ({
@@ -71,6 +73,8 @@ export default ({
   reloading,
   filterTransactions,
   family,
+  onPrintClick,
+  printLoading,
 }: ILayout) => (
   <div>
     <Meta title="Giving History" />
@@ -90,6 +94,28 @@ export default ({
         </div>
       )}
 
+      {transactions.length > 0 && (
+        <div
+          className="visuallyhidden@lap-and-up"
+          style={{ cursor: "pointer" }}
+          onClick={onPrintClick}
+        >
+          {!printLoading && (
+            <div
+              style={{ position: "absolute", right: "17px", marginTop: "13px" }}
+            >
+              <span className="icon-print" style={{ fontSize: "22px" }} />
+            </div>
+          )}
+
+          {printLoading && (
+            <div style={{ position: "absolute", right: "14px", marginTop: "13px" }}>
+              <Spinner styles={{ width: "30px", height: "30px", borderWidth: "3px" }} />
+            </div>
+          )}
+        </div>
+      )}
+
       {!transactions.length && ready && !reloading && (
         <div className="text-left soft-ends soft-half-sides">
           <p>
@@ -117,5 +143,40 @@ export default ({
       )}
       {ready && transactions.length && !reloading && !done && <Loading />}
     </div>
+
+    {/* Print Button */}
+    <div
+      className="fixed visuallyhidden@handheld"
+      style={{
+        bottom: "175px",
+        left: "58.33%",
+        zIndex: 10,
+      }}
+    >
+      <div
+        className="card"
+        style={{ borderRadius: "50%", marginLeft: "2px" }}
+        onClick={onPrintClick}
+      >
+        {!printLoading && (
+          <div
+            className="card__item background--light-secondary soft-half"
+            style={{ padding: "15px 17px" }}
+          >
+            <span className="icon-print" style={{ fontSize: "28px" }} />
+          </div>
+        )}
+
+        {printLoading && (
+          <div
+            style={{ padding: "12px 12px 9px 12px" }}
+            className="card__item background--light-secondary"
+          >
+            <Spinner styles={{ width: "35px", height: "35px" }} />
+          </div>
+        )}
+      </div>
+    </div>
+
   </div>
 );
diff --git a/imports/pages/give/history/__tests__/__snapshots__/Layout.js.snap b/imports/pages/give/history/__tests__/__snapshots__/Layout.js.snap
@@ -35,6 +35,40 @@ exports[`Layout renders no transactions if there are none and ready 1`] = `
   </div>
   <div
     className="one-whole text-center" />
+  <div
+    className="fixed visuallyhidden@handheld"
+    style={
+      Object {
+        "bottom": "175px",
+        "left": "58.33%",
+        "zIndex": 10,
+      }
+    }>
+    <div
+      className="card"
+      style={
+        Object {
+          "borderRadius": "50%",
+          "marginLeft": "2px",
+        }
+      }>
+      <div
+        className="card__item background--light-secondary soft-half"
+        style={
+          Object {
+            "padding": "15px 17px",
+          }
+        }>
+        <span
+          className="icon-print"
+          style={
+            Object {
+              "fontSize": "28px",
+            }
+          } />
+      </div>
+    </div>
+  </div>
 </div>
 `;
 
@@ -61,6 +95,40 @@ exports[`Layout renders reloading if no transactions and not ready 1`] = `
   </div>
   <div
     className="one-whole text-center" />
+  <div
+    className="fixed visuallyhidden@handheld"
+    style={
+      Object {
+        "bottom": "175px",
+        "left": "58.33%",
+        "zIndex": 10,
+      }
+    }>
+    <div
+      className="card"
+      style={
+        Object {
+          "borderRadius": "50%",
+          "marginLeft": "2px",
+        }
+      }>
+      <div
+        className="card__item background--light-secondary soft-half"
+        style={
+          Object {
+            "padding": "15px 17px",
+          }
+        }>
+        <span
+          className="icon-print"
+          style={
+            Object {
+              "fontSize": "28px",
+            }
+          } />
+      </div>
+    </div>
+  </div>
 </div>
 `;
 
@@ -82,6 +150,30 @@ exports[`Layout renders reloading version 1`] = `
           }
         } />
     </div>
+    <div
+      className="visuallyhidden@lap-and-up"
+      style={
+        Object {
+          "cursor": "pointer",
+        }
+      }>
+      <div
+        style={
+          Object {
+            "marginTop": "13px",
+            "position": "absolute",
+            "right": "17px",
+          }
+        }>
+        <span
+          className="icon-print"
+          style={
+            Object {
+              "fontSize": "22px",
+            }
+          } />
+      </div>
+    </div>
     <TransactionList
       transactions={
         Array [
@@ -116,6 +208,40 @@ exports[`Layout renders reloading version 1`] = `
   </div>
   <div
     className="one-whole text-center" />
+  <div
+    className="fixed visuallyhidden@handheld"
+    style={
+      Object {
+        "bottom": "175px",
+        "left": "58.33%",
+        "zIndex": 10,
+      }
+    }>
+    <div
+      className="card"
+      style={
+        Object {
+          "borderRadius": "50%",
+          "marginLeft": "2px",
+        }
+      }>
+      <div
+        className="card__item background--light-secondary soft-half"
+        style={
+          Object {
+            "padding": "15px 17px",
+          }
+        }>
+        <span
+          className="icon-print"
+          style={
+            Object {
+              "fontSize": "28px",
+            }
+          } />
+      </div>
+    </div>
+  </div>
 </div>
 `;
 
@@ -127,6 +253,30 @@ exports[`Layout renders with negative transactions 1`] = `
     family={Array []} />
   <div
     className="soft-half soft@portable soft-double@anchored soft-double-bottom@anchored soft-bottom@portable">
+    <div
+      className="visuallyhidden@lap-and-up"
+      style={
+        Object {
+          "cursor": "pointer",
+        }
+      }>
+      <div
+        style={
+          Object {
+            "marginTop": "13px",
+            "position": "absolute",
+            "right": "17px",
+          }
+        }>
+        <span
+          className="icon-print"
+          style={
+            Object {
+              "fontSize": "22px",
+            }
+          } />
+      </div>
+    </div>
     <TransactionList
       transactions={
         Array [
@@ -159,6 +309,40 @@ exports[`Layout renders with negative transactions 1`] = `
     className="one-whole text-center">
     <mockConstructor />
   </div>
+  <div
+    className="fixed visuallyhidden@handheld"
+    style={
+      Object {
+        "bottom": "175px",
+        "left": "58.33%",
+        "zIndex": 10,
+      }
+    }>
+    <div
+      className="card"
+      style={
+        Object {
+          "borderRadius": "50%",
+          "marginLeft": "2px",
+        }
+      }>
+      <div
+        className="card__item background--light-secondary soft-half"
+        style={
+          Object {
+            "padding": "15px 17px",
+          }
+        }>
+        <span
+          className="icon-print"
+          style={
+            Object {
+              "fontSize": "28px",
+            }
+          } />
+      </div>
+    </div>
+  </div>
 </div>
 `;
 
@@ -170,6 +354,30 @@ exports[`Layout renders with props 1`] = `
     family={Array []} />
   <div
     className="soft-half soft@portable soft-double@anchored soft-double-bottom@anchored soft-bottom@portable">
+    <div
+      className="visuallyhidden@lap-and-up"
+      style={
+        Object {
+          "cursor": "pointer",
+        }
+      }>
+      <div
+        style={
+          Object {
+            "marginTop": "13px",
+            "position": "absolute",
+            "right": "17px",
+          }
+        }>
+        <span
+          className="icon-print"
+          style={
+            Object {
+              "fontSize": "22px",
+            }
+          } />
+      </div>
+    </div>
     <TransactionList
       transactions={
         Array [
@@ -206,5 +414,39 @@ exports[`Layout renders with props 1`] = `
     className="one-whole text-center">
     <mockConstructor />
   </div>
+  <div
+    className="fixed visuallyhidden@handheld"
+    style={
+      Object {
+        "bottom": "175px",
+        "left": "58.33%",
+        "zIndex": 10,
+      }
+    }>
+    <div
+      className="card"
+      style={
+        Object {
+          "borderRadius": "50%",
+          "marginLeft": "2px",
+        }
+      }>
+      <div
+        className="card__item background--light-secondary soft-half"
+        style={
+          Object {
+            "padding": "15px 17px",
+          }
+        }>
+        <span
+          className="icon-print"
+          style={
+            Object {
+              "fontSize": "28px",
+            }
+          } />
+      </div>
+    </div>
+  </div>
 </div>
 `;
diff --git a/imports/pages/give/history/__tests__/__snapshots__/index.js.snap b/imports/pages/give/history/__tests__/__snapshots__/index.js.snap
@@ -5,6 +5,8 @@ exports[`test renders with props 1`] = `
   done={false}
   family={Array []}
   filterTransactions={[Function]}
+  onPrintClick={[Function]}
+  printLoading={false}
   ready={true}
   reloading={false}
   transactions={Array []} />