From 1ecf24b0b4ad1b330c1ac9709663b5d9844a395e Mon Sep 17 00:00:00 2001
From: Wayne Duran <asartalo@gmail.com>
Date: Mon, 9 Aug 2021 10:23:22 +0800
Subject: [PATCH] feat: worksheet header

---
 src/components/MultiPaperPage.tsx             | 20 +------
 src/components/PaperPage.tsx                  | 19 +++++--
 .../AdditionFillTheBlanksPage.tsx             |  2 +-
 .../additionFillTheBlanks/PreviewAftb.tsx     | 54 +++++++++++++++----
 4 files changed, 62 insertions(+), 33 deletions(-)

diff --git a/src/components/MultiPaperPage.tsx b/src/components/MultiPaperPage.tsx
index 59f1f61..ae6b4e1 100644
--- a/src/components/MultiPaperPage.tsx
+++ b/src/components/MultiPaperPage.tsx
@@ -1,24 +1,9 @@
-import { makeStyles } from '@material-ui/core';
 import React, {
   ReactNode, ElementType, createElement, useState, useEffect, useRef,
 } from 'react';
 import { usePaperOptions } from './PaperOptionsProvider';
 import PaperPage from './PaperPage';
 
-const styles = makeStyles(() => ({
-  wrapper: {
-  },
-  curtain: {
-    transition: '0.3s opacity',
-  },
-  curtainDown: {
-    opacity: 0,
-  },
-  curtainUp: {
-    opacity: 1,
-  },
-}));
-
 interface WrapperBuilder<T> {
   contentWrapper?: ElementType | null;
   contentWrapperClassName?: string;
@@ -83,13 +68,11 @@ function MultiPaperPage<T>({
   contentWrapper, contentWrapperClassName, data, builder,
   itemSelector,
 }: MultiPaperPageProps<T>): JSX.Element {
-  const { curtainUp, curtainDown, curtain } = styles();
   const wrapperRef = useRef<HTMLDivElement | null>(null);
   const { options } = usePaperOptions();
   const [isReady, setIsReady] = useState(false);
   const [dataPages, setDataPages] = useState([data]);
   const [attemptsToFix, setAttemptsTofix] = useState(0);
-  const curtainClasses = `${curtain} ${isReady ? curtainUp : curtainDown}`;
 
   useEffect(() => {
     setDataPages([data]);
@@ -138,13 +121,14 @@ function MultiPaperPage<T>({
   }, [dataPages, options]);
 
   return (
-    <div className={curtainClasses} ref={wrapperRef}>
+    <div ref={wrapperRef}>
       {
         dataPages.map((dataPage, index) => (
           <PaperPage
             pageId={`${index + 1}`}
             // eslint-disable-next-line react/no-array-index-key
             key={`page-${index}`}
+            ready={isReady}
           >
             { index === 0 ? header : null }
             {
diff --git a/src/components/PaperPage.tsx b/src/components/PaperPage.tsx
index 53bec15..a0fa61d 100644
--- a/src/components/PaperPage.tsx
+++ b/src/components/PaperPage.tsx
@@ -10,9 +10,11 @@ const paperPageStyles = makeStyles(() => ({
     overflow: 'hidden',
     pageBreakBefore: 'always',
     breakBefore: 'always',
+    transition: '0.3s opacity',
+    opacity: 1,
 
-    '&:first-child': {
-      pageBreakBefore: 'avoid',
+    '&.not-ready': {
+      opacity: 0,
     },
 
     '@media print': {
@@ -26,6 +28,10 @@ const paperPageStyles = makeStyles(() => ({
       boxShadow: 'none',
       margin: 0,
     },
+
+    '.print-ready &:first-child': {
+      pageBreakBefore: 'avoid',
+    },
   },
 
   content: {
@@ -49,9 +55,12 @@ interface PaperPreviewProps {
   children: ReactNode;
   noFlexWrap?: boolean;
   pageId?: string;
+  ready?: boolean;
 }
 
-function PaperPage({ children, noFlexWrap, pageId }: PaperPreviewProps): JSX.Element {
+function PaperPage({
+  children, noFlexWrap, pageId, ready = true,
+}: PaperPreviewProps): JSX.Element {
   const { options } = usePaperOptions();
   const {
     margin, orientation, scale, paperSize,
@@ -67,10 +76,11 @@ function PaperPage({ children, noFlexWrap, pageId }: PaperPreviewProps): JSX.Ele
   }
 
   const dimensionStyles = paperSize.dimensionsStr(orientation);
+  const pageClassNames = `printable-paper ${!ready ? 'not-ready' : ''} ${classes.paper}`;
 
   return (
     <Paper
-      className={`printable-paper ${classes.paper}`}
+      className={pageClassNames}
       style={paperStyle}
       component="section"
       data-page-id={pageId}
@@ -96,6 +106,7 @@ function PaperPage({ children, noFlexWrap, pageId }: PaperPreviewProps): JSX.Ele
 PaperPage.defaultProps = {
   noFlexWrap: false,
   pageId: undefined,
+  ready: true,
 };
 
 export default PaperPage;
diff --git a/src/pages/additionFillTheBlanks/AdditionFillTheBlanksPage.tsx b/src/pages/additionFillTheBlanks/AdditionFillTheBlanksPage.tsx
index 9ae9c40..bf53293 100644
--- a/src/pages/additionFillTheBlanks/AdditionFillTheBlanksPage.tsx
+++ b/src/pages/additionFillTheBlanks/AdditionFillTheBlanksPage.tsx
@@ -17,7 +17,7 @@ const AdditionFillTheBlanksPage = (): JSX.Element => {
 
   return (
     <PrintableUI
-      title="Addition: Fill the Blanks"
+      title="Addition: Fill in the Blanks"
       customizeForm={(
         <CustomizeAftbForm
           onBeforePrint={onPrint}
diff --git a/src/pages/additionFillTheBlanks/PreviewAftb.tsx b/src/pages/additionFillTheBlanks/PreviewAftb.tsx
index 645570f..fa27ae6 100644
--- a/src/pages/additionFillTheBlanks/PreviewAftb.tsx
+++ b/src/pages/additionFillTheBlanks/PreviewAftb.tsx
@@ -1,5 +1,5 @@
-import { makeStyles, Typography } from '@material-ui/core';
 import React from 'react';
+import { makeStyles, Typography } from '@material-ui/core';
 import MultiPaperPage from '../../components/MultiPaperPage';
 import NumberGenerator from '../../lib/NumberGenerator';
 import RandomNumberGenerator from '../../lib/RandomNumberGenerator';
@@ -14,11 +14,37 @@ interface PreviewAftbProps {
 const defaultGenerator = new RandomNumberGenerator(Math.random);
 
 const pageStyles = makeStyles(() => ({
+  header: {
+    display: 'flex',
+  },
+  headerName: {
+    flexGrow: 4,
+    display: 'flex',
+    paddingRight: '2em',
+  },
+  label: {
+    flexGrow: 0,
+    fontWeight: 'normal',
+    paddingRight: '0.3em',
+  },
+  headerDate: {
+    flexGrow: 2,
+    display: 'flex',
+  },
+  headerBlank: {
+    flexGrow: 1,
+    borderBottom: '1px solid black',
+  },
+  instructions: {
+    marginBottom: 0,
+    marginTop: '10mm',
+    fontSize: '16px',
+  },
   heading: {
     textAlign: 'center',
   },
   list: {
-    margin: '10mm 0 0 0',
+    margin: '5mm 0 0 0',
     padding: 0,
     fontSize: '20px',
     columnCount: 2,
@@ -26,7 +52,7 @@ const pageStyles = makeStyles(() => ({
     counterReset: 'problem 0',
 
     '& > li': {
-      padding: '8mm 8mm 8mm 6mm',
+      padding: '6mm 0 6mm 6mm',
       marginLeft: '10mm',
       counterIncrement: 'problem',
     },
@@ -55,13 +81,21 @@ const PreviewAftb = ({
     <>
       <MultiPaperPage
         header={(
-          <Typography
-            variant="h5"
-            component="h1"
-            className={classes.heading}
-          >
-            Addition: Fill in the Blanks
-          </Typography>
+          <>
+            <section className={classes.header}>
+              <div className={classes.headerName}>
+                <strong className={classes.label}>Name:</strong>
+                <span className={classes.headerBlank} />
+              </div>
+              <div className={classes.headerDate}>
+                <strong className={classes.label}>Date:</strong>
+                <span className={classes.headerBlank} />
+              </div>
+            </section>
+            <p className={classes.instructions}>
+              Complete the addition facts by filling in the blanks.
+            </p>
+          </>
         )}
         contentWrapper="ol"
         contentWrapperClassName={`${classes.list} problems`}