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

package/src/libs/Swipe/types.ts

@@ -0,0 +1,109 @@
+import { ReactElement } from 'react';
+
+/**
+ * Represents an action item in the Swipe component.
+ */
+export type SwipeAction = {
+  /**
+   * The text label for the action button. This label is typically displayed on the button itself.
+   */
+  label: string;
+
+  /**
+   * The icon for the action button, providing a visual representation of the action.
+   */
+  icon: string;
+
+  /**
+   * The function to be called when the action button is pressed.
+   */
+  onPress: () => void;
+
+  /**
+   * Optional. The background color of the action button.
+   * If not provided, a default color is used.
+   */
+  backgroundColor?: string;
+};
+
+/**
+ * Properties for the Swipe component, which allows swipeable actions on an item.
+ */
+export type SwipeProps = {
+  children?: React.ReactNode;
+  /**
+   * Optional. An array of `SwipeAction` items representing the actions available
+   * on swiping to the left. Each action is rendered as a button on the swipeable surface.
+   */
+  leftActions?: SwipeAction[];
+
+  /**
+   * Optional. An array of `SwipeAction` items representing the actions available
+   * on swiping to the right. Each action is rendered as a button on the swipeable surface.
+   */
+  rightActions?: SwipeAction[];
+
+  /**
+   * Optional. A callback function triggered when the swipeable surface is
+   * fully opened on the left side.
+   */
+  onSwipeableLeftOpen?: () => void;
+
+  /**
+   * Optional. A callback function triggered when the swipeable surface is
+   * fully opened on the right side.
+   */
+  onSwipeableRightOpen?: () => void;
+
+  /**
+   * Optional. A callback function triggered when the swipeable surface is
+   * fully opened, either from the left or the right.
+   */
+  onSwipeableOpen?: () => void;
+
+  /**
+   * Optional. A callback function triggered when the swipeable surface has
+   * returned to its original position and is closed.
+   */
+  onSwipeableClose?: () => void;
+
+  /**
+   * Optional. A callback function triggered when the swipeable surface is
+   * about to open on the left side.
+   */
+  onSwipeableLeftWillOpen?: () => void;
+
+  /**
+   * Optional. A callback function triggered when the swipeable surface is
+   * about to open on the right side.
+   */
+  onSwipeableRightWillOpen?: () => void;
+
+  /**
+   * Optional. A callback function triggered when the swipeable surface is
+   * about to open, either from the left or the right.
+   */
+  onSwipeableWillOpen?: () => void;
+
+  /**
+   * Optional. A callback function triggered when the swipeable surface is
+   * about to close and return to its original position.
+   */
+  onSwipeableWillClose?: () => void;
+
+  /**
+   * Optional. A reference to the swipeable component, allowing external control
+   */
+  height?: number;
+
+  /**
+   * Optional. A reference to the swipeable component, allowing external control radius of the item.
+   */
+  itemRadius?: number;
+};
+
+export type SwipeableRef = {
+  openLeft: () => void;
+  openRight: () => void;
+  close: () => void;
+};

package/src/libs/TabView/assets/Path.tsx

@@ -0,0 +1,29 @@
+import React, {FC} from 'react';
+import {ViewProps} from 'react-native';
+import Svg, {Path} from 'react-native-svg';
+
+interface PathSvgProps extends ViewProps {
+  pathWidth: number;
+}
+
+const PathSvg: FC<PathSvgProps> = ({style, pathWidth}) => {
+  const width = pathWidth;
+  const height = 44;
+  const viewBox = `0 0 ${width} ${height}`;
+
+  return (
+    <Svg
+      width={width}
+      height={height}
+      viewBox={viewBox}
+      fill="none"
+      style={style}>
+      <Path
+        d="M0 0H0.60765C6.47582 0 11.4819 4.23831 12.4602 10.0244C13.9248 18.6872 15.9294 30.37 16.6925 34C17.9536 40 22.259 44 27.9996 44H0V0Z"
+        fill="white"
+      />
+    </Svg>
+  );
+};
+
+export default PathSvg;

package/src/libs/TabView/index.tsx

