@plasmicpkgs/commerce 0.0.13 → 0.0.14

package/dist/commerce.esm.js

@@ -964,6 +964,7 @@ var defaultProduct = {
 
 var ProductContext = /*#__PURE__*/React.createContext(undefined);
 var CategoryContext = /*#__PURE__*/React.createContext(undefined);
+var SliderContext = /*#__PURE__*/React.createContext(undefined);
 function ProductProvider(_ref) {
   var product = _ref.product,
       children = _ref.children;
@@ -988,6 +989,20 @@ function CategoryProvider(_ref2) {
 var useCategoryContext = function useCategoryContext() {
   return useContext(CategoryContext);
 };
+function ProductSliderProvider(_ref3) {
+  var mediaIndex = _ref3.mediaIndex,
+      onClick = _ref3.onClick,
+      children = _ref3.children;
+  return React.createElement(SliderContext.Provider, {
+    value: mediaIndex,
+    key: mediaIndex
+  }, React.cloneElement(React.isValidElement(children) ? children : React.createElement(React.Fragment, null), {
+    onClick: onClick
+  }));
+}
+var useProductSliderContext = function useProductSliderContext() {
+  return useContext(SliderContext);
+};
 
 var _excluded = ["children"];
 var Commerce = /*#__PURE__*/createContext({});
@@ -1767,6 +1782,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.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) {
@@ -2156,11 +2203,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.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
   });
 }
@@ -2256,6 +2304,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.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.createElement("div", {
+    className: className
+  }, React.createElement(ProductSliderProvider, {
+    mediaIndex: selected,
+    children: slideContainer
+  }), React.createElement("div", {
+    style: {
+      display: "grid",
+      gridTemplateColumns: "repeat(" + thumbsVisible + ", 1fr)"
+    }
+  }, product.images.slice(leftIndex, leftIndex + thumbsVisible).map(function (image, i) {
+    return repeatedElement(i === 0, React.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",
@@ -2288,14 +2420,14 @@ function ProductTextField(props) {
   var value;
 
   if (field === "description") {
-    return product.descriptionHtml ? React.createElement("div", {
+    var _product$descriptionH;
+
+    return React.createElement("div", {
       className: className,
       dangerouslySetInnerHTML: {
-        __html: product.descriptionHtml
+        __html: (_product$descriptionH = product.descriptionHtml) != null ? _product$descriptionH : product.description
       }
-    }) : React.createElement("div", {
-      className: className
-    }, product.description);
+    });
   } else {
     value = product[field];
   }
@@ -2395,7 +2527,10 @@ var product = {
   __proto__: null
 };
 
-
+/*
+  Forked from https://github.com/vercel/commerce/tree/main/packages/commerce/src
+  Changes: Added CategoryImage
+*/
 
 var site = {
   __proto__: null
@@ -2411,10 +2546,12 @@ function registerAll(loader) {
   registerProductQuantity(loader);
   registerProductVariantPicker(loader);
   registerProductBox(loader);
+  registerProductSlider(loader);
   registerProductLink(loader);
   registerCategoryCollection(loader);
   registerCategoryField(loader);
   registerCategoryLink(loader);
+  registerCategoryMedia(loader);
 }
 
 export { AddToCartButton, CartComponent, cart as CartType, CategoryCollection, CategoryField, CategoryLink, CommerceError, CoreCommerceProvider, FetcherError, ProductBox, ProductCollection, ProductLink, ProductMedia, defaultProduct as ProductPlaceholder, ProductPriceComponent, ProductQuantity, ProductTextField, product as ProductTypes, ProductVariantPicker, site as SiteTypes, ValidationError, addToCartButtonMeta, cartMeta, categoryCollectionMeta, categoryFieldMeta, categoryLinkMeta, fetcher$4 as fetcher, getCommerceProvider, productBoxMeta, productCollectionMeta, productLinkMeta, productMediaMeta, productPriceMeta, productQuantityMeta, productTextFieldMeta, productVariantPickerMeta, registerAddToCartButton, registerAll, registerCart, registerCategoryCollection, registerCategoryField, registerCategoryLink, registerProductBox, registerProductCollection, registerProductLink, registerProductMedia, registerProductPrice, registerProductQuantity, registerProductVariantPicker, registerTextField, useAddItem, useBrands, useCart, useCategories, useCommerce, useProduct$1 as useProduct, useRemoveItem, useSearch, useUpdateItem };