@plasmicpkgs/commerce 0.0.18 → 0.0.21

package/dist/commerce.esm.js

@@ -933,9 +933,9 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
 
 var defaultProduct = {
   id: "123456789",
-  name: "Product Placeholder",
+  name: "Product name",
   description: "",
-  descriptionHtml: "\n    <p>This is a <strong>placeholder</strong>.</p>\n    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>\n    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>\n  ",
+  descriptionHtml: "\n    <p>This is a <strong>placeholder</strong>.</p>\n  ",
   images: [{
     url: "https://static1.plasmic.app/commerce/lightweight-jacket-0.png",
     alt: "Lightweight Jacket"
@@ -947,12 +947,12 @@ var defaultProduct = {
     alt: "Lightweight Jacket"
   }],
   variants: [{
-    id: "variiant1",
-    name: "Variant Placeholder",
+    id: "variant1",
+    name: "Variant 1",
     options: []
   }, {
     id: "variant2",
-    name: "Variant Placeholder 2",
+    name: "Variant 2",
     options: []
   }],
   price: {
@@ -993,20 +993,20 @@ var useCategoryContext = function useCategoryContext() {
 var usePrimaryCategory = function usePrimaryCategory() {
   return useContext(PrimaryCategoryContext);
 };
-var SliderContext = /*#__PURE__*/React.createContext(undefined);
-function ProductSliderProvider(_ref3) {
+var ProductMediaContext = /*#__PURE__*/React.createContext(undefined);
+function ProductMediaProvider(_ref3) {
   var mediaIndex = _ref3.mediaIndex,
       onClick = _ref3.onClick,
       children = _ref3.children;
-  return React.createElement(SliderContext.Provider, {
+  return React.createElement(ProductMediaContext.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 useProductMediaContext = function useProductMediaContext() {
+  return useContext(ProductMediaContext);
 };
 
 var _excluded = ["children"];
@@ -1788,26 +1788,7 @@ var categoryMediaMeta = {
   name: "plasmic-commerce-category-media",
   displayName: "Category Media",
   props: {
-    mediaIndex: "number",
-    mediaSize: {
-      type: "choice",
-      options: [{
-        label: "Fill",
-        value: "fill"
-      }, {
-        label: "Container",
-        value: "contain"
-      }, {
-        label: "Cover",
-        value: "cover"
-      }, {
-        label: "None",
-        value: "none"
-      }, {
-        label: "Scale down",
-        value: "scale-down"
-      }]
-    }
+    mediaIndex: "number"
   },
   importPath: "@plasmicpkgs/commerce",
   importName: "CategoryMedia"
@@ -1817,18 +1798,14 @@ function CategoryMedia(props) {
 
   var className = props.className,
       _props$mediaIndex = props.mediaIndex,
-      mediaIndex = _props$mediaIndex === void 0 ? 0 : _props$mediaIndex,
-      mediaSize = props.mediaSize;
+      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,
-    style: {
-      objectFit: mediaSize
-    }
+    className: className
   });
 }
 function registerCategoryMedia(loader, customCategoryMediaMeta) {
@@ -2231,25 +2208,12 @@ var productMediaMeta = {
   name: "plasmic-commerce-product-media",
   displayName: "Product Media",
   props: {
-    mediaIndex: "number",
-    mediaSize: {
-      type: "choice",
-      options: [{
-        label: "Fill",
-        value: "fill"
-      }, {
-        label: "Container",
-        value: "contain"
-      }, {
-        label: "Cover",
-        value: "cover"
-      }, {
-        label: "None",
-        value: "none"
-      }, {
-        label: "Scale down",
-        value: "scale-down"
-      }]
+    mediaIndex: {
+      type: "number",
+      min: 0,
+      hidden: function hidden(_, ctx) {
+        return !!(ctx != null && ctx.inMediaContext);
+      }
     }
   },
   importPath: "@plasmicpkgs/commerce",
@@ -2261,18 +2225,18 @@ function ProductMedia(props) {
   var className = props.className,
       _props$mediaIndex = props.mediaIndex,
       mediaIndex = _props$mediaIndex === void 0 ? 0 : _props$mediaIndex,
-      mediaSize = props.mediaSize;
+      setControlContextData = props.setControlContextData;
   var product = useProduct();
-  var sliderContext = useProductSliderContext();
-  var image = product == null ? void 0 : product.images[sliderContext != null ? sliderContext : mediaIndex];
+  var mediaContext = useProductMediaContext();
+  setControlContextData == null ? void 0 : setControlContextData({
+    inMediaContext: mediaContext !== undefined
+  });
+  var image = product == null ? void 0 : product.images[mediaContext != null ? mediaContext : mediaIndex];
   return React.createElement("img", {
     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",
-    className: className,
-    style: {
-      objectFit: mediaSize
-    }
+    className: className
   });
 }
 function registerProductMedia(loader, customProductMediaMeta) {
@@ -2283,6 +2247,51 @@ function registerProductMedia(loader, customProductMediaMeta) {
   doRegisterComponent(ProductMedia, customProductMediaMeta != null ? customProductMediaMeta : productMediaMeta);
 }
 
+var productMediaCollectionMeta = {
+  name: "plasmic-commerce-product-media-collection",
+  displayName: "Product Media Collection",
+  props: {
+    media: {
+      type: "slot",
+      defaultValue: {
+        type: "component",
+        name: "plasmic-commerce-product-media"
+      },
+      allowedComponents: ["plasmic-commerce-product-media"]
+    }
+  },
+  defaultStyles: {
+    display: "grid",
+    gridTemplateColumns: "1fr 1fr",
+    gridRowGap: "8px",
+    gridColumnGap: "8px",
+    padding: "8px",
+    maxWidth: "100%"
+  },
+  importPath: "@plasmicpkgs/commerce",
+  importName: "ProductMediaCollection"
+};
+function ProductMediaCollection(props) {
+  var media = props.media,
+      className = props.className;
+  var product = useProduct();
+  return React.createElement("div", {
+    className: className
+  }, product == null ? void 0 : product.images.map(function (image, i) {
+    return repeatedElement(i === 0, React.createElement(ProductMediaProvider, {
+      mediaIndex: i,
+      children: media
+    }));
+  }));
+}
+function registerProductMediaCollection(loader, customProductMediaCollectionMeta) {
+  var doRegisterComponent = function doRegisterComponent() {
+    return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
+  };
+
+  doRegisterComponent(ProductMediaCollection, customProductMediaCollectionMeta != null ? customProductMediaCollectionMeta : productMediaCollectionMeta);
+}
+
 var getProductPrice = function getProductPrice(product, variantId) {
   var _product$variants$fin, _product$variants$fin2;
 
@@ -2421,11 +2430,11 @@ function ProductSlider(props) {
       selected = _React$useState[0],
       setSelected = _React$useState[1];
 
-  var maximumRight = product.images.length - thumbsVisible;
-  var leftIndex = Math.min(maximumRight, Math.max(0, selected - 1));
+  var maximumLeft = Math.max(0, product.images.length - thumbsVisible);
+  var leftIndex = Math.min(maximumLeft, Math.max(0, selected - 1));
   return React.createElement("div", {
     className: className
-  }, React.createElement(ProductSliderProvider, {
+  }, React.createElement(ProductMediaProvider, {
     mediaIndex: selected,
     children: slideContainer
   }), React.createElement("div", {
@@ -2434,7 +2443,7 @@ function ProductSlider(props) {
       gridTemplateColumns: "repeat(" + thumbsVisible + ", 1fr)"
     }
   }, product.images.slice(leftIndex, leftIndex + thumbsVisible).map(function (image, i) {
-    return repeatedElement(i === 0, React.createElement(ProductSliderProvider, {
+    return repeatedElement(i === 0, React.createElement(ProductMediaProvider, {
       mediaIndex: leftIndex + i,
       children: thumbsContainer,
       onClick: function onClick() {
@@ -2604,6 +2613,7 @@ function registerAll(loader) {
   registerTextField(loader);
   registerProductPrice(loader);
   registerProductMedia(loader);
+  registerProductMediaCollection(loader);
   registerCart(loader);
   registerAddToCartButton(loader);
   registerProductQuantity(loader);
@@ -2617,5 +2627,5 @@ function registerAll(loader) {
   registerCategoryMedia(loader);
 }
 
-export { AddToCartButton, CartComponent, cart as CartType, CategoryCollection, CategoryField, CategoryLink, CategoryMedia, CommerceError, CoreCommerceProvider, FetcherError, ProductBox, ProductCollection, ProductLink, ProductMedia, defaultProduct as ProductPlaceholder, ProductPriceComponent, ProductQuantity, ProductSlider, ProductTextField, product as ProductTypes, ProductVariantPicker, site as SiteTypes, ValidationError, addToCartButtonMeta, cartMeta, categoryCollectionMeta, categoryFieldMeta, categoryLinkMeta, categoryMediaMeta, fetcher$4 as fetcher, getCommerceProvider, productBoxMeta, productCollectionMeta, productLinkMeta, productMediaMeta, productPriceMeta, productQuantityMeta, productSliderMeta, productTextFieldMeta, productVariantPickerMeta, registerAddToCartButton, registerAll, registerCart, registerCategoryCollection, registerCategoryField, registerCategoryLink, registerCategoryMedia, registerProductBox, registerProductCollection, registerProductLink, registerProductMedia, registerProductPrice, registerProductQuantity, registerProductSlider, registerProductVariantPicker, registerTextField, useAddItem, useBrands, useCart, useCategories, useCommerce, useProduct$1 as useProduct, useRemoveItem, useSearch, useUpdateItem };
+export { AddToCartButton, CartComponent, cart as CartType, CategoryCollection, CategoryField, CategoryLink, CategoryMedia, CommerceError, CoreCommerceProvider, FetcherError, ProductBox, ProductCollection, ProductLink, ProductMedia, ProductMediaCollection, defaultProduct as ProductPlaceholder, ProductPriceComponent, ProductQuantity, ProductSlider, ProductTextField, product as ProductTypes, ProductVariantPicker, site as SiteTypes, ValidationError, addToCartButtonMeta, cartMeta, categoryCollectionMeta, categoryFieldMeta, categoryLinkMeta, categoryMediaMeta, fetcher$4 as fetcher, getCommerceProvider, productBoxMeta, productCollectionMeta, productLinkMeta, productMediaCollectionMeta, productMediaMeta, productPriceMeta, productQuantityMeta, productSliderMeta, productTextFieldMeta, productVariantPickerMeta, registerAddToCartButton, registerAll, registerCart, registerCategoryCollection, registerCategoryField, registerCategoryLink, registerCategoryMedia, registerProductBox, registerProductCollection, registerProductLink, registerProductMedia, registerProductMediaCollection, registerProductPrice, registerProductQuantity, registerProductSlider, registerProductVariantPicker, registerTextField, useAddItem, useBrands, useCart, useCategories, useCommerce, useProduct$1 as useProduct, useRemoveItem, useSearch, useUpdateItem };
 //# sourceMappingURL=commerce.esm.js.map