@@ -0,0 +1,184 @@
+import React, {
+  forwardRef,
+  ForwardRefRenderFunction,
+  useCallback,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { Animated, LayoutChangeEvent, View } from 'react-native';
+import { Tab, TabViewProps, TabViewRef } from './types';
+import TabBar from './tabBar/TabBar';
+import styles from './styles';
+import CardTabBar from './tabBar/CardTabBar';
+import ScrollableTabBar from './tabBar/SrollableTabBar';
+import PagerView, {
+  PagerViewOnPageScrollEvent,
+  PagerViewOnPageSelectedEvent,
+} from 'react-native-pager-view';
+import {
+  ApplicationContext,
+  MiniAppContext,
+  ScreenContext,
+} from '@momo-kits/foundation';
+
+const TabComponent: ForwardRefRenderFunction<TabViewRef, TabViewProps> = (
+  {
+    scrollable = false,
+    tabs = [],
+    onPressTabItem,
+    type = 'default',
+    initialPage = 0,
+    pagerProps,
+    direction,
+    selectedColor,
+    unselectedColor,
+    style,
+    accessibilityLabel,
+    accessibilityLabelForSelectedCard,
+    fitContent = false,
+  },
+  ref,
+) => {
+  const startPage =
+    initialPage > tabs.length - 1 ? tabs.length - 1 : initialPage;
+  const [selectedIndex, setSelectedIndex] = useState(startPage);
+  const [tabBarWidth, setTabBarWidth] = useState(0);
+  const isCardTab = type === 'card';
+  const pagerRef = useRef<PagerView>(null);
+  const scrollX = useRef(new Animated.Value(startPage));
+  const lazy = useRef([selectedIndex]).current;
+  const { theme } = useContext(ApplicationContext);
+  const app = useContext<any>(MiniAppContext);
+  const screen = useContext<any>(ScreenContext);
+  let scrollEnabled = useRef(false);
+
+  const componentName = 'TabView';
+
+  const componentId = useMemo(() => {
+    if (accessibilityLabel) {
+      return accessibilityLabel;
+    }
+    let id = `${app.appId}/${app.code}/${screen.screenName}/${componentName}`;
+    return id;
+  }, [componentName, accessibilityLabel, app, screen]);
+
+  const _onPressTabItem = (index: number) => {
+    onPressTabItem?.(index);
+    
+    if (!fitContent) {
+      pagerRef.current?.setPage(index);
+    }
+
+    if (!lazy.includes(index)) {
+      lazy.push(index);
+    }
+    setSelectedIndex(index);
+  };
+
+  const onLayout = (e: LayoutChangeEvent) => {
+    setTabBarWidth(e.nativeEvent.layout.width);
+  };
+
+  const onPageSelected = (e: PagerViewOnPageSelectedEvent) => {
+    const { position } = e.nativeEvent;
+    if (!lazy.includes(position)) {
+      lazy.push(position);
+    }
+    setSelectedIndex(position);
+    pagerProps?.onPageSelected?.(e);
+  };
+
+  let TabBarComponent = scrollable ? ScrollableTabBar : TabBar;
+
+  if (isCardTab) {
+    TabBarComponent = CardTabBar;
+  }
+
+  const onPageScroll = (e: PagerViewOnPageScrollEvent) => {
+    const { position, offset } = e.nativeEvent;
+    scrollX.current.setValue(position + offset);
+    pagerProps?.onPageScroll?.(e);
+  };
+
+  useEffect(() => {
+    if (fitContent) {
+      scrollX.current.setValue(selectedIndex);
+    }
+  }, [selectedIndex, fitContent]);
+
+  const renderScreen = useCallback(
+    (tab: Tab, index: number) => {
+      if (!lazy.includes(index)) return <View key={`TabView-page-${index}`} />;
+      return <View key={`TabView-page-${index}`}>{tab.component}</View>;
+    },
+    [lazy],
+  );
+
+  useImperativeHandle(ref, () => ({
+    goToPage: (page: number) => {
+      if (page >= 0 && page <= tabs.length) {
+        if (fitContent) {
+          setSelectedIndex(page);
+          if (!lazy.includes(page)) {
+            lazy.push(page);
+          }
+        } else {
+          pagerRef.current?.setPage(page);
+        }
+      }
+    },
+  }));
+
+  return (
+    <View
+      onLayout={onLayout}
+      style={[styles.tabView, fitContent ? {} : { flex: 1 }]}
+      accessibilityLabel={componentId}
+    >
+      <Animated.View style={style}>
+        <TabBarComponent
+          onPressTabItem={_onPressTabItem}
+          selectedIndex={selectedIndex}
+          tabs={tabs}
+          containerWidth={tabBarWidth}
+          scrollX={scrollX.current}
+          direction={direction}
+          selectedColor={selectedColor ?? theme.colors.primary}
+          unselectedColor={unselectedColor ?? theme.colors.text.default}
+          accessibilityLabelForSelectedCard={accessibilityLabelForSelectedCard}
+        />
+      </Animated.View>
+
+      {fitContent ? (
+        <View>
+          {tabs[selectedIndex]?.component}
+        </View>
+      ) : (
+        <PagerView
+          {...pagerProps}
+          onPageScroll={onPageScroll}
+          ref={pagerRef}
+          scrollEnabled={scrollEnabled.current}
+          onLayout={e => {
+            pagerProps?.onLayout?.(e);
+            scrollEnabled.current = pagerProps?.scrollEnabled ?? false;
+          }}
+          onPageSelected={onPageSelected}
+          style={styles.pagerView}
+          initialPage={startPage}
+        >
+          {tabs.map((tab, index) => renderScreen(tab, index))}
+        </PagerView>
+      )}
+    </View>
+  );
+};
+
+const TabView = forwardRef(TabComponent);
+
+export { CardTabBar, ScrollableTabBar, TabBar, TabView };
+export type { TabViewProps, TabViewRef, Tab };

package/src/libs/TabView/package.json

@@ -0,0 +1,16 @@
+{
+    "name": "@momo-kits/tab-view",
+    "version": "0.157.1-beta.4",
+    "private": false,
+    "main": "index.tsx",
+    "peerDependencies": {
+        "@momo-kits/foundation": "latest",
+        "react": "*",
+        "react-native": "*"
+    },
+    "license": "MoMo",
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org/"
+    },
+    "dependencies": {}
+}

