@momo-kits/native-kits 0.157.1-com.1-debug → 0.157.1-com.1

package/src/libs/TabView/tabBar/SrollableTabBar.tsx

@@ -1,218 +0,0 @@
-import React, {
-  FC,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-  useCallback,
-  Ref,
-} from 'react';
-import { Animated, LayoutChangeEvent, ScrollView, View } from 'react-native';
-import { Tab, TabBarProps } from '../types';
-import styles from '../styles';
-import { ApplicationContext } from '@momo-kits/foundation';
-import TabItem from '../tabItem/TabItem';
-
-const ScrollableTabBar: FC<TabBarProps> = ({
-  tabs = [],
-  onPressTabItem,
-  selectedIndex,
-  selectedColor,
-  unselectedColor,
-  direction,
-}) => {
-  const { theme } = useContext(ApplicationContext);
-  const [itemWidthMap, setItemWidthMap] = useState<
-    { width: number; x: number }[]
-  >([]);
-  const animatedWidth = useRef(new Animated.Value(0)).current;
-  const animX = useRef(new Animated.Value(0)).current;
-
-  const scrollViewRef = useRef<ScrollView>(null);
-  const contentRef = useRef<View>(null);
-  const itemRefs = useRef<Array<Ref<View> | null>>([]);
-
-  const setMeasured = useCallback((index: number, width: number, x: number) => {
-    setItemWidthMap(prev => {
-      const next = prev.slice();
-      next[index] = { width, x };
-      return next;
-    });
-  }, []);
-
-  const measureIndex = useCallback(
-    (index: number, done?: () => void) => {
-      const item = itemRefs.current[index] as any;
-      const container = contentRef.current as any;
-      if (!item || !container) return;
-
-      if (item?.measureLayout) {
-        item.measureLayout(
-          container,
-          (x: number, _y: number, width: number) => {
-            setMeasured(index, width, x);
-            done?.();
-          },
-          () => {
-            item?.measure?.(
-              (
-                _x: number,
-                _y: number,
-                w: number,
-                _h: number,
-                pageX: number,
-              ) => {
-                container?.measure?.(
-                  (
-                    _cx: number,
-                    _cy: number,
-                    _cw: number,
-                    _ch: number,
-                    cPageX: number,
-                  ) => {
-                    setMeasured(index, w, pageX - cPageX);
-                    done?.();
-                  },
-                );
-              },
-            );
-          },
-        );
-      }
-    },
-    [setMeasured],
-  );
-
-  const ensureMeasured = useCallback(
-    (index: number, callback?: () => void) => {
-      if (itemWidthMap[index]) {
-        callback?.();
-        return;
-      }
-      measureIndex(index, callback);
-    },
-    [itemWidthMap, measureIndex],
-  );
-
-  const moveIndicator = useCallback(() => {
-    const w = itemWidthMap[selectedIndex]?.width ?? 0;
-    const x = itemWidthMap[selectedIndex]?.x ?? 0;
-    Animated.parallel([
-      Animated.timing(animatedWidth, {
-        toValue: w,
-        duration: 250,
-        useNativeDriver: false,
-      }),
-      Animated.timing(animX, {
-        toValue: x,
-        duration: 250,
-        useNativeDriver: false,
-      }),
-    ]).start();
-  }, [animatedWidth, animX, itemWidthMap, selectedIndex]);
-
-  const onLayout = useCallback(
-    (e: LayoutChangeEvent, index: number) => {
-      const { width, x } = e.nativeEvent.layout;
-      if (width != null && x != null) setMeasured(index, width, x);
-    },
-    [setMeasured],
-  );
-
-  const scrollToIndex = useCallback(
-    (index: number) => {
-      const targetIndex = Math.max(0, index - 1);
-      const pos = itemWidthMap[targetIndex];
-      if (!pos) return;
-      scrollViewRef.current?.scrollTo({ x: pos.x, animated: true });
-    },
-    [itemWidthMap],
-  );
-
-  const _onPressTabItem = useCallback(
-    (index: number) => {
-      ensureMeasured(index, () => {
-        scrollToIndex(index);
-        onPressTabItem?.(index);
-      });
-    },
-    [ensureMeasured, scrollToIndex, onPressTabItem],
-  );
-
-  useEffect(() => {
-    const id = requestAnimationFrame(() => {
-      tabs.forEach((_, i) => measureIndex(i));
-    });
-    return () => cancelAnimationFrame(id);
-  }, [tabs, measureIndex]);
-
-  useEffect(() => {
-    ensureMeasured(selectedIndex, () => {
-      moveIndicator();
-      scrollToIndex(selectedIndex);
-    });
-  }, [selectedIndex, ensureMeasured, moveIndicator, scrollToIndex]);
-
-  const renderItem = (params: { item: Tab; index: number }) => {
-    const { item, index } = params;
-    const isActive = selectedIndex === index;
-
-    return (
-      <View
-        key={`tab-view-item-wrapper-${index}`}
-        ref={itemRefs.current[index]}
-        collapsable={false}
-        onLayout={e => onLayout(e, index)}
-        style={styles.tabItemWrapper}
-      >
-        <TabItem
-          key={`Tab View Item ${item.title}-${index}`}
-          onPressTabItem={() => {
-            _onPressTabItem(index);
-          }}
-          active={isActive}
-          tab={item}
-          selectedColor={selectedColor}
-          unselectedColor={unselectedColor}
-          direction={direction}
-        />
-      </View>
-    );
-  };
-
-  return (
-    <ScrollView
-      ref={scrollViewRef}
-      horizontal
-      showsHorizontalScrollIndicator={false}
-      contentContainerStyle={{ position: 'relative' }}
-      style={[
-        styles.tabBar,
-        {
-          borderColor: theme.colors.border.default,
-          backgroundColor: theme.colors.background.surface,
-        },
-      ]}
-    >
-      <View
-        ref={contentRef}
-        collapsable={false}
-        style={{ position: 'relative', flexDirection: 'row' }}
-      >
-        {tabs.map((item, index) => renderItem({ item, index }))}
-        <Animated.View
-          style={[
-            styles.indicator,
-            {
-              left: animX,
-              width: animatedWidth,
-              backgroundColor: selectedColor,
-            },
-          ]}
-        />
-      </View>
-    </ScrollView>
-  );
-};
-
-export default ScrollableTabBar;

