@plasmicpkgs/commerce 0.0.18 → 0.0.21

package/dist/commerce.cjs.development.js

@@ -940,9 +940,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"
@@ -954,12 +954,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: {
@@ -1000,20 +1000,20 @@ var useCategoryContext = function useCategoryContext() {
 var usePrimaryCategory = function usePrimaryCategory() {
   return React.useContext(PrimaryCategoryContext);
 };
-var SliderContext = /*#__PURE__*/React__default.createContext(undefined);
-function ProductSliderProvider(_ref3) {
+var ProductMediaContext = /*#__PURE__*/React__default.createContext(undefined);
+function ProductMediaProvider(_ref3) {
   var mediaIndex = _ref3.mediaIndex,
       onClick = _ref3.onClick,
       children = _ref3.children;
-  return React__default.createElement(SliderContext.Provider, {
+  return React__default.createElement(ProductMediaContext.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 useProductMediaContext = function useProductMediaContext() {
+  return React.useContext(ProductMediaContext);
 };
 
 var _excluded = ["children"];
@@ -1795,26 +1795,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"
@@ -1824,18 +1805,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__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,
-    style: {
-      objectFit: mediaSize
-    }
+    className: className
   });
 }
 function registerCategoryMedia(loader, customCategoryMediaMeta) {
@@ -2238,25 +2215,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",
@@ -2268,18 +2232,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__default.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) {
@@ -2290,6 +2254,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__default.createElement("div", {
+    className: className
+  }, product == null ? void 0 : product.images.map(function (image, i) {
+    return host.repeatedElement(i === 0, React__default.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;
 
@@ -2428,11 +2437,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__default.createElement("div", {
     className: className
-  }, React__default.createElement(ProductSliderProvider, {
+  }, React__default.createElement(ProductMediaProvider, {
     mediaIndex: selected,
     children: slideContainer
   }), React__default.createElement("div", {
@@ -2441,7 +2450,7 @@ function ProductSlider(props) {
       gridTemplateColumns: "repeat(" + thumbsVisible + ", 1fr)"
     }
   }, product.images.slice(leftIndex, leftIndex + thumbsVisible).map(function (image, i) {
-    return host.repeatedElement(i === 0, React__default.createElement(ProductSliderProvider, {
+    return host.repeatedElement(i === 0, React__default.createElement(ProductMediaProvider, {
       mediaIndex: leftIndex + i,
       children: thumbsContainer,
       onClick: function onClick() {
@@ -2611,6 +2620,7 @@ function registerAll(loader) {
   registerTextField(loader);
   registerProductPrice(loader);
   registerProductMedia(loader);
+  registerProductMediaCollection(loader);
   registerCart(loader);
   registerAddToCartButton(loader);
   registerProductQuantity(loader);
@@ -2638,6 +2648,7 @@ exports.ProductBox = ProductBox;
 exports.ProductCollection = ProductCollection;
 exports.ProductLink = ProductLink;
 exports.ProductMedia = ProductMedia;
+exports.ProductMediaCollection = ProductMediaCollection;
 exports.ProductPlaceholder = defaultProduct;
 exports.ProductPriceComponent = ProductPriceComponent;
 exports.ProductQuantity = ProductQuantity;
@@ -2658,6 +2669,7 @@ exports.getCommerceProvider = getCommerceProvider;
 exports.productBoxMeta = productBoxMeta;
 exports.productCollectionMeta = productCollectionMeta;
 exports.productLinkMeta = productLinkMeta;
+exports.productMediaCollectionMeta = productMediaCollectionMeta;
 exports.productMediaMeta = productMediaMeta;
 exports.productPriceMeta = productPriceMeta;
 exports.productQuantityMeta = productQuantityMeta;
@@ -2675,6 +2687,7 @@ exports.registerProductBox = registerProductBox;
 exports.registerProductCollection = registerProductCollection;
 exports.registerProductLink = registerProductLink;
 exports.registerProductMedia = registerProductMedia;
+exports.registerProductMediaCollection = registerProductMediaCollection;
 exports.registerProductPrice = registerProductPrice;
 exports.registerProductQuantity = registerProductQuantity;
 exports.registerProductSlider = registerProductSlider;