@amazon-devices/react-navigation__react-native-tab-view 8.0.9000000000 → 8.0.9000000002

package/lib/module/TabBar.js

@@ -1,472 +0,0 @@
-"use strict";
-
-import * as React from 'react';
-import { Animated, I18nManager, Platform, StyleSheet, View } from 'react-native';
-import useLatestCallback from 'use-latest-callback';
-import { TabBarIndicator } from "./TabBarIndicator.js";
-import { TabBarItem } from "./TabBarItem.js";
-import { useAnimatedValue } from "./useAnimatedValue.js";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const useNativeDriver = Platform.OS !== 'web';
-const Separator = ({
-  width
-}) => {
-  return /*#__PURE__*/_jsx(View, {
-    style: {
-      width
-    }
-  });
-};
-const getFlattenedTabWidth = style => {
-  const tabStyle = StyleSheet.flatten(style);
-  return tabStyle?.width;
-};
-const getFlattenedPaddingStart = style => {
-  const flattenStyle = StyleSheet.flatten(style);
-  return flattenStyle ? flattenStyle.paddingLeft || flattenStyle.paddingStart || flattenStyle.paddingHorizontal || 0 : 0;
-};
-const getFlattenedPaddingEnd = style => {
-  const flattenStyle = StyleSheet.flatten(style);
-  return flattenStyle ? flattenStyle.paddingRight || flattenStyle.paddingEnd || flattenStyle.paddingHorizontal || 0 : 0;
-};
-const convertPaddingPercentToSize = (value, layout) => {
-  switch (typeof value) {
-    case 'number':
-      return value;
-    case 'string':
-      if (value.endsWith('%')) {
-        const width = parseFloat(value);
-        if (Number.isFinite(width)) {
-          return layout.width * (width / 100);
-        }
-      }
-  }
-  return 0;
-};
-const getComputedTabWidth = (index, layout, routes, scrollEnabled, tabWidths, flattenedWidth, flattenedPaddingStart, flattenedPaddingEnd, gap) => {
-  if (flattenedWidth === 'auto') {
-    return tabWidths[routes[index].key] || 0;
-  }
-  switch (typeof flattenedWidth) {
-    case 'number':
-      return flattenedWidth;
-    case 'string':
-      if (flattenedWidth.endsWith('%')) {
-        const width = parseFloat(flattenedWidth);
-        if (Number.isFinite(width)) {
-          return layout.width * (width / 100);
-        }
-      }
-  }
-  if (scrollEnabled) {
-    return layout.width / 5 * 2;
-  }
-  const gapTotalWidth = (gap ?? 0) * (routes.length - 1);
-  const paddingTotalWidth = convertPaddingPercentToSize(flattenedPaddingStart, layout) + convertPaddingPercentToSize(flattenedPaddingEnd, layout);
-  return (layout.width - gapTotalWidth - paddingTotalWidth) / routes.length;
-};
-const getMaxScrollDistance = (tabBarWidth, layoutWidth) => tabBarWidth - layoutWidth;
-const getTranslateX = (scrollAmount, maxScrollDistance, direction) => Animated.multiply(Platform.OS === 'android' && direction === 'rtl' ? Animated.add(maxScrollDistance, Animated.multiply(scrollAmount, -1)) : scrollAmount, direction === 'rtl' ? 1 : -1);
-const getTabBarWidth = ({
-  navigationState,
-  layout,
-  gap,
-  scrollEnabled,
-  flattenedTabWidth,
-  flattenedPaddingStart,
-  flattenedPaddingEnd,
-  tabWidths
-}) => {
-  const {
-    routes
-  } = navigationState;
-  const paddingsWidth = Math.max(0, convertPaddingPercentToSize(flattenedPaddingStart, layout) + convertPaddingPercentToSize(flattenedPaddingEnd, layout));
-  return routes.reduce((acc, _, i) => acc + (i > 0 ? gap ?? 0 : 0) + getComputedTabWidth(i, layout, routes, scrollEnabled, tabWidths, flattenedTabWidth, flattenedPaddingStart, flattenedPaddingEnd, gap), paddingsWidth);
-};
-const normalizeScrollValue = ({
-  layout,
-  navigationState,
-  gap,
-  scrollEnabled,
-  tabWidths,
-  value,
-  flattenedTabWidth,
-  flattenedPaddingStart,
-  flattenedPaddingEnd,
-  direction
-}) => {
-  const tabBarWidth = getTabBarWidth({
-    layout,
-    navigationState,
-    tabWidths,
-    gap,
-    scrollEnabled,
-    flattenedTabWidth,
-    flattenedPaddingStart,
-    flattenedPaddingEnd
-  });
-  const maxDistance = getMaxScrollDistance(tabBarWidth, layout.width);
-  const scrollValue = Math.max(Math.min(value, maxDistance), 0);
-  if (Platform.OS === 'android' && direction === 'rtl') {
-    // On Android, scroll value is not applied in reverse in RTL
-    // so we need to manually adjust it to apply correct value
-    return maxDistance - scrollValue;
-  }
-  return scrollValue;
-};
-const getScrollAmount = ({
-  layout,
-  navigationState,
-  gap,
-  scrollEnabled,
-  flattenedTabWidth,
-  tabWidths,
-  flattenedPaddingStart,
-  flattenedPaddingEnd,
-  direction
-}) => {
-  const paddingInitial = direction === 'rtl' ? convertPaddingPercentToSize(flattenedPaddingEnd, layout) : convertPaddingPercentToSize(flattenedPaddingStart, layout);
-  const centerDistance = Array.from({
-    length: navigationState.index + 1
-  }).reduce((total, _, i) => {
-    const tabWidth = getComputedTabWidth(i, layout, navigationState.routes, scrollEnabled, tabWidths, flattenedTabWidth, flattenedPaddingStart, flattenedPaddingEnd, gap);
-
-    // To get the current index centered we adjust scroll amount by width of indexes
-    // 0 through (i - 1) and add half the width of current index i
-    return total + (i > 0 ? gap ?? 0 : 0) + (navigationState.index === i ? tabWidth / 2 : tabWidth);
-  }, paddingInitial);
-  const scrollAmount = centerDistance - layout.width / 2;
-  return normalizeScrollValue({
-    layout,
-    navigationState,
-    tabWidths,
-    value: scrollAmount,
-    gap,
-    scrollEnabled,
-    flattenedTabWidth,
-    flattenedPaddingStart,
-    flattenedPaddingEnd,
-    direction
-  });
-};
-const getLabelTextDefault = ({
-  route
-}) => route.title;
-const getAccessibleDefault = ({
-  route
-}) => typeof route.accessible !== 'undefined' ? route.accessible : true;
-const getAccessibilityLabelDefault = ({
-  route
-}) => typeof route.accessibilityLabel === 'string' ? route.accessibilityLabel : typeof route.title === 'string' ? route.title : undefined;
-const renderIndicatorDefault = props => /*#__PURE__*/_jsx(TabBarIndicator, {
-  ...props
-});
-const getTestIdDefault = ({
-  route
-}) => route.testID;
-
-// How many items measurements should we update per batch.
-// Defaults to 10, since that's whats FlatList is using in initialNumToRender.
-const MEASURE_PER_BATCH = 10;
-export function TabBar({
-  renderIndicator = renderIndicatorDefault,
-  gap = 0,
-  scrollEnabled,
-  jumpTo,
-  navigationState,
-  position,
-  activeColor,
-  bounces,
-  contentContainerStyle,
-  inactiveColor,
-  indicatorContainerStyle,
-  indicatorStyle,
-  onTabLongPress,
-  onTabPress,
-  pressColor,
-  pressOpacity,
-  direction = I18nManager.getConstants().isRTL ? 'rtl' : 'ltr',
-  renderTabBarItem,
-  style,
-  tabStyle,
-  layout: propLayout,
-  testID,
-  android_ripple,
-  options
-}) {
-  const [layout, setLayout] = React.useState(propLayout ?? {
-    width: 0,
-    height: 0
-  });
-  const [tabWidths, setTabWidths] = React.useState({});
-  const flatListRef = React.useRef(null);
-  const isFirst = React.useRef(true);
-  const scrollAmount = useAnimatedValue(0);
-  const measuredTabWidths = React.useRef({});
-  const {
-    routes
-  } = navigationState;
-  const flattenedTabWidth = getFlattenedTabWidth(tabStyle);
-  const isWidthDynamic = flattenedTabWidth === 'auto';
-  const flattenedPaddingEnd = getFlattenedPaddingEnd(contentContainerStyle);
-  const flattenedPaddingStart = getFlattenedPaddingStart(contentContainerStyle);
-  const scrollOffset = getScrollAmount({
-    layout,
-    navigationState,
-    tabWidths,
-    gap,
-    scrollEnabled,
-    flattenedTabWidth,
-    flattenedPaddingStart,
-    flattenedPaddingEnd,
-    direction
-  });
-  const hasMeasuredTabWidths = Boolean(layout.width) && routes.slice(0, navigationState.index).every(r => typeof tabWidths[r.key] === 'number');
-  React.useEffect(() => {
-    if (isFirst.current) {
-      isFirst.current = false;
-      return;
-    }
-    if (isWidthDynamic && !hasMeasuredTabWidths) {
-      return;
-    }
-    if (scrollEnabled) {
-      flatListRef.current?.scrollToOffset({
-        offset: scrollOffset,
-        animated: true
-      });
-    }
-  }, [hasMeasuredTabWidths, isWidthDynamic, scrollEnabled, scrollOffset]);
-  const handleLayout = e => {
-    const {
-      height,
-      width
-    } = e.nativeEvent.layout;
-    setLayout(layout => layout.width === width && layout.height === height ? layout : {
-      width,
-      height
-    });
-  };
-  const tabBarWidth = getTabBarWidth({
-    layout,
-    navigationState,
-    tabWidths,
-    gap,
-    scrollEnabled,
-    flattenedTabWidth,
-    flattenedPaddingStart,
-    flattenedPaddingEnd
-  });
-  const separatorsWidth = Math.max(0, routes.length - 1) * gap;
-  const paddingsWidth = Math.max(0, convertPaddingPercentToSize(flattenedPaddingStart, layout) + convertPaddingPercentToSize(flattenedPaddingEnd, layout));
-  const translateX = React.useMemo(() => getTranslateX(scrollAmount, getMaxScrollDistance(tabBarWidth, layout.width), direction), [direction, layout.width, scrollAmount, tabBarWidth]);
-  const renderItem = React.useCallback(({
-    item: route,
-    index
-  }) => {
-    const {
-      testID = getTestIdDefault({
-        route
-      }),
-      labelText = getLabelTextDefault({
-        route
-      }),
-      accessible = getAccessibleDefault({
-        route
-      }),
-      accessibilityLabel = getAccessibilityLabelDefault({
-        route
-      }),
-      ...rest
-    } = options?.[route.key] ?? {};
-    const onLayout = isWidthDynamic ? e => {
-      measuredTabWidths.current[route.key] = e.nativeEvent.layout.width;
-
-      // When we have measured widths for all of the tabs, we should updates the state
-      // We avoid doing separate setState for each layout since it triggers multiple renders and slows down app
-      // If we have more than 10 routes divide updating tabWidths into multiple batches. Here we update only first batch of 10 items.
-      if (routes.length > MEASURE_PER_BATCH && index === MEASURE_PER_BATCH && routes.slice(0, MEASURE_PER_BATCH).every(r => typeof measuredTabWidths.current[r.key] === 'number')) {
-        setTabWidths({
-          ...measuredTabWidths.current
-        });
-      } else if (routes.every(r => typeof measuredTabWidths.current[r.key] === 'number')) {
-        // When we have measured widths for all of the tabs, we should updates the state
-        // We avoid doing separate setState for each layout since it triggers multiple renders and slows down app
-        setTabWidths({
-          ...measuredTabWidths.current
-        });
-      }
-    } : undefined;
-    const onPress = () => {
-      const event = {
-        route,
-        defaultPrevented: false,
-        preventDefault: () => {
-          event.defaultPrevented = true;
-        }
-      };
-      onTabPress?.(event);
-      if (event.defaultPrevented) {
-        return;
-      }
-      jumpTo(route.key);
-    };
-    const onLongPress = () => onTabLongPress?.({
-      route
-    });
-
-    // Calculate the default width for tab for FlatList to work
-    const defaultTabWidth = !isWidthDynamic ? getComputedTabWidth(index, layout, routes, scrollEnabled, tabWidths, getFlattenedTabWidth(tabStyle), getFlattenedPaddingEnd(contentContainerStyle), getFlattenedPaddingStart(contentContainerStyle), gap) : undefined;
-    const props = {
-      ...rest,
-      position,
-      route,
-      navigationState,
-      testID,
-      labelText,
-      accessible,
-      accessibilityLabel,
-      activeColor,
-      inactiveColor,
-      pressColor,
-      pressOpacity,
-      onLayout,
-      onPress,
-      onLongPress,
-      style: tabStyle,
-      defaultTabWidth,
-      android_ripple
-    };
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [gap > 0 && index > 0 ? /*#__PURE__*/_jsx(Separator, {
-        width: gap
-      }) : null, renderTabBarItem ? renderTabBarItem({
-        key: route.key,
-        ...props
-      }) : /*#__PURE__*/_jsx(TabBarItem, {
-        ...props
-      }, route.key)]
-    });
-  }, [position, navigationState, options, activeColor, inactiveColor, pressColor, pressOpacity, isWidthDynamic, tabStyle, layout, routes, scrollEnabled, tabWidths, contentContainerStyle, gap, android_ripple, renderTabBarItem, onTabPress, jumpTo, onTabLongPress]);
-  const keyExtractor = React.useCallback(item => item.key, []);
-  const contentContainerStyleMemoized = React.useMemo(() => [styles.tabContent, scrollEnabled ? {
-    width: tabBarWidth
-  } : null, contentContainerStyle], [contentContainerStyle, scrollEnabled, tabBarWidth]);
-  const handleScroll = React.useMemo(() => Animated.event([{
-    nativeEvent: {
-      contentOffset: {
-        x: scrollAmount
-      }
-    }
-  }], {
-    useNativeDriver
-  }), [scrollAmount]);
-  const handleViewableItemsChanged = useLatestCallback(({
-    changed
-  }) => {
-    if (routes.length <= MEASURE_PER_BATCH) {
-      return;
-    }
-    // Get next vievable item
-    const item = changed[changed.length - 1];
-    const index = item?.index || 0;
-    if (item.isViewable && (index % 10 === 0 || index === navigationState.index || index === routes.length - 1)) {
-      setTabWidths({
-        ...measuredTabWidths.current
-      });
-    }
-  });
-  return /*#__PURE__*/_jsxs(Animated.View, {
-    onLayout: handleLayout,
-    style: [styles.tabBar, style],
-    children: [/*#__PURE__*/_jsx(Animated.View, {
-      pointerEvents: "none",
-      style: [styles.indicatorContainer, scrollEnabled ? {
-        transform: [{
-          translateX
-        }]
-      } : null, scrollEnabled ? {
-        width: tabBarWidth
-      } : null, indicatorContainerStyle],
-      children: renderIndicator({
-        position,
-        layout,
-        navigationState,
-        jumpTo,
-        direction,
-        width: isWidthDynamic ? 'auto' : Math.max(0, (tabBarWidth - separatorsWidth - paddingsWidth) / routes.length),
-        style: [indicatorStyle, {
-          start: flattenedPaddingStart,
-          end: flattenedPaddingEnd
-        }],
-        getTabWidth: i => getComputedTabWidth(i, layout, routes, scrollEnabled, tabWidths, flattenedTabWidth, flattenedPaddingEnd, flattenedPaddingStart, gap),
-        gap
-      })
-    }), /*#__PURE__*/_jsx(View, {
-      style: styles.scroll,
-      children: /*#__PURE__*/_jsx(Animated.FlatList, {
-        data: routes,
-        keyExtractor: keyExtractor,
-        horizontal: true,
-        role: "tablist",
-        keyboardShouldPersistTaps: "handled",
-        scrollEnabled: scrollEnabled,
-        bounces: bounces,
-        initialNumToRender: MEASURE_PER_BATCH,
-        onViewableItemsChanged: handleViewableItemsChanged,
-        alwaysBounceHorizontal: false,
-        scrollsToTop: false,
-        showsHorizontalScrollIndicator: false,
-        showsVerticalScrollIndicator: false,
-        automaticallyAdjustContentInsets: false,
-        overScrollMode: "never",
-        contentContainerStyle: contentContainerStyleMemoized,
-        scrollEventThrottle: 16,
-        renderItem: renderItem,
-        onScroll: handleScroll,
-        ref: flatListRef,
-        testID: testID
-      })
-    })]
-  });
-}
-const styles = StyleSheet.create({
-  scroll: {
-    overflow: Platform.select({
-      default: 'scroll',
-      web: undefined
-    })
-  },
-  tabBar: {
-    zIndex: 1,
-    backgroundColor: '#2196f3',
-    elevation: 4,
-    ...Platform.select({
-      default: {
-        shadowColor: 'black',
-        shadowOpacity: 0.1,
-        shadowRadius: StyleSheet.hairlineWidth,
-        shadowOffset: {
-          height: StyleSheet.hairlineWidth,
-          width: 0
-        }
-      },
-      web: {
-        boxShadow: '0 1px 1px rgba(0, 0, 0, 0.1)'
-      }
-    })
-  },
-  tabContent: {
-    flexGrow: 1,
-    flexDirection: 'row',
-    flexWrap: 'nowrap'
-  },
-  indicatorContainer: {
-    position: 'absolute',
-    top: 0,
-    start: 0,
-    end: 0,
-    bottom: 0
-  }
-});
-//# sourceMappingURL=TabBar.js.map