package/src/libs/TabView/tabBar/TabBar.tsx

@@ -1,67 +0,0 @@
-import React, {FC, useContext} from 'react';
-import {Animated, View} from 'react-native';
-import {TabBarProps} from '../types';
-import TabItem from '../tabItem/TabItem';
-import styles from '../styles';
-import {ApplicationContext, Spacing} from '@momo-kits/foundation';
-
-const TabBar: FC<TabBarProps> = ({
-  tabs = [],
-  selectedIndex,
-  onPressTabItem,
-  containerWidth = 0,
-  scrollX,
-  direction,
-  selectedColor,
-  unselectedColor,
-}) => {
-  const {theme} = useContext(ApplicationContext);
-  const itemWidth = containerWidth / tabs.length;
-
-  return (
-    <View
-      style={[
-        styles.tabBar,
-        {
-          borderColor: theme.colors.border.default,
-          backgroundColor: theme.colors.background.surface,
-        },
-      ]}>
-      {tabs.map((tab, index) => {
-        return (
-          <TabItem
-            key={`Tab View Item ${tab.title}-${index}`}
-            width={itemWidth}
-            onPressTabItem={() => {
-              onPressTabItem?.(index);
-            }}
-            active={selectedIndex === index}
-            tab={tab}
-            direction={direction}
-            selectedColor={selectedColor}
-            unselectedColor={unselectedColor}
-          />
-        );
-      })}
-      <Animated.View
-        style={[
-          styles.indicator,
-          {
-            left: scrollX.interpolate({
-              inputRange: [0, tabs.length - 1],
-              outputRange: [
-                Spacing.XS,
-                (tabs.length - 1) * itemWidth + Spacing.XS,
-              ],
-              extrapolate: 'clamp',
-            }),
-            width: itemWidth - Spacing.XS * 2,
-            backgroundColor: selectedColor,
-          },
-        ]}
-      />
-    </View>
-  );
-};
-
-export default TabBar;

