npm - @lookiero/checkout - Versions diffs - 14.7.0 → 14.8.0-beta.1 - Mend

@lookiero/checkout 14.7.0 → 14.8.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (72) hide show

package/src/infrastructure/ui/views/item/components/productVariantSlider/__snapshots__/ProductVariantSlider.test.tsx.snap CHANGED Viewed

@@ -97,143 +97,146 @@ exports[`ProductVariantSlider matches the snapshot 1`] = `
               onLayout={[Function]}
             >
               <View
-                style={
-                  [
-                    {
-                      "aspectRatio": NaN,
-                      "height": undefined,
-                      "width": "100%",
-                    },
-                    {
-                      "alignSelf": undefined,
-                    },
-                  ]
-                }
+                onLayout={[Function]}
               >
                 <View
                   style={
                     [
                       {
-                        "position": "relative",
+                        "height": undefined,
+                        "width": undefined,
+                      },
+                      {
+                        "alignSelf": undefined,
                       },
-                      [
-                        {
-                          "flex": 1,
-                        },
-                        null,
-                      ],
                     ]
                   }
-                  testID="product-variant-image"
                 >
                   <View
                     style={
                       [
                         {
-                          "flex": 1,
+                          "position": "relative",
                         },
+                        [
+                          {
+                            "flex": 1,
+                          },
+                          null,
+                        ],
                       ]
                     }
-                    testID="lazy-image-skeleton"
+                    testID="product-variant-image"
                   >
                     <View
-                      onLayout={[Function]}
                       style={
                         [
                           {
-                            "backgroundColor": "#F8F7F7",
                             "flex": 1,
-                            "height": undefined,
-                            "overflow": "hidden",
-                            "width": undefined,
                           },
                         ]
                       }
+                      testID="lazy-image-skeleton"
                     >
                       <View
-                        collapsable={false}
-                        duration={1200}
+                        onLayout={[Function]}
                         style={
                           [
                             {
-                              "height": "100%",
-                              "width": "100%",
-                            },
-                            {
-                              "left": 0,
-                              "transform": [
-                                {
-                                  "translateX": -375,
-                                },
-                              ],
+                              "backgroundColor": "#F8F7F7",
+                              "flex": 1,
+                              "height": undefined,
+                              "overflow": "hidden",
+                              "width": undefined,
                             },
                           ]
                         }
                       >
-                        <ViewManagerAdapter_ExpoLinearGradient
-                          colors={
-                            [
-                              16777215,
-                              4292532440,
-                              4292532440,
-                              16777215,
-                            ]
-                          }
-                          endPoint={
-                            [
-                              1,
-                              0,
-                            ]
-                          }
-                          locations={
-                            [
-                              0,
-                              0.25,
-                              0.75,
-                              1,
-                            ]
-                          }
-                          startPoint={
+                        <View
+                          collapsable={false}
+                          duration={1200}
+                          style={
                             [
-                              0,
-                              0,
+                              {
+                                "height": "100%",
+                                "width": "100%",
+                              },
+                              {
+                                "left": 0,
+                                "transform": [
+                                  {
+                                    "translateX": -375,
+                                  },
+                                ],
+                              },
                             ]
                           }
-                          style={
-                            {
-                              "height": "100%",
-                              "width": "100%",
+                        >
+                          <ViewManagerAdapter_ExpoLinearGradient
+                            colors={
+                              [
+                                16777215,
+                                4292532440,
+                                4292532440,
+                                16777215,
+                              ]
                             }
-                          }
-                        />
+                            endPoint={
+                              [
+                                1,
+                                0,
+                              ]
+                            }
+                            locations={
+                              [
+                                0,
+                                0.25,
+                                0.75,
+                                1,
+                              ]
+                            }
+                            startPoint={
+                              [
+                                0,
+                                0,
+                              ]
+                            }
+                            style={
+                              {
+                                "height": "100%",
+                                "width": "100%",
+                              }
+                            }
+                          />
+                        </View>
                       </View>
                     </View>
-                  </View>
-                  <Image
-                    onLoad={[Function]}
-                    resizeMode="contain"
-                    source={
-                      {
-                        "uri": "https://cdn-catalog-back-prod.envs.lookiero.tech/1a/28/1a28f712-a76c-4172-8a11-f15002981dc0.jpg?w=600&f=auto",
-                      }
-                    }
-                    style={
-                      [
-                        {
-                          "flex": 1,
-                          "height": "100%",
-                          "position": "absolute",
-                          "width": "100%",
-                          "zIndex": 10,
-                        },
-                        undefined,
+                    <Image
+                      onLoad={[Function]}
+                      resizeMode="contain"
+                      source={
                         {
-                          "opacity": 0,
-                        },
-                      ]
-                    }
-                    testID="lazy-image-main-image"
-                  />
+                          "uri": "https://cdn-catalog-back-prod.envs.lookiero.tech/1a/28/1a28f712-a76c-4172-8a11-f15002981dc0.jpg?w=600&f=auto",
+                        }
+                      }
+                      style={
+                        [
+                          {
+                            "flex": 1,
+                            "height": "100%",
+                            "position": "absolute",
+                            "width": "100%",
+                            "zIndex": 10,
+                          },
+                          undefined,
+                          {
+                            "opacity": 0,
+                          },
+                        ]
+                      }
+                      testID="lazy-image-main-image"
+                    />
+                  </View>
                 </View>
               </View>
             </View>
@@ -255,143 +258,146 @@ exports[`ProductVariantSlider matches the snapshot 1`] = `
               onLayout={[Function]}
             >
               <View
