Enhanced Image Component

This commit is contained in:
Belen Curcio 2020-10-25 12:41:36 -03:00
parent 6565303cb5
commit 28cae88b5b
6 changed files with 67 additions and 124 deletions

View File

@ -0,0 +1,42 @@
import { FC } from 'react'
import { useInView } from 'react-intersection-observer'
import Image from 'next/image'
type Props = Omit<
JSX.IntrinsicElements['img'],
'src' | 'srcSet' | 'ref' | 'width' | 'height' | 'loading'
> & {
src: string
quality?: string
priority?: boolean
loading?: readonly ['lazy', 'eager', undefined]
unoptimized?: boolean
} & (
| {
width: number | string
height: number | string
unsized?: false
}
| {
width?: number | string
height?: number | string
unsized: true
}
)
const EnhancedImage: FC<Props & JSX.IntrinsicElements['img']> = ({
...props
}) => {
const [ref, inView] = useInView({
triggerOnce: true,
rootMargin: '220px 0px',
})
return (
<div ref={ref}>
<Image {...props} />
</div>
)
}
export default EnhancedImage

View File

@ -0,0 +1 @@
export { default } from './EnhancedImage'

View File

@ -9,3 +9,4 @@ export { default as Toggle } from './Toggle'
export { default as Head } from './Head'
export { default as HTMLContent } from './HTMLContent'
export { default as I18nWidget } from './I18nWidget'
export { default as EnhancedImage } from './EnhancedImage'

View File

