fix: remove unused variables

ahmnouira · Aug 21, 2021 · 9eb88ee · 9eb88ee
1 parent 783300f
commit 9eb88ee
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 59 deletions.
diff --git a/example/package.json b/example/package.json
@@ -15,7 +15,7 @@
     "@types/react-router": "5.1.16",
     "@types/react-router-dom": "5.1.8",
     "babel-jest": "^26.6.0",
-    "ionic-react-header-parallax": "^0.1.0",
+    "ionic-react-header-parallax": "^0.1.1",
     "ionicons": "5.5.3",
     "react": "17.0.2",
     "react-dom": "17.0.2",

diff --git a/example/yarn.lock b/example/yarn.lock
@@ -5934,10 +5934,10 @@ internal-slot@^1.0.3:
     has "^1.0.3"
     side-channel "^1.0.4"
 
-ionic-react-header-parallax@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/ionic-react-header-parallax/-/ionic-react-header-parallax-0.1.0.tgz#d12edede7f0f2ef70eb283b0da3a416b766396d5"
-  integrity sha512-KiyCGeaBuVmDvQcQrWZvM6TNbaf5NOljsQXTzy/z/FwvtEiPJ/eV2gXSubaj8xnL0y76cU+KwnFJDUj9RtFOgA==
+ionic-react-header-parallax@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ionic-react-header-parallax/-/ionic-react-header-parallax-0.1.1.tgz#13b0c3579ecc2aa84746345f05c686644edb3d11"
+  integrity sha512-pDUvPObUmFaGamFrFK3Vnz6eJ8PIFjaZwe3744rvxWNj5bdsSQXO8lwaJGdH4jKK5UCNd3dA+3OkSgUwXQVGyw==
 
 ionicons@5.5.3, ionicons@^5.1.2, ionicons@^5.5.3:
   version "5.5.3"

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ionic-react-header-parallax",
-  "version": "0.1.1",
+  "version": "0.1.0",
   "description": "A React Hook parallax effect for Ionic React <IonHeader> component",
   "author": {
     "name": "Ahmd Nouira",
@@ -62,7 +62,7 @@
     "babel-jest": "26.6.0",
     "codecov": "3.8.3",
     "eslint": "7.32.0",
-    "jest": "26.6.3",
+    "jest": "26.6.0",
     "np": "7.5.0",
     "prettier": "2.3.2",
     "react": "^17.0.2",
@@ -75,5 +75,8 @@
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
+  },
+  "resolutions": {
+    "jest": "26.6.0"
   }
 }
