@festo-ui/react 5.0.0-dev.148 → 5.0.0-dev.150

package/lib/components/modals/imageGallery/ImageGallery.stories.helper.js

@@ -0,0 +1,108 @@
+/* eslint-disable import/no-relative-packages */
+// @ts-ignore
+import Asset1 from '../../../../../../web-essentials/stories/assets/gallery-01.webp';
+// @ts-ignore
+import Asset2 from '../../../../../../web-essentials/stories/assets/gallery-02.webp';
+// @ts-ignore
+import Asset3 from '../../../../../../web-essentials/stories/assets/gallery-03.webp';
+// @ts-ignore
+import Asset4 from '../../../../../../web-essentials/stories/assets/gallery-04.webp';
+// @ts-ignore
+import Asset5 from '../../../../../../web-essentials/stories/assets/gallery-05.webp';
+// @ts-ignore
+import Asset6 from '../../../../../../web-essentials/stories/assets/gallery-06.webp';
+// @ts-ignore
+import Asset7 from '../../../../../../web-essentials/stories/assets/gallery-07.webp';
+// @ts-ignore
+import Asset8 from '../../../../../../web-essentials/stories/assets/gallery-08.webp';
+// @ts-ignore
+import Asset9 from '../../../../../../web-essentials/stories/assets/gallery-09.webp';
+// @ts-ignore
+import AssetTen from '../../../../../../web-essentials/stories/assets/gallery-10.webp';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const images = [{
+  src: Asset1,
+  alt: 'Asset1',
+  content: {
+    title: 'Asset 1',
+    body: 'Asset 1 description'
+  }
+}, {
+  src: Asset2,
+  alt: 'Asset2',
+  containMode: true,
+  content: {
+    title: 'Asset 2',
+    body: /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("p", {
+        children: "Asset 2 description with some html inside."
+      }), /*#__PURE__*/_jsxs("ul", {
+        children: [/*#__PURE__*/_jsx("li", {
+          children: "bullet point 1"
+        }), /*#__PURE__*/_jsx("li", {
+          children: "bullet point 2"
+        })]
+      })]
+    })
+  }
+}, {
+  src: Asset3,
+  alt: 'Asset3',
+  containMode: true,
+  content: {
+    title: 'Asset 3',
+    body: 'Asset 3 description'
+  }
+}, {
+  src: Asset4,
+  alt: 'Asset4',
+  content: {
+    title: 'Asset 4',
+    body: 'Asset 4 description'
+  }
+}, {
+  src: Asset5,
+  alt: 'Asset5',
+  content: {
+    title: 'Asset 5',
+    body: 'Asset 5 description'
+  }
+}, {
+  src: Asset6,
+  alt: 'Asset6',
+  content: {
+    title: 'Asset 6',
+    body: 'Asset 6 description'
+  }
+}, {
+  src: Asset7,
+  alt: 'Asset7',
+  content: {
+    title: 'Asset 7',
+    body: 'Asset 7 description'
+  }
+}, {
+  src: Asset8,
+  alt: 'Asset8',
+  content: {
+    title: 'Asset 8',
+    body: 'Asset 8 description'
+  }
+}, {
+  src: Asset9,
+  alt: 'Asset9',
+  content: {
+    title: 'Asset 9',
+    body: 'Asset 9 description'
+  }
+}, {
+  src: AssetTen,
+  alt: 'Asset10',
+  content: {
+    title: 'Asset 10',
+    body: 'Asset 1ß description'
+  }
+}];
+export default images;

package/lib/components/modals/imageGallery/ImageGalleryContent.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export interface ImageDescriptiveContent {
+    title: string;
+    body: React.ReactNode;
+}
+interface ImageGalleryContentProps {
+    imageContent?: ImageDescriptiveContent;
+}
+export default function ImageGalleryContent({ imageContent }: ImageGalleryContentProps): JSX.Element;
+export {};

