overlapping-cards-scroll 0.1.6 → 0.1.7

package/dist/react-native.cjs

@@ -28,9 +28,25 @@ var import_react_native = require("react-native");
 var import_jsx_runtime = require("react/jsx-runtime");
 var clamp = (value, min, max) => Math.min(Math.max(value, min), max);
 var PAGE_DOT_POSITIONS = /* @__PURE__ */ new Set(["above", "below", "overlay"]);
-var TAB_POSITIONS = /* @__PURE__ */ new Set(["above", "below"]);
+var TABS_POSITION_MAP = {
+  "top-left": { side: "top", align: "start", orientation: "horizontal" },
+  "top-center": { side: "top", align: "center", orientation: "horizontal" },
+  "top-right": { side: "top", align: "end", orientation: "horizontal" },
+  "bottom-left": { side: "bottom", align: "start", orientation: "horizontal" },
+  "bottom-center": { side: "bottom", align: "center", orientation: "horizontal" },
+  "bottom-right": { side: "bottom", align: "end", orientation: "horizontal" },
+  "left-top": { side: "left", align: "start", orientation: "vertical" },
+  "left-center": { side: "left", align: "center", orientation: "vertical" },
+  "left-bottom": { side: "left", align: "end", orientation: "vertical" },
+  "right-top": { side: "right", align: "start", orientation: "vertical" },
+  "right-center": { side: "right", align: "center", orientation: "vertical" },
+  "right-bottom": { side: "right", align: "end", orientation: "vertical" },
+  "above": { side: "top", align: "center", orientation: "horizontal" },
+  "below": { side: "bottom", align: "center", orientation: "horizontal" }
+};
+var DEFAULT_TABS_POSITION = { side: "top", align: "center", orientation: "horizontal" };
+var parseTabsPosition = (value) => value && TABS_POSITION_MAP[value] || DEFAULT_TABS_POSITION;
 var normalizePageDotsPosition = (value) => PAGE_DOT_POSITIONS.has(value) ? value : "below";
-var normalizeTabsPosition = (value) => TAB_POSITIONS.has(value) ? value : "above";
 var toNumericOffset = (value, fallback = 0) => {
   if (typeof value === "number" && Number.isFinite(value)) {
     return value;
@@ -244,7 +260,8 @@ function OverlappingCardsScrollRN(props) {
     return null;
   }, [itemsProp]);
   const cardCount = cards.length;
-  const resolvedTabsPosition = normalizeTabsPosition(tabsPosition);
+  const parsedTabsPosition = parseTabsPosition(tabsPosition);
+  const isVerticalTabs = parsedTabsPosition.orientation === "vertical";
   const showNavigationTabs = showTabs && cardCount > 1 && cardNames !== null;
   const resolvedPageDotsOffset = toNumericOffset(pageDotsOffset, 10);
   const resolvedTabsOffset = toNumericOffset(tabsOffset, 10);
@@ -534,16 +551,21 @@ function OverlappingCardsScrollRN(props) {
       }
     );
   };
