@festo-ui/react 7.2.0-dev.433 → 7.2.0-dev.436

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/index.css +1 -1
  2. package/index.d.ts +5 -1
  3. package/index.js +5 -1
  4. package/lib/components/modals/{imageGallery → image-gallery}/ImageGallery.d.ts +7 -5
  5. package/lib/components/modals/{imageGallery → image-gallery}/ImageGallery.js +28 -36
  6. package/lib/components/modals/{imageGallery → image-gallery}/ImageGallery.stories.helper.d.ts +1 -1
  7. package/lib/components/modals/image-gallery/ImageGalleryContext.d.ts +11 -0
  8. package/lib/components/modals/image-gallery/ImageGalleryContext.js +4 -0
  9. package/lib/components/modals/image-gallery/ImageGallerySwiper.d.ts +9 -0
  10. package/lib/components/modals/image-gallery/ImageGallerySwiper.js +32 -0
  11. package/lib/components/modals/image-gallery/ImageGalleryThumbsSwiper.d.ts +6 -0
  12. package/lib/components/modals/image-gallery/ImageGalleryThumbsSwiper.js +25 -0
  13. package/lib/components/modals/image-gallery/image-gallery-item/ImageGalleryItem.d.ts +12 -0
  14. package/lib/components/modals/image-gallery/image-gallery-item/ImageGalleryItem.js +28 -0
  15. package/lib/components/modals/{imageGallery → image-gallery/internal}/BaseGallery.d.ts +4 -4
  16. package/lib/components/modals/image-gallery/internal/BaseGallery.js +67 -0
  17. package/lib/components/modals/image-gallery/internal/CloseButton.d.ts +7 -0
  18. package/lib/components/modals/image-gallery/internal/CloseButton.js +17 -0
  19. package/lib/components/modals/image-gallery/internal/ImageGalleryContainer.d.ts +7 -0
  20. package/lib/components/modals/image-gallery/internal/ImageGalleryContainer.js +14 -0
  21. package/lib/components/modals/image-gallery/internal/ImageGalleryPagination.d.ts +7 -0
  22. package/lib/components/modals/{imageGallery → image-gallery/internal}/ImageGalleryPagination.js +1 -2
  23. package/lib/components/modals/image-gallery/internal/ScaleButton.d.ts +6 -0
  24. package/lib/components/modals/image-gallery/internal/ScaleButton.js +19 -0
  25. package/node/index.js +29 -1
  26. package/node/lib/components/modals/{imageGallery → image-gallery}/ImageGallery.js +28 -36
  27. package/node/lib/components/modals/image-gallery/ImageGalleryContext.js +10 -0
  28. package/node/lib/components/modals/image-gallery/ImageGallerySwiper.js +39 -0
  29. package/node/lib/components/modals/image-gallery/ImageGalleryThumbsSwiper.js +33 -0
  30. package/node/lib/components/modals/image-gallery/image-gallery-item/ImageGalleryItem.js +35 -0
  31. package/node/lib/components/modals/image-gallery/internal/BaseGallery.js +72 -0
  32. package/node/lib/components/modals/image-gallery/internal/CloseButton.js +24 -0
  33. package/node/lib/components/modals/image-gallery/internal/ImageGalleryContainer.js +19 -0
  34. package/node/lib/components/modals/{imageGallery → image-gallery/internal}/ImageGalleryPagination.js +1 -2
  35. package/node/lib/components/modals/image-gallery/internal/ScaleButton.js +25 -0
  36. package/package.json +1 -1
  37. package/lib/components/modals/imageGallery/BaseGallery.js +0 -76
  38. package/lib/components/modals/imageGallery/ImageGalleryPagination.d.ts +0 -8
  39. package/lib/components/modals/imageGallery/useClasses.d.ts +0 -0
  40. package/lib/components/modals/imageGallery/useClasses.js +0 -0
  41. package/node/lib/components/modals/imageGallery/BaseGallery.js +0 -82
  42. package/node/lib/components/modals/imageGallery/useClasses.js +0 -1
  43. /package/lib/components/modals/{imageGallery → image-gallery}/ImageGallery.helper.d.ts +0 -0
  44. /package/lib/components/modals/{imageGallery → image-gallery}/ImageGallery.helper.js +0 -0
  45. /package/lib/components/modals/{imageGallery → image-gallery}/ImageGallery.stories.helper.js +0 -0
  46. /package/lib/components/modals/{imageGallery → image-gallery}/ImageGalleryContent.d.ts +0 -0
  47. /package/lib/components/modals/{imageGallery → image-gallery}/ImageGalleryContent.js +0 -0
  48. /package/node/lib/components/modals/{imageGallery → image-gallery}/ImageGallery.helper.js +0 -0
  49. /package/node/lib/components/modals/{imageGallery → image-gallery}/ImageGallery.stories.helper.js +0 -0
  50. /package/node/lib/components/modals/{imageGallery → image-gallery}/ImageGalleryContent.js +0 -0
