mirror of
https://github.com/vercel/commerce.git
synced 2025-03-14 22:42:33 +00:00
Enhanced Image Component
This commit is contained in:
Belen Curcio
parent
6565303cb5
commit
28cae88b5b
42
components/core/EnhancedImage/EnhancedImage.tsx
Normal file
42
components/core/EnhancedImage/EnhancedImage.tsx
Normal 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
|
||||
1
components/core/EnhancedImage/index.ts
Normal file
1
components/core/EnhancedImage/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export { default } from './EnhancedImage'
|
||||
@ -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'
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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
125
yarn.lock
@ -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"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user