package/lib/components/modals/imageGallery/ImageGalleryContent.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export default function ImageGalleryContent(_ref) {
+  let {
+    imageContent
+  } = _ref;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: imageContent && /*#__PURE__*/_jsxs("div", {
+      className: "fwe-image-gallery-content",
+      children: [/*#__PURE__*/_jsx("h3", {
+        children: imageContent.title
+      }), imageContent.body]
+    })
+  });
+}

package/lib/components/modals/imageGallery/ImageGalleryPagination.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface ImageGalleryPaginationProps {
+    pagination?: boolean;
+    currentIndex: number;
+    length: number;
+}
+export default function ImageGalleryPagination({ pagination, currentIndex, length, }: ImageGalleryPaginationProps): JSX.Element;
+export {};

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

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export default function ImageGalleryPagination(_ref) {
+  let {
+    pagination,
+    currentIndex,
+    length
+  } = _ref;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: pagination && /*#__PURE__*/_jsxs("div", {
+      className: "fwe-pagination fwe-pagination--on-dark-bg",
+      children: [/*#__PURE__*/_jsx("button", {
+        "aria-label": "previous",
+        type: "button",
+        className: "fwe-navigate-btn-down"
+      }), /*#__PURE__*/_jsx("span", {
+        className: "fwe-page-current",
+        children: currentIndex
+      }), /*#__PURE__*/_jsx("span", {
+        className: "fwe-page-max",
+        children: length
+      }), /*#__PURE__*/_jsx("button", {
+        "aria-label": "next",
+        type: "button",
+        className: "fwe-navigate-btn-up"
+      })]
+    })
+  });
+}

package/node/index.js

@@ -129,6 +129,12 @@ Object.defineProperty(exports, "DateRangePicker", {
     return _DateRangePicker.default;
   }
 });
+Object.defineProperty(exports, "ImageGallery", {
+  enumerable: true,
+  get: function () {
+    return _ImageGallery.default;
+  }
+});
 Object.defineProperty(exports, "LinkButton", {
   enumerable: true,
   get: function () {
@@ -353,6 +359,7 @@ var _MobileFlyoutItem = _interopRequireDefault(require("./lib/components/mobile-
 var _MobileFlyoutPage = _interopRequireDefault(require("./lib/components/mobile-flyout/mobile-flyout-page/MobileFlyoutPage"));
 var _AlertModal = _interopRequireDefault(require("./lib/components/modals/AlertModal"));
 var _ConfirmModal = _interopRequireDefault(require("./lib/components/modals/ConfirmModal"));
+var _ImageGallery = _interopRequireDefault(require("./lib/components/modals/imageGallery/ImageGallery"));
 var _Prompt = _interopRequireDefault(require("./lib/components/modals/Prompt"));
 var _Pagination = _interopRequireDefault(require("./lib/components/pagination/Pagination"));
 var _PopoverMenu = _interopRequireDefault(require("./lib/components/popovers/popover-menu/PopoverMenu"));

package/node/lib/components/modals/Modal.js

@@ -5,10 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _reactTransitionGroup = require("react-transition-group");
-var _reactOutsideClickHandler = _interopRequireDefault(require("react-outside-click-handler"));
-var _useForkRef = _interopRequireDefault(require("../../helper/useForkRef"));
+var _ModalBase = _interopRequireDefault(require("./ModalBase"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -22,62 +19,33 @@ const Modal = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     className,
     children
   } = _ref;
-  const backdropRef = (0, _react.useRef)(null);
-  const modalRef = (0, _react.useRef)(null);
-  const combinedRef = (0, _useForkRef.default)(ref, modalRef);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
-      nodeRef: backdropRef,
-      unmountOnExit: true,
-      timeout: {
-        exit: 600
-      },
-      in: isOpen,
-      classNames: "fr-modal-backdrop",
-      appear: true,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        ref: backdropRef,
-        className: "fr-modal-backdrop fwe-modal-backdrop"
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ModalBase.default, {
+    isOpen: isOpen,
+    className: className,
+    ref: ref,
+    onClose: onClose,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fwe-modal-close",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+        type: "button",
+        "aria-label": "Close",
+        className: "fwe-btn fwe-btn-link fwe-dark",
+        onClick: onClose,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+          "aria-hidden": "true",
+          className: "fwe-icon fwe-icon-close-small"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "fwe-sr-only",
+          children: "Close"
+        })]
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactOutsideClickHandler.default, {
-      onOutsideClick: () => onClose ? onClose() : undefined,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
-        ref: modalRef,
-        unmountOnExit: true,
-        classNames: "fr-modal",
-        appear: true,
-        in: isOpen,
-        timeout: {
-          exit: 600
-        },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          ref: combinedRef,
-          className: (0, _classnames.default)('fr-modal fwe-modal', className),
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "fwe-modal-close",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
-              type: "button",
-              "aria-label": "Close",
-              className: "fwe-btn fwe-btn-link fwe-dark",
-              onClick: onClose,
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-                "aria-hidden": "true",
-                className: "fwe-icon fwe-icon-close-small"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                className: "fwe-sr-only",
-                children: "Close"
-              })]
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "fwe-modal-header",
-            children: head
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "fwe-modal-body",
-            children: body
-          }), children]
-        })
-      })
-    })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fwe-modal-header",
+      children: head
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fwe-modal-body",
+      children: body
+    }), children]
   });
 });
 var _default = Modal;

