@plasmicpkgs/commerce 0.0.13 → 0.0.14

package/dist/commerce.cjs.development.js

@@ -971,6 +971,7 @@ var defaultProduct = {
 
 var ProductContext = /*#__PURE__*/React__default.createContext(undefined);
 var CategoryContext = /*#__PURE__*/React__default.createContext(undefined);
+var SliderContext = /*#__PURE__*/React__default.createContext(undefined);
 function ProductProvider(_ref) {
   var product = _ref.product,
       children = _ref.children;
@@ -995,6 +996,20 @@ function CategoryProvider(_ref2) {
 var useCategoryContext = function useCategoryContext() {
   return React.useContext(CategoryContext);
 };
+function ProductSliderProvider(_ref3) {
+  var mediaIndex = _ref3.mediaIndex,
+      onClick = _ref3.onClick,
+      children = _ref3.children;
+  return React__default.createElement(SliderContext.Provider, {
+    value: mediaIndex,
+    key: mediaIndex
+  }, React__default.cloneElement(React__default.isValidElement(children) ? children : React__default.createElement(React__default.Fragment, null), {
+    onClick: onClick
+  }));
+}
+var useProductSliderContext = function useProductSliderContext() {
+  return React.useContext(SliderContext);
+};
 
 var _excluded = ["children"];
 var Commerce = /*#__PURE__*/React.createContext({});
@@ -1774,6 +1789,38 @@ function registerCategoryLink(loader, customCategoryLinkMeta) {
   doRegisterComponent(CategoryLink, customCategoryLinkMeta != null ? customCategoryLinkMeta : categoryLinkMeta);
 }
 
+var categoryMediaMeta = {
+  name: "plasmic-commerce-category-media",
+  displayName: "Category Media",
+  props: {
+    mediaIndex: "number"
+  },
+  importPath: "@plasmicpkgs/commerce",
+  importName: "CategoryMedia"
+};
+function CategoryMedia(props) {
+  var _image$url;
+
+  var className = props.className,
+      _props$mediaIndex = props.mediaIndex,
+      mediaIndex = _props$mediaIndex === void 0 ? 0 : _props$mediaIndex;
+  var category = useCategoryContext();
+  var image = category != null && category.images ? category.images[mediaIndex] : undefined;
+  return React__default.createElement("img", {
+    alt: (category == null ? void 0 : category.name) || "Category Image",
+    src: (_image$url = image == null ? void 0 : image.url) != null ? _image$url : "",
+    loading: "lazy",
+    className: className
+  });
+}
+function registerCategoryMedia(loader, customCategoryMediaMeta) {
+  var doRegisterComponent = function doRegisterComponent() {
+    return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
+  };
+
+  doRegisterComponent(CategoryMedia, customCategoryMediaMeta != null ? customCategoryMediaMeta : categoryMediaMeta);
+}
+
 var fetcher$3 = SWRFetcher;
 
 var fn$3 = function fn(provider) {
@@ -2163,11 +2210,12 @@ function ProductMedia(props) {
       _props$mediaIndex = props.mediaIndex,
       mediaIndex = _props$mediaIndex === void 0 ? 0 : _props$mediaIndex;
   var product = useProduct();
-  var image = product == null ? void 0 : product.images[mediaIndex];
+  var sliderContext = useProductSliderContext();
+  var image = product == null ? void 0 : product.images[sliderContext != null ? sliderContext : mediaIndex];
   return React__default.createElement("img", {
-    alt: (product == null ? void 0 : product.name) || 'Product Image',
+    alt: (product == null ? void 0 : product.name) || "Product Image",
     src: product ? (_image$url = image == null ? void 0 : image.url) != null ? _image$url : "" : placeholderImage,
-    loading: 'lazy',
+    loading: "lazy",
     className: className
   });
 }
@@ -2263,6 +2311,90 @@ function registerProductQuantity(loader, customProductQuantityMeta) {
   doRegisterComponent(ProductQuantity, customProductQuantityMeta != null ? customProductQuantityMeta : productQuantityMeta);
 }
 
+var productSliderMeta = {
+  name: "plasmic-commerce-product-slider",
+  displayName: "Product Slider",
+  props: {
+    thumbsVisible: {
+      type: "number",
+      description: "Number of thumbs visible",
+      defaultValue: 4,
+      defaultValueHint: 4
+    },
+    slideContainer: {
+      type: "slot",
+      defaultValue: {
+        type: "vbox",
+        children: [{
+          type: "component",
+          name: "plasmic-commerce-product-media"
+        }]
+      }
+    },
+    thumbsContainer: {
+      type: "slot",
+      defaultValue: {
+        type: "hbox",
+        children: [{
+          type: "component",
+          name: "plasmic-commerce-product-media"
+        }]
+      }
+    },
+    slideSelected: {
+      type: "number",
+      defaultValue: 0,
+      defaultValueHint: 0,
+      description: "Current slide selected"
+    }
+  },
+  importPath: "@plasmicpkgs/commerce",
+  importName: "ProductSlider"
+};
+function ProductSlider(props) {
+  var className = props.className,
+      slideContainer = props.slideContainer,
+      thumbsContainer = props.thumbsContainer,
+      _props$thumbsVisible = props.thumbsVisible,
+      thumbsVisible = _props$thumbsVisible === void 0 ? 4 : _props$thumbsVisible,
+      _props$slideSelected = props.slideSelected,
+      slideSelected = _props$slideSelected === void 0 ? 0 : _props$slideSelected;
+  var product = useProduct();
+
+  var _React$useState = React__default.useState(slideSelected),
+      selected = _React$useState[0],
+      setSelected = _React$useState[1];
+
+  var maximumRight = product.images.length - thumbsVisible;
+  var leftIndex = Math.min(maximumRight, Math.max(0, selected - 1));
+  return React__default.createElement("div", {
+    className: className
+  }, React__default.createElement(ProductSliderProvider, {
+    mediaIndex: selected,
+    children: slideContainer
+  }), React__default.createElement("div", {
+    style: {
+      display: "grid",
+      gridTemplateColumns: "repeat(" + thumbsVisible + ", 1fr)"
+    }
+  }, product.images.slice(leftIndex, leftIndex + thumbsVisible).map(function (image, i) {
+    return host.repeatedElement(i === 0, React__default.createElement(ProductSliderProvider, {
+      mediaIndex: leftIndex + i,
+      children: thumbsContainer,
+      onClick: function onClick() {
+        return setSelected(leftIndex + i);
+      }
+    }));
+  })));
+}
+function registerProductSlider(loader, customProductSliderMeta) {
+  var doRegisterComponent = function doRegisterComponent() {
+    return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
+  };
+
+  doRegisterComponent(ProductSlider, customProductSliderMeta != null ? customProductSliderMeta : productSliderMeta);
+}
+
 var productTextFieldMeta = {
   name: "plasmic-commerce-product-text-field",
   displayName: "Product Text Field",
@@ -2295,14 +2427,14 @@ function ProductTextField(props) {
   var value;
 
   if (field === "description") {
-    return product.descriptionHtml ? React__default.createElement("div", {
+    var _product$descriptionH;
+
+    return React__default.createElement("div", {
       className: className,
       dangerouslySetInnerHTML: {
-        __html: product.descriptionHtml
+        __html: (_product$descriptionH = product.descriptionHtml) != null ? _product$descriptionH : product.description
       }
-    }) : React__default.createElement("div", {
-      className: className
-    }, product.description);
+    });
   } else {
     value = product[field];
   }
@@ -2402,7 +2534,10 @@ var product = {
   __proto__: null
 };
 
-
+/*
+  Forked from https://github.com/vercel/commerce/tree/main/packages/commerce/src
+  Changes: Added CategoryImage
+*/
 
 var site = {
   __proto__: null
@@ -2418,10 +2553,12 @@ function registerAll(loader) {
   registerProductQuantity(loader);
   registerProductVariantPicker(loader);
   registerProductBox(loader);
+  registerProductSlider(loader);
   registerProductLink(loader);
   registerCategoryCollection(loader);
   registerCategoryField(loader);
   registerCategoryLink(loader);
+  registerCategoryMedia(loader);
 }
 
 exports.AddToCartButton = AddToCartButton;