package/src/libs/TabView/publish.sh

@@ -0,0 +1,16 @@
+#!/bin/bash
+
+if [ "$1" == "stable" ]; then
+  npm version $(npm view @momo-kits/foundation@stable version)
+  npm version patch
+  npm publish --tag stable --access=public
+elif [ "$1" == "latest" ]; then
+  npm publish --tag latest --access=public
+elif [ "$1" == "beta" ]; then
+  npm publish --tag beta --access=public
+else
+  npm publish --tag alpha --access=public
+fi
+
+PACKAGE_NAME=$(npm pkg get name)
+NEW_PACKAGE_VERSION=$(npm pkg get version)

package/src/libs/TabView/styles.ts

@@ -0,0 +1,96 @@
+import { StyleSheet } from 'react-native';
+import { Colors, Radius, Spacing } from '@momo-kits/foundation';
+
+export default StyleSheet.create({
+  pagerView: { flex: 1 },
+  textCenter: {
+    textAlign: 'center',
+  },
+  tabView: {
+    width: '100%',
+  },
+  tabBar: {
+    flexDirection: 'row',
+    borderBottomWidth: 1,
+  },
+  tabItem: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  indicator: {
+    height: 2,
+    borderTopLeftRadius: Radius.XXS,
+    borderTopRightRadius: Radius.XXS,
+    position: 'absolute',
+    bottom: 0,
+  },
+  icon: {
+    borderRadius: Radius.XS,
+  },
+  iconHolder: {
+    marginRight: Spacing.XS,
+    width: 24,
+    height: 24,
+    justifyContent: 'center',
+    alignItems: 'center',
+    overflow: 'hidden',
+  },
+  tabItemWrapper: {
+    paddingHorizontal: Spacing.XS,
+    alignItems: 'center',
+  },
+  cardTabBar: {
+    flexDirection: 'row',
+    marginTop: Spacing.XS,
+    alignItems: 'flex-end',
+  },
+  cardTabItemWrapper: {
+    borderTopLeftRadius: Spacing.M,
+    borderTopRightRadius: Spacing.M,
+    height: 40,
+    backgroundColor: Colors.black_02,
+  },
+  cardTabItem: {
+    borderTopLeftRadius: Spacing.M,
+    borderTopRightRadius: Spacing.M,
+    height: 40,
+    backgroundColor: Colors.black_02,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: Spacing.S,
+  },
+  cardTabOverlay: {
+    flexDirection: 'row',
+    height: 44,
+    position: 'absolute',
+    top: -Spacing.XS,
+    borderTopLeftRadius: Spacing.M,
+    borderTopRightRadius: Spacing.M,
+  },
+  overlayTextWrapper: {
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: Spacing.S,
+    flexDirection: 'row',
+  },
+  dotSmall: {
+    position: 'absolute',
+    top: -Spacing.XS,
+    right: -Spacing.XS,
+    zIndex: 2,
+  },
+  dot: {
+    position: 'absolute',
+    top: -Spacing.S,
+    right: -Spacing.S,
+    zIndex: 2,
+  },
+  badge: {
+    position: 'absolute',
+    top: -Spacing.S,
+    left: Spacing.S,
+    zIndex: 2,
+  },
+});

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