@ -1,10 +1,10 @@
import { FC, ReactNode, Component } from 'react'
import React, { FC, ReactNode, Component } from 'react'
import cn from 'classnames'
import Image from 'next/image'
import Link from 'next/link'
import type { ProductNode } from '@lib/bigcommerce/api/operations/get-all-products'
import { Heart } from '@components/icon'
import s from './ProductCard.module.css'
import Link from 'next/link'
import { Heart } from '@components/icon'
import { EnhancedImage } from '@components/core'
import type { ProductNode } from '@lib/bigcommerce/api/operations/get-all-products'
interface Props {
className?: string
@ -34,7 +34,7 @@ const ProductCard: FC<Props> = ({
{p.name}
</span>
</div>
<Image
<EnhancedImage
src={src}
alt={p.name}
width={imgWidth}
@ -64,7 +64,7 @@ const ProductCard: FC<Props> = ({
</div>
</div>
<div className={cn(s.imageContainer)}>
<Image
<EnhancedImage
alt={p.name}
className={cn('w-full object-cover', s['product-image'])}
src={src}

View File

@ -25,6 +25,7 @@
"bowser": "^2.11.0",
"classnames": "^2.2.6",
"cookie": "^0.4.1",
"intersection-observer": "^0.11.0",
"js-cookie": "^2.2.1",
"keen-slider": "^5.2.4",
"lodash.debounce": "^4.0.8",
@ -37,6 +38,7 @@
"react": "^16.14.0",
"react-aria": "^3.0.0",
"react-dom": "^16.14.0",
"react-intersection-observer": "^8.29.1",
"react-merge-refs": "^1.1.0",
"react-ticker": "^1.2.2",
"swr": "^0.3.3",
@ -58,13 +60,13 @@
"@types/node": "^14.11.2",
"@types/react": "^16.9.49",
"@types/react-swipeable-views": "^0.13.0",
"bunyan": "^1.8.14",
"bunyan-prettystream": "^0.1.3",
"graphql": "^15.3.0",
"postcss-flexbugs-fixes": "^4.2.1",
"postcss-preset-env": "^6.7.0",
"prettier": "^2.1.2",
"typescript": "^4.0.3",
"bunyan": "^1.8.14",
"bunyan-prettystream": "^0.1.3"
"typescript": "^4.0.3"
},
"resolutions": {
"webpack": "^5.0.0-beta.30"

125
yarn.lock
View File

@ -1060,13 +1060,6 @@
"@babel/helper-plugin-utils" "^7.10.4"
"@babel/plugin-transform-typescript" "^7.10.4"
"@babel/runtime@7.0.0":
version "7.0.0"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.0.0.tgz#adeb78fedfc855aa05bc041640f3f6f98e85424c"
integrity sha512-7hGhzlcmg01CvH1EHdSPVXYX1aJ8KCEyz6I9xYIi/asDtzBPMyMhVibhM/K6g/5qnKBwjZtp10bNZIEFTRW1MA==
dependencies:
regenerator-runtime "^0.12.0"
"@babel/runtime@7.11.2":
version "7.11.2"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.11.2.tgz#f549c13c754cc40b87644b9fa9f09a6a95fe0736"
@ -1074,7 +1067,7 @@
dependencies:
regenerator-runtime "^0.13.4"
"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0", "@babel/runtime@^7.6.2", "@babel/runtime@^7.8.4":
"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.6.2", "@babel/runtime@^7.8.4":
version "7.12.1"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.1.tgz#b4116a6b6711d010b2dad3b7b6e43bf1b9954740"
integrity sha512-J5AIf3vPj3UwXaAzb5j1xM4WAQDX3EMgemF8rjCP3SoW09LfRKAXQKt6CoVYl230P6iWdRcBbnLDDdnqWxZSCA==
@ -2574,11 +2567,6 @@ ally.js@1.4.1:
css.escape "^1.5.0"
platform "1.3.3"
animate.css@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/animate.css/-/animate.css-4.1.1.tgz#614ec5a81131d7e4dc362a58143f7406abd68075"
integrity sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==
anser@1.4.9:
version "1.4.9"
resolved "https://registry.yarnpkg.com/anser/-/anser-1.4.9.tgz#1f85423a5dcf8da4631a341665ff675b96845760"
@ -4733,6 +4721,11 @@ inquirer@^7.3.3:
strip-ansi "^6.0.0"
through "^2.3.6"
intersection-observer@^0.11.0:
version "0.11.0"
resolved "https://registry.yarnpkg.com/intersection-observer/-/intersection-observer-0.11.0.tgz#f4ea067070326f68393ee161cc0a2ca4c0040c6f"
integrity sha512-KZArj2QVnmdud9zTpKf279m2bbGfG+4/kn16UU0NL3pTVl52ZHiJ9IRNSsnn6jaHrL9EGLFM5eWjTx2fz/+zoQ==
intl-messageformat-parser@1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/intl-messageformat-parser/-/intl-messageformat-parser-1.4.0.tgz#b43d45a97468cadbe44331d74bb1e8dea44fc075"
@ -5114,11 +5107,6 @@ keen-slider@^5.2.4:
resolved "https://registry.yarnpkg.com/keen-slider/-/keen-slider-5.2.4.tgz#9e2a889c63c02a651c81caa438f3691e9a3bc0a8"
integrity sha512-z39afyASW63B+1FzWGzBkvXAnzJl3gAD8M+32TmhJAPJqjckCaKYm7YBjpSba04AoVMQw8y9U1LVcUucVVIQkQ==
keycode@^2.1.7:
version "2.2.0"
resolved "https://registry.yarnpkg.com/keycode/-/keycode-2.2.0.tgz#3d0af56dc7b8b8e5cba8d0a97f107204eec22b04"
integrity sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ=
keyv@^3.0.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/keyv/-/keyv-3.1.0.tgz#ecc228486f69991e49e9476485a5be1e8fc5c4d9"
@ -5737,13 +5725,6 @@ next@^9.5.6-canary.14:
optionalDependencies:
sharp "0.26.2"
nextjs-progressbar@^0.0.6:
version "0.0.6"
resolved "https://registry.yarnpkg.com/nextjs-progressbar/-/nextjs-progressbar-0.0.6.tgz#d1841df42f2342807dc6f7ad1034ddb8ec8541d4"
integrity sha512-9sxNpUSHOnmRV8/3yEZ9NV5c/ip2CpQ7jim3EOOZp49qIHrgNxmy/kzoulNjt50AlA7pAu/8rwgC2WpzmSMrdg==
dependencies:
nprogress "^0.2.0"
no-case@^3.0.3:
version "3.0.3"
resolved "https://registry.yarnpkg.com/no-case/-/no-case-3.0.3.tgz#c21b434c1ffe48b39087e86cfb4d2582e9df18f8"
@ -5868,11 +5849,6 @@ npmlog@^4.0.1, npmlog@^4.1.2:
gauge "~2.7.3"
set-blocking "~2.0.0"
nprogress@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/nprogress/-/nprogress-0.2.0.tgz#cb8f34c53213d895723fcbab907e9422adbcafb1"
integrity sha1-y480xTIT2JVyP8urkH6UIq28r7E=
nullthrows@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/nullthrows/-/nullthrows-1.1.1.tgz#7818258843856ae971eae4208ad7d7eb19a431b1"
@ -6628,7 +6604,7 @@ promise@^7.1.1:
dependencies:
asap "~2.0.3"
prop-types@15.7.2, prop-types@^15.5.4, prop-types@^15.6.0, prop-types@^15.6.2:
prop-types@15.7.2, prop-types@^15.6.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@ -6757,21 +6733,10 @@ react-dom@^16.14.0:
prop-types "^15.6.2"
scheduler "^0.19.1"
react-event-listener@^0.6.0:
version "0.6.6"
resolved "https://registry.yarnpkg.com/react-event-listener/-/react-event-listener-0.6.6.tgz#758f7b991cad9086dd39fd29fad72127e1d8962a"
integrity sha512-+hCNqfy7o9wvO6UgjqFmBzARJS7qrNoda0VqzvOuioEpoEXKutiKuv92dSz6kP7rYLmyHPyYNLesi5t/aH1gfw==
dependencies:
"@babel/runtime" "^7.2.0"
prop-types "^15.6.0"
warning "^4.0.1"
react-icons@^3.11.0:
version "3.11.0"
resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-3.11.0.tgz#2ca2903dfab8268ca18ebd8cc2e879921ec3b254"
integrity sha512-JRgiI/vdF6uyBgyZhVyYJUZAop95Sy4XDe/jmT3R/bKliFWpO/uZBwvSjWEdxwzec7SYbEPNPck0Kff2tUGM2Q==
dependencies:
camelcase "^5.0.0"
react-intersection-observer@^8.29.1:
version "8.29.1"
resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-8.29.1.tgz#8c6f494ca81b39aee9f509f12d29443fc66a2256"
integrity sha512-JLxJ4V0L73ailfvbYQ2/lfAyirtud1WsRsYnzHyVLMfQff1AIG1lWdC5XaGSK4yb9jZHVbbNsrVIO3PJm03koQ==
react-is@16.13.1, react-is@^16.8.1:
version "16.13.1"
@ -6788,57 +6753,6 @@ react-refresh@0.8.3:
resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
react-swipeable-views-core@^0.13.7:
version "0.13.7"
resolved "https://registry.yarnpkg.com/react-swipeable-views-core/-/react-swipeable-views-core-0.13.7.tgz#c082b553f26e83fd20fc17f934200eb717023c8a"
integrity sha512-ekn9oDYfBt0oqJSGGwLEhKvn+QaqMGTy//9dURTLf+vp7W5j6GvmKryYdnwJCDITaPFI2hujXV4CH9krhvaE5w==
dependencies:
"@babel/runtime" "7.0.0"
warning "^4.0.1"
react-swipeable-views-core@^0.14.0-alpha.0:
version "0.14.0-alpha.0"
resolved "https://registry.yarnpkg.com/react-swipeable-views-core/-/react-swipeable-views-core-0.14.0-alpha.0.tgz#1c40dd1c328c97048a8f2cb9de504ee611ae21dd"
integrity sha512-TQm58RJv01EseBfaeY0kZUIBmhs1NyKXwhJL52iN/UlzbQSiaIE2kk+mSGicUriBK0H7UlScgLeJR91AJ7SVcA==
dependencies:
"@babel/runtime" "7.0.0"
warning "^4.0.1"
react-swipeable-views-utils@^0.13.9:
version "0.13.9"
resolved "https://registry.yarnpkg.com/react-swipeable-views-utils/-/react-swipeable-views-utils-0.13.9.tgz#a66e98f2f4502d8b00182901f80d13b2f903e10f"
integrity sha512-QLGxRKrbJCbWz94vkWLzb1Daaa2Y/TZKmsNKQ6WSNrS+chrlfZ3z9tqZ7YUJlW6pRWp3QZdLSY3UE3cN0TXXmw==
dependencies:
"@babel/runtime" "7.0.0"
keycode "^2.1.7"
prop-types "^15.6.0"
react-event-listener "^0.6.0"
react-swipeable-views-core "^0.13.7"
shallow-equal "^1.2.1"
react-swipeable-views-utils@^0.14.0-alpha.0:
version "0.14.0-alpha.0"
resolved "https://registry.yarnpkg.com/react-swipeable-views-utils/-/react-swipeable-views-utils-0.14.0-alpha.0.tgz#1bc91cf89d13417a0ca8edc11b4a2c55c4a889b9"
integrity sha512-Ya9Xtr4uE1CYxyrPwtcImzcZFcOr3PP51kRgIOTx3Dx9SF31OtF0t2CgXuypTYTs7G4StRE3NzWlvSBiMZSVtQ==
dependencies:
"@babel/runtime" "7.0.0"
keycode "^2.1.7"
prop-types "^15.6.0"
react-event-listener "^0.6.0"
react-swipeable-views-core "^0.14.0-alpha.0"
shallow-equal "^1.2.1"
react-swipeable-views@^0.13.9:
version "0.13.9"
resolved "https://registry.yarnpkg.com/react-swipeable-views/-/react-swipeable-views-0.13.9.tgz#d6a6c508bf5288ad55509f9c65916db5df0f2cec"
integrity sha512-WXC2FKYvZ9QdJ31v9LjEJEl1bA7E4AcaloTkbW0uU0dYf5uvv4aOpiyxubvOkVl1a5L2UAHmKSif4TmJ9usrSg==
dependencies:
"@babel/runtime" "7.0.0"
prop-types "^15.5.4"
react-swipeable-views-core "^0.13.7"
react-swipeable-views-utils "^0.13.9"
warning "^4.0.1"
react-ticker@^1.2.2:
version "1.2.2"
resolved "https://registry.yarnpkg.com/react-ticker/-/react-ticker-1.2.2.tgz#12cda5ff8266c6fe90ffcd8c58e12ba1596ddf24"
@ -6943,11 +6857,6 @@ regenerate@^1.4.0:
resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.1.tgz#cad92ad8e6b591773485fbe05a485caf4f457e6f"
integrity sha512-j2+C8+NtXQgEKWk49MMP5P/u2GhnahTtVkRIHr5R5lVRlbKvmQ+oS+A5aLKWp2ma5VkT8sh6v+v4hbH0YHR66A==
regenerator-runtime@^0.12.0:
version "0.12.1"
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz#fa1a71544764c036f8c49b13a08b2594c9f8a0de"
integrity sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==
regenerator-runtime@^0.13.4:
version "0.13.7"
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
@ -7315,11 +7224,6 @@ sha.js@^2.4.0, sha.js@^2.4.8:
inherits "^2.0.1"
safe-buffer "^5.0.1"
shallow-equal@^1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-1.2.1.tgz#4c16abfa56043aa20d050324efa68940b0da79da"
integrity sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==
sharp@0.26.2:
version "0.26.2"
resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.26.2.tgz#3d5777d246ae32890afe82a783c1cbb98456a88c"
@ -8072,13 +7976,6 @@ vue-template-compiler@^2.6.12:
de-indent "^1.0.2"
he "^1.1.0"
warning@^4.0.1:
version "4.0.3"
resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
dependencies:
loose-envify "^1.0.0"
watchpack@2.0.0-beta.13:
version "2.0.0-beta.13"
resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.0.0-beta.13.tgz#9d9b0c094b8402139333e04eb6194643c8384f55"