-  const renderTabs = (position) => {
-    if (!showNavigationTabs || resolvedTabsPosition !== position || cardNames === null) {
+  const renderTabs = () => {
+    if (!showNavigationTabs || cardNames === null) {
       return null;
     }
-    const containerStyle = position === "above" ? [styles.tabsRow, { marginBottom: resolvedTabsOffset }] : [styles.tabsRow, { marginTop: resolvedTabsOffset }];
+    const { side, align, orientation } = parsedTabsPosition;
+    const isVertical = orientation === "vertical";
+    const justifyContent = align === "start" ? "flex-start" : align === "end" ? "flex-end" : "center";
+    const baseStyle = isVertical ? styles.tabsColumn : styles.tabsRow;
+    const containerStyle = side === "top" ? [baseStyle, { justifyContent, marginBottom: resolvedTabsOffset }] : side === "bottom" ? [baseStyle, { justifyContent, marginTop: resolvedTabsOffset }] : side === "left" ? [baseStyle, { justifyContent, marginRight: resolvedTabsOffset }] : [baseStyle, { justifyContent, marginLeft: resolvedTabsOffset }];
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       TabsContainerComponent,
       {
-        position,
-        className: `rn-ocs-tabs rn-ocs-tabs--${position}`,
+        position: side,
+        align,
+        className: `rn-ocs-tabs rn-ocs-tabs--${side}`,
         style: containerStyle,
         ariaLabel: "Card tabs",
         cardNames,
@@ -564,7 +586,8 @@ function OverlappingCardsScrollRN(props) {
             {
               name,
               index,
-              position,
+              position: side,
+              align,
               isPrincipal,
               influence,
               animate,
@@ -578,121 +601,126 @@ function OverlappingCardsScrollRN(props) {
               onPress: pressTab,
               onClick: pressTab
             },
-            `rn-ocs-tab-${position}-${index}`
+            `rn-ocs-tab-${side}-${index}`
           );
         })
       }
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    OverlappingCardsScrollRNControllerContext.Provider,
-    {
-      value: controllerContextValue,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { style: [styles.shell, style], children: [
-        renderTabs("above"),
-        renderPageDots("above"),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          import_react_native.View,
-          {
-            style: [styles.root, { height: resolvedCardHeight }],
-            onLayout: (event) => {
-              const width = event.nativeEvent.layout.width || 1;
-              setViewportWidth(Math.max(1, width));
-            },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_react_native.Animated.ScrollView,
+  const tabsBeforeStage = parsedTabsPosition.side === "top" || parsedTabsPosition.side === "left";
+  const stageAndDots = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    renderPageDots("above"),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_react_native.View,
+      {
+        style: [styles.root, { height: resolvedCardHeight }],
+        onLayout: (event) => {
+          const width = event.nativeEvent.layout.width || 1;
+          setViewportWidth(Math.max(1, width));
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_react_native.Animated.ScrollView,
+            {
+              ref: scrollRef,
+              horizontal: true,
+              style: [styles.scrollRegion, { height: resolvedCardHeight }],
+              contentContainerStyle: {
+                width: layout.trackWidth,
+                height: resolvedCardHeight
+              },
+              onScroll,
+              onScrollBeginDrag: cancelFocusTransition,
+              onMomentumScrollBegin: cancelFocusTransition,
+              scrollEventThrottle: 16,
+              showsHorizontalScrollIndicator,
+              snapToInterval: shouldSnapToCard ? layout.stepDistance : void 0,
+              snapToAlignment: shouldSnapToCard ? "start" : void 0,
+              decelerationRate: shouldSnapToCard ? snapDecelerationRate : "normal",
+              disableIntervalMomentum: shouldSnapToCard ? snapDisableIntervalMomentum : false,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_react_native.View,
                 {
-                  ref: scrollRef,
-                  horizontal: true,
-                  style: [styles.scrollRegion, { height: resolvedCardHeight }],
-                  contentContainerStyle: {
-                    width: layout.trackWidth,
-                    height: resolvedCardHeight
-                  },
-                  onScroll,
-                  onScrollBeginDrag: cancelFocusTransition,
-                  onMomentumScrollBegin: cancelFocusTransition,
-                  scrollEventThrottle: 16,
-                  showsHorizontalScrollIndicator,
-                  snapToInterval: shouldSnapToCard ? layout.stepDistance : void 0,
-                  snapToAlignment: shouldSnapToCard ? "start" : void 0,
-                  decelerationRate: shouldSnapToCard ? snapDecelerationRate : "normal",
-                  disableIntervalMomentum: shouldSnapToCard ? snapDisableIntervalMomentum : false,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                    import_react_native.View,
-                    {
-                      style: [
-                        styles.track,
-                        { width: layout.trackWidth, height: resolvedCardHeight }
+                  style: [
+                    styles.track,
+                    { width: layout.trackWidth, height: resolvedCardHeight }
+                  ],
+                  children: cards.map((card, index) => {
+                    var _a;
+                    const restingRightX = index === 0 ? 0 : (index - 1) * layout.peek + layout.cardWidth;
+                    const restingLeftX = index * layout.peek;
+                    const cardXDuringNormalScroll = index === 0 ? 0 : scrollX.interpolate({
+                      inputRange: index === 1 ? [0, layout.stepDistance] : [
+                        (index - 1) * layout.stepDistance,
+                        index * layout.stepDistance
+                      ],
+                      outputRange: [restingRightX, restingLeftX],
+                      extrapolate: "clamp"
+                    });
+                    const cardXDuringFocusTransition = focusTransition ? focusTransitionProgress.interpolate({
+                      inputRange: [0, 1],
+                      outputRange: [
+                        resolveCardXAtProgress(
+                          index,
+                          focusTransition.fromProgress,
+                          layout
+                        ),
+                        resolveCardXAtProgress(
+                          index,
+                          focusTransition.toProgress,
+                          layout
+                        )
                       ],
-                      children: cards.map((card, index) => {
-                        var _a;
-                        const restingRightX = index === 0 ? 0 : (index - 1) * layout.peek + layout.cardWidth;
-                        const restingLeftX = index * layout.peek;
-                        const cardXDuringNormalScroll = index === 0 ? 0 : scrollX.interpolate({
-                          inputRange: index === 1 ? [0, layout.stepDistance] : [
-                            (index - 1) * layout.stepDistance,
-                            index * layout.stepDistance
-                          ],
-                          outputRange: [restingRightX, restingLeftX],
-                          extrapolate: "clamp"
-                        });
-                        const cardXDuringFocusTransition = focusTransition ? focusTransitionProgress.interpolate({
-                          inputRange: [0, 1],
-                          outputRange: [
-                            resolveCardXAtProgress(
-                              index,
-                              focusTransition.fromProgress,
-                              layout
-                            ),
-                            resolveCardXAtProgress(
-                              index,
-                              focusTransition.toProgress,
-                              layout
-                            )
-                          ],
-                          extrapolate: "clamp"
-                        }) : null;
-                        const animatedCardX = cardXDuringFocusTransition != null ? cardXDuringFocusTransition : cardXDuringNormalScroll;
-                        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                          import_react_native.Animated.View,
+                      extrapolate: "clamp"
+                    }) : null;
+                    const animatedCardX = cardXDuringFocusTransition != null ? cardXDuringFocusTransition : cardXDuringNormalScroll;
+                    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_react_native.Animated.View,
+                      {
+                        pointerEvents: "box-none",
+                        style: [
+                          styles.card,
                           {
-                            pointerEvents: "box-none",
-                            style: [
-                              styles.card,
+                            width: layout.cardWidth,
+                            height: resolvedCardHeight,
+                            transform: [
                               {
-                                width: layout.cardWidth,
-                                height: resolvedCardHeight,
-                                transform: [
-                                  {
-                                    translateX: import_react_native.Animated.add(scrollX, animatedCardX)
-                                  }
-                                ]
-                              },
-                              cardContainerStyle
-                            ],
-                            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { pointerEvents: "auto", style: styles.cardContent, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                              OverlappingCardsScrollRNCardIndexContext.Provider,
-                              {
-                                value: index,
-                                children: card
+                                translateX: import_react_native.Animated.add(scrollX, animatedCardX)
                               }
-                            ) })
+                            ]
                           },
-                          (_a = card.key) != null ? _a : `rn-ocs-card-${index}`
-                        );
-                      })
-                    }
-                  )
+                          cardContainerStyle
+                        ],
+                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { pointerEvents: "auto", style: styles.cardContent, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          OverlappingCardsScrollRNCardIndexContext.Provider,
+                          {
+                            value: index,
+                            children: card
+                          }
+                        ) })
+                      },
+                      (_a = card.key) != null ? _a : `rn-ocs-card-${index}`
+                    );
+                  })
                 }
-              ),
-              renderPageDots("overlay")
-            ]
-          }
-        ),
-        renderPageDots("below"),
-        renderTabs("below")
+              )
+            }
+          ),
+          renderPageDots("overlay")
+        ]
+      }
+    ),
+    renderPageDots("below")
+  ] });
+  const stageContent = isVerticalTabs ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: styles.mainColumn, children: stageAndDots }) : stageAndDots;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    OverlappingCardsScrollRNControllerContext.Provider,
+    {
+      value: controllerContextValue,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { style: [isVerticalTabs ? styles.shellRow : styles.shell, style], children: [
+        tabsBeforeStage ? renderTabs() : null,
+        stageContent,
+        !tabsBeforeStage ? renderTabs() : null
       ] })
     }
   );
@@ -702,6 +730,15 @@ var styles = import_react_native.StyleSheet.create({
     width: "100%",
     minWidth: 0
   },
+  shellRow: {
+    width: "100%",
+    minWidth: 0,
+    flexDirection: "row"
+  },
+  mainColumn: {
+    flex: 1,
+    minWidth: 0
+  },
   root: {
     width: "100%",
     minWidth: 0,
@@ -757,6 +794,12 @@ var styles = import_react_native.StyleSheet.create({
     flexWrap: "wrap",
     zIndex: 6
   },
+  tabsColumn: {
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 6
+  },
   tab: {
     borderRadius: 999,
     borderWidth: 1,