package/src/libs/TabView/tabItem/CardTabItem.tsx

@@ -1,118 +0,0 @@
-import React, { FC, useContext, useMemo } from 'react';
-import { TouchableOpacity, View } from 'react-native';
-import { TabItemProps } from '../types';
-import styles from '../styles';
-import {
-  Badge,
-  BadgeDot,
-  Colors,
-  Icon,
-  MiniAppContext,
-  ScreenContext,
-  Spacing,
-  Text,
-  useScaleSize,
-} from '@momo-kits/foundation';
-
-const CardTabItem: FC<TabItemProps> = ({
-  tab,
-  active,
-  onPressTabItem,
-  width,
-  selectedColor,
-  unselectedColor,
-}) => {
-  const {
-    title,
-    icon,
-    renderIcon,
-    showDot = false,
-    dotSize = 'small',
-    badgeValue,
-    accessibilityLabel,
-  } = tab;
-  const color = active ? selectedColor : unselectedColor;
-
-  const app = useContext<any>(MiniAppContext);
-  const screen = useContext<any>(ScreenContext);
-
-  const componentName = 'CardTabItem';
-
-  const componentId = useMemo(() => {
-    if (accessibilityLabel) {
-      return accessibilityLabel;
-    }
-    let id = `${app.appId}/${app.code}/${screen.screenName}/${componentName}/${title}`;
-    return id;
-  }, [accessibilityLabel, app.appId, app.code, screen.screenName, title]);
-
-  const renderIconTabItem = () => {
-    return (
-      <>
-        {typeof renderIcon === 'function' && (
-          <View
-            style={[
-              styles.icon,
-              styles.iconHolder,
-              { marginRight: Spacing.XS },
-            ]}
-          >
-            {renderIcon(active)}
-          </View>
-        )}
-        {!renderIcon && !!icon && (
-          <Icon
-            color={color}
-            style={[styles.icon, { marginRight: Spacing.XS }]}
-            source={icon}
-          />
-        )}
-      </>
-    );
-  };
-
-  return (
-    <View style={styles.cardTabItemWrapper}>
-      <TouchableOpacity
-        onPress={onPressTabItem}
-        style={[
-          styles.cardTabItem,
-          {
-            width,
-          },
-        ]}
-        accessibilityLabel={componentId}
-        accessibilityState={{ checked: active }}
-      >
-        {renderIconTabItem()}
-        <Text
-          numberOfLines={1}
-          style={[styles.textCenter, { flexShrink: 1 }]}
-          typography={'body_default_regular'}
-          accessibilityLabel={`${componentId}|text`}
-        >
-          {title}
-        </Text>
-        {showDot && (
-          <BadgeDot
-            size={dotSize}
-            style={{
-              marginLeft: Spacing.XS,
-            }}
-          />
-        )}
-        {!showDot && badgeValue && (
-          <View>
-            <Badge
-              label={badgeValue}
-              style={{ marginLeft: Spacing.XS }}
-              accessibilityLabel={`${componentId}|badge`}
-            />
-          </View>
-        )}
-      </TouchableOpacity>
-    </View>
-  );
-};
-
-export default CardTabItem;

package/src/libs/TabView/tabItem/TabItem.tsx

