diff --git a/example/components/GalleryLightbox/components/LightboxArrowButton.jsx b/example/components/GalleryLightbox/components/LightboxArrowButton.jsx index 184c089..dbba2b8 100644 --- a/example/components/GalleryLightbox/components/LightboxArrowButton.jsx +++ b/example/components/GalleryLightbox/components/LightboxArrowButton.jsx @@ -44,8 +44,8 @@ const StyledAnimatedDiv = styled(animated.div)` const Button = styled(ButtonControl)` position: absolute; - top: 0; - bottom: 0; + top: 50%; + transform: translateY(-50%); left: ${({ position }) => (position === 'left' ? 0 : 'unset')}; right: ${({ position }) => (position === 'right' ? 0 : 'unset')}; `; diff --git a/example/components/GalleryLightbox/components/LightboxHeader.jsx b/example/components/GalleryLightbox/components/LightboxHeader.jsx index cbcfec6..426d659 100644 --- a/example/components/GalleryLightbox/components/LightboxHeader.jsx +++ b/example/components/GalleryLightbox/components/LightboxHeader.jsx @@ -69,6 +69,8 @@ const RightSideContainer = styled.div` const CloseButton = styled(ButtonControl)` height: 100%; display: flex; + align-items: center; + justify-content: center; border-left-style: solid; border-left-width: 3px; border-left-color: ${({ theme }) => theme.headerNavFontColor}; diff --git a/example/yarn.lock b/example/yarn.lock index 5635acc..2f1e2d8 100644 --- a/example/yarn.lock +++ b/example/yarn.lock @@ -250,6 +250,14 @@ "@react-spring/shared" "~9.7.3" "@react-spring/types" "~9.7.3" +"@react-spring/animated@~9.7.5": + version "9.7.5" + resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.7.5.tgz#eb0373aaf99b879736b380c2829312dae3b05f28" + integrity sha512-Tqrwz7pIlsSDITzxoLS3n/v/YCUHQdOIKtOJf4yL6kYVSDTSmVK1LI1Q3M/uu2Sx4X3pIWF3xLUhlsA6SPNTNg== + dependencies: + "@react-spring/shared" "~9.7.5" + "@react-spring/types" "~9.7.5" + "@react-spring/core@~9.7.3": version "9.7.3" resolved "https://registry.yarnpkg.com/@react-spring/core/-/core-9.7.3.tgz#60056bcb397f2c4f371c6c9a5f882db77ae90095" @@ -259,6 +267,20 @@ "@react-spring/shared" "~9.7.3" "@react-spring/types" "~9.7.3" +"@react-spring/core@~9.7.5": + version "9.7.5" + resolved "https://registry.yarnpkg.com/@react-spring/core/-/core-9.7.5.tgz#72159079f52c1c12813d78b52d4f17c0bf6411f7" + integrity sha512-rmEqcxRcu7dWh7MnCcMXLvrf6/SDlSokLaLTxiPlAYi11nN3B5oiCUAblO72o+9z/87j2uzxa2Inm8UbLjXA+w== + dependencies: + "@react-spring/animated" "~9.7.5" + "@react-spring/shared" "~9.7.5" + "@react-spring/types" "~9.7.5" + +"@react-spring/rafz@~9.7.5": + version "9.7.5" + resolved "https://registry.yarnpkg.com/@react-spring/rafz/-/rafz-9.7.5.tgz#ee7959676e7b5d6a3813e8c17d5e50df98b95df9" + integrity sha512-5ZenDQMC48wjUzPAm1EtwQ5Ot3bLIAwwqP2w2owG5KoNdNHpEJV263nGhCeKKmuA3vG2zLLOdu3or6kuDjA6Aw== + "@react-spring/shared@~9.7.3": version "9.7.3" resolved "https://registry.yarnpkg.com/@react-spring/shared/-/shared-9.7.3.tgz#4cf29797847c689912aec4e62e34c99a4d5d9e53" @@ -266,14 +288,33 @@ dependencies: "@react-spring/types" "~9.7.3" +"@react-spring/shared@~9.7.5": + version "9.7.5" + resolved "https://registry.yarnpkg.com/@react-spring/shared/-/shared-9.7.5.tgz#6d513622df6ad750bbbd4dedb4ca0a653ec92073" + integrity sha512-wdtoJrhUeeyD/PP/zo+np2s1Z820Ohr/BbuVYv+3dVLW7WctoiN7std8rISoYoHpUXtbkpesSKuPIw/6U1w1Pw== + dependencies: + "@react-spring/rafz" "~9.7.5" + "@react-spring/types" "~9.7.5" + "@react-spring/types@~9.7.3": version "9.7.3" resolved "https://registry.yarnpkg.com/@react-spring/types/-/types-9.7.3.tgz#ea78fd447cbc2612c1f5d55852e3c331e8172a0b" integrity sha512-Kpx/fQ/ZFX31OtlqVEFfgaD1ACzul4NksrvIgYfIFq9JpDHFwQkMVZ10tbo0FU/grje4rcL4EIrjekl3kYwgWw== +"@react-spring/types@~9.7.5": + version "9.7.5" + resolved "https://registry.yarnpkg.com/@react-spring/types/-/types-9.7.5.tgz#e5dd180f3ed985b44fd2cd2f32aa9203752ef3e8" + integrity sha512-HVj7LrZ4ReHWBimBvu2SKND3cDVUPWKLqRTmWe/fNY6o1owGOX0cAHbdPDTMelgBlVbrTKrre6lFkhqGZErK/g== + "@react-spring/web@^9.7.3": - version "0.0.0" - uid "" + version "9.7.5" + resolved "https://registry.yarnpkg.com/@react-spring/web/-/web-9.7.5.tgz#7d7782560b3a6fb9066b52824690da738605de80" + integrity sha512-lmvqGwpe+CSttsWNZVr+Dg62adtKhauGwLyGE/RRyZ8AAMLgb9x3NDMA5RMElXo+IMyTkPp7nxTB8ZQlmhb6JQ== + dependencies: + "@react-spring/animated" "~9.7.5" + "@react-spring/core" "~9.7.5" + "@react-spring/shared" "~9.7.5" + "@react-spring/types" "~9.7.5" "@react-spring/web@link:../node_modules/@react-spring/web": version "0.0.0" diff --git a/package.json b/package.json index eef09dd..d4d5292 100644 --- a/package.json +++ b/package.json @@ -59,8 +59,7 @@ }, "peerDependencies": { "react": ">=16.8", - "react-dom": ">=16.8", - "styled-components": ">=5.X" + "react-dom": ">=16.8" }, "devDependencies": { "@babel/core": "^7.23.0", diff --git a/src/components/ImageStage/components/Image/index.tsx b/src/components/ImageStage/components/Image/index.tsx index b1707b2..eb79f67 100644 --- a/src/components/ImageStage/components/Image/index.tsx +++ b/src/components/ImageStage/components/Image/index.tsx @@ -6,7 +6,6 @@ import { } from '../../utils'; import { useGesture } from 'react-use-gesture'; import React, { useEffect, useRef, useState } from 'react'; -import styled, { AnyStyledComponent } from 'styled-components'; import type { ImagesListItem } from '../../../../types/ImagesList'; const defaultImageTransform = { @@ -285,8 +284,7 @@ const Image = ({ }); return ( - ) => { @@ -300,12 +298,17 @@ const Image = ({ }} ref={imageRef} style={{ - ...imgStyleProp, + height: 'auto', maxHeight: pagerHeight, + maxWidth: '100%', + touchAction: !inline ? 'none' : 'pan-y', + ...imgStyleProp, transform: to( [scale, translateX, translateY], (s, x, y) => `translate(${x}px, ${y}px) scale(${s})`, ), + userSelect: 'none', + width: 'auto', ...(isCurrentImage && { willChange: 'transform' }), }} // Include any valid img html attributes provided in the images prop @@ -317,14 +320,3 @@ const Image = ({ Image.displayName = 'Image'; export default Image; - -const AnimatedImage = styled(animated.img as AnyStyledComponent)` - width: auto; - height: auto; - max-width: 100%; - user-select: none; - touch-action: ${({ $inline }) => (!$inline ? 'none' : 'pan-y')}; - ::selection { - background: none; - } -`; diff --git a/src/components/ImageStage/components/ImagePager/index.tsx b/src/components/ImageStage/components/ImagePager/index.tsx index 4797db9..3222cf6 100644 --- a/src/components/ImageStage/components/ImagePager/index.tsx +++ b/src/components/ImageStage/components/ImagePager/index.tsx @@ -2,7 +2,6 @@ import { animated, useSprings } from '@react-spring/web'; import { useGesture } from 'react-use-gesture'; import Image from '../Image'; import React, { useEffect, useRef, useState } from 'react'; -import styled, { AnyStyledComponent } from 'styled-components'; import type { ImagesList } from '../../../../types/ImagesList'; type IImagePager = { @@ -201,10 +200,9 @@ const ImagePager = ({ ); return ( - +
{pagerSprings.map(({ display, x }, i) => ( - `translateX(${xInterp}px)`, ), + width: '100%', + willChange: 'transform', }} > - - - +
+
{ e.stopPropagation(); e.nativeEvent.stopImmediatePropagation(); }} + style={{ + display: 'flex', + justifyContent: 'center', + position: 'relative', + touchAction: !inline ? 'none' : 'pan-y', + userSelect: 'none', + width: '100%', + }} > {renderImageOverlay()} - - - - +
+
+
+ ))} - + ); }; ImagePager.displayName = 'ImagePager'; export default ImagePager; - -const ImagePagerContainer = styled.div` - height: 100%; - width: 100%; -`; - -const PagerInnerContentWrapper = styled.div` - display: flex; - justify-content: center; - align-items: center; -`; - -const PagerContentWrapper = styled.div` - width: 100%; - display: flex; - justify-content: center; -`; - -const AnimatedImagePager = styled(animated.span as AnyStyledComponent)<{ - $inline: boolean; -}>` - position: absolute; - top: 0px; - left: 0px; - right: 0px; - bottom: 0px; - height: 100%; - width: 100%; - will-change: transform; - touch-action: ${({ $inline }) => (!$inline ? 'none' : 'pan-y')}; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -`; - -const ImageContainer = styled.div<{ $inline: boolean }>` - position: relative; - touch-action: ${({ $inline }) => (!$inline ? 'none' : 'pan-y')}; - user-select: none; - display: flex; - justify-content: center; - width: 100%; -`; diff --git a/src/components/ImageStage/components/SSRImagePager/SSRImagePager.tsx b/src/components/ImageStage/components/SSRImagePager/SSRImagePager.tsx index 281e630..5586520 100644 --- a/src/components/ImageStage/components/SSRImagePager/SSRImagePager.tsx +++ b/src/components/ImageStage/components/SSRImagePager/SSRImagePager.tsx @@ -1,5 +1,4 @@ import type { ImagesList } from '../../../../types/ImagesList'; -import styled, { css } from 'styled-components'; import * as React from 'react'; type ISSRImagePagerProps = { @@ -9,36 +8,28 @@ type ISSRImagePagerProps = { const SSRImagePager = ({ currentIndex, images }: ISSRImagePagerProps) => { return ( - +
{images.map(({ alt, src }, i) => { + const isCurrentImage = i === currentIndex; return ( - {alt} ); })} - +
); }; export default SSRImagePager; - -const ImagePagerContainer = styled.div` - width: 100%; - height: inherit; -`; - -const Image = styled.img<{ $isCurrentImage: boolean }>` - ${({ $isCurrentImage }) => - !$isCurrentImage && - css` - visibility: hidden; - display: none; - `} - height:100%; - width: 100%; - object-fit: contain; -`; diff --git a/src/components/ImageStage/index.tsx b/src/components/ImageStage/index.tsx index 676dbbf..85cc2bf 100644 --- a/src/components/ImageStage/index.tsx +++ b/src/components/ImageStage/index.tsx @@ -1,6 +1,5 @@ import ImagePager from './components/ImagePager'; import React from 'react'; -import styled from 'styled-components'; import useRefSize from './utils/useRefSize'; import type { ImagesList } from '../../types/ImagesList'; import SSRImagePager from './components/SSRImagePager/SSRImagePager'; @@ -57,10 +56,18 @@ const ImageStage = ({ useRefSize(); return ( - {renderPrevButton({ canPrev })} {containerWidth ? ( @@ -80,17 +87,8 @@ const ImageStage = ({ ) : null} {renderNextButton({ canNext })} - + ); }; export default ImageStage; - -const ImageStageContainer = styled.div` - position: relative; - height: 100%; - width: 100%; - display: flex; - justify-content: center; - align-items: center; -`; diff --git a/src/components/PageContainer/index.tsx b/src/components/PageContainer/index.tsx index a559428..59b3a8f 100644 --- a/src/components/PageContainer/index.tsx +++ b/src/components/PageContainer/index.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { useTransition, animated, config } from '@react-spring/web'; -import styled, { AnyStyledComponent } from 'styled-components'; type IPageContainerProps = { /** All child components of Lightbox */ @@ -42,15 +41,26 @@ const PageContainer = ({ {transitions( (animatedStyles, item) => item && ( - {children} - + ), )} @@ -58,14 +68,3 @@ const PageContainer = ({ }; export default PageContainer; - -const AnimatedPageContainer = styled(animated.div as AnyStyledComponent)` - display: flex; - flex-direction: column; - position: fixed; - z-index: 400; - top: 0; - bottom: 0; - left: 0; - right: 0; -`; diff --git a/src/index.tsx b/src/index.tsx index 2d58ee1..668b8e8 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -51,7 +51,6 @@ type ILightboxProps = { * Built with: * @see https://github.com/react-spring/react-use-gesture * @see https://github.com/react-spring/react-spring - * @see https://github.com/styled-components/styled-components */ const Lightbox = ({ className = '', diff --git a/yarn.lock b/yarn.lock index 7ef56a3..0597333 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6335,7 +6335,16 @@ string-length@^4.0.1: char-regex "^1.0.2" strip-ansi "^6.0.0" -"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3: +"string-width-cjs@npm:string-width@^4.2.0": + version "4.2.3" + resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" + integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== + dependencies: + emoji-regex "^8.0.0" + is-fullwidth-code-point "^3.0.0" + strip-ansi "^6.0.1" + +"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3: version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -6411,7 +6420,14 @@ stringify-object@^3.3.0: is-obj "^1.0.1" is-regexp "^1.0.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: +"strip-ansi-cjs@npm:strip-ansi@^6.0.1": + version "6.0.1" + resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" + integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== + dependencies: + ansi-regex "^5.0.1" + +strip-ansi@^6.0.0, strip-ansi@^6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== @@ -6937,7 +6953,7 @@ widest-line@^3.1.0: dependencies: string-width "^4.0.0" -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== @@ -6955,6 +6971,15 @@ wrap-ansi@^6.2.0: string-width "^4.1.0" strip-ansi "^6.0.0" +wrap-ansi@^7.0.0: + version "7.0.0" + resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" + integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== + dependencies: + ansi-styles "^4.0.0" + string-width "^4.1.0" + strip-ansi "^6.0.0" + wrap-ansi@^8.1.0: version "8.1.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"