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

package/src/libs/Swipe/types.ts

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

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

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

@@ -1,16 +0,0 @@
-{
-    "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

@@ -1,16 +0,0 @@
-#!/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

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

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