@@ -1,180 +0,0 @@
-import React, { FC, useContext, useMemo } from 'react';
-import { TouchableOpacity, View } from 'react-native';
-import { TabItemProps } from '../types';
-import {
-  Badge,
-  BadgeDot,
-  Icon,
-  MiniAppContext,
-  useScaleSize,
-  ScreenContext,
-  Spacing,
-  Text,
-  Typography,
-} from '@momo-kits/foundation';
-import styles from '../styles';
-
-const TabItem: FC<TabItemProps> = ({
-  tab,
-  active,
-  onPressTabItem,
-  width,
-  direction,
-  selectedColor,
-  unselectedColor,
-}) => {
-  const {
-    title,
-    icon,
-    showDot = false,
-    dotSize = 'small',
-    badgeValue,
-    renderIcon,
-    accessibilityLabel,
-  } = tab;
-  const scaledHeight = useScaleSize(68);
-  const typography: Typography = active
-    ? 'header_s_semibold'
-    : 'body_default_regular';
-  const color = active ? selectedColor : unselectedColor;
-  const dotStyle = dotSize === 'large' ? styles.dot : styles.dotSmall;
-  const app = useContext<any>(MiniAppContext);
-  const screen = useContext<any>(ScreenContext);
-  const size48 = useScaleSize(48);
-
-  const componentName = 'TabItem';
-
-  const componentId = useMemo(() => {
-    if (accessibilityLabel) {
-      return accessibilityLabel;
-    }
-
-    return `${app.appId}/${app.code}/${screen.screenName}/${componentName}/${title}`;
-  }, [accessibilityLabel, app.appId, app.code, screen.screenName, title]);
-
-  const renderRowItem = () => {
-    return (
-      <TouchableOpacity
-        accessibilityLabel={componentId}
-        accessibilityState={{ checked: active }}
-        style={[
-          styles.tabItem,
-          {
-            width,
-            height: size48,
-            flexDirection: 'row',
-            overflow: 'hidden',
-            paddingVertical: Spacing.M,
-            paddingHorizontal: Spacing.M,
-          },
-        ]}
-        onPress={onPressTabItem}
-      >
-        {renderIcon && typeof renderIcon === 'function' && (
-          <View
-            style={[styles.icon, styles.iconHolder, { marginRight: Spacing.S }]}
-          >
-            {renderIcon(active)}
-          </View>
-        )}
-        {!renderIcon && !!icon && (
-          <Icon
-            style={[styles.icon, { marginRight: Spacing.S }]}
-            source={icon}
-            color={color}
-          />
-        )}
-        <Text
-          numberOfLines={1}
-          typography={typography}
-          color={color}
-          style={{ flexShrink: 1 }}
-          accessibilityLabel={`${componentId}|text`}
-        >
-          {title}
-        </Text>
-        {showDot && (
-          <BadgeDot size={dotSize} style={{ marginLeft: Spacing.XS }} />
-        )}
-        {!showDot && badgeValue && (
-          <View>
-            <Badge
-              label={badgeValue}
-              style={{ marginLeft: Spacing.XS }}
-              accessibilityLabel={`${componentId}|badge`}
-            />
-          </View>
-        )}
-      </TouchableOpacity>
-    );
-  };
-
-  const renderColumnItem = () => {
-    return (
-      <TouchableOpacity
-        style={[
-          styles.tabItem,
-          {
-            width,
-            height: scaledHeight,
-            flexDirection: 'column',
-            overflow: 'hidden',
-            paddingHorizontal: Spacing.M,
-            paddingVertical: Spacing.M,
-          },
-        ]}
-        onPress={onPressTabItem}
-        accessibilityLabel={componentId}
-        accessibilityState={{ checked: active }}
-      >
-        <View>
-          {renderIcon && typeof renderIcon === 'function' && (
-            <View
-              style={[
-                styles.icon,
-                styles.iconHolder,
-                { marginBottom: Spacing.XS },
-              ]}
-            >
-              {renderIcon(active)}
-            </View>
-          )}
-          {!renderIcon && !!icon && (
-            <Icon
-              style={[
-                styles.icon,
-                {
-                  marginBottom: Spacing.XS,
-                },
-              ]}
-              source={icon}
-              color={color}
-            />
-          )}
-          {(renderIcon || !!icon) && showDot && (
-            <BadgeDot style={dotStyle} size={dotSize} />
-          )}
-          {(renderIcon || !!icon) && !showDot && badgeValue && (
-            <Badge
-              label={badgeValue}
-              style={styles.badge}
-              accessibilityLabel={`${componentId}|badge`}
-            />
-          )}
-        </View>
-        <Text
-          numberOfLines={1}
-          typography={typography}
-          color={color}
-          accessibilityLabel={`${componentId}|text`}
-        >
-          {title}
-        </Text>
-      </TouchableOpacity>
-    );
-  };
-
-  return direction === 'row' ? renderRowItem() : renderColumnItem();
-};
-
-export default TabItem;