Add calendar preview and make it possible to download
This commit is contained in:
parent
0ed97c74b0
commit
b8f227374a
5 changed files with 192 additions and 2 deletions
130
package-lock.json
generated
130
package-lock.json
generated
|
@ -18,6 +18,7 @@
|
|||
"dayjs": "^1.11.3",
|
||||
"react": "^18.1.0",
|
||||
"react-dom": "^18.1.0",
|
||||
"react-pdf": "^5.7.2",
|
||||
"react-router-dom": "^6.3.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"web-vitals": "^2.1.4"
|
||||
|
@ -9983,6 +9984,14 @@
|
|||
"sourcemap-codec": "^1.4.8"
|
||||
}
|
||||
},
|
||||
"node_modules/make-cancellable-promise": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/make-cancellable-promise/-/make-cancellable-promise-1.1.0.tgz",
|
||||
"integrity": "sha512-X5Opjm2xcZsOLuJ+Bnhb4t5yfu4ehlA3OKEYLtqUchgVzL/QaqW373ZUVxVHKwvJ38cmYuR4rAHD2yUvAIkTPA==",
|
||||
"funding": {
|
||||
"url": "https://github.com/wojtekmaj/make-cancellable-promise?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/make-dir": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
|
||||
|
@ -10005,6 +10014,14 @@
|
|||
"semver": "bin/semver.js"
|
||||
}
|
||||
},
|
||||
"node_modules/make-event-props": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/make-event-props/-/make-event-props-1.3.0.tgz",
|
||||
"integrity": "sha512-oWiDZMcVB1/A487251hEWza1xzgCzl6MXxe9aF24l5Bt9N9UEbqTqKumEfuuLhmlhRZYnc+suVvW4vUs8bwO7Q==",
|
||||
"funding": {
|
||||
"url": "https://github.com/wojtekmaj/make-event-props?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/makeerror": {
|
||||
"version": "1.0.12",
|
||||
"resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.12.tgz",
|
||||
|
@ -10037,11 +10054,24 @@
|
|||
"node": ">= 4.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/merge-class-names": {
|
||||
"version": "1.4.2",
|
||||
"resolved": "https://registry.npmjs.org/merge-class-names/-/merge-class-names-1.4.2.tgz",
|
||||
"integrity": "sha512-bOl98VzwCGi25Gcn3xKxnR5p/WrhWFQB59MS/aGENcmUc6iSm96yrFDF0XSNurX9qN4LbJm0R9kfvsQ17i8zCw==",
|
||||
"funding": {
|
||||
"url": "https://github.com/wojtekmaj/merge-class-names?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/merge-descriptors": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
|
||||
"integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E="
|
||||
},
|
||||
"node_modules/merge-refs": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/merge-refs/-/merge-refs-1.0.0.tgz",
|
||||
"integrity": "sha512-WZ4S5wqD9FCR9hxkLgvcHJCBxzXzy3VVE6p8W2OzxRzB+hLRlcadGE2bW9xp2KSzk10rvp4y+pwwKO6JQVguMg=="
|
||||
},
|
||||
"node_modules/merge-stream": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
|
||||
|
@ -10697,6 +10727,19 @@
|
|||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/pdfjs-dist": {
|
||||
"version": "2.12.313",
|
||||
"resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-2.12.313.tgz",
|
||||
"integrity": "sha512-1x6iXO4Qnv6Eb+YFdN5JdUzt4pAkxSp3aLAYPX93eQCyg/m7QFzXVWJHJVtoW48CI8HCXju4dSkhQZwoheL5mA==",
|
||||
"peerDependencies": {
|
||||
"worker-loader": "^3.0.8"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"worker-loader": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/performance-now": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
|
||||
|
@ -12283,6 +12326,30 @@
|
|||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
|
||||
},
|
||||
"node_modules/react-pdf": {
|
||||
"version": "5.7.2",
|
||||
"resolved": "https://registry.npmjs.org/react-pdf/-/react-pdf-5.7.2.tgz",
|
||||
"integrity": "sha512-hdDwvf007V0i2rPCqQVS1fa70CXut17SN3laJYlRHzuqcu8sLLjEoeXihty6c0Ev5g1mw31b8OT8EwRw1s8C4g==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.0.0",
|
||||
"file-loader": "^6.0.0",
|
||||
"make-cancellable-promise": "^1.0.0",
|
||||
"make-event-props": "^1.1.0",
|
||||
"merge-class-names": "^1.1.1",
|
||||
"merge-refs": "^1.0.0",
|
||||
"pdfjs-dist": "2.12.313",
|
||||
"prop-types": "^15.6.2",
|
||||
"tiny-invariant": "^1.0.0",
|
||||
"tiny-warning": "^1.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/wojtekmaj/react-pdf?sponsor=1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.3.0 || ^17.0.0 || ^18.0.0",
|
||||
"react-dom": "^16.3.0 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-refresh": {
|
||||
"version": "0.11.0",
|
||||
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
|
||||
|
@ -13897,6 +13964,16 @@
|
|||
"resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
|
||||
"integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
|
||||
},
|
||||
"node_modules/tiny-invariant": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.2.0.tgz",
|
||||
"integrity": "sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg=="
|
||||
},
|
||||
"node_modules/tiny-warning": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
|
||||
"integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
|
||||
},
|
||||
"node_modules/tmpl": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
|
||||
|
@ -22232,6 +22309,11 @@
|
|||
"sourcemap-codec": "^1.4.8"
|
||||
}
|
||||
},
|
||||
"make-cancellable-promise": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/make-cancellable-promise/-/make-cancellable-promise-1.1.0.tgz",
|
||||
"integrity": "sha512-X5Opjm2xcZsOLuJ+Bnhb4t5yfu4ehlA3OKEYLtqUchgVzL/QaqW373ZUVxVHKwvJ38cmYuR4rAHD2yUvAIkTPA=="
|
||||
},
|
||||
"make-dir": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
|
||||
|
@ -22247,6 +22329,11 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"make-event-props": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/make-event-props/-/make-event-props-1.3.0.tgz",
|
||||
"integrity": "sha512-oWiDZMcVB1/A487251hEWza1xzgCzl6MXxe9aF24l5Bt9N9UEbqTqKumEfuuLhmlhRZYnc+suVvW4vUs8bwO7Q=="
|
||||
},
|
||||
"makeerror": {
|
||||
"version": "1.0.12",
|
||||
"resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.12.tgz",
|
||||
|
@ -22273,11 +22360,21 @@
|
|||
"fs-monkey": "1.0.3"
|
||||
}
|
||||
},
|
||||
"merge-class-names": {
|
||||
"version": "1.4.2",
|
||||
"resolved": "https://registry.npmjs.org/merge-class-names/-/merge-class-names-1.4.2.tgz",
|
||||
"integrity": "sha512-bOl98VzwCGi25Gcn3xKxnR5p/WrhWFQB59MS/aGENcmUc6iSm96yrFDF0XSNurX9qN4LbJm0R9kfvsQ17i8zCw=="
|
||||
},
|
||||
"merge-descriptors": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
|
||||
"integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E="
|
||||
},
|
||||
"merge-refs": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/merge-refs/-/merge-refs-1.0.0.tgz",
|
||||
"integrity": "sha512-WZ4S5wqD9FCR9hxkLgvcHJCBxzXzy3VVE6p8W2OzxRzB+hLRlcadGE2bW9xp2KSzk10rvp4y+pwwKO6JQVguMg=="
|
||||
},
|
||||
"merge-stream": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
|
||||
|
@ -22740,6 +22837,12 @@
|
|||
"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
|
||||
"integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="
|
||||
},
|
||||
"pdfjs-dist": {
|
||||
"version": "2.12.313",
|
||||
"resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-2.12.313.tgz",
|
||||
"integrity": "sha512-1x6iXO4Qnv6Eb+YFdN5JdUzt4pAkxSp3aLAYPX93eQCyg/m7QFzXVWJHJVtoW48CI8HCXju4dSkhQZwoheL5mA==",
|
||||
"requires": {}
|
||||
},
|
||||
"performance-now": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
|
||||
|
@ -23747,6 +23850,23 @@
|
|||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
|
||||
},
|
||||
"react-pdf": {
|
||||
"version": "5.7.2",
|
||||
"resolved": "https://registry.npmjs.org/react-pdf/-/react-pdf-5.7.2.tgz",
|
||||
"integrity": "sha512-hdDwvf007V0i2rPCqQVS1fa70CXut17SN3laJYlRHzuqcu8sLLjEoeXihty6c0Ev5g1mw31b8OT8EwRw1s8C4g==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.0.0",
|
||||
"file-loader": "^6.0.0",
|
||||
"make-cancellable-promise": "^1.0.0",
|
||||
"make-event-props": "^1.1.0",
|
||||
"merge-class-names": "^1.1.1",
|
||||
"merge-refs": "^1.0.0",
|
||||
"pdfjs-dist": "2.12.313",
|
||||
"prop-types": "^15.6.2",
|
||||
"tiny-invariant": "^1.0.0",
|
||||
"tiny-warning": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"react-refresh": {
|
||||
"version": "0.11.0",
|
||||
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
|
||||
|
@ -24949,6 +25069,16 @@
|
|||
"resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
|
||||
"integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
|
||||
},
|
||||
"tiny-invariant": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.2.0.tgz",
|
||||
"integrity": "sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg=="
|
||||
},
|
||||
"tiny-warning": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
|
||||
"integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
|
||||
},
|
||||
"tmpl": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
|
||||
|
|
|
@ -13,6 +13,7 @@
|
|||
"dayjs": "^1.11.3",
|
||||
"react": "^18.1.0",
|
||||
"react-dom": "^18.1.0",
|
||||
"react-pdf": "^5.7.2",
|
||||
"react-router-dom": "^6.3.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"web-vitals": "^2.1.4"
|
||||
|
|
|
@ -84,7 +84,8 @@ const container = {
|
|||
|
||||
const mobileContainer = {
|
||||
...container,
|
||||
flexDirection: 'column-reverse',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'start',
|
||||
};
|
||||
|
||||
const menuOptions = activePath => [
|
||||
|
|
BIN
src/screens/Calendar/calendario-academico.pdf
Normal file
BIN
src/screens/Calendar/calendario-academico.pdf
Normal file
Binary file not shown.
|
@ -1,8 +1,66 @@
|
|||
import { Stack, Skeleton } from '@mui/material';
|
||||
import { Document, Page } from 'react-pdf/dist/esm/entry.webpack';
|
||||
import { useDocumentTitle } from '../../hooks/useDocumentTitle';
|
||||
import useLayoutType from '../../hooks/useLayoutType';
|
||||
|
||||
import calendarPdf from './calendario-academico.pdf';
|
||||
|
||||
function Calendar() {
|
||||
useDocumentTitle('Calendário');
|
||||
return <h1>Calendário Acadêmico</h1>;
|
||||
const layoutType = useLayoutType();
|
||||
const { innerWidth, innerHeight } = window;
|
||||
|
||||
if (layoutType === 'desktop') {
|
||||
return (
|
||||
<Stack spacing={2} alignItems="center" sx={{ paddingTop: '40px' }}>
|
||||
<Document
|
||||
error={<p>Falha ao carregar o arquivo.</p>}
|
||||
loading={<Skeleton variant="rectangular" width={900} height={1250} />}
|
||||
options={{ workerSrc: '/pdf.worker.js' }}
|
||||
file={calendarPdf}
|
||||
>
|
||||
<Page
|
||||
loading={<p>Carregando página...</p>}
|
||||
scale={(1.5 * innerHeight) / 1400}
|
||||
pageNumber={1}
|
||||
/>
|
||||
</Document>
|
||||
<a target="_blank" rel="noreferrer" href={calendarPdf} download>
|
||||
Baixar Calendário Acadêmico
|
||||
</a>
|
||||
</Stack>
|
||||
);
|
||||
} else if (layoutType === 'mobile') {
|
||||
return (
|
||||
<Stack
|
||||
spacing={2}
|
||||
alignItems="center"
|
||||
sx={{ paddingTop: '40px', paddingBottom: '80px' }}
|
||||
>
|
||||
<Document
|
||||
error={<p>Falha ao carregar o arquivo.</p>}
|
||||
loading={
|
||||
<Skeleton
|
||||
variant="rectangular"
|
||||
width={innerWidth - 20}
|
||||
height={550}
|
||||
/>
|
||||
}
|
||||
options={{ workerSrc: '/pdf.worker.js' }}
|
||||
file={calendarPdf}
|
||||
>
|
||||
<Page
|
||||
loading={<p>Carregando página...</p>}
|
||||
scale={innerHeight / (innerHeight + innerWidth)}
|
||||
pageNumber={1}
|
||||
/>
|
||||
</Document>
|
||||
<a target="_blank" rel="noreferrer" href={calendarPdf} download>
|
||||
Baixar Calendário Acadêmico
|
||||
</a>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Calendar;
|
||||
|
|
Loading…
Reference in a new issue