@@ -3,12 +3,11 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
3
3
  import { Fragment as _Fragment } from "react/jsx-runtime";
4
4
  export default function ImageGalleryPagination(_ref) {
5
5
  let {
6
- pagination,
7
6
  currentIndex,
8
7
  length
9
8
  } = _ref;
10
9
  return /*#__PURE__*/_jsx(_Fragment, {
11
- children: pagination && /*#__PURE__*/_jsxs("div", {
10
+ children: length && /*#__PURE__*/_jsxs("div", {
12
11
  className: "fwe-pagination fwe-pagination--on-dark-bg fwe-pagination--lining-tabular-numbers",
13
12
  children: [/*#__PURE__*/_jsx("button", {
14
13
  "aria-label": "previous",
@@ -0,0 +1,6 @@
1
+ /// <reference types="react" />
2
+ interface ScaleButtonProps {
3
+ onScaleChange?: (value: boolean) => void;
4
+ }
5
+ export default function ScaleButton({ onScaleChange }: ScaleButtonProps): JSX.Element;
6
+ export {};
@@ -0,0 +1,19 @@
1
+ import { useState } from 'react';
2
+ import { jsx as _jsx } from "react/jsx-runtime";
3
+ export default function ScaleButton(_ref) {
4
+ let {
5
+ onScaleChange
6
+ } = _ref;
7
+ const [isScaled, setScaled] = useState(false);
8
+ function handleScale() {
9
+ const newScaled = !isScaled;
10
+ setScaled(newScaled);
11
+ onScaleChange?.(newScaled);
12
+ }
13
+ return /*#__PURE__*/_jsx("button", {
14
+ type: "button",
15
+ "aria-label": "scale up",
16
+ className: "fwe-image-gallery-scale-btn fwe-ml-auto",
17
+ onClick: handleScale
18
+ });
19
+ }
package/node/index.js CHANGED
@@ -135,6 +135,30 @@ Object.defineProperty(exports, "ImageGallery", {
135
135
  return _ImageGallery.default;
136
136
  }
137
137
  });
138
+ Object.defineProperty(exports, "ImageGalleryContent", {
139
+ enumerable: true,
140
+ get: function () {
141
+ return _ImageGalleryContent.default;
142
+ }
143
+ });
144
+ Object.defineProperty(exports, "ImageGalleryItem", {
145
+ enumerable: true,
146
+ get: function () {
147
+ return _ImageGalleryItem.default;
148
+ }
149
+ });
150
+ Object.defineProperty(exports, "ImageGallerySwiper", {
151
+ enumerable: true,
152
+ get: function () {
153
+ return _ImageGallerySwiper.default;
154
+ }
155
+ });
156
+ Object.defineProperty(exports, "ImageGalleryThumbsSwiper", {
157
+ enumerable: true,
158
+ get: function () {
159
+ return _ImageGalleryThumbsSwiper.default;
160
+ }
161
+ });
138
162
  Object.defineProperty(exports, "LinkButton", {
139
163
  enumerable: true,
140
164
  get: function () {
@@ -371,7 +395,11 @@ var _MobileFlyoutItem = _interopRequireDefault(require("./lib/components/mobile-
371
395
  var _MobileFlyoutPage = _interopRequireDefault(require("./lib/components/mobile-flyout/mobile-flyout-page/MobileFlyoutPage"));
372
396
  var _AlertModal = _interopRequireDefault(require("./lib/components/modals/AlertModal"));
373
397
  var _ConfirmModal = _interopRequireDefault(require("./lib/components/modals/ConfirmModal"));
374
- var _ImageGallery = _interopRequireDefault(require("./lib/components/modals/imageGallery/ImageGallery"));
398
+ var _ImageGallery = _interopRequireDefault(require("./lib/components/modals/image-gallery/ImageGallery"));
399
+ var _ImageGalleryContent = _interopRequireDefault(require("./lib/components/modals/image-gallery/ImageGalleryContent"));
400
+ var _ImageGallerySwiper = _interopRequireDefault(require("./lib/components/modals/image-gallery/ImageGallerySwiper"));
401
+ var _ImageGalleryThumbsSwiper = _interopRequireDefault(require("./lib/components/modals/image-gallery/ImageGalleryThumbsSwiper"));
402
+ var _ImageGalleryItem = _interopRequireDefault(require("./lib/components/modals/image-gallery/image-gallery-item/ImageGalleryItem"));
375
403
  var _Prompt = _interopRequireDefault(require("./lib/components/modals/Prompt"));
376
404
  var _Pagination = _interopRequireDefault(require("./lib/components/pagination/Pagination"));
377
405
  var _PopoverMenu = _interopRequireDefault(require("./lib/components/popovers/popover-menu/PopoverMenu"));
@@ -5,14 +5,25 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.default = exports.ImageGallery = void 0;
7
7
  var _react = require("react");
8
- var _classnames = _interopRequireDefault(require("classnames"));
9
8
  var _ModalBase = _interopRequireDefault(require("../ModalBase"));
10
- var _BaseGallery = _interopRequireDefault(require("./BaseGallery"));
9
+ var _BaseGallery = _interopRequireDefault(require("./internal/BaseGallery"));
11
10
  var _ImageGalleryContent = _interopRequireDefault(require("./ImageGalleryContent"));
12
- var _ImageGalleryPagination = _interopRequireDefault(require("./ImageGalleryPagination"));
11
+ var _ImageGalleryPagination = _interopRequireDefault(require("./internal/ImageGalleryPagination"));
13
12
  var _ImageGallery = _interopRequireDefault(require("./ImageGallery.helper"));
13
+ var _ImageGalleryContainer = _interopRequireDefault(require("./internal/ImageGalleryContainer"));
14
+ var _CloseButton = _interopRequireDefault(require("./internal/CloseButton"));
15
+ var _ScaleButton = _interopRequireDefault(require("./internal/ScaleButton"));
14
16
  var _jsxRuntime = require("react/jsx-runtime");
15
17
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
18
+ function getLength(pagination, images) {
19
+ let length = 0;
20
+ if (typeof pagination === 'number') {
21
+ length = pagination;
22
+ } else if (pagination === true && images?.length) {
23
+ length = images.length;
24
+ }
25
+ return length;
26
+ }
16
27
  const ImageGallery = exports.ImageGallery = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
17
28
  let {
18
29
  isOpen,
@@ -30,7 +41,6 @@ const ImageGallery = exports.ImageGallery = /*#__PURE__*/(0, _react.forwardRef)(
30
41
  ...props
31
42
  } = _ref;
32
43
  const [currentIndex, setCurrentIndex] = (0, _react.useState)(startIndex + 1);
33
- const [isScaled, setScaled] = (0, _react.useState)(false);
34
44
  function handleChange(index) {
35
45
  setCurrentIndex(index + 1);
36
46
  onSlideChanged?.(index);
@@ -39,12 +49,9 @@ const ImageGallery = exports.ImageGallery = /*#__PURE__*/(0, _react.forwardRef)(
39
49
  setCurrentIndex(startIndex + 1);
40
50
  onClose?.();
41
51
  }
42
- const classes = (0, _ImageGallery.default)(thumbnailImages, descriptiveContent, className);
43
- function handleScale() {
44
- const newScaled = !isScaled;
45
- setScaled(newScaled);
46
- onScaleChange?.(newScaled);
47
- }
52
+ const hasDescriptiveContent = Boolean(descriptiveContent);
53
+ const classes = (0, _ImageGallery.default)(thumbnailImages, hasDescriptiveContent, className);
54
+ const length = getLength(pagination, images);
48
55
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalBase.default, {
49
56
  onClose: handleClose,
50
57
  className: classes,
@@ -56,39 +63,24 @@ const ImageGallery = exports.ImageGallery = /*#__PURE__*/(0, _react.forwardRef)(
56
63
  className: "fwe-image-gallery-header",
57
64
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageGalleryPagination.default, {
58
65
  currentIndex: currentIndex,
59
- length: images.length,
60
- pagination: pagination
61
- }), showScaleButton ? /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
62
- type: "button",
63
- "aria-label": "scale up",
64
- className: "fwe-image-gallery-scale-btn fwe-ml-auto",
65
- onClick: handleScale
66
- }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
67
- type: "button",
68
- "aria-label": "close",
69
- className: (0, _classnames.default)('fwe-image-gallery-close-btn', {
70
- 'fwe-ml-auto': !showScaleButton,
71
- 'fwe-ml-3': showScaleButton
72
- }),
73
- onClick: onClose
66
+ length: length
67
+ }), showScaleButton ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScaleButton.default, {
68
+ onScaleChange: onScaleChange
69
+ }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_CloseButton.default, {
70
+ showScaleButton: showScaleButton,
71
+ onClose: onClose
74
72
  })]
75
- }), descriptiveContent ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
76
- className: "fwe-image-gallery-container",
73
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ImageGalleryContainer.default, {
74
+ descriptiveContent: hasDescriptiveContent,
77
75
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_BaseGallery.default, {
78
76
  startIndex: startIndex,
79
77
  images: images,
80
78
  thumbnailImages: thumbnailImages,
81
79
  onSlideChanged: handleChange,
82
80
  children: children
83
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageGalleryContent.default, {
84
- imageContent: images[currentIndex - 1]?.content
85
- })]
86
- }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_BaseGallery.default, {
87
- startIndex: startIndex,
88
- images: images,
89
- thumbnailImages: thumbnailImages,
90
- onSlideChanged: handleChange,
91
- children: children
81
+ }), images && descriptiveContent === true ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageGalleryContent.default, {
82
+ imageContent: images?.[currentIndex - 1]?.content
83
+ }) : null, typeof descriptiveContent === 'function' ? descriptiveContent?.(currentIndex - 1) : null]
92
84
  })]
93
85
  })
94
86
  });
