feat: add invoice resizable

bigcommerce · Jul 11, 2023 · 3f7e68e · 3f7e68e
1 parent 678998f
commit 3f7e68e
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 4 deletions.
diff --git a/apps/storefront/package.json b/apps/storefront/package.json
@@ -29,6 +29,7 @@
     "@rollup/plugin-graphql": "^1.1.0",
     "@types/babel__core": "^7.1.19",
     "@types/pdfobject": "^2.2.3",
+    "@types/react-resizable": "^3.0.4",
     "copy-to-clipboard": "^3.3.3",
     "date-fns": "^2.28.0",
     "http-server": "^14.1.1",
@@ -41,6 +42,7 @@
     "react-mui-dropzone": "^4.0.6",
     "react-pdf": "^7.1.2",
     "react-redux": "^8.0.5",
+    "react-resizable": "^3.0.5",
     "react-router-dom": "6",
     "ts-tracking-number": "^1.0.16",
     "uuid": "^9.0.0"

diff --git a/apps/storefront/src/pages/invoice/components/PrintTempalte.tsx b/apps/storefront/src/pages/invoice/components/PrintTempalte.tsx
@@ -1,4 +1,6 @@
-import { useEffect, useRef, useState } from 'react'
+import { SyntheticEvent, useEffect, useRef, useState } from 'react'
+import { Resizable } from 'react-resizable'
+import { Box } from '@mui/material'
 import PDFObject from 'pdfobject'
 
 import { B3Sping } from '@/components'
@@ -12,14 +14,27 @@ interface RowList {
   updatedAt: number
 }
 
+const templateMinHeight = 300
+
 interface PrintTempalteProps {
   row: RowList
 }
 
 function PrintTempalte({ row }: PrintTempalteProps) {
   const container = useRef<HTMLInputElement | null>(null)
 
+  const dom = useRef<HTMLInputElement | null>(null)
+
   const [loadding, setLoadding] = useState<boolean>(false)
+
+  const [height, setHeight] = useState<number>(templateMinHeight)
+
+  const onFirstBoxResize = (
+    event: SyntheticEvent<Element, Event>,
+    { size }: { size: { height: number } }
+  ) => {
+    setHeight(size.height)
+  }
   const viewPrint = async () => {
     setLoadding(true)
     const { id: invoiceId } = row
@@ -43,7 +58,49 @@ function PrintTempalte({ row }: PrintTempalteProps) {
 
   return (
     <B3Sping isSpinning={loadding}>
-      <div ref={container} style={{ height: '400px', width: '100%' }} />
+      <Box
+        ref={dom}
+        sx={{
+          display: 'flex',
+          flexWrap: 'wrap',
+          width: '100%',
+          '& .box': {
+            display: 'flex',
+            flexDirection: 'column',
+            overflow: 'hidden',
+            position: 'relative',
+            width: '100%',
+            '& .react-resizable': {
+              position: 'relative',
+            },
+            '& .react-resizable-handle': {
+              position: 'absolute',
+              width: '100%',
+              height: '20px',
+              backgroundRepeat: 'no-repeat',
+              backgroundOrigin: 'content-box',
+              boxSizing: 'border-box',
+            },
+            '& .react-resizable-handle-s': {
+              cursor: 'ns-resize',
+              bottom: 0,
+            },
+          },
+        }}
+      >
+        <Resizable
+          className="box"
+          height={height}
+          minConstraints={[dom?.current?.offsetWidth || 0, templateMinHeight]}
+          width={dom.current?.offsetWidth || 0}
+          onResize={onFirstBoxResize}
+          resizeHandles={['s']}
+        >
+          <div style={{ width: '100%', height: `${height}px` }}>
+            <div ref={container} style={{ height: '100%', width: '100%' }} />
+          </div>
+        </Resizable>
+      </Box>
     </B3Sping>
   )
 }

diff --git a/yarn.lock b/yarn.lock
@@ -1166,6 +1166,13 @@
   dependencies:
     "@types/react" "^17"
 
+"@types/react-resizable@^3.0.4":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@types/react-resizable/-/react-resizable-3.0.4.tgz#2f5a1b6c79dd0b8729959deefc8628ab484724cc"
+  integrity sha512-+QguN9CDfC1lthq+4noG1fkxh8cqkV2Fv/Mu3mdknCCBiwwNLecnBdk1MmNNN7uJpT23Nx/aVkYsbt5NuWouFw==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-transition-group@^4.4.5":
   version "4.4.6"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.6.tgz#18187bcda5281f8e10dfc48f0943e2fdf4f75e2e"
@@ -1845,7 +1852,7 @@ cliui@^8.0.1:
     strip-ansi "^6.0.1"
     wrap-ansi "^7.0.0"
 
-clsx@^1.0.2, clsx@^1.2.1:
+clsx@^1.0.2, clsx@^1.1.1, clsx@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
   integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
@@ -4771,7 +4778,7 @@ pretty-format@^27.0.2:
     ansi-styles "^5.0.0"
     react-is "^17.0.1"
 
-prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@15.x, prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -4830,6 +4837,14 @@ react-dom@^18.0.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-draggable@^4.0.3:
+  version "4.4.5"
+  resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.4.5.tgz#9e37fe7ce1a4cf843030f521a0a4cc41886d7e7c"
+  integrity sha512-OMHzJdyJbYTZo4uQE393fHcqqPYsEtkjfMgvCHr6rejT+Ezn4OZbNyGH50vv+SunC1RMvwOTSWkEODQLzw1M9g==
+  dependencies:
+    clsx "^1.1.1"
+    prop-types "^15.8.1"
+
 react-dropzone@^10.2.1:
   version "10.2.2"
   resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-10.2.2.tgz#67b4db7459589a42c3b891a82eaf9ade7650b815"
@@ -4922,6 +4937,14 @@ react-refresh@^0.14.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"
   integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==
 
+react-resizable@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/react-resizable/-/react-resizable-3.0.5.tgz#362721f2efbd094976f1780ae13f1ad7739786c1"
+  integrity sha512-vKpeHhI5OZvYn82kXOs1bC8aOXktGU5AmKAgaZS4F5JPburCtbmDPqE7Pzp+1kN4+Wb81LlF33VpGwWwtXem+w==
+  dependencies:
+    prop-types "15.x"
+    react-draggable "^4.0.3"
+
 react-router-dom@6:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.13.0.tgz#6651f456bb2af42ef14f6880123b1f575539e81f"