@crystaldesign/product-gallery 24.2.2-beta.2 → 24.2.2-rc.1

package/build/esm/index.js

@@ -1,5 +1,8 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import { debounce } from 'lodash';
 import classNames from 'classnames';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { useState, useEffect, useRef, useCallback } from 'react';
@@ -118,7 +121,6 @@ styleInject(css_248z);
 function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Gallery = function Gallery(_ref) {
-  var _scroller$current;
   var parameters = _ref.parameters,
     _ref$filterObject = _ref.filterObject,
     filterObject = _ref$filterObject === void 0 ? [] : _ref$filterObject,
@@ -141,17 +143,37 @@ var Gallery = function Gallery(_ref) {
     height = _useDivaCore$state$di.height,
     isPortrait = _useDivaCore$state$di.isPortrait;
   var portalHeaderHeight = HeaderElement === null || HeaderElement === void 0 ? void 0 : HeaderElement.getBoundingClientRect().height;
+  var productState = useProductState(parameters);
   var filterHidden = filterObject.length === 0;
   var headerHidden = Object.keys(imageContents !== null && imageContents !== void 0 ? imageContents : {}).length === 0;
   var isMobileLandscape = isMobile && !isPortrait && height < 500;
   var scroller = useRef(null);
-  var productState = useProductState({
-    parameters: parameters,
-    sort: '{-created}',
-    noFilter: filterHidden,
-    forcedFilter: 'livingArea',
-    scroller: (_scroller$current = scroller.current) !== null && _scroller$current !== void 0 ? _scroller$current : undefined
-  });
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    scroll = _useState4[0],
+    setScroll = _useState4[1];
+  var debouncedScroll = useCallback(debounce( /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(e) {
+      var _e$target$getBounding, _e$target;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            setScroll({
+              scrollTop: e.target.scrollTop,
+              scrollHeight: e.target.scrollHeight,
+              clientHeight: e.target.clientHeight,
+              clientOffset: (_e$target$getBounding = (_e$target = e.target).getBoundingClientRect) === null || _e$target$getBounding === void 0 ? void 0 : _e$target$getBounding.call(_e$target).y
+            });
+          case 1:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), 50), []);
   var onClick = function onClick(product) {
     if (product._id !== (parameters === null || parameters === void 0 ? void 0 : parameters.id)) {
       openComponent({
@@ -176,7 +198,7 @@ var Gallery = function Gallery(_ref) {
     };
   }, []);
   useEffect(function () {
-    productState.resetPage();
+    productState.groups[1]([]);
   }, [parameters === null || parameters === void 0 ? void 0 : parameters.update]);
   var currentlyMobile = isMobile && isPortrait || height < 500;
   var isLandscapeMobile = currentlyMobile && !isPortrait && height < 500;
@@ -225,6 +247,7 @@ var Gallery = function Gallery(_ref) {
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx("div", {
       className: scrollerClass,
+      onScroll: debouncedScroll,
       ref: scroller,
       children: /*#__PURE__*/jsx("div", {
         className: maxWidth,
@@ -238,7 +261,7 @@ var Gallery = function Gallery(_ref) {
             }), currentlyMobile && ProductHeaderJSX]
           }, productState.categoryKey[0]), /*#__PURE__*/jsxs("div", {
             className: rightSide,
-            children: [!isLandscapeMobile && !headerHidden && imageContentBoxSettings && /*#__PURE__*/jsx(ImageSlider, {
+            children: [!isLandscapeMobile && !headerHidden && /*#__PURE__*/jsx(ImageSlider, {
               productState: productState,
               className: classNames(topImage),
               currentlyMobile: currentlyMobile,
@@ -248,9 +271,13 @@ var Gallery = function Gallery(_ref) {
             }), /*#__PURE__*/jsxs("div", {
               className: products,
               children: [!currentlyMobile && !filterHidden && ProductHeaderJSX, /*#__PURE__*/jsx(ProductsComponent, {
+                noFilter: filterHidden,
                 curProductId: curProductId,
                 onClickFunction: onClick,
-                productState: productState
+                productState: productState,
+                scroller: scroller,
+                scrollerState: [scroll, setScroll],
+                forcedFilter: "livingArea"
               })]
             })]
           })]
@@ -271,16 +298,15 @@ var Gallery = function Gallery(_ref) {
               switchCloseIconToLeftInPortrait: !!(pdpSettings !== null && pdpSettings !== void 0 && pdpSettings.marginLeftHeader),
               hideCloseIconInPortrait: currentlyMobile && !(pdpSettings !== null && pdpSettings !== void 0 && pdpSettings.marginLeftHeader),
               hideCloseIcon: isMobileLandscape,
-              content: _objectSpread$1(_objectSpread$1({
-                cta1Params: {
-                  initMode: 'OPENCONFIGTABGROUP'
-                }
-              }, pdpSettings), {}, {
+              content: _objectSpread$1(_objectSpread$1({}, pdpSettings), {}, {
                 type: 'PDP',
                 productId: curProductId,
                 groupVariantsByField: ['dc_color', 'dc_mainColor'],
                 breadcrumb: true,
-                setCategoryFilter: setCategoryFilter
+                setCategoryFilter: setCategoryFilter,
+                cta1Params: {
+                  initMode: 'OPENCONFIGTABGROUP'
+                }
               })
             }
           }

package/build/types/product-gallery/src/index.d.ts

@@ -10,7 +10,7 @@ interface Props {
 }
 interface Configuration {
     filterObject: TextProps[];
-    imageContentBoxSettings?: SliderContainerProps;
+    imageContentBoxSettings: SliderContainerProps;
     imageContents: {
         [filterKey: string]: {
             [value: string]: {

package/build/types/product-gallery/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AACnF,OAAO,EAAE,mBAAmB,EAAkB,MAAM,0BAA0B,CAAC;AAC/E,OAAO,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAE9D,UAAU,KAAK;IACb,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,aAAa,CAAC;CACzB;AAED,UAAU,aAAa;IACrB,YAAY,EAAE,SAAS,EAAE,CAAC;IAC1B,uBAAuB,CAAC,EAAE,oBAAoB,CAAC;IAC/C,aAAa,EAAE;QAAE,CAAC,SAAS,EAAE,MAAM,GAAG;YAAE,CAAC,KAAK,EAAE,MAAM,GAAG;gBAAE,QAAQ,EAAE,eAAe,EAAE,CAAA;aAAE,CAAA;SAAE,CAAA;KAAE,EAAE,CAAC;IAC/F,mBAAmB,CAAC,EAAE;QAAE,CAAC,SAAS,EAAE,MAAM,GAAG;YAAE,CAAC,KAAK,EAAE,MAAM,GAAG;gBAAE,QAAQ,EAAE,eAAe,EAAE,CAAA;aAAE,CAAA;SAAE,CAAA;KAAE,EAAE,CAAC;IACtG,WAAW,CAAC,EAAE;QAAE,mBAAmB,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;CACjD;AAMD,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAE5C,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,mBAAmB,CAAC,aAAa,CAGtD,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AACnF,OAAO,EAAE,mBAAmB,EAAkB,MAAM,0BAA0B,CAAC;AAC/E,OAAO,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAE9D,UAAU,KAAK;IACb,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,aAAa,CAAC;CACzB;AAED,UAAU,aAAa;IACrB,YAAY,EAAE,SAAS,EAAE,CAAC;IAC1B,uBAAuB,EAAE,oBAAoB,CAAC;IAC9C,aAAa,EAAE;QAAE,CAAC,SAAS,EAAE,MAAM,GAAG;YAAE,CAAC,KAAK,EAAE,MAAM,GAAG;gBAAE,QAAQ,EAAE,eAAe,EAAE,CAAA;aAAE,CAAA;SAAE,CAAA;KAAE,EAAE,CAAC;IAC/F,mBAAmB,CAAC,EAAE;QAAE,CAAC,SAAS,EAAE,MAAM,GAAG;YAAE,CAAC,KAAK,EAAE,MAAM,GAAG;gBAAE,QAAQ,EAAE,eAAe,EAAE,CAAA;aAAE,CAAA;SAAE,CAAA;KAAE,EAAE,CAAC;IACtG,WAAW,CAAC,EAAE;QAAE,mBAAmB,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;CACjD;AAMD,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAE5C,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,mBAAmB,CAAC,aAAa,CAGtD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/build/types/product-gallery/src/ui/index.d.ts

@@ -2,7 +2,7 @@ import { ContentBoxProps, SliderContainerProps } from '@crystaldesign/content-bo
 import { TextProps } from '@crystaldesign/products-component';
 type Props = {
     filterObject: TextProps[];
-    imageContentBoxSettings?: SliderContainerProps;
+    imageContentBoxSettings: SliderContainerProps;
     parameters: {
         [key: string]: string;
     } | undefined;
@@ -24,12 +24,6 @@ type Props = {
         ctaOpenInFullscreen?: boolean;
         marginLeftHeader?: boolean;
         absoluteFullscreen?: boolean;
-        cta1Params?: {
-            [param: string]: string | undefined;
-        };
-        cta2Params?: {
-            [param: string]: string | undefined;
-        };
     };
 };
 declare const Gallery: ({ parameters, filterObject, imageContentBoxSettings, imageContents, imageContentsMobile, pdpSettings }: Props) => JSX.Element;

package/build/types/product-gallery/src/ui/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/ui/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAuB,eAAe,EAAW,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAgBjH,OAA0B,EAMxB,SAAS,EACV,MAAM,mCAAmC,CAAC;AAE3C,KAAK,KAAK,GAAG;IACX,YAAY,EAAE,SAAS,EAAE,CAAC;IAC1B,uBAAuB,CAAC,EAAE,oBAAoB,CAAC;IAC/C,UAAU,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,GAAG,SAAS,CAAC;IAClD,aAAa,EAAE;QAAE,CAAC,SAAS,EAAE,MAAM,GAAG;YAAE,CAAC,KAAK,EAAE,MAAM,GAAG;gBAAE,QAAQ,EAAE,eAAe,EAAE,CAAA;aAAE,CAAA;SAAE,CAAA;KAAE,EAAE,CAAC;IAC/F,mBAAmB,CAAC,EAAE;QAAE,CAAC,SAAS,EAAE,MAAM,GAAG;YAAE,CAAC,KAAK,EAAE,MAAM,GAAG;gBAAE,QAAQ,EAAE,eAAe,EAAE,CAAA;aAAE,CAAA;SAAE,CAAA;KAAE,EAAE,CAAC;IACtG,WAAW,CAAC,EAAE;QACZ,mBAAmB,CAAC,EAAE,OAAO,CAAC;QAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;QAC3B,kBAAkB,CAAC,EAAE,OAAO,CAAC;QAC7B,UAAU,CAAC,EAAE;YACX,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;SACrC,CAAC;QACF,UAAU,CAAC,EAAE;YACX,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;SACrC,CAAC;KACH,CAAC;CACH,CAAC;AAEF,QAAA,MAAM,OAAO,2GAAiH,KAAK,gBAiKlI,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/ui/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAuB,eAAe,EAAW,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAgBjH,OAA0B,EAMxB,SAAS,EACV,MAAM,mCAAmC,CAAC;AAE3C,KAAK,KAAK,GAAG;IACX,YAAY,EAAE,SAAS,EAAE,CAAC;IAC1B,uBAAuB,EAAE,oBAAoB,CAAC;IAC9C,UAAU,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,GAAG,SAAS,CAAC;IAClD,aAAa,EAAE;QAAE,CAAC,SAAS,EAAE,MAAM,GAAG;YAAE,CAAC,KAAK,EAAE,MAAM,GAAG;gBAAE,QAAQ,EAAE,eAAe,EAAE,CAAA;aAAE,CAAA;SAAE,CAAA;KAAE,EAAE,CAAC;IAC/F,mBAAmB,CAAC,EAAE;QAAE,CAAC,SAAS,EAAE,MAAM,GAAG;YAAE,CAAC,KAAK,EAAE,MAAM,GAAG;gBAAE,QAAQ,EAAE,eAAe,EAAE,CAAA;aAAE,CAAA;SAAE,CAAA;KAAE,EAAE,CAAC;IACtG,WAAW,CAAC,EAAE;QAAE,mBAAmB,CAAC,EAAE,OAAO,CAAC;QAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC;QAAC,kBAAkB,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;CAC3G,CAAC;AAEF,QAAA,MAAM,OAAO,2GAAiH,KAAK,gBAgLlI,CAAC;AAEF,eAAe,OAAO,CAAC"}