@@ -0,0 +1,10 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = exports.SwiperContext = void 0;
7
+ var _react = require("react");
8
+ const ImageGalleryContext = /*#__PURE__*/(0, _react.createContext)({});
9
+ const SwiperContext = exports.SwiperContext = /*#__PURE__*/(0, _react.createContext)("gallery");
10
+ var _default = exports.default = ImageGalleryContext;
@@ -0,0 +1,39 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = ImageGallerySwiper;
7
+ var _react = require("swiper/react");
8
+ var _swiper = require("swiper");
9
+ var _react2 = require("react");
10
+ var _ImageGalleryContext = _interopRequireDefault(require("./ImageGalleryContext"));
11
+ var _jsxRuntime = require("react/jsx-runtime");
12
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
+ function ImageGallerySwiper(_ref) {
14
+ let {
15
+ children
16
+ } = _ref;
17
+ const {
18
+ thumbsSwiper,
19
+ startIndex,
20
+ onSlideChanged
21
+ } = (0, _react2.useContext)(_ImageGalleryContext.default);
22
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Swiper, {
23
+ initialSlide: startIndex,
24
+ thumbs: {
25
+ swiper: thumbsSwiper
26
+ },
27
+ modules: [_swiper.Thumbs, _swiper.Navigation],
28
+ navigation: {
29
+ nextEl: '.fwe-navigate-btn-up',
30
+ prevEl: '.fwe-navigate-btn-down'
31
+ },
32
+ zoom: true,
33
+ className: "gallery-swiper fwe-image-gallery",
34
+ spaceBetween: 0,
35
+ onSlideChange: slider => onSlideChanged?.(slider.activeIndex),
36
+ children: children
37
+ });
38
+ }
39
+ ImageGallerySwiper.displayName = 'Swiper';
@@ -0,0 +1,33 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = ImageGalleryThumbsSwiper;
7
+ var _react = require("react");
8
+ var _swiper = require("swiper");
9
+ var _react2 = require("swiper/react");
10
+ var _ImageGalleryContext = _interopRequireWildcard(require("./ImageGalleryContext"));
11
+ var _jsxRuntime = require("react/jsx-runtime");
12
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
13
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
14
+ function ImageGalleryThumbsSwiper(_ref) {
15
+ let {
16
+ children
17
+ } = _ref;
18
+ const {
19
+ setThumbsSwiper
20
+ } = (0, _react.useContext)(_ImageGalleryContext.default);
21
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageGalleryContext.SwiperContext.Provider, {
22
+ value: "thumbs",
23
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Swiper, {
24
+ freeMode: true,
25
+ slidesPerView: "auto",
26
+ className: "thumbs-swiper fwe-image-gallery-thumbs",
27
+ modules: [_swiper.Thumbs],
28
+ watchSlidesProgress: true,
29
+ onSwiper: setThumbsSwiper,
30
+ children: children
31
+ })
32
+ });
33
+ }
@@ -0,0 +1,35 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = ImageGalleryItem;
7
+ var _classnames = _interopRequireDefault(require("classnames"));
8
+ var _react = require("swiper/react");
9
+ var _react2 = require("react");
10
+ var _ImageGalleryContext = require("../ImageGalleryContext");
11
+ var _jsxRuntime = require("react/jsx-runtime");
12
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
+ function ImageGalleryItem(_ref) {
14
+ let {
15
+ children,
16
+ containMode,
17
+ className,
18
+ ...props
19
+ } = _ref;
20
+ const swiperType = (0, _react2.useContext)(_ImageGalleryContext.SwiperContext);
21
+ const isThumbsSwiper = swiperType === 'thumbs';
22
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.SwiperSlide, {
23
+ ...props,
24
+ className: (0, _classnames.default)(className, {
25
+ 'fr-image-gallery-item--contain': containMode && isThumbsSwiper
26
+ }),
27
+ children: isThumbsSwiper ? children : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
28
+ className: (0, _classnames.default)('swiper-zoom-container', {
29
+ 'fr-image-gallery-item--contain': containMode
30
+ }),
31
+ children: children
32
+ })
33
+ });
34
+ }
35
+ ImageGalleryItem.displayName = 'SwiperSlide';
@@ -0,0 +1,72 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = BaseGallery;
7
+ var _react = require("react");
8
+ var _ImageGalleryContext = _interopRequireDefault(require("../ImageGalleryContext"));
9
+ var _ImageGalleryItem = _interopRequireDefault(require("../image-gallery-item/ImageGalleryItem"));
10
+ var _ImageGalleryThumbsSwiper = _interopRequireDefault(require("../ImageGalleryThumbsSwiper"));
11
+ var _ImageGallerySwiper = _interopRequireDefault(require("../ImageGallerySwiper"));
12
+ var _jsxRuntime = require("react/jsx-runtime");
13
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14
+ function BaseGallery(_ref) {
15
+ let {
16
+ images,
17
+ thumbnailImages,
18
+ onSlideChanged,
19
+ startIndex,
20
+ children
21
+ } = _ref;
22
+ const [thumbsSwiper, setThumbsSwiper] = (0, _react.useState)(null);
23
+ const contextValue = (0, _react.useMemo)(() => ({
24
+ thumbsSwiper,
25
+ setThumbsSwiper,
26
+ onSlideChanged,
27
+ startIndex
28
+ }), [thumbsSwiper, setThumbsSwiper, onSlideChanged, startIndex]);
29
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageGalleryContext.default.Provider, {
30
+ value: contextValue,
31
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
32
+ className: "fwe-image-gallery-wrapper",
33
+ children: children || /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
34
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageGallerySwiper.default, {
35
+ children: images?.map(_ref2 => {
36
+ let {
37
+ containMode,
38
+ alt,
39
+ content,
40
+ ...image
41
+ } = _ref2;
42
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageGalleryItem.default, {
43
+ containMode: containMode,
44
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
45
+ ...image,
46
+ className: image.className,
47
+ alt: alt
48
+ })
49
+ }, image.src);
50
+ })
51
+ }), thumbnailImages && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageGalleryThumbsSwiper.default, {
52
+ children: thumbnailImages.map(_ref3 => {
53
+ let {
54
+ containMode,
55
+ alt,
56
+ content,
57
+ ...image
58
+ } = _ref3;
59
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageGalleryItem.default, {
60
+ containMode: containMode,
61
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
62
+ ...image,
63
+ className: image.className,
64
+ alt: alt
65
+ })
66
+ }, image.src);
67
+ })
68
+ })]
69
+ })
70
+ })
71
+ });
72
+ }
@@ -0,0 +1,24 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = CloseButton;
7
+ var _classnames = _interopRequireDefault(require("classnames"));
8
+ var _jsxRuntime = require("react/jsx-runtime");
9
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
10
+ function CloseButton(_ref) {
11
+ let {
12
+ onClose,
13
+ showScaleButton
14
+ } = _ref;
15
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
16
+ type: "button",
17
+ "aria-label": "close",
18
+ className: (0, _classnames.default)('fwe-image-gallery-close-btn', {
19
+ 'fwe-ml-auto': !showScaleButton,
20
+ 'fwe-ml-3': showScaleButton
21
+ }),
22
+ onClick: onClose
23
+ });
24
+ }
@@ -0,0 +1,19 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = ImageGalleryContainer;
7
+ var _jsxRuntime = require("react/jsx-runtime");
8
+ function ImageGalleryContainer(_ref) {
9
+ let {
10
+ children,
11
+ descriptiveContent
12
+ } = _ref;
13
+ return descriptiveContent ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
14
+ className: "fwe-image-gallery-container",
15
+ children: children
16
+ }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
17
+ children: children
18
+ });
19
+ }
@@ -7,12 +7,11 @@ exports.default = ImageGalleryPagination;
7
7
  var _jsxRuntime = require("react/jsx-runtime");