package/node/lib/components/modals/ModalBase.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _reactTransitionGroup = require("react-transition-group");
+var _useForkRef = _interopRequireDefault(require("../../helper/useForkRef"));
+var _useOnClickOutside = _interopRequireDefault(require("../../helper/useOnClickOutside"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const ModalBase = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    isOpen,
+    onClose,
+    className,
+    children
+  } = _ref;
+  const backdropRef = (0, _react.useRef)(null);
+  const modalRef = (0, _react.useRef)(null);
+  const divRef = (0, _react.useRef)(null);
+  const combinedRef = (0, _useForkRef.default)(ref, modalRef);
+  const allRefs = (0, _useForkRef.default)(combinedRef, divRef);
+  const container = divRef?.current?.ownerDocument || document;
+  (0, _useOnClickOutside.default)(divRef, () => onClose?.());
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
+        nodeRef: backdropRef,
+        unmountOnExit: true,
+        timeout: {
+          exit: 600
+        },
+        in: isOpen,
+        classNames: "fr-modal-backdrop",
+        appear: true,
+        component: null,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          ref: backdropRef,
+          className: "fr-modal-backdrop fwe-modal-backdrop"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
+        ref: modalRef,
+        unmountOnExit: true,
+        classNames: "fr-modal",
+        appear: true,
+        in: isOpen,
+        timeout: {
+          exit: 600
+        },
+        component: null,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          ref: allRefs,
+          className: (0, _classnames.default)('fr-modal fwe-modal', className),
+          children: children
+        })
+      })]
+    }), container.body)
+  });
+});
+var _default = ModalBase;
+exports.default = _default;

