Change padding calculations, allowing to pass separated values for ea…

…ch side. closes #551
elrumordelaluz · Apr 27, 2023 · 799830d · 799830d
1 parent 985fd83
commit 799830d
Show file tree

Hide file tree

Showing 21 changed files with 1,350 additions and 1,296 deletions.
diff --git a/apps/web/components/demos/TourDemos.tsx b/apps/web/components/demos/TourDemos.tsx
@@ -1,4 +1,3 @@
-import { useState, useEffect, Component } from 'react'
 import { Text, Container, Spacer } from '@nextui-org/react'
 import Demo from './index'
 

diff --git a/apps/web/package.json b/apps/web/package.json
@@ -23,18 +23,18 @@
     "body-scroll-lock": "^4.0.0-beta.0",
     "framer-motion": "^10.12.4",
     "modaaals": "^0.14.1",
-    "next": "13.3.0",
+    "next": "13.3.2-canary.6",
     "react": "18.2.0",
     "react-device-detect": "^2.2.3",
     "react-dom": "18.2.0"
   },
   "devDependencies": {
     "@reactour/tsconfig": "*",
     "@types/body-scroll-lock": "^3.1.0",
-    "@types/node": "^18.15.13",
-    "@types/react": "18.0.37",
+    "@types/node": "^18.16.1",
+    "@types/react": "18.2.0",
     "config": "3.3.9",
-    "eslint": "8.38.0",
+    "eslint": "8.39.0",
     "eslint-plugin-prettier": "^4.2.1",
     "next-transpile-modules": "10.0.0",
     "typescript": "^5.0.4"

diff --git a/apps/web/pages/index.tsx b/apps/web/pages/index.tsx
@@ -33,6 +33,7 @@ function App() {
             borderRadius: 10,
           }),
         }}
