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

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

@@ -0,0 +1,218 @@
+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

@@ -0,0 +1,67 @@
+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

@@ -0,0 +1,118 @@
+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

@@ -0,0 +1,180 @@
+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;