-                style={
-                  [
-                    {
-                      "aspectRatio": NaN,
-                      "height": undefined,
-                      "width": "100%",
-                    },
-                    {
-                      "alignSelf": undefined,
-                    },
-                  ]
-                }
+                onLayout={[Function]}
               >
                 <View
                   style={
                     [
                       {
-                        "position": "relative",
+                        "height": undefined,
+                        "width": undefined,
+                      },
+                      {
+                        "alignSelf": undefined,
                       },
-                      [
-                        {
-                          "flex": 1,
-                        },
-                        null,
-                      ],
                     ]
                   }
-                  testID="product-variant-image"
                 >
                   <View
                     style={
                       [
                         {
-                          "flex": 1,
+                          "position": "relative",
                         },
+                        [
+                          {
+                            "flex": 1,
+                          },
+                          null,
+                        ],
                       ]
                     }
-                    testID="lazy-image-skeleton"
+                    testID="product-variant-image"
                   >
                     <View
-                      onLayout={[Function]}
                       style={
                         [
                           {
-                            "backgroundColor": "#F8F7F7",
                             "flex": 1,
-                            "height": undefined,
-                            "overflow": "hidden",
-                            "width": undefined,
                           },
                         ]
                       }
+                      testID="lazy-image-skeleton"
                     >
                       <View
-                        collapsable={false}
-                        duration={1200}
+                        onLayout={[Function]}
                         style={
                           [
                             {
-                              "height": "100%",
-                              "width": "100%",
-                            },
-                            {
-                              "left": 0,
-                              "transform": [
-                                {
-                                  "translateX": -375,
-                                },
-                              ],
+                              "backgroundColor": "#F8F7F7",
+                              "flex": 1,
+                              "height": undefined,
+                              "overflow": "hidden",
+                              "width": undefined,
                             },
                           ]
                         }
                       >
