@crystaldesign/widget-inspiration-slider 25.7.5 → 25.8.0-beta.10

package/build/esm/index.js

@@ -1,5 +1,5 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import React, { useState, useMemo, useEffect } from 'react';
+import React, { useMemo, useCallback, useState, useEffect } from 'react';
 import { useCss, useProductData, replaceActions, replaceTemplatesInObject, Gallery, ActionGroup, Action, TextBlock, Text, useConfiguration } from '@crystaldesign/widget-library';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useDivaCore, useTranslation, getLogger, DivaError } from '@crystaldesign/diva-core';
@@ -27,16 +27,21 @@ function useInspirationSlider(_ref) {
     settings = _ref.settings;
   useCss(settings);
   var _useProductData = useProductData({
-      productIds: productIds
+      productIds: productIds,
+      widgetType: 'INSPIRATIONSLIDER'
     }),
     productVariants = _useProductData.productVariants,
     error = _useProductData.error,
-    loading = _useProductData.loading;
-  var _useState = useState(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    selectedProductIndex = _useState2[0],
-    setSelectedProductIndex = _useState2[1];
-  var parsedSettings = useParsedContent(settings, productVariants, selectedProductIndex);
+    loading = _useProductData.loading,
+    selectedProduct = _useProductData.selectedProduct,
+    setSelectedProductId = _useProductData.setSelectedProductId;
+  var selectedProductIndex = selectedProduct ? productVariants.findIndex(function (p) {
+    return p._id === (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct._id);
+  }) : 0;
+  var parsedSettings = useParsedContent(settings, productVariants, selectedProduct);
+  var setSelectedProductIndex = useCallback(function (index) {
+    setSelectedProductId(productVariants[index]._id);
+  }, [productVariants, setSelectedProductId]);
   return {
     productVariants: productVariants,
     error: error,
@@ -46,24 +51,20 @@ function useInspirationSlider(_ref) {
     setSelectedProductIndex: setSelectedProductIndex
   };
 }
-function useParsedContent(settings, productVariants, selectedProductIndex) {
+function useParsedContent(settings, productVariants, selectedProduct) {
   var _useDivaCore = useDivaCore(),
-    _useDivaCore$state$di = _useDivaCore.state.dimensions;
-    _useDivaCore$state$di.isMobile;
-    _useDivaCore$state$di.isPortrait;
-    var _useDivaCore$actions = _useDivaCore.actions,
+    _useDivaCore$actions = _useDivaCore.actions,
     onEvent = _useDivaCore$actions.onEvent,
     openComponent = _useDivaCore$actions.openComponent;
   var _useTranslation = useTranslation(),
     i18n = _useTranslation.i18n;
   return useMemo(function () {
-    if (!productVariants || productVariants.length === 0 || productVariants[selectedProductIndex] === undefined) return settings;
-    var selectedProduct = productVariants[selectedProductIndex];
+    if (!productVariants || productVariants.length === 0 || !selectedProduct) return settings;
     var clonedContent = cloneDeep(settings);
     var withActionsContent = replaceActions(clonedContent, productVariants, selectedProduct, i18n.language, openComponent, onEvent);
     var pureContent = replaceTemplatesInObject(withActionsContent, selectedProduct, i18n.language);
     return pureContent;
-  }, [settings, productVariants, selectedProductIndex, i18n.language]);
+  }, [settings, productVariants, selectedProduct, i18n.language]);
 }
 
 function styleInject(css, ref) {
@@ -569,7 +570,7 @@ function Popup(_ref) {
 }
 
 function MainComponent(props) {
-  var _settings$callToActio, _settings$texts;
+  var _settings$callToActio, _settings$texts, _productVariants$sele;
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     disableAnimation = _React$useState2[0],
@@ -618,7 +619,7 @@ function MainComponent(props) {
       return /*#__PURE__*/jsx(TextSection, {
         config: text
       }, index);
-    }), settings.popup && /*#__PURE__*/jsx(Popup, {
+    }), settings.popup && ((_productVariants$sele = productVariants[selectedProductIndex]) === null || _productVariants$sele === void 0 ? void 0 : _productVariants$sele._id) && /*#__PURE__*/jsx(Popup, {
       config: settings.popup,
       productData: productVariants,
       productId: productVariants[selectedProductIndex]._id,

package/build/types/widget-inspiration-slider/src/useInspirationSlider.d.ts

@@ -6,6 +6,6 @@ export declare function useInspirationSlider({ productIds, settings }: Inspirati
     loading: boolean;
     settings: Configuration;
     selectedProductIndex: number;
-    setSelectedProductIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
+    setSelectedProductIndex: (index: number) => void;
 };
 //# sourceMappingURL=useInspirationSlider.d.ts.map

package/build/types/widget-inspiration-slider/src/useInspirationSlider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useInspirationSlider.d.ts","sourceRoot":"","sources":["../../../../src/useInspirationSlider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAEhE,OAAO,EAAE,WAAW,EAA+B,MAAM,0BAA0B,CAAC;AAIpF,wBAAgB,oBAAoB,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,sBAAsB;;;;;;;EAcpF"}
+{"version":3,"file":"useInspirationSlider.d.ts","sourceRoot":"","sources":["../../../../src/useInspirationSlider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAEhE,OAAO,EAAE,WAAW,EAA+B,MAAM,0BAA0B,CAAC;AAIpF,wBAAgB,oBAAoB,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,sBAAsB;;;;;;qCAOzE,MAAM;EAcjB"}