Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-13 00:03:27 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix issues with scrolling

Browse Source
This commit is contained in:
Amruth Pillai
2020-04-02 16:47:55 +05:30
parent 1ed03673da
commit 126a8ed305
4 changed files with 17 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
package-lock.json generated
View File

@ -16844,9 +16844,9 @@
"integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=" "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
}, },
"uuid": { "uuid": {
"version": "7.0.2", "version": "7.0.3",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.2.tgz", "resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.3.tgz",
"integrity": "sha512-vy9V/+pKG+5ZTYKf+VcphF5Oc6EFiu3W8Nv3P3zIh0EqVI80ZxOzuPfe9EHjkFNvf8+xuTHVeei4Drydlx4zjw==" "integrity": "sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg=="
}, },
"v8-compile-cache": { "v8-compile-cache": {
"version": "2.1.0", "version": "2.1.0",

2
package.json
View File

@ -27,7 +27,7 @@
"react-scripts": "3.4.1", "react-scripts": "3.4.1",
"react-toastify": "^5.5.0", "react-toastify": "^5.5.0",
"tailwindcss": "^1.2.0", "tailwindcss": "^1.2.0",
"uuid": "^7.0.2", "uuid": "^7.0.3",
"vuepress": "^1.4.0" "vuepress": "^1.4.0"
}, },
"scripts": { "scripts": {

6
src/shared/TabBar.js
View File

@ -4,7 +4,7 @@ const TabBar = ({ tabs, currentTab, setCurrentTab }) => {
const tabsRef = useRef(null); const tabsRef = useRef(null);
const scrollBy = x => { const scrollBy = x => {
const index = tabs.find(tab => tab.key === currentTab); const index = tabs.findIndex(tab => tab.key === currentTab);
tabsRef.current.scrollLeft += x; tabsRef.current.scrollLeft += x;
if (x < 0 && index > 0) { if (x < 0 && index > 0) {
@ -16,8 +16,6 @@ const TabBar = ({ tabs, currentTab, setCurrentTab }) => {
} }
}; };
const wheelScrollBy = e => scrollBy(e.deltaY);
return ( return (
<div className="mx-4 mb-6 flex items-center"> <div className="mx-4 mb-6 flex items-center">
<div <div
@ -27,7 +25,7 @@ const TabBar = ({ tabs, currentTab, setCurrentTab }) => {
<i className="material-icons">chevron_left</i> <i className="material-icons">chevron_left</i>
</div> </div>
<ul id="tabs" ref={tabsRef} className="flex overflow-x-scroll" onWheel={wheelScrollBy}> <ul id="tabs" ref={tabsRef} className="flex overflow-x-scroll">
{tabs.map(tab => {tabs.map(tab =>
currentTab === tab.key ? ( currentTab === tab.key ? (
<li key={tab.key} className="mx-1 list-none"> <li key={tab.key} className="mx-1 list-none">

18
src/utils/index.js
View File

@ -110,12 +110,17 @@ const saveAsPdf = (pageRef, panZoomRef) => {
setTimeout(() => { setTimeout(() => {
html2canvas(pageRef.current, { html2canvas(pageRef.current, {
scale: 5, scale: 6,
useCORS: true, useCORS: true,
allowTaint: true, allowTaint: true,
}).then(canvas => { }).then(canvas => {
const image = canvas.toDataURL('image/jpeg', 1.0); const image = canvas.toDataURL('image/jpeg', 1.0);
const doc = new jsPDF('p', 'mm', 'a4'); const doc = new jsPDF({
orientation: 'portrait',
unit: 'px',
format: [canvas.width, canvas.height],
});
const pageWidth = doc.internal.pageSize.getWidth(); const pageWidth = doc.internal.pageSize.getWidth();
const pageHeight = doc.internal.pageSize.getHeight(); const pageHeight = doc.internal.pageSize.getHeight();
@ -125,16 +130,15 @@ const saveAsPdf = (pageRef, panZoomRef) => {
const canvasWidth = canvas.width * ratio; const canvasWidth = canvas.width * ratio;
const canvasHeight = canvas.height * ratio; const canvasHeight = canvas.height * ratio;
// const marginX = (pageWidth - canvasWidth) / 2;
const marginX = (pageWidth - canvasWidth) / 2; // const marginY = (pageHeight - canvasHeight) / 2;
const marginY = (pageHeight - canvasHeight) / 2;
panZoomRef.current.autoCenter(0.7); panZoomRef.current.autoCenter(0.7);
doc.addImage(image, 'JPEG', marginX, marginY, canvasWidth, canvasHeight, null, 'SLOW'); doc.addImage(image, 'JPEG', 0, 0, canvasWidth, canvasHeight, null, 'SLOW');
doc.save(`RxResume_${Date.now()}.pdf`); doc.save(`RxResume_${Date.now()}.pdf`);
}); });
}, 250); }, 200);
}; };
export { export {