Skip to content

Commit

Permalink
feat: worksheet header
Browse files Browse the repository at this point in the history
  • Loading branch information
asartalo committed Aug 9, 2021
1 parent 5ec952d commit 1ecf24b
Show file tree
Hide file tree
Showing 4 changed files with 62 additions and 33 deletions.
20 changes: 2 additions & 18 deletions src/components/MultiPaperPage.tsx
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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]);
Expand Down Expand Up @@ -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 }
{
Expand Down
19 changes: 15 additions & 4 deletions src/components/PaperPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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': {
Expand All @@ -26,6 +28,10 @@ const paperPageStyles = makeStyles(() => ({
boxShadow: 'none',
margin: 0,
},

'.print-ready &:first-child': {
pageBreakBefore: 'avoid',
},
},

content: {
Expand All @@ -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,
Expand All @@ -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}
Expand All @@ -96,6 +106,7 @@ function PaperPage({ children, noFlexWrap, pageId }: PaperPreviewProps): JSX.Ele
PaperPage.defaultProps = {
noFlexWrap: false,
pageId: undefined,
ready: true,
};

export default PaperPage;
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
54 changes: 44 additions & 10 deletions src/pages/additionFillTheBlanks/PreviewAftb.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -14,19 +14,45 @@ 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,
columnWidth: 'auto',
counterReset: 'problem 0',

'& > li': {
padding: '8mm 8mm 8mm 6mm',
padding: '6mm 0 6mm 6mm',
marginLeft: '10mm',
counterIncrement: 'problem',
},
Expand Down Expand Up @@ -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`}
Expand Down

0 comments on commit 1ecf24b

Please sign in to comment.