feat: change footer

src/components/PaperOptionsProvider.tsx

@@ -5,11 +5,13 @@ import LocalStore from '../lib/LocalStore';
 import PaperSize, { Orientation, PaperSizeJSON } from '../lib/PaperSize';
 import { US_LETTER } from '../lib/paperSizes';
 import useSettings from '../pages/useSettings';
+import { footerNames } from './printElements/Footers';
 
 interface PaperOptionsCommon {
   margin: string;
   orientation: Orientation;
   scale: number;
+  footer: string;
 }
 
 export interface PaperOptions extends PaperOptionsCommon {
@@ -39,6 +41,7 @@ const defaultPaperPreviewOptions: PaperOptions = {
   orientation: 'portrait',
   scale: 1,
   paperSize: US_LETTER,
+  footer: footerNames[0],
 };
 
 const noop = () => { };
@@ -63,12 +66,14 @@ function PaperOptionsProvider({
       orientation: json.orientation,
       scale: json.scale,
       paperSize: PaperSize.fromJSON(json.paperSize),
+      footer: json.footer,
     }),
     toJSON: (data) => ({
       margin: data.margin,
       orientation: data.orientation,
       scale: data.scale,
       paperSize: PaperSize.toJSON(data.paperSize),
+      footer: data.footer,
     }),
   });
   const settings = useSettings();

src/components/forms/CustomizeForm.tsx

@@ -13,6 +13,7 @@ import FormContainer from './FormContainer';
 import SectionPageTitle from '../../elements/SectionPageTitle';
 import PaperSize, { Orientation } from '../../lib/PaperSize';
 import PrintHelpDialog from './PrintHelpDialog';
