diff --git a/package.json b/package.json
index 133af634..ca720cff 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
"mobx-persist-store": "^1.0.4",
"mobx-react-lite": "^3.2.3",
"next": "^12.3.0",
- "photoswipe": "^4.1.3",
+ "photoswipe": "^5.4.4",
"raleway-cyrillic": "^4.0.2",
"ramda": "^0.26.1",
"react": "^17.0.2",
@@ -41,7 +41,7 @@
"react-sticky-box": "^1.0.2",
"sass": "^1.49.0",
"sharp": "^0.32.6",
- "swiper": "^11.0.3",
+ "swiper": "^11.2.2",
"swr": "^1.0.1",
"throttle-debounce": "^2.1.0",
"typescript": "^4.0.5",
diff --git a/src/components/common/Columns/index.tsx b/src/components/common/Columns/index.tsx
index 6901c609..e491e77c 100644
--- a/src/components/common/Columns/index.tsx
+++ b/src/components/common/Columns/index.tsx
@@ -31,7 +31,7 @@ const Columns: FC<ColumnsProps> = ({
if (!childs) return;
- const timeout = setTimeout(() => setColumns([...childs]), 150);
+ const timeout = setTimeout(() => setColumns([...childs.values()]), 150);
return () => clearTimeout(timeout);
// eslint-disable-next-line react-hooks/exhaustive-deps
diff --git a/src/components/node/NodeImageSwiperBlock/index.tsx b/src/components/node/NodeImageSwiperBlock/index.tsx
index 9e5d8082..c3c778d3 100644
--- a/src/components/node/NodeImageSwiperBlock/index.tsx
+++ b/src/components/node/NodeImageSwiperBlock/index.tsx
@@ -57,7 +57,9 @@ const NodeImageSwiperBlock: FC<Props> = observer(({ node }) => {
useEffect(() => {
controlledSwiper?.slideTo(0, 0);
- return () => controlledSwiper?.slideTo(0, 0);
+ return () => {
+ controlledSwiper?.slideTo(0, 0);
+ };
}, [controlledSwiper, images, node.id]);
useEffect(() => {
diff --git a/src/containers/dialogs/PhotoSwipe/index.tsx b/src/containers/dialogs/PhotoSwipe/index.tsx
index 3a285696..b5baccb7 100644
--- a/src/containers/dialogs/PhotoSwipe/index.tsx
+++ b/src/containers/dialogs/PhotoSwipe/index.tsx
@@ -1,10 +1,12 @@
-import { useEffect, useRef, VFC } from 'react';
+import { useEffect } from 'react';
+
+import 'photoswipe/style.css';
-import classNames from 'classnames';
import { observer } from 'mobx-react-lite';
-import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default.js';
-import PhotoSwipeJs from 'photoswipe/dist/photoswipe.js';
+import { SlideData } from 'photoswipe/dist/types/slide/slide';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { Icon } from '~/components/common/Icon';
import { imagePresets } from '~/constants/urls';
import { useWindowSize } from '~/hooks/dom/useWindowSize';
import { useModal } from '~/hooks/modal/useModal';
@@ -13,125 +15,83 @@ import { DialogComponentProps } from '~/types/modal';
import { getURL } from '~/utils/dom';
import styles from './styles.module.scss';
-
-export interface PhotoSwipeProps extends DialogComponentProps {
+export interface Props extends DialogComponentProps {
items: IFile[];
index: number;
}
-const PhotoSwipe: VFC<PhotoSwipeProps> = observer(({ index, items }) => {
- let ref = useRef<HTMLDivElement>(null);
+const arrowNextSVG = renderToStaticMarkup(<Icon icon="right" size={40} />);
+const arrowPrevSVG = renderToStaticMarkup(<Icon icon="left" size={40} />);
+const closeSVG = renderToStaticMarkup(<Icon icon="close" size={32} />);
+
+const padding = { top: 10, left: 10, right: 10, bottom: 10 } as const;
+
+const PhotoSwipe = observer(({ index, items }: Props) => {
const { hideModal } = useModal();
const { isTablet } = useWindowSize();
useEffect(() => {
- new Promise(async (resolve) => {
- const images = await Promise.all(
- items.map(
- (file) =>
- new Promise((resolve) => {
- const src = getURL(
- file,
- isTablet ? imagePresets[900] : imagePresets[1600],
- );
+ Promise.all(
+ items.map(
+ (file): Promise<SlideData> =>
+ new Promise((resolve) => {
+ const src = getURL(
+ file,
+ isTablet ? imagePresets[900] : imagePresets[1600],
+ );
- if (file.metadata?.width && file.metadata.height) {
- resolve({
- src,
- w: file.metadata.width,
- h: file.metadata.height,
- });
+ if (file.metadata?.width && file.metadata.height) {
+ resolve({
+ src,
+ width: file.metadata.width,
+ height: file.metadata.height,
+ });
- return;
- }
+ return;
+ }
- const img = new Image();
+ const img = new Image();
- img.onload = () => {
- resolve({
- src,
- h: img.naturalHeight,
- w: img.naturalWidth,
- });
- };
+ img.onload = () => {
+ resolve({
+ src,
+ height: img.naturalHeight,
+ width: img.naturalWidth,
+ });
+ };
- img.onerror = () => {
- resolve({});
- };
+ img.onerror = () => {
+ resolve({});
+ };
- img.src = getURL(file, imagePresets[1600]);
- }),
- ),
- );
+ img.src = getURL(file, imagePresets[1600]);
+ }),
+ ),
+ ).then(async (images: SlideData[]) => {
+ const PSWP = await import('photoswipe').then((it) => it.default);
- resolve(images);
- }).then((images) => {
- const ps = new PhotoSwipeJs(ref.current, PhotoSwipeUI_Default, images, {
+ const ps = new PSWP({
+ dataSource: images,
index: index || 0,
- closeOnScroll: false,
- history: false,
+ closeOnVerticalDrag: true,
+ padding,
+ mainClass: styles.wrap,
+ zoom: false,
+ counter: false,
+ bgOpacity: 0.1,
+ arrowNextSVG,
+ arrowPrevSVG,
+ closeSVG,
});
+ ps.on('destroy', hideModal);
+ ps.on('close', hideModal);
+
ps.init();
- ps.listen('destroy', hideModal);
- ps.listen('close', hideModal);
});
}, [hideModal, items, index, isTablet]);
- return (
- <div
- className="pswp"
- tabIndex={-1}
- role="dialog"
- aria-hidden="true"
- ref={ref}
- >
- <div className={classNames('pswp__bg', styles.bg)} />
- <div className={classNames('pswp__scroll-wrap', styles.wrap)}>
- <div className="pswp__container">
- <div className="pswp__item" />
- <div className="pswp__item" />
- <div className="pswp__item" />
- </div>
-
- <div className="pswp__ui pswp__ui--hidden">
- <div className={classNames('pswp__top-bar', styles.bar)}>
- <div className="pswp__counter" />
- <button
- className="pswp__button pswp__button--close"
- title="Close (Esc)"
- />
-
- <div className="pswp__preloader">
- <div className="pswp__preloader__icn">
- <div className="pswp__preloader__cut">
- <div className="pswp__preloader__donut" />
- </div>
- </div>
- </div>
- </div>
-
- <div className="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
- <div className="pswp__share-tooltip" />
- </div>
-
- <button
- className="pswp__button pswp__button--arrow--left"
- title="Previous (arrow left)"
- />
-
- <button
- className="pswp__button pswp__button--arrow--right"
- title="Next (arrow right)"
- />
-
- <div className="pswp__caption">
- <div className="pswp__caption__center" />
- </div>
- </div>
- </div>
- </div>
- );
+ return null;
});
export { PhotoSwipe };
diff --git a/src/containers/dialogs/PhotoSwipe/styles.module.scss b/src/containers/dialogs/PhotoSwipe/styles.module.scss
index 8a6d6c8b..e66eeb25 100644
--- a/src/containers/dialogs/PhotoSwipe/styles.module.scss
+++ b/src/containers/dialogs/PhotoSwipe/styles.module.scss
@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
.wrap {
:global(.pswp__img) {
diff --git a/src/styles/_global.scss b/src/styles/_global.scss
index ab87de67..33f1f85a 100644
--- a/src/styles/_global.scss
+++ b/src/styles/_global.scss
@@ -2,8 +2,6 @@
@use './themes/horizon' as theme_horizon;
@import 'src/styles/variables';
-@import 'photoswipe/dist/photoswipe';
-@import 'photoswipe/dist/default-skin/default-skin';
@import 'swiper/css';
@import 'swiper/css/effect-fade';
diff --git a/yarn.lock b/yarn.lock
index 7a7ea181..51753816 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2423,10 +2423,10 @@ path-type@^4.0.0:
resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
-photoswipe@^4.1.3:
- version "4.1.3"
- resolved "https://registry.yarnpkg.com/photoswipe/-/photoswipe-4.1.3.tgz#59f49494eeb9ddab5888d03392926a19bc197550"
- integrity sha512-89Z43IRUyw7ycTolo+AaiDn3W1EEIfox54hERmm9bI12IB9cvRfHSHez3XhAyU8XW2EAFrC+2sKMhh7SJwn0bA==
+photoswipe@^5.4.4:
+ version "5.4.4"
+ resolved "https://registry.yarnpkg.com/photoswipe/-/photoswipe-5.4.4.tgz#e045dc036453493188d5c8665b0e8f1000ac4d6e"
+ integrity sha512-WNFHoKrkZNnvFFhbHL93WDkW3ifwVOXSW3w1UuZZelSmgXpIGiZSNlZJq37rR8YejqME2rHs9EhH9ZvlvFH2NA==
picocolors@^1.0.0:
version "1.0.0"
@@ -3102,10 +3102,10 @@ supports-preserve-symlinks-flag@^1.0.0:
resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
-swiper@^11.0.3:
- version "11.0.3"
- resolved "https://registry.yarnpkg.com/swiper/-/swiper-11.0.3.tgz#9c325154db2a4431f508b7e8e300621365eb4c3d"
- integrity sha512-MyV9ooQsriAe2EibeamqewLjgCfSvl2xoyratl6S3ln5BXDL4BzlO6mxcbLMCzQL6Z60b/u0AS/nKrepL0+TAg==
+swiper@^11.2.2:
+ version "11.2.2"
+ resolved "https://registry.yarnpkg.com/swiper/-/swiper-11.2.2.tgz#b49089fad99501e34cb1be916e1ae05379aace9a"
+ integrity sha512-FmAN6zACpVUbd/1prO9xQ9gKo9cc6RE2UKU/z4oXtS8fNyX4sdOW/HHT/e444WucLJs0jeMId6WjdWM2Lrs8zA==
swr@^1.0.1:
version "1.2.0"