@momo-kits/tab-view 0.0.55-alpha.31 → 0.74.2-react-native.2

package/TabBarIndicator.tsx

@@ -1,160 +0,0 @@
-import { Colors } from '@momo-kits/core-v2';
-import * as React from 'react';
-import {
-    Animated,
-    Easing,
-    StyleSheet,
-    I18nManager,
-    StyleProp,
-    ViewStyle,
-    Platform,
-} from 'react-native';
-
-import type { Route, SceneRendererProps, NavigationState } from './types';
-
-export type GetTabWidth = (index: number) => number;
-
-export type Props<T extends Route> = SceneRendererProps & {
-    navigationState: NavigationState<T>;
-    width: string | number;
-    style?: StyleProp<ViewStyle>;
-    getTabWidth: GetTabWidth;
-    gap?: number;
-};
-
-export default class TabBarIndicator<T extends Route> extends React.Component<
-    Props<T>
-> {
-    componentDidMount() {
-        this.fadeInIndicator();
-    }
-
-    componentDidUpdate() {
-        this.fadeInIndicator();
-    }
-
-    private fadeInIndicator = () => {
-        const { navigationState, layout, width, getTabWidth } = this.props;
-
-        if (
-            !this.isIndicatorShown &&
-            width === 'auto' &&
-            layout.width &&
-            // We should fade-in the indicator when we have widths for all the tab items
-            navigationState.routes.every((_, i) => getTabWidth(i))
-        ) {
-            this.isIndicatorShown = true;
-
-            Animated.timing(this.opacity, {
-                toValue: 1,
-                duration: 150,
-                easing: Easing.in(Easing.linear),
-                useNativeDriver: true,
-            }).start();
-        }
-    };
-
-    private isIndicatorShown = false;
-
-    private opacity = new Animated.Value(this.props.width === 'auto' ? 0 : 1);
-
-    private getTranslateX = (
-        position: Animated.AnimatedInterpolation,
-        routes: Route[],
-        getTabWidth: GetTabWidth,
-        gap?: number,
-    ) => {
-        const inputRange = routes.map((_, i) => i);
-
-        // every index contains widths at all previous indices
-        const outputRange = routes.reduce<number[]>((acc, _, i) => {
-            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, I18nManager.isRTL ? -1 : 1);
-    };
-
-    render() {
-        const {
-            position,
-            navigationState,
-            getTabWidth,
-            width,
-            style,
-            layout,
-            gap,
-        } = this.props;
-        const { routes } = navigationState;
-
-        const transform = [];
-
-        if (layout.width) {
-            const translateX =
-                routes.length > 1
-                    ? this.getTranslateX(position, routes, getTabWidth, gap)
-                    : 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: 0.5 },
-            );
-        }
-
-        return (
-            <Animated.View
-                style={[
-                    styles.indicator,
-                    { width: width === 'auto' ? 1 : width },
-                    // If layout is not available, use `left` property for positioning the indicator
-                    // This avoids rendering delay until we are able to calculate translateX
-                    // If platform is macos use `left` property as `transform` is broken at the moment.
-                    // See: https://github.com/microsoft/react-native-macos/issues/280
-                    layout.width && Platform.OS !== 'macos'
-                        ? { left: 0 }
-                        : {
-                              left: `${
-                                  (100 / routes.length) * navigationState.index
-                              }%`,
-                          },
-                    { transform },
-                    width === 'auto' ? { opacity: this.opacity } : null,
-                    style,
-                ]}
-            />
-        );
-    }
-}
-
-const styles = StyleSheet.create({
-    indicator: {
-        backgroundColor: Colors.pink_03,
-        position: 'absolute',
-        left: 0,
-        bottom: 0,
-        right: 0,
-        height: 2,
-    },
-});

package/TabBarItem.tsx

