@festo-ui/react - npm Package Compare versions

Comparing version 7.0.0-dev.357 to 7.0.0-dev.365

lib/components/modals/imageGallery/ImageGallery.d.ts

@@ -11,6 +11,8 @@ import './ImageGallery.scss';
     pagination?: boolean;
+    showScaleButton?: boolean;
     descriptiveContent?: boolean;
     onSlideChanged?: (index: number) => void;
+    onScaleChange?: (value: boolean) => void;
 }
 export declare const ImageGallery: (props: ImageGalleryProps & import("react").RefAttributes<HTMLImageElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
 export default ImageGallery;

lib/components/modals/imageGallery/ImageGallery.js

 import { forwardRef, useState } from 'react';
+import cn from 'classnames';
 import ModalBase from '../ModalBase';
@@ -20,7 +21,10 @@ import BaseGallery from './BaseGallery';
     pagination,
+    showScaleButton,
     onClose,
     onSlideChanged,
+    onScaleChange,
     ...props
   } = _ref;
   const [currentIndex, setCurrentIndex] = useState(startIndex + 1);
+  const [isScaled, setScaled] = useState(false);
   function handleChange(index) {
@@ -35,2 +39,7 @@ setCurrentIndex(index + 1);
   const classes = getClasses(thumbnailImages, descriptiveContent, className);
+  function handleScale() {
+    const newScaled = !isScaled;
+    setScaled(newScaled);
+    onScaleChange?.(newScaled);
+  }
   return /*#__PURE__*/_jsx(ModalBase, {
@@ -49,10 +58,24 @@ onClose: handleClose,
           pagination: pagination
-        }), /*#__PURE__*/_jsx("button", {
-          "aria-label": "close",
+        }), showScaleButton ? /*#__PURE__*/_jsx("button", {
+          "aria-label": "scale up",
           type: "button",
           className: "fwe-btn fwe-btn-link fwe-ml-auto",
-          onClick: handleClose,
+          onClick: handleScale,
           children: /*#__PURE__*/_jsx("i", {
-            className: "fwe-icon fwe-icon-lg fwe-color-white fwe-icon-menu-close fwe-modal-image-gallery-close"
+            className: cn('fwe-icon fwe-icon-lg fwe-color-white fwe-modal-image-gallery-scale', {
+              'fwe-icon-arrows-scale-down': isScaled,
+              'fwe-icon-arrows-scale-up': !isScaled
+            })
           })
+        }) : null, /*#__PURE__*/_jsx("button", {
+          "aria-label": "close",
+          type: "button",
+          className: cn('fwe-btn fwe-btn-link', {
+            'fwe-ml-auto': !showScaleButton,
+            'fwe-ml-3': showScaleButton
+          }),
+          onClick: onClose,
+          children: /*#__PURE__*/_jsx("i", {
+            className: "fwe-icon fwe-icon-2x fwe-color-white fwe-icon-menu-close fwe-modal-image-gallery-close"
+          })
         })]
@@ -59,0 +82,0 @@ }), descriptiveContent ? /*#__PURE__*/_jsxs("div", {

lib/components/modals/imageGallery/ImageGalleryPagination.js

@@ -12,3 +12,3 @@ import { jsx as _jsx } from "react/jsx-runtime";
     children: pagination && /*#__PURE__*/_jsxs("div", {
-      className: "fwe-pagination fwe-pagination--on-dark-bg",
+      className: "fwe-pagination fwe-pagination--on-dark-bg fwe-pagination--lining-tabular-numbers",
       children: [/*#__PURE__*/_jsx("button", {
@@ -15,0 +15,0 @@ "aria-label": "previous",

node/lib/components/modals/imageGallery/ImageGallery.js

@@ -8,2 +8,3 @@ "use strict";
 var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
 var _ModalBase = _interopRequireDefault(require("../ModalBase"));
@@ -26,7 +27,10 @@ var _BaseGallery = _interopRequireDefault(require("./BaseGallery"));
     pagination,
+    showScaleButton,
     onClose,
     onSlideChanged,
+    onScaleChange,
     ...props
   } = _ref;
   const [currentIndex, setCurrentIndex] = (0, _react.useState)(startIndex + 1);
+  const [isScaled, setScaled] = (0, _react.useState)(false);
   function handleChange(index) {
@@ -41,2 +45,7 @@ setCurrentIndex(index + 1);
   const classes = (0, _ImageGallery.default)(thumbnailImages, descriptiveContent, className);
+  function handleScale() {
+    const newScaled = !isScaled;
+    setScaled(newScaled);
+    onScaleChange?.(newScaled);
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalBase.default, {
@@ -55,10 +64,24 @@ onClose: handleClose,
           pagination: pagination
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-          "aria-label": "close",
+        }), showScaleButton ? /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          "aria-label": "scale up",
           type: "button",
           className: "fwe-btn fwe-btn-link fwe-ml-auto",
-          onClick: handleClose,
+          onClick: handleScale,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-            className: "fwe-icon fwe-icon-lg fwe-color-white fwe-icon-menu-close fwe-modal-image-gallery-close"
+            className: (0, _classnames.default)('fwe-icon fwe-icon-lg fwe-color-white fwe-modal-image-gallery-scale', {
+              'fwe-icon-arrows-scale-down': isScaled,
+              'fwe-icon-arrows-scale-up': !isScaled
+            })
           })
+        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          "aria-label": "close",
+          type: "button",
+          className: (0, _classnames.default)('fwe-btn fwe-btn-link', {
+            'fwe-ml-auto': !showScaleButton,
+            'fwe-ml-3': showScaleButton
+          }),
+          onClick: onClose,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+            className: "fwe-icon fwe-icon-2x fwe-color-white fwe-icon-menu-close fwe-modal-image-gallery-close"
+          })
         })]
@@ -65,0 +88,0 @@ }), descriptiveContent ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {

node/lib/components/modals/imageGallery/ImageGalleryPagination.js

@@ -16,3 +16,3 @@ "use strict";
     children: pagination && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "fwe-pagination fwe-pagination--on-dark-bg",
+      className: "fwe-pagination fwe-pagination--on-dark-bg fwe-pagination--lining-tabular-numbers",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
@@ -19,0 +19,0 @@ "aria-label": "previous",

package.json

 {
   "name": "@festo-ui/react",
-  "version": "7.0.0-dev.357",
+  "version": "7.0.0-dev.365",
   "author": "Festo UI ([e-mail])",
@@ -5,0 +5,0 @@ "license": "apache-2.0",

No alert changes

Improved metrics

Total package byte prevSize

524111

increased by0.37%

Lines of code

13534

increased by0.36%

No dependency changes