+        position="bottom"
         Wrapper={Wrapper}
         onClickClose={({ setIsOpen, meta, setSteps, setMeta }) => {
           if (meta && meta === 'tour-2') {

diff --git a/apps/web/pages/mask.tsx b/apps/web/pages/mask.tsx
@@ -15,6 +15,8 @@ export default function Docs() {
     <div>
       <StaticMask />
       <hr />
+      <PaddingsMask />
+      <hr />
       <MoreMasks />
       <hr />
       <DynamicMask />
@@ -99,6 +101,50 @@ function StaticMask() {
   )
 }
 
+function PaddingsMask() {
+  const [isOpen, setIsOpen] = useState(false)
+  const ref = useRef(null)
+  const refParagraph = useRef(null)
+  const [updater, setUpdater] = useState<number[]>([])
+  const sizes = useRect(ref, updater)
+
+  useEffect(() => {
+    const udt = () => setUpdater([])
+    window.addEventListener('scroll', udt)
+    return () => window.removeEventListener('scroll', udt)
+  }, [])
+
+  return (
+    <>
+      <button
+        onClick={() => setIsOpen((o) => !o)}
+        style={{ marginBottom: '1em' }}
+      >
+        {isOpen ? 'Close' : 'Open'} Mask Padding
+      </button>{' '}
+      <div
+        ref={ref}
+        style={{
+          position: 'fixed',
+          top: 100,
+          right: 100,
+          backgroundColor: 'red',
+          width: 100,
+          height: 100,
+        }}
+      />
+      {isOpen ? (
+        <Mask
+          sizes={sizes}
+          wrapperPadding={[10, 40, 1, 2]}
+          onClick={() => setIsOpen(false)}
+          padding={[2, 1, 40, 10]}
+        />
+      ) : null}
+    </>
+  )
+}
+
 function MoreMasks() {
   const [isOpen, setIsOpen] = useState(false)
   const sizes = {

diff --git a/apps/web/pages/popover.tsx b/apps/web/pages/popover.tsx
@@ -152,7 +152,7 @@ function AttachingDOMElem() {
         </button>
       </motion.div>
       {isOpen ? (
-        <Popover sizes={sizes} position="right">
+        <Popover sizes={sizes} padding={[100, 10, 50, 200]}>
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
             volutpat quam eu mauris euismod imperdiet.
@@ -342,6 +342,36 @@ function CombinedWithMask() {
         amet sodales augue. Curabitur in nulla in magna luctus porta et sit amet
         dolor. Pellentesque a magna enim. Pellentesque malesuada egestas urna,
         et pulvinar lorem viverra suscipit. Duis sit amet mauris ante. Fusce at
+        ante nunc. Maecenas ut leo eu erat porta fermentum. Ut augue massa,
+        aliquam in bibendum sed, euismod vitae magna. Nulla sit amet sodales
+        augue. Curabitur in nulla in magna luctus porta et sit amet dolor.
+        Pellentesque a magna enim. Pellentesque malesuada egestas urna, et
+        pulvinar lorem viverra suscipit. Duis sit amet mauris ante. Fusce at
+        ante nunc. Maecenas ut leo eu erat porta fermentum. Ut augue massa,
+        aliquam in bibendum sed, euismod vitae magna. Nulla sit amet sodales
+        augue. Curabitur in nulla in magna luctus porta et sit amet dolor.
+        Pellentesque a magna enim. Pellentesque malesuada egestas urna, et
+        pulvinar lorem viverra suscipit. Duis sit amet mauris ante. Fusce at
+        ante nunc. Maecenas ut leo eu erat porta fermentum. Ut augue massa,
+        aliquam in bibendum sed, euismod vitae magna. Nulla sit amet sodales
+        augue. Curabitur in nulla in magna luctus porta et sit amet dolor.
+        Pellentesque a magna enim. Pellentesque malesuada egestas urna, et
+        pulvinar lorem viverra suscipit. Duis sit amet mauris ante. Fusce at
+        ante nunc. Maecenas ut leo eu erat porta fermentum. Ut augue massa,
+        aliquam in bibendum sed, euismod vitae magna. Nulla sit amet sodales
+        augue. Curabitur in nulla in magna luctus porta et sit amet dolor.
+        Pellentesque a magna enim. Pellentesque malesuada egestas urna, et
+        pulvinar lorem viverra suscipit. Duis sit amet mauris ante. Fusce at
+        ante nunc. Maecenas ut leo eu erat porta fermentum. Ut augue massa,
+        aliquam in bibendum sed, euismod vitae magna. Nulla sit amet sodales
+        augue. Curabitur in nulla in magna luctus porta et sit amet dolor.
+        Pellentesque a magna enim. Pellentesque malesuada egestas urna, et
+        pulvinar lorem viverra suscipit. Duis sit amet mauris ante. Fusce at
+        ante nunc. Maecenas ut leo eu erat porta fermentum. Ut augue massa,
+        aliquam in bibendum sed, euismod vitae magna. Nulla sit amet sodales
+        augue. Curabitur in nulla in magna luctus porta et sit amet dolor.
+        Pellentesque a magna enim. Pellentesque malesuada egestas urna, et
+        pulvinar lorem viverra suscipit. Duis sit amet mauris ante. Fusce at
         ante nunc. Maecenas ut leo eu erat porta fermentum.
       </p>
       <AnimatePresence>
@@ -359,7 +389,7 @@ function CombinedWithMask() {
                 setIsOpen(false)
               }}
             />
-            <Popover sizes={sizes}>
+            <Popover sizes={sizes} position="left">
               <p>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
                 volutpat quam eu mauris euismod imperdiet.

diff --git a/apps/web/pages/tour.tsx b/apps/web/pages/tour.tsx
@@ -11,36 +11,6 @@ function RoutesDemo() {}
 
 export default function Tour() {
   return <TourDemos />
-  //   return (
-  //     <Container justify="center">
-
-  //       <ModalsDemo />
-  //       <AutoplayDemo />
-  //       <DisableActionsDemo />
-  //       <HOC />
-  //       {/* <FollowScrollDemo /> */}
-
-  //       <Demo
-  //         title="Content Component"
-  //         demoId="content-component"
-  //         providerProps={{
-  //           ContentComponent,
-  //           styles: { popover: (base) => ({ ...base, padding: 0 }) },
-  //         }}
-  //       >
-  //         <Placeholder demoId="content-component" length={3} />
-  //       </Demo>
-  //     </Container>
-  //   )
-  // }
-
-  // function ContentComponent() {
-  //   return (
-  //     <div style={{ border: '5px solid red', padding: 10, background: 'white' }}>
-  //       Lorem ipsum
-  //     </div>
-  //   )
-  // }
 }
 
 function ModalsDemo() {

diff --git a/package.json b/package.json
@@ -19,7 +19,7 @@
   },
   "devDependencies": {
     "eslint-plugin-prettier": "^4.2.1",
-    "prettier": "^2.8.7",
+    "prettier": "^2.8.8",
     "turbo": "1.9.3"
   },
   "engines": {

diff --git a/packages/config/package.json b/packages/config/package.json
@@ -7,7 +7,7 @@
     "eslint-preset.js"
   ],
   "dependencies": {
-    "eslint-config-next": "^13.3.0",
+    "eslint-config-next": "^13.3.1",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-react": "7.32.2"
   }

diff --git a/packages/mask/Mask.tsx b/packages/mask/Mask.tsx
@@ -17,15 +17,15 @@ const Mask: React.FC<MaskProps> = ({
   const maskID = maskId || uniqueId('mask__')
   const clipID = clipId || uniqueId('clip__')
   const getStyles = stylesMatcher(styles)
-  const [px, py] = getPadding(padding)
-  const [wpx, wpy] = getPadding(wrapperPadding)
+  const [pt, pr, pb, pl] = getPadding(padding)
+  const [wpt, wpr, wpb, wpl] = getPadding(wrapperPadding)
   const { w, h } = getWindow()
-  const width = safe(sizes?.width + px * 2)
-  const height = safe(sizes?.height + py * 2)
-  const top = safe(sizes?.top - py - wpy / 2)
-  const left = safe(sizes?.left - px - wpx / 2)
-  const windowWidth = w - wpx
-  const windowHeight = h - wpy
+  const width = safe(sizes?.width + pl + pr)
+  const height = safe(sizes?.height + pt + pb)
+  const top = safe(sizes?.top - pt - wpt)
+  const left = safe(sizes?.left - pl - wpl)
+  const windowWidth = w - wpl - wpr
+  const windowHeight = h - wpt - wpb
 
   const maskAreaStyles = getStyles('maskArea', {
     x: left,
@@ -54,8 +54,8 @@ const Mask: React.FC<MaskProps> = ({
         style={getStyles('svgWrapper', {
           windowWidth,
           windowHeight,
-          wpx,
-          wpy,
+          wpt,
+          wpl,
         })}
       >
         <defs>
@@ -121,8 +121,8 @@ export type MaskProps = {
   styles?: StylesObj
   className?: string
   highlightedAreaClassName?: string
-  padding?: number | [number, number]
-  wrapperPadding?: number | [number, number]
+  padding?: number | number[]
+  wrapperPadding?: number | number[]
   onClick?: MouseEventHandler<HTMLDivElement>
   onClickHighlighted?: MouseEventHandler<SVGRectElement>
   maskId?: string

diff --git a/packages/mask/README.md b/packages/mask/README.md
@@ -65,17 +65,17 @@ Object containing size and position informations of where to position the _Mask_
 
 [Class](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) to apply to the _Highlighted_ area `rect`
 
-### `padding?: number | [number, number]`
+### `padding?: number | number[]`
 
 Extra space to add in _Mask_ calculations. Useful when calculating space from `Element` bounding rect and want to add more space.
 
-Single number sets sema space for `x` and `y`, otherwise, an Array sets `[x, y]`.
+Single number sets same space for all sides, otherwise an Array sets `[x, y]` or `[top, x, bottom]` or `[top, right, bottom, left]`.
 
-### `wrapperPadding?: number | [number, number]`
+### `wrapperPadding?: number | number[]`
 
 Extra space to add between viewport with and height.
 
-Single number sets sema space for `x` and `y`, otherwise, an Array sets `[x, y]`.
+Single number sets same space for all sides, otherwise an Array sets `[x, y]` or `[top, x, bottom]` or `[top, right, bottom, left]`.
 
 ### `onClick?: MouseEventHandler<HTMLDivElement>`
 

diff --git a/packages/mask/package.json b/packages/mask/package.json
@@ -8,8 +8,8 @@
   "license": "MIT",
   "devDependencies": {
     "@reactour/tsconfig": "*",
-    "@types/react": "^18.0.37",
-    "@types/react-dom": "^18.0.11",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.1",
     "config": "3.3.9",
     "react": "^18.2.0",
     "tsup": "^6.7.0",

diff --git a/packages/mask/styles.tsx b/packages/mask/styles.tsx
@@ -33,11 +33,11 @@ export const defaultStyles: Styles = {
     pointerEvents: 'none',
     color: '#000',
   }),
-  svgWrapper: ({ windowWidth, windowHeight, wpx, wpy }) => ({
+  svgWrapper: ({ windowWidth, windowHeight, wpt, wpl }) => ({
     width: windowWidth,
     height: windowHeight,
-    left: Number(wpx) / 2,
-    top: Number(wpy) / 2,
+    left: Number(wpl),
+    top: Number(wpt),
     position: 'fixed',
   }),
   maskArea: ({ x, y, width, height }) => ({