8
8
  function ImageGalleryPagination(_ref) {
9
9
  let {
10
- pagination,
11
10
  currentIndex,
12
11
  length
13
12
  } = _ref;
14
13
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
15
- children: pagination && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
14
+ children: length && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
16
15
  className: "fwe-pagination fwe-pagination--on-dark-bg fwe-pagination--lining-tabular-numbers",
17
16
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
18
17
  "aria-label": "previous",
@@ -0,0 +1,25 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = ScaleButton;
7
+ var _react = require("react");
8
+ var _jsxRuntime = require("react/jsx-runtime");
9
+ function ScaleButton(_ref) {
10
+ let {
11
+ onScaleChange
12
+ } = _ref;
13
+ const [isScaled, setScaled] = (0, _react.useState)(false);
14
+ function handleScale() {
15
+ const newScaled = !isScaled;
16
+ setScaled(newScaled);
17
+ onScaleChange?.(newScaled);
18
+ }
19
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
20
+ type: "button",
21
+ "aria-label": "scale up",
22
+ className: "fwe-image-gallery-scale-btn fwe-ml-auto",
23
+ onClick: handleScale
24
+ });
25
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@festo-ui/react",
3
- "version": "7.2.0-dev.433",
3
+ "version": "7.2.0-dev.436",
4
4
  "author": "Festo UI (styleguide@festo.com)",