@@ -0,0 +1,137 @@
+import React, {FC, useContext} from 'react';
+import {Platform, View} from 'react-native';
+import {TabBarProps} from '../types';
+import styles from '../styles';
+import {
+  ApplicationContext,
+  Badge,
+  BadgeDot,
+  Icon,
+  Radius,
+  Shadow,
+  Spacing,
+  Text,
+} from '@momo-kits/foundation';
+import CardTabItem from '../tabItem/CardTabItem';
+import PathSvg from '../assets/Path';
+
+const CardTabBar: FC<TabBarProps> = ({
+  tabs,
+  onPressTabItem,
+  containerWidth,
+  selectedIndex,
+  selectedColor,
+  unselectedColor,
+  accessibilityLabelForSelectedCard,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  const itemWidth = containerWidth / tabs.length;
+  const isFirst = selectedIndex === 0;
+  const isLast = selectedIndex === tabs.length - 1;
+  const pathWidth = tabs.length > 2 ? 22 : 28;
+  const backSpace = isFirst ? 0 : pathWidth;
+
+  const renderIconTabBar = () => {
+    return (
+      <>
+        {!!tabs[selectedIndex]?.renderIcon &&
+          typeof tabs[selectedIndex]?.renderIcon === 'function' && (
+            <View
+              style={[
+                styles.icon,
+                styles.iconHolder,
+                {marginRight: Spacing.XS},
+              ]}>
+              {tabs[selectedIndex]?.renderIcon?.(true)}
+            </View>
+          )}
+        {!tabs[selectedIndex]?.renderIcon && !!tabs[selectedIndex]?.icon && (
+          <Icon
+            color={selectedColor}
+            source={tabs[selectedIndex]?.icon as string}
+            style={[styles.icon, {marginRight: Spacing.XS}]}
+          />
+        )}
+      </>
+    );
+  };
+
+  return (
+    <View style={styles.cardTabBar}>
+      {tabs.map((tab, index) => {
+        return (
+          <CardTabItem
+            key={`card-tab-item-${tab?.title ?? index}`}
+            tab={tab}
+            active={selectedIndex === index}
+            onPressTabItem={() => {
+              onPressTabItem?.(index);
+            }}
+            width={itemWidth}
+            selectedColor={selectedColor}
+            unselectedColor={unselectedColor}
+          />
+        );
+      })}
+      <View
+        style={[
+          styles.cardTabOverlay,
+          Platform.OS === 'ios' && Shadow.Light,
+          {
+            width: containerWidth / tabs.length,
+            left: itemWidth * selectedIndex - backSpace,
+          },
+        ]}>
+        {!isFirst && (
+          <PathSvg
+            style={{transform: [{rotateY: '180deg'}], left: 8}}
+            pathWidth={pathWidth}
+          />
+        )}
+        <View
+          accessibilityLabel={
+            accessibilityLabelForSelectedCard ??
+            tabs[selectedIndex]?.accessibilityLabel
+          }
+          style={[
+            styles.overlayTextWrapper,
+            {
+              backgroundColor: theme.colors.background.surface,
+              width: containerWidth / tabs.length,
+              borderTopRightRadius: Radius.M,
+              borderTopLeftRadius: Radius.M,
+              paddingHorizontal: tabs.length === 3 ? Spacing.S : Spacing.M,
+            },
+          ]}>
+          {renderIconTabBar()}
+          <Text
+            color={selectedColor}
+            numberOfLines={1}
+            style={[styles.textCenter, {flexShrink: 1}]}
+            typography={'header_s_semibold'}>
+            {tabs[selectedIndex]?.title || ''}
+          </Text>
+          {tabs[selectedIndex]?.showDot && (
+            <BadgeDot
+              size={tabs[selectedIndex]?.dotSize ?? 'small'}
+              style={{
+                marginLeft: Spacing.XS,
+              }}
+            />
+          )}
+          {!tabs[selectedIndex]?.showDot && tabs[selectedIndex]?.badgeValue && (
+            <View>
+              <Badge
+                label={tabs[selectedIndex]?.badgeValue}
+                style={{marginLeft: Spacing.XS}}
+              />
+            </View>
+          )}
+        </View>
+        {!isLast && <PathSvg style={{right: 8}} pathWidth={pathWidth} />}
+      </View>
+    </View>
+  );
+};
+
+export default CardTabBar;