-                        <ViewManagerAdapter_ExpoLinearGradient
-                          colors={
-                            [
-                              16777215,
-                              4292532440,
-                              4292532440,
-                              16777215,
-                            ]
-                          }
-                          endPoint={
-                            [
-                              1,
-                              0,
-                            ]
-                          }
-                          locations={
-                            [
-                              0,
-                              0.25,
-                              0.75,
-                              1,
-                            ]
-                          }
-                          startPoint={
+                        <View
+                          collapsable={false}
+                          duration={1200}
+                          style={
                             [
-                              0,
-                              0,
+                              {
+                                "height": "100%",
+                                "width": "100%",
+                              },
+                              {
+                                "left": 0,
+                                "transform": [
+                                  {
+                                    "translateX": -375,
+                                  },
+                                ],
+                              },
                             ]
                           }
-                          style={
-                            {
-                              "height": "100%",
-                              "width": "100%",
+                        >
+                          <ViewManagerAdapter_ExpoLinearGradient
+                            colors={
+                              [
+                                16777215,
+                                4292532440,
+                                4292532440,
+                                16777215,
+                              ]
                             }
-                          }
-                        />
+                            endPoint={
+                              [
+                                1,
+                                0,
+                              ]
+                            }
+                            locations={
+                              [
+                                0,
+                                0.25,
+                                0.75,
+                                1,
+                              ]
+                            }
+                            startPoint={
+                              [
+                                0,
+                                0,
+                              ]
+                            }
+                            style={
+                              {
+                                "height": "100%",
+                                "width": "100%",
+                              }
+                            }
+                          />
+                        </View>
                       </View>
                     </View>
-                  </View>
-                  <Image
-                    onLoad={[Function]}
-                    resizeMode="contain"
-                    source={
-                      {
-                        "uri": "https://cdn-catalog-back-prod.envs.lookiero.tech/15/ac/15aca112-4e71-4646-8db5-7f9723bc0130.jpg?w=600&f=auto",
-                      }
-                    }
-                    style={
-                      [
-                        {
-                          "flex": 1,
-                          "height": "100%",
-                          "position": "absolute",
-                          "width": "100%",
-                          "zIndex": 10,
-                        },
-                        undefined,
+                    <Image
+                      onLoad={[Function]}
+                      resizeMode="contain"
+                      source={
                         {
-                          "opacity": 0,
-                        },
-                      ]
-                    }
-                    testID="lazy-image-main-image"
-                  />
+                          "uri": "https://cdn-catalog-back-prod.envs.lookiero.tech/15/ac/15aca112-4e71-4646-8db5-7f9723bc0130.jpg?w=600&f=auto",
+                        }
+                      }
+                      style={
+                        [
+                          {
+                            "flex": 1,
+                            "height": "100%",
+                            "position": "absolute",
+                            "width": "100%",
+                            "zIndex": 10,
+                          },
+                          undefined,
+                          {
+                            "opacity": 0,
+                          },
+                        ]
+                      }
+                      testID="lazy-image-main-image"
+                    />
+                  </View>
                 </View>
               </View>
             </View>

package/src/infrastructure/ui/views/item/components/productVariantSlider/components/aspectRatioView/AspectRatioView.tsx ADDED Viewed

@@ -0,0 +1,46 @@
+import React, { FC, ReactNode, useCallback, useState } from "react";
+import { LayoutChangeEvent, StyleProp, View, ViewStyle } from "react-native";
+interface Dimension {
+  readonly width?: number | undefined;
+  readonly height?: number | undefined;
+}
+enum AspectRatioViewResizeDirection {
+  VERTICAL = "VERTICAL",
+  HORIZONTAL = "HORIZONTAL",
+}
+interface AspectRatioViewProps {
+  readonly children: ReactNode;
+  readonly aspectRatio?: number;
+  readonly resizeDirection?: AspectRatioViewResizeDirection;
+  readonly multiplier?: number;
+  readonly style?: StyleProp<ViewStyle>;
+}
+const AspectRatioView: FC<AspectRatioViewProps> = ({
+  aspectRatio = 1,
+  resizeDirection = AspectRatioViewResizeDirection.HORIZONTAL,
+  multiplier = 1,
+  style: customStyle = {},
+  children,
+}) => {
+  const [{ width, height }, setDimension] = useState<Dimension>({});
+  const handleOnLayout = useCallback(
+    ({ nativeEvent: { layout } }: LayoutChangeEvent) =>
+      setDimension(
+        resizeDirection === AspectRatioViewResizeDirection.HORIZONTAL
+          ? { width: layout.width * multiplier, height: layout.width * aspectRatio }
+          : { width: layout.height * aspectRatio, height: layout.height },
+      ),
+    [aspectRatio, multiplier, resizeDirection],
+  );
+  return (
+    <View onLayout={handleOnLayout}>
+      <View style={[{ width, height }, customStyle]}>{children}</View>
+    </View>
+  );
+};
+export { AspectRatioView, AspectRatioViewResizeDirection };