5
5
  "license": "apache-2.0",
6
6
  "exports": {
@@ -1,76 +0,0 @@
1
- import cn from 'classnames';
2
- import { useState } from 'react';
3
- import { Navigation, Thumbs } from 'swiper';
4
- import { Swiper, SwiperSlide } from 'swiper/react';
5
- import { jsx as _jsx } from "react/jsx-runtime";
6
- import { jsxs as _jsxs } from "react/jsx-runtime";
7
- export default function BaseGallery(_ref) {
8
- let {
9
- images,
10
- thumbnailImages,
11
- onSlideChanged,
12
- startIndex
13
- } = _ref;
14
- const [thumbsSwiper, setThumbsSwiper] = useState(null);
15
- return /*#__PURE__*/_jsxs("div", {
16
- className: "fwe-image-gallery-wrapper",
17
- children: [/*#__PURE__*/_jsx(Swiper, {
18
- initialSlide: startIndex,
19
- thumbs: {
20
- swiper: thumbsSwiper
21
- },
22
- modules: [Thumbs, Navigation],
23
- navigation: {
24
- nextEl: '.fwe-navigate-btn-up',
25
- prevEl: '.fwe-navigate-btn-down'
26
- },
27
- zoom: true,
28
- className: "gallery-swiper fwe-image-gallery",
29
- spaceBetween: 0,
30
- onSlideChange: slider => onSlideChanged?.(slider.activeIndex),
31
- children: images.map(_ref2 => {
32
- let {
33
- containMode,
34
- alt,
35
- content,
36
- ...image
37
- } = _ref2;
38
- return /*#__PURE__*/_jsx(SwiperSlide, {
39
- children: /*#__PURE__*/_jsx("div", {
40
- className: "swiper-zoom-container",
41
- children: /*#__PURE__*/_jsx("img", {
42
- ...image,
43
- className: cn({
44
- 'fwe-object-fit-contain fwe-p-m': containMode
45
- }, image.className),
46
- alt: alt
47
- })
48
- })
49
- }, image.src);
50
- })
51
- }), thumbnailImages && /*#__PURE__*/_jsx(Swiper, {
52
- freeMode: true,
53
- slidesPerView: "auto",
54
- className: "thumbs-swiper fwe-image-gallery-thumbs",
55
- modules: [Thumbs],
56
- watchSlidesProgress: true,
57
- onSwiper: setThumbsSwiper,
58
- children: thumbnailImages.map(_ref3 => {
59
- let {
60
- containMode,
61
- alt,
62
- ...image
63
- } = _ref3;
64
- return /*#__PURE__*/_jsx(SwiperSlide, {
65
- children: /*#__PURE__*/_jsx("img", {
66
- ...image,
67
- className: cn({
68
- 'fwe-object-fit-contain fwe-p-xxxs': containMode
69
- }, image.className),
70
- alt: alt
71
- })
72
- }, image.src);
73
- })
74
- })]
75
- });
76
- }
@@ -1,8 +0,0 @@
1
- /// <reference types="react" />
2
- interface ImageGalleryPaginationProps {
3
- pagination?: boolean;
4
- currentIndex: number;
5
- length: number;
6
- }
7
- export default function ImageGalleryPagination({ pagination, currentIndex, length, }: ImageGalleryPaginationProps): JSX.Element;
8
- export {};
File without changes
@@ -1,82 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = BaseGallery;
7
- var _classnames = _interopRequireDefault(require("classnames"));
8
- var _react = require("react");
9
- var _swiper = require("swiper");
10
- var _react2 = require("swiper/react");
11
- var _jsxRuntime = require("react/jsx-runtime");
12
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
- function BaseGallery(_ref) {
14
- let {
15
- images,
16
- thumbnailImages,
17
- onSlideChanged,
18
- startIndex
19
- } = _ref;
20
- const [thumbsSwiper, setThumbsSwiper] = (0, _react.useState)(null);
21
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
22
- className: "fwe-image-gallery-wrapper",
23
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Swiper, {
24
- initialSlide: startIndex,
25
- thumbs: {
26
- swiper: thumbsSwiper
27
- },
28
- modules: [_swiper.Thumbs, _swiper.Navigation],
29
- navigation: {
30
- nextEl: '.fwe-navigate-btn-up',
31
- prevEl: '.fwe-navigate-btn-down'
32
- },
33
- zoom: true,
34
- className: "gallery-swiper fwe-image-gallery",
35
- spaceBetween: 0,
36
- onSlideChange: slider => onSlideChanged?.(slider.activeIndex),
37
- children: images.map(_ref2 => {
38
- let {
39
- containMode,
40
- alt,
41
- content,
42
- ...image
43
- } = _ref2;
44
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.SwiperSlide, {
45
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
46
- className: "swiper-zoom-container",
47
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
48
- ...image,
49
- className: (0, _classnames.default)({
50
- 'fwe-object-fit-contain fwe-p-m': containMode
51
- }, image.className),
52
- alt: alt
53
- })
54
- })
55
- }, image.src);
56
- })
57
- }), thumbnailImages && /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Swiper, {
58
- freeMode: true,
59
- slidesPerView: "auto",
60
- className: "thumbs-swiper fwe-image-gallery-thumbs",
61
- modules: [_swiper.Thumbs],
62
- watchSlidesProgress: true,
63
- onSwiper: setThumbsSwiper,
64
- children: thumbnailImages.map(_ref3 => {
65
- let {
66
- containMode,
67
- alt,
68
- ...image
69
- } = _ref3;
70
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.SwiperSlide, {
71
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
72
- ...image,
73
- className: (0, _classnames.default)({
74
- 'fwe-object-fit-contain fwe-p-xxxs': containMode
75
- }, image.className),
76
- alt: alt
77
- })
78
- }, image.src);
79
- })
80
- })]
81
- });
82
- }
@@ -1 +0,0 @@
1
- "use strict";