package/node/lib/components/modals/imageGallery/BaseGallery.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = BaseGallery;
+require("swiper/css");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _swiper = require("swiper");
+var _react2 = require("swiper/react");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function BaseGallery(_ref) {
+  let {
+    images,
+    thumbnailImages,
+    onSlideChanged,
+    startIndex
+  } = _ref;
+  const [thumbsSwiper, setThumbsSwiper] = (0, _react.useState)(null);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "fwe-image-gallery-wrapper",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Swiper, {
+      initialSlide: startIndex,
+      thumbs: {
+        swiper: thumbsSwiper
+      },
+      modules: [_swiper.Thumbs, _swiper.Navigation],
+      navigation: {
+        nextEl: '.fwe-navigate-btn-up',
+        prevEl: '.fwe-navigate-btn-down'
+      },
+      zoom: true,
+      className: "gallery-swiper fwe-image-gallery",
+      spaceBetween: 0,
+      onSlideChange: slider => onSlideChanged?.(slider.activeIndex),
+      children: images.map(_ref2 => {
+        let {
+          containMode,
+          alt,
+          content,
+          ...image
+        } = _ref2;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.SwiperSlide, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "swiper-zoom-container",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+              ...image,
+              className: (0, _classnames.default)({
+                'fwe-object-fit-contain fwe-p-m': containMode
+              }, image.className),
+              alt: alt
+            })
+          })
+        }, image.src);
+      })
+    }), thumbnailImages && /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Swiper, {
+      freeMode: true,
+      slidesPerView: "auto",
+      className: "thumbs-swiper fwe-image-gallery-thumbs",
+      modules: [_swiper.Thumbs],
+      watchSlidesProgress: true,
+      onSwiper: setThumbsSwiper,
+      children: thumbnailImages.map(_ref3 => {
+        let {
+          containMode,
+          alt,
+          ...image
+        } = _ref3;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.SwiperSlide, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+            ...image,
+            className: (0, _classnames.default)({
+              'fwe-object-fit-contain fwe-p-xxxs': containMode
+            }, image.className),
+            alt: alt
+          })
+        }, image.src);
+      })
+    })]
+  });
+}

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

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const getClasses = (thumbnailImages, descriptiveContent, className) => {
+  const base = 'fwe-modal-image-gallery';
+  const thumbnail = `${base}--with-thumbnails`;
+  const container = `${base}--with-container`;
+  return (0, _classnames.default)(base, {
+    [thumbnail]: [thumbnailImages],
+    [container]: descriptiveContent
+  }, className);
+};
+var _default = getClasses;
+exports.default = _default;

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

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _ModalBase = _interopRequireDefault(require("../ModalBase"));
+var _BaseGallery = _interopRequireDefault(require("./BaseGallery"));
+var _ImageGalleryContent = _interopRequireDefault(require("./ImageGalleryContent"));
+var _ImageGalleryPagination = _interopRequireDefault(require("./ImageGalleryPagination"));
+var _ImageGallery = _interopRequireDefault(require("./ImageGallery.helper"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const ImageGallery = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    isOpen,
+    startIndex,
+    images,
+    thumbnailImages,
+    descriptiveContent,
+    children,
+    className,
+    pagination,
+    onClose,
+    onSlideChanged,
+    ...props
+  } = _ref;
+  const [currentIndex, setCurrentIndex] = (0, _react.useState)(startIndex + 1);
+  function handleChange(index) {
+    setCurrentIndex(index + 1);
+    onSlideChanged?.(index);
+  }
+  function handleClose() {
+    setCurrentIndex(startIndex + 1);
+    onClose?.();
+  }
+  const classes = (0, _ImageGallery.default)(thumbnailImages, descriptiveContent, className);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalBase.default, {
+    onClose: handleClose,
+    className: classes,
+    ...props,
+    isOpen: isOpen,
+    ref: ref,
+    children: isOpen && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fwe-image-gallery-header",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageGalleryPagination.default, {
+          currentIndex: currentIndex,
+          length: images.length,
+          pagination: pagination
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          "aria-label": "close",
+          type: "button",
+          className: "fwe-btn fwe-btn-link fwe-ml-auto",
+          onClick: handleClose,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+            className: "fwe-icon fwe-icon-lg fwe-color-white fwe-icon-menu-close fwe-modal-image-gallery-close"
+          })
+        })]
+      }), descriptiveContent ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fwe-image-gallery-container",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_BaseGallery.default, {
+          startIndex: startIndex,
+          images: images,
+          thumbnailImages: thumbnailImages,
+          onSlideChanged: handleChange,
+          children: children
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageGalleryContent.default, {
+          imageContent: images[currentIndex - 1]?.content
+        })]
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_BaseGallery.default, {
+        startIndex: startIndex,
+        images: images,
+        thumbnailImages: thumbnailImages,
+        onSlideChanged: handleChange,
+        children: children
+      })]
+    })
+  });
+});
+var _default = ImageGallery;
+exports.default = _default;