@@ -1,296 +0,0 @@
-import * as React from 'react';
-import {
-    Animated,
-    StyleSheet,
-    View,
-    StyleProp,
-    LayoutChangeEvent,
-    TextStyle,
-    ViewStyle,
-} from 'react-native';
-import PlatformPressable from './PlatformPressable';
-import type { Scene, Route, NavigationState } from './types';
-import { Text } from '@momo-kits/core-v2';
-
-export type Props<T extends Route> = {
-    position: Animated.AnimatedInterpolation;
-    route: T;
-    navigationState: NavigationState<T>;
-    activeColor?: string;
-    inactiveColor?: string;
-    pressColor?: string;
-    pressOpacity?: number;
-    getLabelText: (scene: Scene<T>) => string | undefined;
-    getAccessible: (scene: Scene<T>) => boolean | undefined;
-    getAccessibilityLabel: (scene: Scene<T>) => string | undefined;
-    getTestID: (scene: Scene<T>) => string | undefined;
-    renderLabel?: (scene: {
-        route: T;
-        focused: boolean;
-        color: string;
-    }) => React.ReactNode;
-    renderIcon?: (scene: {
-        route: T;
-        focused: boolean;
-        color: string;
-    }) => React.ReactNode;
-    renderBadge?: (scene: Scene<T>) => React.ReactNode;
-    onLayout?: (event: LayoutChangeEvent) => void;
-    onPress: () => void;
-    onLongPress: () => void;
-    labelStyle?: StyleProp<TextStyle>;
-    style: StyleProp<ViewStyle>;
-};
-
-const DEFAULT_ACTIVE_COLOR = 'rgba(255, 255, 255, 1)';
-const DEFAULT_INACTIVE_COLOR = 'rgba(255, 255, 255, 0.7)';
-
-export default class TabBarItem<T extends Route> extends React.Component<
-    Props<T>
-> {
-    private getActiveOpacity = (
-        position: Animated.AnimatedInterpolation,
-        routes: Route[],
-        tabIndex: number,
-    ) => {
-        if (routes.length > 1) {
-            const inputRange = routes.map((_, i) => i);
-
-            return position.interpolate({
-                inputRange,
-                outputRange: inputRange.map((i) => (i === tabIndex ? 1 : 0)),
-            });
-        } else {
-            return 1;
-        }
-    };
-
-    private getInactiveOpacity = (
-        position: Animated.AnimatedInterpolation,
-        routes: Route[],
-        tabIndex: number,
-    ) => {
-        if (routes.length > 1) {
-            const inputRange = routes.map((_: Route, i: number) => i);
-
-            return position.interpolate({
-                inputRange,
-                outputRange: inputRange.map((i: number) =>
-                    i === tabIndex ? 0 : 1,
-                ),
-            });
-        } else {
-            return 0;
-        }
-    };
-
-    render() {
-        const {
-            route,
-            position,
-            navigationState,
-            renderLabel: renderLabelCustom,
-            renderIcon,
-            renderBadge,
-            getLabelText,
-            getTestID,
-            getAccessibilityLabel,
-            getAccessible,
-            activeColor: activeColorCustom,
-            inactiveColor: inactiveColorCustom,
-            pressColor,
-            pressOpacity,
-            labelStyle,
-            style,
-            onLayout,
-            onPress,
-            onLongPress,
-        } = this.props;
-
-        const tabIndex = navigationState.routes.indexOf(route);
-        const isFocused = navigationState.index === tabIndex;
-
-        const labelColorFromStyle = StyleSheet.flatten(labelStyle || {}).color;
-
-        const activeColor =
-            activeColorCustom !== undefined
-                ? activeColorCustom
-                : typeof labelColorFromStyle === 'string'
-                ? labelColorFromStyle
-                : DEFAULT_ACTIVE_COLOR;
-        const inactiveColor =
-            inactiveColorCustom !== undefined
-                ? inactiveColorCustom
-                : typeof labelColorFromStyle === 'string'
-                ? labelColorFromStyle
-                : DEFAULT_INACTIVE_COLOR;
-
-        const activeOpacity = this.getActiveOpacity(
-            position,
-            navigationState.routes,
-            tabIndex,
-        );
-        const inactiveOpacity = this.getInactiveOpacity(
-            position,
-            navigationState.routes,
-            tabIndex,
-        );
-
-        let icon: React.ReactNode | null = null;
-        let label: React.ReactNode | null = null;
-
-        if (renderIcon) {
-            const activeIcon = renderIcon({
-                route,
-                focused: true,
-                color: activeColor,
-            });
-            const inactiveIcon = renderIcon({
-                route,
-                focused: false,
-                color: inactiveColor,
-            });
-
-            if (inactiveIcon != null && activeIcon != null) {
-                icon = (
-                    <View style={styles.icon}>
-                        <Animated.View style={{ opacity: inactiveOpacity }}>
-                            {inactiveIcon}
-                        </Animated.View>
-                        <Animated.View
-                            style={[
-                                StyleSheet.absoluteFill,
-                                { opacity: activeOpacity },
-                            ]}>
-                            {activeIcon}
-                        </Animated.View>
-                    </View>
-                );
-            }
-        }
-
-        const renderLabel =
-            renderLabelCustom !== undefined
-                ? renderLabelCustom
-                : ({ route, color }: { route: T; color: string }) => {
-                      const labelText = getLabelText({ route });
-
-                      if (typeof labelText === 'string') {
-                          return (
-                              <Animated.Text
-                                  style={[
-                                      styles.label,
-                                      icon ? { marginTop: 0 } : null,
-                                      labelStyle,
-                                      { color },
-                                  ]}>
-                                  {labelText}
-                              </Animated.Text>
-                          );
-                      }
-
-                      return labelText;
-                  };
-
-        if (renderLabel) {
-            const activeLabel = renderLabel({
-                route,
-                focused: true,
-                color: activeColor,
-            });
-            const inactiveLabel = renderLabel({
-                route,
-                focused: false,
-                color: inactiveColor,
-            });
-
-            label = (
-                <View>
-                    <Animated.View style={{ opacity: inactiveOpacity }}>
-                        {inactiveLabel}
-                    </Animated.View>
-                    <Animated.View
-                        style={[
-                            StyleSheet.absoluteFill,
-                            { opacity: activeOpacity },
-                        ]}>
-                        {activeLabel}
-                    </Animated.View>
-                </View>
-            );
-        }
-
-        const tabStyle = StyleSheet.flatten(style);
-        const isWidthSet = tabStyle?.width !== undefined;
-        const tabContainerStyle: ViewStyle | null = isWidthSet
-            ? null
-            : { flex: 1 };
-
-        const scene = { route };
-
-        let accessibilityLabel = getAccessibilityLabel(scene);
-
-        accessibilityLabel =
-            typeof accessibilityLabel !== 'undefined'
-                ? accessibilityLabel
-                : getLabelText(scene);
-
-        const badge = renderBadge ? renderBadge(scene) : null;
-
-        return (
-            <PlatformPressable
-                android_ripple={{ borderless: true }}
-                testID={getTestID(scene)}
-                accessible={getAccessible(scene)}
-                accessibilityLabel={accessibilityLabel}
-                accessibilityRole="tab"
-                accessibilityState={{ selected: isFocused }}
-                // @ts-ignore: this is to support older React Native versions
-                accessibilityStates={isFocused ? ['selected'] : []}
-                pressColor={pressColor}
-                pressOpacity={pressOpacity}
-                delayPressIn={0}
-                onLayout={onLayout}
-                onPress={onPress}
-                onLongPress={onLongPress}
-                style={[styles.pressable, tabContainerStyle]}>
-                <View pointerEvents="none" style={[styles.item, tabStyle]}>
-                    {icon}
-                    {label}
-                    {badge != null ? (
-                        <View style={styles.badge}>{badge}</View>
-                    ) : null}
-                </View>
-            </PlatformPressable>
-        );
-    }
-}
-
-const styles = StyleSheet.create({
-    label: {
-        margin: 4,
-        fontSize: 14,
-        fontWeight: 'bold',
-        backgroundColor: 'transparent',
-    },
-    icon: {
-        margin: 2,
-    },
-    item: {
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-        padding: 10,
-        minHeight: 48,
-    },
-    badge: {
-        position: 'absolute',
-        top: 0,
-        right: 0,
-    },
-    pressable: {
-        // The label is not pressable on Windows
-        // Adding backgroundColor: 'transparent' seems to fix it
-        backgroundColor: 'transparent',
-    },
-});