+import SelectFooterField from './SelectFooterField';
 
 interface CustomizeFormProps {
   onBeforePrint?: () => boolean;
@@ -129,6 +130,10 @@ function CustomizeForm({
           <option value="portrait">Portrait</option>
           <option value="landscape">Landscape</option>
         </SelectField>
+        <SelectFooterField
+          value={options.footer}
+          onChange={(footer) => setOptions({ ...options, footer })}
+        />
       </section>
       <SubmitButton
         disabled={error !== null}

src/components/forms/SelectFooterField.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { footerNames } from '../printElements/Footers';
+import arrayToOptions from './arrayToOptions';
+import SelectField from './SelectField';
+
+interface SelectFooterFieldProps {
+  value: string;
+  onChange: (value: string) => void;
+}
+
+function SelectFooterField({
+  value, onChange,
+}: SelectFooterFieldProps): JSX.Element {
+  return (
+    <SelectField
+      name="Footer"
+      value={value}
+      onChange={onChange}
+    >
+      <option>None</option>
+      {
+        arrayToOptions(footerNames)
+      }
+    </SelectField>
+  );
+}
+
+export default SelectFooterField;

src/components/printElements/FooterProps.ts

@@ -0,0 +1,3 @@
+export default interface FooterProps {
+  itemCount: number;
+}

src/components/printElements/FooterScore.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core';
+import FooterProps from './FooterProps';
+
+const styles = makeStyles(() => ({
+  footer: {
+    display: 'flex',
+    padding: '10mm 5mm 5mm 0',
+    justifyContent: 'flex-end',
+  },
+  footerName: {
+    display: 'flex',
+    width: '70mm',
+  },
+  label: {
+    flexGrow: 0,
+    fontWeight: 'normal',
+    paddingRight: '0.3em',
+  },
+  footerBlank: {
+    flexGrow: 1,
+    borderBottom: '1px solid black',
+  },
+}));
+
+function FooterScore({ itemCount }: FooterProps): JSX.Element {
+  const classes = styles();
+  return (
+    <section
+      className={classes.footer}
+    >
+      <div className={classes.footerName}>
+        <strong className={classes.label}>Score:</strong>
+        <span className={classes.footerBlank} />
+        <span>
+          out of
+          {' '}
+          {itemCount}
+        </span>
+      </div>
+    </section>
+  );
+}
+
+export default FooterScore;

src/components/printElements/FooterScoreAndTime.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core';
+import FooterProps from './FooterProps';
+
+const styles = makeStyles(() => ({
+  footer: {
+    display: 'flex',
+    padding: '10mm 5mm 5mm 0',
+    justifyContent: 'flex-end',
+  },
+  footerName: {
+    display: 'flex',
+    paddingRight: '2em',
+    width: '70mm',
+  },
+  label: {
+    flexGrow: 0,
+    fontWeight: 'normal',
+    paddingRight: '0.3em',
+  },
+  footerTime: {
+    display: 'flex',
+    width: '50mm',
+  },
+  footerBlank: {
+    flexGrow: 1,
+    borderBottom: '1px solid black',
+  },
+}));
+
+function FooterScoreAndTime({ itemCount }: FooterProps): JSX.Element {
+  const classes = styles();
+  return (
+    <section
+      className={classes.footer}
+    >
+      <div className={classes.footerName}>
+        <strong className={classes.label}>Score:</strong>
+        <span className={classes.footerBlank} />
+        <span>
+          out of
+          {' '}
+          {itemCount}
+        </span>
+      </div>
+      <div className={classes.footerTime}>
+        <strong className={classes.label}>Time:</strong>
+        <span className={classes.footerBlank} />
+        <span>minutes</span>
+      </div>
+    </section>
+  );
+}
+
+export default FooterScoreAndTime;

src/components/printElements/Footers.ts

@@ -0,0 +1,17 @@
+import FooterProps from './FooterProps';
+import FooterScore from './FooterScore';
+import FooterScoreAndTime from './FooterScoreAndTime';
+
+export type FooterName = 'Score Only' | 'Score and Time';
+type FooterRenderer = (props: FooterProps) => JSX.Element;
+
+export const footerNames: FooterName[] = [
+  'Score Only', 'Score and Time',
+];
+
+const footers = new Map<string, FooterRenderer>([
+  ['Score Only', FooterScore],
+  ['Score and Time', FooterScoreAndTime],
+]);
+
+export default footers;

src/components/printElements/WorksheetFooter.tsx

@@ -1,66 +1,22 @@
-import { makeStyles } from '@material-ui/core';
 import React from 'react';
 import { usePaperOptions } from '../PaperOptionsProvider';
+import FooterProps from './FooterProps';
+import footers from './Footers';
 
-const footerStyles = makeStyles(() => ({
-  footer: {
-    display: 'flex',
-    padding: '10mm 5mm 5mm 0',
-    width: '60%',
-    position: 'absolute',
-    bottom: 0,
-    right: 0,
-  },
-  footerName: {
-    flexGrow: 1,
-    display: 'flex',
-    paddingRight: '2em',
-  },
-  label: {
-    flexGrow: 0,
-    fontWeight: 'normal',
-    paddingRight: '0.3em',
-  },
-  footerDate: {
-    flexGrow: 1,
-    display: 'flex',
-  },
-  footerBlank: {
-    flexGrow: 1,
-    borderBottom: '1px solid black',
-  },
-}));
-
-interface WorksheetFooterProps {
-  itemCount: number;
-}
-
-function WorksheetFooter({ itemCount }: WorksheetFooterProps): JSX.Element {
+function WorksheetFooter(props: FooterProps): JSX.Element {
   const { options } = usePaperOptions();
-  const classes = footerStyles();
+  const footerRenderer = footers.get(options.footer);
   return (
-    <section
-      className={classes.footer}
+    <div
       style={{
+        position: 'absolute',
         bottom: options.margin,
         right: options.margin,
+        left: options.margin,
       }}
     >
-      <div className={classes.footerName}>
-        <strong className={classes.label}>Score:</strong>
-        <span className={classes.footerBlank} />
-        <span>
-          out of
-          {' '}
-          {itemCount}
-        </span>
-      </div>
-      <div className={classes.footerDate}>
-        <strong className={classes.label}>Time:</strong>
-        <span className={classes.footerBlank} />
-        <span>minutes</span>
-      </div>
-    </section>
+      {footerRenderer ? footerRenderer(props) : null}
+    </div>
   );
 }