diff --git a/src/useIonicHeaderParallax.spec.tsx b/src/useIonicHeaderParallax.spec.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render } from '@testing-library/react/'
-import { useIonHeaderParallax } from './useIonicHeaderParallax'
+// import { useIonHeaderParallax } from './useIonicHeaderParallax'
 import {
   IonBackButton,
   IonButton,
@@ -42,8 +42,9 @@ describe('IonHeaderParallax', () => {
   })
 
   it('should render correctly', () => {
+
     const Component = () => {
-      useIonHeaderParallax({ image: 'https://picsum.photos/1080' })
+      // useIonHeaderParallax({ image: 'https://picsum.photos/1080' })
       return Element
     }
     const { container } = render(<Component />)

diff --git a/src/useIonicHeaderParallax.ts b/src/useIonicHeaderParallax.ts
@@ -36,25 +36,21 @@ export function useIonHeaderParallax({
 
     // ion-toolbar background
     const toolbarShadowRoot = toolbar.shadowRoot
-
-    if (!toolbarShadowRoot) return
-
+    if (!toolbarShadowRoot) throw new Error('No shadow')
     const toolbarBackground = toolbarShadowRoot.querySelector('.toolbar-background') as HTMLElement
 
-    if (!toolbarBackground) return
+    if (!toolbarBackground) throw new Error('No .toolbar-background')
 
     // ion-title
-    const ionTitle = toolbar.querySelector('ion-title') as HTMLElement
+    const ionTitle = toolbar.querySelector('ion-title')
 
     // ion-buttons
     const barButtons = header.querySelector('ion-buttons') as HTMLElement
 
     // ion-content
-    const ionContent = parentElement.querySelector('ion-content') as HTMLElement
-    if (!ionContent) throw new Error('Parallax an <ion-content> element on the page to work.')
-
+    const ionContent = parentElement.querySelector('ion-content')
+    if (!ionContent) throw new Error('Parallax requires an <ion-content> element on the page to work.')
     const scrollContent = ionContent.shadowRoot?.querySelector('.inner-scroll') as HTMLElement
-
     if (!scrollContent) {
       throw new Error('Parallax directive requires an <ion-content> element on the page to work.')
     }
@@ -71,6 +67,7 @@ export function useIonHeaderParallax({
 
     if (overlayTitle) {
       overlayTitle.classList.add('parallax-title')
+
       setTimeout(() => {
         if (overlayTitle.shadowRoot) {
           const toolbarTitle = overlayTitle.shadowRoot.querySelector('.toolbar-title') as HTMLElement
@@ -88,24 +85,19 @@ export function useIonHeaderParallax({
 
     /***  initStyles ***/
     // still in init use JS DOM
-    let headerHeight = scrollContent?.clientHeight
     setTicking(false)
 
     // fetch styles
     maximumHeight = parseFloat(maximumHeight.toString())
     let headerMinHeight = toolbar.offsetHeight
 
-    let scrollContentPaddingTop = 0
-
-    if (scrollContent) {
-      scrollContentPaddingTop = parseFloat(
-        window.getComputedStyle(scrollContent as Element, null).paddingTop.replace('px', '')
-      )
-    }
-    let originalToolbarBgColor = 'white'
+    let scrollContentPaddingTop: number = parseFloat(
+      window.getComputedStyle(scrollContent, null).paddingTop.replace('px', '')
+    )
 
-    if (toolbarBackground) {
-      originalToolbarBgColor = window.getComputedStyle(toolbarBackground as Element, null).backgroundColor
+    const originalToolbarBgColor = window.getComputedStyle(toolbarBackground, null).backgroundColor
+    if (!originalToolbarBgColor) {
+      throw new Error('Error: toolbarBackround is null.')
     }
 
     // header and title
@@ -139,9 +131,7 @@ export function useIonHeaderParallax({
     imageOverlay.style.backgroundPosition = 'center'
 
     // .toolbar-background
-    if (toolbarBackground) {
-      toolbarBackground.style.backgroundColor = originalToolbarBgColor
-    }
+    toolbarBackground.style.backgroundColor = originalToolbarBgColor
 
     // .bar-buttons
     if (barButtons) {
@@ -160,14 +150,6 @@ export function useIonHeaderParallax({
       scrollContent.style.paddingTop = `${maximumHeight + scrollContentPaddingTop - headerMinHeight}px`
     }
 
-    /** init events */
-    window.addEventListener(
-      'resize',
-      () => {
-        headerHeight = scrollContent.clientHeight
-      },
-      false
-    )
 
     if (scrollContent) {
       scrollContent.addEventListener('scroll', (_e) => {
@@ -176,15 +158,6 @@ export function useIonHeaderParallax({
             // to do
 
             const scrollTop = scrollContent.scrollTop
-            let translateAmt: number
-            let scaleAmt: number
-            if (scrollTop >= 0) {
-              translateAmt = scrollTop / 2
-              scaleAmt = 1
-            } else {
-              translateAmt = 0
-              scaleAmt = scrollTop / headerHeight + 1
-            }
 
             // Parallax total progress
             headerMinHeight = toolbar.offsetHeight
@@ -195,8 +168,6 @@ export function useIonHeaderParallax({
             let targetHeight = maximumHeight - scrollTop
             targetHeight = Math.max(targetHeight, headerMinHeight)
 
-            header.style.transform = 'translate3d(0,' + translateAmt + 'px,0) scale(' + scaleAmt + ',' + scaleAmt + ')'
-
             // .toolbar-background: change color
             imageOverlay.style.height = `${targetHeight}px`
             imageOverlay.style.opacity = `${progress}`

diff --git a/yarn.lock b/yarn.lock
@@ -1074,7 +1074,7 @@
     jest-util "^26.6.2"
     slash "^3.0.0"
 
-"@jest/core@^26.6.3":
+"@jest/core@^26.6.0", "@jest/core@^26.6.3":
   version "26.6.3"
   resolved "https://registry.yarnpkg.com/@jest/core/-/core-26.6.3.tgz#7639fcb3833d748a4656ada54bde193051e45fad"
   integrity sha512-xvV1kKbhfUqFVuZ8Cyo+JPpipAHHAV3kcDBftiduK8EICXmTFddryy3P7NfZt8Pv37rA9nEJBKCCkglCPt/Xjw==
@@ -3855,7 +3855,7 @@ jest-changed-files@^26.6.2:
     execa "^4.0.0"
     throat "^5.0.0"
 
-jest-cli@^26.6.3:
+jest-cli@^26.6.0:
   version "26.6.3"
   resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-26.6.3.tgz#43117cfef24bc4cd691a174a8796a532e135e92a"
   integrity sha512-GF9noBSa9t08pSyl3CY4frMrqp+aQXFGFkf5hEPbh/pIUFYWMK6ZLTfbmadxJVcJrdRoChlWQsA2VkJcDFK8hg==
@@ -4210,14 +4210,14 @@ jest-worker@^26.6.2:
     merge-stream "^2.0.0"
     supports-color "^7.0.0"
 
-jest@26.6.3:
-  version "26.6.3"
-  resolved "https://registry.yarnpkg.com/jest/-/jest-26.6.3.tgz#40e8fdbe48f00dfa1f0ce8121ca74b88ac9148ef"
-  integrity sha512-lGS5PXGAzR4RF7V5+XObhqz2KZIDUA1yD0DG6pBVmy10eh0ZIXQImRuzocsI/N2XZ1GrLFwTS27In2i2jlpq1Q==
+jest@26.6.0:
+  version "26.6.0"
+  resolved "https://registry.yarnpkg.com/jest/-/jest-26.6.0.tgz#546b25a1d8c888569dbbe93cae131748086a4a25"
+  integrity sha512-jxTmrvuecVISvKFFhOkjsWRZV7sFqdSUAd1ajOKY+/QE/aLBVstsJ/dX8GczLzwiT6ZEwwmZqtCUHLHHQVzcfA==
   dependencies:
-    "@jest/core" "^26.6.3"
+    "@jest/core" "^26.6.0"
     import-local "^3.0.2"
-    jest-cli "^26.6.3"
+    jest-cli "^26.6.0"
 
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"