package/TabView.tsx

@@ -1,156 +0,0 @@
-import * as React from 'react';
-import {
-    StyleSheet,
-    View,
-    StyleProp,
-    ViewStyle,
-    LayoutChangeEvent,
-} from 'react-native';
-import TabBar from './TabBar';
-import SceneView from './SceneView';
-import Pager from './Pager';
-import type {
-    Layout,
-    NavigationState,
-    Route,
-    SceneRendererProps,
-    PagerProps,
-} from './types';
-
-export type Props<T extends Route> = PagerProps & {
-    onIndexChange: (index: number) => void;
-    navigationState: NavigationState<T>;
-    renderScene: (props: SceneRendererProps & { route: T }) => React.ReactNode;
-    renderLazyPlaceholder?: (props: { route: T }) => React.ReactNode;
-    renderTabBar?: (
-        props: SceneRendererProps & { navigationState: NavigationState<T> },
-    ) => React.ReactNode;
-    tabBarPosition?: 'top' | 'bottom';
-    initialLayout?: Partial<Layout>;
-    lazy?: ((props: { route: T }) => boolean) | boolean;
-    lazyPreloadDistance?: number;
-    sceneContainerStyle?: StyleProp<ViewStyle>;
-    pagerStyle?: StyleProp<ViewStyle>;
-    style?: StyleProp<ViewStyle>;
-};
-
-export default function TabView<T extends Route>({
-    onIndexChange,
-    navigationState,
-    renderScene,
-    initialLayout,
-    keyboardDismissMode = 'auto',
-    lazy = false,
-    lazyPreloadDistance = 0,
-    onSwipeStart,
-    onSwipeEnd,
-    renderLazyPlaceholder = () => null,
-    renderTabBar = (props) => <TabBar {...props} />,
-    sceneContainerStyle,
-    pagerStyle,
-    style,
-    swipeEnabled = true,
-    tabBarPosition = 'top',
-}: Props<T>) {
-    const [layout, setLayout] = React.useState({
-        width: 0,
-        height: 0,
-        ...initialLayout,
-    });
-
-    const jumpToIndex = (index: number) => {
-        if (index !== navigationState.index) {
-            onIndexChange(index);
-        }
-    };
-
-    const handleLayout = (e: LayoutChangeEvent) => {
-        const { height, width } = e.nativeEvent.layout;
-
-        setLayout((prevLayout) => {
-            if (prevLayout.width === width && prevLayout.height === height) {
-                return prevLayout;
-            }
-
-            return { height, width };
-        });
-    };
-
-    return (
-        <View onLayout={handleLayout} style={[styles.pager, style]}>
-            <Pager
-                layout={layout}
-                navigationState={navigationState}
-                keyboardDismissMode={keyboardDismissMode}
-                swipeEnabled={swipeEnabled}
-                onSwipeStart={onSwipeStart}
-                onSwipeEnd={onSwipeEnd}
-                onIndexChange={jumpToIndex}
-                style={pagerStyle}>
-                {({ position, render, addEnterListener, jumpTo }) => {
-                    // All of the props here must not change between re-renders
-                    // This is crucial to optimizing the routes with PureComponent
-                    const sceneRendererProps = {
-                        position,
-                        layout,
-                        jumpTo,
-                    };
-
-                    return (
-                        <React.Fragment>
-                            {tabBarPosition === 'top' &&
-                                renderTabBar({
-                                    ...sceneRendererProps,
-                                    navigationState,
-                                })}
-                            {render(
-                                navigationState.routes.map((route, i) => {
-                                    return (
-                                        <SceneView
-                                            {...sceneRendererProps}
-                                            addEnterListener={addEnterListener}
-                                            key={route.key}
-                                            index={i}
-                                            lazy={
-                                                typeof lazy === 'function'
-                                                    ? lazy({ route })
-                                                    : lazy
-                                            }
-                                            lazyPreloadDistance={
-                                                lazyPreloadDistance
-                                            }
-                                            navigationState={navigationState}
-                                            style={sceneContainerStyle}>
-                                            {({ loading }) =>
-                                                loading
-                                                    ? renderLazyPlaceholder({
-                                                          route,
-                                                      })
-                                                    : renderScene({
-                                                          ...sceneRendererProps,
-                                                          route,
-                                                      })
-                                            }
-                                        </SceneView>
-                                    );
-                                }),
-                            )}
-                            {tabBarPosition === 'bottom' &&
-                                renderTabBar({
-                                    ...sceneRendererProps,
-                                    navigationState,
-                                })}
-                        </React.Fragment>
-                    );
-                }}
-            </Pager>
-        </View>
-    );
-}
-
-const styles = StyleSheet.create({
-    pager: {
-        flex: 1,
-        overflow: 'hidden',
-    },
-});

