Added pinch-to-zoom to presentation

foxford · Jul 8, 2024 · 94eab00 · 94eab00
1 parent 124d2a2
commit 94eab00
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 21 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/presentation/package.json b/packages/presentation/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ulms/ui-presentation",
-  "version": "1.9.1",
+  "version": "1.10.0",
   "license": "MIT",
   "main": "index.js",
   "module": "es/index.js",
@@ -19,6 +19,7 @@
     "react-intl": "^5.21.0",
     "react-sizeme": "^2.6.7",
     "react-visibility-sensor": "^5.0.2",
+    "react-zoom-pan-pinch": "^3.4.4",
     "scroll-into-view-if-needed": "^2.2.20"
   },
   "devDependencies": {

diff --git a/packages/presentation/src/presentation.jsx b/packages/presentation/src/presentation.jsx
@@ -1,4 +1,4 @@
-/* eslint-disable max-len, react/prop-types, jsx-a11y/no-static-element-interactions, react/jsx-one-expression-per-line,max-classes-per-file */
+/* eslint-disable max-len, react/prop-types, jsx-a11y/no-static-element-interactions, react/jsx-one-expression-per-line,max-classes-per-file,react/jsx-props-no-spreading */
 import React from 'react'
 import { injectIntl, IntlProvider } from 'react-intl'
 import VisibilitySensor from 'react-visibility-sensor'
@@ -8,6 +8,7 @@ import scrollIntoView from 'scroll-into-view-if-needed'
 import { Icons } from '@ulms/ui-icons'
 import { SizeMe } from 'react-sizeme'
 import { Spinner } from '@ulms/ui-spinner'
+import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch'
 
 import { messagesIntl } from '../lang/index'
 
@@ -155,6 +156,7 @@ class PresentationComponent extends React.Component {
       showPagesCount,
       showPreviews,
       slotSlide,
+      transformWrapperProps,
     } = this.props
 
     return (
@@ -234,24 +236,31 @@ class PresentationComponent extends React.Component {
                     ref={innerRef}
                     data-id="presentation-slide"
                   >
-                    <img
-                      alt="mainimage"
-                      className={cx(css.mainImage, {
-                        [css[`centered${centered}`]]: !fitToWidth,
-                      })}
-                      src={collection[index].image}
-                      width={imageSize.width}
-                      height={imageSize.height}
-                    />
-                    {slotSlide && (
-                      <div
-                        className={cx(css.slotSlide, {
-                          [css[`centered${centered}`]]: !fitToWidth,
-                        })}
+                    <TransformWrapper disabled {...transformWrapperProps}>
+                      <TransformComponent
+                        contentClass={css.transformComponent}
+                        wrapperClass={css.transformWrapper}
                       >
-                        {slotSlide(imageSize.width, imageSize.height)}
-                      </div>
-                    )}
+                        <img
+                          alt="mainimage"
+                          className={cx(css.mainImage, {
+                            [css[`centered${centered}`]]: !fitToWidth,
+                          })}
+                          src={collection[index].image}
+                          width={imageSize.width}
+                          height={imageSize.height}
+                        />
+                        {slotSlide && (
+                          <div
+                            className={cx(css.slotSlide, {
+                              [css[`centered${centered}`]]: !fitToWidth,
+                            })}
+                          >
+                            {slotSlide(imageSize.width, imageSize.height)}
+                          </div>
+                        )}
+                      </TransformComponent>
+                    </TransformWrapper>
                   </div>
                 )
               } else {
@@ -353,7 +362,6 @@ export class PresentationIntl extends React.PureComponent {
         locale={locale}
         messages={messagesIntl[locale]}
       >
-        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
         <PresentationComponentIntl {...props} innerRef={innerRef} />
       </IntlProvider>
     )

diff --git a/packages/presentation/src/presentation.module.css b/packages/presentation/src/presentation.module.css
@@ -198,3 +198,9 @@
   vertical-align: text-top;
   line-height: 1em;
 }
+
+.transformWrapper,
+.transformComponent {
+  height: 100% !important;
+  width: 100% !important;
+}