package/lib/module/TabBarIndicator.js

@@ -1,122 +0,0 @@
-"use strict";
-
-import * as React from 'react';
-import { Animated, Easing, Platform, StyleSheet } from 'react-native';
-import { useAnimatedValue } from "./useAnimatedValue.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const useNativeDriver = Platform.OS !== 'web';
-const getTranslateX = (position, routes, getTabWidth, direction, gap, width) => {
-  const inputRange = routes.map((_, i) => i);
-
-  // every index contains widths at all previous indices
-  const outputRange = routes.reduce((acc, _, i) => {
-    if (typeof width === 'number') {
-      if (i === 0) return [getTabWidth(i) / 2 - width / 2];
-      let sumTabWidth = 0;
-      for (let j = 0; j < i; j++) {
-        sumTabWidth += getTabWidth(j);
-      }
-      return [...acc, sumTabWidth + getTabWidth(i) / 2 + (gap ? gap * i : 0) - width / 2];
-    } else {
-      if (i === 0) return [0];
-      return [...acc, acc[i - 1] + getTabWidth(i - 1) + (gap ?? 0)];
-    }
-  }, []);
-  const translateX = position.interpolate({
-    inputRange,
-    outputRange,
-    extrapolate: 'clamp'
-  });
-  return Animated.multiply(translateX, direction === 'rtl' ? -1 : 1);
-};
-export function TabBarIndicator({
-  getTabWidth,
-  layout,
-  navigationState,
-  position,
-  width,
-  direction,
-  gap,
-  style,
-  children
-}) {
-  const isIndicatorShown = React.useRef(false);
-  const isWidthDynamic = width === 'auto';
-  const opacity = useAnimatedValue(isWidthDynamic ? 0 : 1);
-  const indicatorVisible = isWidthDynamic ? layout.width && navigationState.routes.slice(0, navigationState.index).every((_, r) => getTabWidth(r)) : true;
-  React.useEffect(() => {
-    const fadeInIndicator = () => {
-      if (!isIndicatorShown.current && isWidthDynamic &&
-      // We should fade-in the indicator when we have widths for all the tab items
-      indicatorVisible) {
-        isIndicatorShown.current = true;
-        Animated.timing(opacity, {
-          toValue: 1,
-          duration: 150,
-          easing: Easing.in(Easing.linear),
-          useNativeDriver
-        }).start();
-      }
-    };
-    fadeInIndicator();
-    return () => opacity.stopAnimation();
-  }, [indicatorVisible, isWidthDynamic, opacity]);
-  const {
-    routes
-  } = navigationState;
-  const transform = [];
-  if (layout.width) {
-    const translateX = routes.length > 1 ? getTranslateX(position, routes, getTabWidth, direction, gap, width) : 0;
-    transform.push({
-      translateX
-    });
-  }
-  if (width === 'auto') {
-    const inputRange = routes.map((_, i) => i);
-    const outputRange = inputRange.map(getTabWidth);
-    transform.push({
-      scaleX: routes.length > 1 ? position.interpolate({
-        inputRange,
-        outputRange,
-        extrapolate: 'clamp'
-      }) : outputRange[0]
-    }, {
-      translateX: direction === 'rtl' ? -0.5 : 0.5
-    });
-  }
-  const styleList = [];
-
-  // scaleX doesn't work properly on chrome and opera for linux and android
-  if (Platform.OS === 'web' && width === 'auto') {
-    styleList.push({
-      width: transform[1].scaleX
-    }, {
-      left: transform[0].translateX
-    });
-  } else {
-    styleList.push({
-      width: width === 'auto' ? 1 : width
-    }, {
-      start: `${100 / routes.length * navigationState.index}%`
-    }, {
-      transform
-    });
-  }
-  return /*#__PURE__*/_jsx(Animated.View, {
-    style: [styles.indicator, styleList, width === 'auto' ? {
-      opacity: opacity
-    } : null, style],
-    children: children
-  });
-}
-const styles = StyleSheet.create({
-  indicator: {
-    backgroundColor: '#ffeb3b',
-    position: 'absolute',
-    start: 0,
-    bottom: 0,
-    end: 0,
-    height: 2
-  }
-});
-//# sourceMappingURL=TabBarIndicator.js.map