package/types.tsx

@@ -1,58 +0,0 @@
-import type { Animated } from 'react-native';
-import type { PagerViewProps } from 'react-native-pager-view';
-
-export type Route = {
-  key: string;
-  icon?: string;
-  title?: string;
-  accessible?: boolean;
-  accessibilityLabel?: string;
-  testID?: string;
-};
-
-export type Event = {
-  defaultPrevented: boolean;
-  preventDefault(): void;
-};
-
-export type Scene<T extends Route> = {
-  route: T;
-};
-
-export type NavigationState<T extends Route> = {
-  index: number;
-  routes: T[];
-};
-
-export type Layout = {
-  width: number;
-  height: number;
-};
-
-export type Listener = (value: number) => void;
-
-export type SceneRendererProps = {
-  layout: Layout;
-  position: Animated.AnimatedInterpolation;
-  jumpTo: (key: string) => void;
-};
-
-export type EventEmitterProps = {
-  addEnterListener: (listener: Listener) => () => void;
-};
-
-export type PagerProps = Omit<
-  PagerViewProps,
-  | 'initialPage'
-  | 'scrollEnabled'
-  | 'onPageScroll'
-  | 'onPageSelected'
-  | 'onPageScrollStateChanged'
-  | 'keyboardDismissMode'
-  | 'children'
-> & {
-  keyboardDismissMode?: 'none' | 'on-drag' | 'auto';
-  swipeEnabled?: boolean;
-  onSwipeStart?: () => void;
-  onSwipeEnd?: () => void;
-};

package/useAnimatedValue.tsx

@@ -1,12 +0,0 @@
-import * as React from 'react';
-import { Animated } from 'react-native';
-
-export default function useAnimatedValue(initialValue: number) {
-  const lazyRef = React.useRef<Animated.Value>();
-
-  if (lazyRef.current === undefined) {
-    lazyRef.current = new Animated.Value(initialValue);
-  }
-
-  return lazyRef.current as Animated.Value;
-}