react-native-tab-view/lib/module/TabBarIndicator.js

Tab view component for React Native

"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 isArrayEqual = (a, b) => a.length === b.length && a.every((it, index) => Object.is(it, b[index]));
const calculateSize = (value, referenceWidth) => {
  if (typeof value === 'number') {
    return value;
  }
  if (typeof value === 'string' && value.endsWith('%')) {
    const parsed = parseFloat(value);
    if (Number.isFinite(parsed)) {
      return referenceWidth * (parsed / 100);
    }
  }
  return undefined;
};
const getIndicatorWidthWithMargins = (width, style, direction) => {
  const marginHorizontal = style?.marginHorizontal ?? style?.margin;
  const leftMargin = (direction === 'ltr' ? style?.marginStart : style?.marginEnd) ?? style?.marginLeft ?? marginHorizontal;
  const rightMargin = (direction === 'rtl' ? style?.marginStart : style?.marginEnd) ?? style?.marginRight ?? marginHorizontal;
  return Math.max(0, width - (calculateSize(leftMargin, width) ?? 0) - (calculateSize(rightMargin, width) ?? 0));
};
const getIndicatorWidth = (tabWidth, width, style, direction) => {
  const customWidth = calculateSize(style?.width, tabWidth);
  if (customWidth !== undefined) {
    return customWidth;
  }
  if (typeof width === 'number') {
    return getIndicatorWidthWithMargins(width, style, direction);
  }
  return width;
};
const getTranslateXOutputRange = (routes, getTabWidth, gap, getWidth) => {
  return routes.map((_, i) => {
    let sumTabWidth = 0;
    for (let j = 0; j < i; j++) {
      sumTabWidth += getTabWidth(j);
    }
    const indicatorWidth = getWidth?.(i);
    const tabOffset = sumTabWidth + (gap ? gap * i : 0);
    if (indicatorWidth === undefined) {
      return tabOffset;
    }
    return tabOffset + getTabWidth(i) / 2 - indicatorWidth / 2;
  });
};
export function TabBarIndicator({
  getTabWidth,
  layout,
  navigationState,
  position,
  width,
  direction,
  gap,
  style,
  children
}) {
  const isIndicatorShown = React.useRef(false);
  const isWidthDynamic = width === 'auto';
  const flattenedStyle = StyleSheet.flatten(style);
  const hasCustomIndicatorWidth = typeof flattenedStyle?.width === 'number' || typeof flattenedStyle?.width === 'string' && flattenedStyle?.width.endsWith('%');
  const constantIndicatorWidth = typeof flattenedStyle?.width === 'number' ? flattenedStyle.width : undefined;
  const isCentered = hasCustomIndicatorWidth && (flattenedStyle?.margin === 'auto' || flattenedStyle?.marginHorizontal === 'auto');

  // If indicator has a custom width, we need to adjust calculations to account for it
  // It should be centered relative to the tab if the margin is set to auto
  const getCenteredIndicatorWidth = tabWidth => {
    if (isCentered) {
      return calculateSize(flattenedStyle?.width, tabWidth);
    }
    if (typeof width === 'number') {
      return width;
    }
    return undefined;
  };
  const opacity = useAnimatedValue(isWidthDynamic ? 0 : 1);

  // We should fade-in the indicator when we have widths for all the tab items
  const indicatorVisible = isWidthDynamic ? layout.width && navigationState.routes.slice(0, navigationState.index + 1).every((_, r) => getTabWidth(r)) : true;
  React.useEffect(() => {
    const fadeInIndicator = () => {
      if (!isIndicatorShown.current && isWidthDynamic && indicatorVisible) {
        Animated.timing(opacity, {
          toValue: 1,
          duration: 150,
          easing: Easing.in(Easing.linear),
          useNativeDriver
        }).start(({
          finished
        }) => {
          if (finished) {
            isIndicatorShown.current = true;
          }
        });
      }
    };
    fadeInIndicator();
    return () => opacity.stopAnimation();
  }, [indicatorVisible, isWidthDynamic, opacity]);
  const {
    routes
  } = navigationState;
  const computedTranslateXOutputRange = layout.width && routes.length > 1 ? getTranslateXOutputRange(routes, getTabWidth, gap, index => getCenteredIndicatorWidth(getTabWidth(index))) : [];
  const computedScaleXOutputRange = width === 'auto' && constantIndicatorWidth == null ? routes.map((_, i) => {
    const tabW = getTabWidth(i);
    return calculateSize(flattenedStyle?.width, tabW) ?? getIndicatorWidthWithMargins(tabW, flattenedStyle, direction);
  }) : [];

  // Keep the output ranges referentially stable while the values are the same
  // So that the interpolations below aren't recreated on every render
  const [translateXOutputRange, setTranslateXOutputRange] = React.useState(computedTranslateXOutputRange);
  const [scaleXOutputRange, setScaleXOutputRange] = React.useState(computedScaleXOutputRange);
  if (!isArrayEqual(translateXOutputRange, computedTranslateXOutputRange)) {
    setTranslateXOutputRange(computedTranslateXOutputRange);
  }
  if (!isArrayEqual(scaleXOutputRange, computedScaleXOutputRange)) {
    setScaleXOutputRange(computedScaleXOutputRange);
  }
  const translateX = React.useMemo(() => translateXOutputRange.length ? Animated.multiply(position.interpolate({
    inputRange: translateXOutputRange.map((_, i) => i),
    outputRange: translateXOutputRange,
    extrapolate: 'clamp'
  }), direction === 'rtl' ? -1 : 1) : 0, [direction, position, translateXOutputRange]);
  const scaleX = React.useMemo(() => scaleXOutputRange.length > 1 ? position.interpolate({
    inputRange: scaleXOutputRange.map((_, i) => i),
    outputRange: scaleXOutputRange,
    extrapolate: 'clamp'
  }) : scaleXOutputRange[0], [position, scaleXOutputRange]);
  const transform = [];
  transform.push({
    translateX
  });
  if (width === 'auto' && constantIndicatorWidth == null) {
    transform.push({
      scaleX
    }, {
      translateX: direction === 'rtl' ? -0.5 : 0.5
    });
  }
  const styleList = [];

  // transform doesn't work properly on chrome and opera for linux and android
  // so we need to use width and left/right instead of scaleX and translateX
  // https://github.com/react-navigation/react-navigation/pull/11440
  if (Platform.OS === 'web' && width === 'auto' && constantIndicatorWidth == null) {
    const start = flattenedStyle?.start;
    const translate = direction === 'rtl' ? Animated.multiply(translateX, -1) : translateX;
    const offset = typeof start === 'number' ? Animated.add(translate, start) : translate;
    styleList.push({
      width: transform[1].scaleX
    }, direction === 'rtl' ? {
      right: offset
    } : {
      left: offset
    });
  } else {
    styleList.push({
      width: width === 'auto' ?
      // if the indicator has a constant width, use it as is
      // we don't need to scale it to match tab width
      constantIndicatorWidth ?? 1 : getIndicatorWidth(getTabWidth(navigationState.index), width, flattenedStyle, direction)
    }, {
      start: `${100 / routes.length * navigationState.index}%`
    }, {
      transform
    });
  }
  let finalStyle;
  if (hasCustomIndicatorWidth && style != null) {
    const rest = {
      ...flattenedStyle
    };
    delete rest.width;
    if (isCentered) {
      if (rest.margin === 'auto') {
        delete rest.margin;
      }
      if (rest.marginHorizontal === 'auto') {
        delete rest.marginHorizontal;
      }
    }
    finalStyle = rest;
  } else {
    finalStyle = style;
  }
  return /*#__PURE__*/_jsx(Animated.View, {
    style: [styles.indicator, styleList, width === 'auto' ? {
      opacity: opacity
    } : null, finalStyle],
    children: children
  });
}
const styles = StyleSheet.create({
  indicator: {
    backgroundColor: '#ffeb3b',
    position: 'absolute',
    start: 0,
    bottom: 0,
    end: 0,
    height: 2
  }
});
//# sourceMappingURL=TabBarIndicator.js.map