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

package/src/foundations/Layout/Card.tsx

@@ -1,108 +0,0 @@
-import React, { useContext } from 'react';
-import { Dimensions, View, ViewProps } from 'react-native';
-import { useGridSystem } from './utils';
-import { GridContextProps } from './types';
-import { GridContext, GridSystem } from './index';
-import { Image } from '../Image';
-import { ApplicationContext, MiniAppContext } from '../Context';
-import styles from './styles';
-import { Colors, Radius, Shadow, Spacing } from '../Consts';
-
-export interface CardProps extends ViewProps {
-  /**
-   * Optional. Background image for the card.
-   */
-  backgroundImage?: string;
-
-  /**
-   * Optional. Use shadow for the card.
-   */
-  useShadow?: boolean;
-}
-
-const Card: React.FC<CardProps> = ({
-  children,
-  style,
-  backgroundImage,
-  useShadow = false,
-  ...props
-}) => {
-  const { showGrid, theme } = useContext(ApplicationContext);
-  const { numberOfColumns } = useGridSystem();
-
-  const gutterSize = 8;
-  const margin = 12;
-  const widthSection = Dimensions.get('window').width - margin * 2;
-  let sizePerSpan =
-    (widthSection - margin * 2 - gutterSize * (numberOfColumns - 1)) /
-      numberOfColumns -
-    1 / numberOfColumns;
-
-  const gridContext: GridContextProps = {
-    numberOfColumns,
-    gutterSize: Spacing.S,
-    sizePerSpan,
-    getSizeSpan: span => {
-      return sizePerSpan * span + gutterSize * (span - 1);
-    },
-  };
-
-  /**
-   * render overlay only dev mode
-   */
-  const renderOverlay = () => {
-    return (
-      <>
-        <GridSystem
-          width={widthSection}
-          gutterSize={Spacing.S}
-          screenGrid={false}
-          gridColor={Colors.red_01}
-        />
-        <View pointerEvents={'none'} style={styles.boxGridCard} />
-      </>
-    );
-  };
-
-  return (
-    <GridContext.Provider value={gridContext}>
-      <View
-        {...props}
-        onLayout={undefined}
-        style={[
-          { backgroundColor: theme.colors.background.surface },
-          style,
-          styles.protectedStyle,
-          styles.card,
-          {
-            width: widthSection,
-            marginHorizontal: margin,
-            gap: gutterSize,
-          },
-          !!backgroundImage && { backgroundColor: undefined },
-          useShadow && Shadow.Light,
-        ]}
-      >
-        {!!backgroundImage && (
-          <Image
-            source={{ uri: backgroundImage }}
-            style={[
-              styles.imageBackground,
-              {
-                width: widthSection,
-                borderRadius: Radius.M,
-              },
-            ]}
-          />
-        )}
-        {/* Render only allowed children as valid React elements */}
-        {children}
-        {showGrid && renderOverlay()}
-      </View>
-    </GridContext.Provider>
-  );
-};
-
-Card.displayName = 'Card';
-
-export default Card;

package/src/foundations/Layout/FloatingButton.tsx

@@ -1,179 +0,0 @@
-import {
-  default as React,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
-import {
-  Animated,
-  LayoutChangeEvent,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-import { ApplicationContext } from '../Context';
-import { Icon } from '../Icon';
-
-export interface FloatingButtonProps {
-  label?: string;
-  onPress?: () => void;
-  position?: 'center' | 'right';
-  icon?: string;
-  iconColor?: string;
-  size?: 'small' | 'large';
-  animatedValue?: Animated.Value;
-  bottom?: number;
-  renderComponent?: () => React.ReactNode;
-}
-
-export const FloatingButton: React.FC<FloatingButtonProps> = ({
-  renderComponent,
-  label = '',
-  onPress = () => {},
-  position = 'right',
-  icon = '',
-  iconColor = '',
-  size = 'small',
-  animatedValue,
-  bottom = 12,
-}: FloatingButtonProps) => {
-  const { theme } = useContext(ApplicationContext);
-  const maxWidth = useRef(0);
-  const minWidth = size === 'small' ? 36 : 48;
-  const [opacityAnimated] = useState(new Animated.Value(0)); // Initial opacity set to 0
-  const [widthAnimated, setWidthAnimated] = useState<Animated.Value>();
-  const lastOffset = useRef(0);
-  const lastDirection = useRef<string>(null);
-  const [showText, setShowText] = React.useState(true);
-
-  useEffect(() => {
-    if (!label) return;
-
-    Animated.timing(opacityAnimated, {
-      toValue: 1,
-      duration: 100,
-      useNativeDriver: true,
-    }).start();
-
-    const listener = animatedValue?.addListener(({ value }) => {
-      if (value !== lastOffset.current && value > 0) {
-        const direction = value > lastOffset.current ? 'down' : 'up';
-        lastOffset.current = value;
-        if (lastDirection.current !== direction) {
-          lastDirection.current = direction;
-          if (direction === 'down') {
-            Animated.timing(opacityAnimated, {
-              toValue: 0,
-              duration: 100,
-              useNativeDriver: true,
-            }).start();
-            Animated.timing(widthAnimated!, {
-              toValue: minWidth,
-              duration: 100,
-              useNativeDriver: false,
-            }).start(() => setShowText(false));
-          } else {
-            Animated.timing(opacityAnimated, {
-              toValue: 1,
-              duration: 100,
-              useNativeDriver: true,
-            }).start();
-            Animated.timing(widthAnimated!, {
-              toValue: maxWidth.current,
-              duration: 100,
-              useNativeDriver: false,
-            }).start(() => setShowText(true));
-          }
-        }
-      }
-    });
-
-    return () => {
-      if (listener) {
-        animatedValue?.removeListener(listener);
-      }
-    };
-  }, [animatedValue, label, minWidth, opacityAnimated, widthAnimated]);
-
-  const handleLayout = (event: LayoutChangeEvent) => {
-    const layout = event.nativeEvent.layout;
-    if (widthAnimated) return;
-    maxWidth.current = layout.width;
-    setWidthAnimated(new Animated.Value(layout.width));
-  };
-
-  if (renderComponent) {
-    return (
-      <View
-        onLayout={handleLayout}
-        style={[
-          styles.container,
-          {
-            right: position === 'right' ? 12 : undefined,
-            alignSelf: position === 'center' ? 'center' : 'flex-end',
-            bottom,
-          },
-        ]}
-      >
-        {renderComponent()}
-      </View>
-    );
-  }
-
-  return (
-    <Animated.View
-      onLayout={handleLayout}
-      style={[
-        styles.container,
-        {
-          right: position === 'right' ? 12 : undefined,
-          alignSelf: position === 'center' ? 'center' : 'flex-end',
-          width: widthAnimated,
-          height: size === 'small' ? 36 : 48,
-          backgroundColor: theme.colors.primary,
-          bottom,
-        },
-      ]}
-    >
-      <TouchableOpacity
-        style={{ flexDirection: 'row', alignItems: 'center' }}
-        onPress={onPress}
-      >
-        <Icon
-          source={icon}
-          size={size === 'small' ? 12 : 24}
-          color={iconColor}
-        />
-        {showText && !!label && (
-          <Animated.Text
-            allowFontScaling={false}
-            style={[styles.label, { opacity: opacityAnimated, color: 'white' }]}
-            numberOfLines={1}
-          >
-            {label}
-          </Animated.Text>
-        )}
-      </TouchableOpacity>
-    </Animated.View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignContent: 'center',
-    alignItems: 'center',
-    position: 'absolute',
-    borderRadius: 100,
-    paddingHorizontal: 12,
-    flexWrap: 'wrap',
-    alignSelf: 'flex-end',
-  },
-  label: {
-    marginLeft: 8,
-    fontSize: 16,
-    lineHeight: 22,
-    fontWeight: '700',
-  },
-});

package/src/foundations/Layout/GridSystem.tsx

@@ -1,137 +0,0 @@
-import React, { useContext } from 'react';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { Dimensions, StyleSheet, View } from 'react-native';
-import { ApplicationContext } from '../Context';
-import { Colors, Spacing } from '../Consts';
-import { GridContextProps } from './types';
-import { useGridSystem } from './utils';
-
-const GridSystem: React.FC<any> = ({
-  width = Dimensions.get('window').width,
-  useMargin = true,
-  gutterSize = Spacing.M,
-  screenGrid = true,
-  gridColor = Colors.blue_07,
-}) => {
-  const { theme } = useContext(ApplicationContext);
-  const { numberOfColumns } = useGridSystem();
-
-  const margin = useMargin ? Spacing.M : 0;
-  const widthSection = width - margin * 2;
-  const totalGutterSize = gutterSize * (numberOfColumns - 1);
-  const sizePerSpan = (widthSection - totalGutterSize) / numberOfColumns;
-
-  const grid: GridContextProps = {
-    numberOfColumns,
-    gutterSize,
-    sizePerSpan,
-    getSizeSpan: span => {
-      return span * sizePerSpan + (span - 1) * gutterSize;
-    },
-  };
-  const insets = useSafeAreaInsets();
-
-  const list: number[] = [];
-  for (let i = 1; i <= grid.numberOfColumns; i++) {
-    list.push(i);
-  }
-
-  return (
-    <>
-      <View
-        pointerEvents="none"
-        style={[
-          styles.gridContainer,
-          screenGrid && insets,
-          {
-            borderColor: theme.colors.error.primary,
-            marginHorizontal: margin,
-            top: Spacing.M,
-            bottom: Spacing.M,
-          },
-        ]}
-      >
-        {list.map((_, index) => {
-          return (
-            <View style={{ flexDirection: 'row' }} key={index.toString()}>
-              {index !== 0 && <View style={{ width: grid.gutterSize }} />}
-              <View
-                key={`Grid${index.toString()}`}
-                pointerEvents="none"
-                style={[
-                  styles.gridColumn,
-                  {
-                    width: grid.sizePerSpan,
-                    backgroundColor: gridColor,
-                  },
-                ]}
-              />
-            </View>
-          );
-        })}
-      </View>
-      {screenGrid && (
-        <>
-          <View pointerEvents="none" style={styles.dangerLeftContainer} />
-          <View pointerEvents="none" style={styles.dangerRightContainer} />
-          <View
-            pointerEvents="none"
-            style={[styles.dangerTopContainer, { height: Spacing.M }]}
-          />
-          <View
-            pointerEvents="none"
-            style={[styles.dangerBottomContainer, { height: insets.bottom }]}
-          />
-        </>
-      )}
-    </>
-  );
-};
-
-const styles = StyleSheet.create({
-  gridContainer: {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    flexDirection: 'row',
-    borderWidth: 1,
-  },
-  gridColumn: {
-    height: '100%',
-    opacity: 0.2,
-  },
-  dangerTopContainer: {
-    opacity: 0.2,
-    backgroundColor: Colors.red_03,
-    width: '100%',
-    top: 0,
-    position: 'absolute',
-  },
-  dangerBottomContainer: {
-    opacity: 0.2,
-    backgroundColor: Colors.red_03,
-    width: '100%',
-    bottom: 0,
-    position: 'absolute',
-  },
-  dangerLeftContainer: {
-    opacity: 0.2,
-    backgroundColor: Colors.red_03,
-    width: Spacing.M,
-    height: '100%',
-    left: 0,
-    position: 'absolute',
-  },
-  dangerRightContainer: {
-    opacity: 0.2,
-    backgroundColor: Colors.red_03,
-    width: Spacing.M,
-    height: '100%',
-    right: 0,
-    position: 'absolute',
-  },
-});
-
-export default GridSystem;

package/src/foundations/Layout/Item.tsx

@@ -1,59 +0,0 @@
-import React, { useContext } from 'react';
-import { View, ViewProps } from 'react-native';
-import { GridContext } from './index';
-import { ApplicationContext, MiniAppContext } from '../Context';
-import styles from './styles';
-import { SpanNumber } from './types';
-
-export interface ItemProps extends ViewProps {
-  /**
-   * Represents the width of the Card component in terms of span numbers (1-12).
-   */
-  widthSpan?: SpanNumber;
-
-  /**
-   * Optional. Represents the height of the Card component in terms of span numbers (1-12).
-   */
-  heightSpan?: SpanNumber;
-}
-
-const Item: React.FC<ItemProps> = ({
-  widthSpan,
-  heightSpan,
-  children,
-  style,
-}) => {
-  const { showGrid } = useContext(ApplicationContext);
-  const context = useContext<any>(MiniAppContext);
-  const grid = useContext(GridContext);
-
-  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
-
-  /**
-   * render overlay view only dev mode
-   */
-  const renderOverlay = () => {
-    return <View pointerEvents={'none'} style={styles.boxGrid} />;
-  };
-
-  return (
-    <View
-      style={[
-        style,
-        styles.item,
-        {
-          width: grid.getSizeSpan(widthSpan ?? grid.numberOfColumns),
-          height: heightSpan ? grid.getSizeSpan(heightSpan) : undefined,
-        },
-        showBaseLineDebug && styles.debugBaseLine,
-      ]}
-    >
-      {children}
-      {showGrid && renderOverlay()}
-    </View>
-  );
-};
-
-Item.displayName = 'Item';
-
-export default Item;

package/src/foundations/Layout/ItemList.tsx

@@ -1,66 +0,0 @@
-import React, { forwardRef, useContext } from 'react';
-import { FlatList, FlatListProps, View } from 'react-native';
-import Item from './Item';
-import { GridContext } from './index';
-import styles from './styles';
-import { SpanNumber } from './types';
-
-export interface ItemListProps extends FlatListProps<any> {
-  /**
-   * Represents the width of the Card component in terms of span numbers (1-12).
-   */
-  widthSpan?: SpanNumber;
-  data: any[];
-}
-
-const ItemList = forwardRef(
-  (
-    {
-      renderItem,
-      widthSpan,
-      style,
-      contentContainerStyle,
-      ...props
-    }: ItemListProps,
-    ref,
-  ) => {
-    const { gutterSize, numberOfColumns } = useContext(GridContext);
-    const widthItem = (widthSpan ?? numberOfColumns) as SpanNumber;
-    const numColumns = Math.floor(numberOfColumns / widthItem);
-    const indexBegin = props?.data?.map(
-      (_i: any, index: number) => index * numColumns,
-    );
-    const _renderItem = (item: any) => {
-      if (indexBegin?.includes(item?.index)) {
-        return <Item widthSpan={widthItem}>{renderItem?.(item)}</Item>;
-      }
-      return (
-        <View style={{ paddingLeft: gutterSize }}>
-          <Item widthSpan={widthItem}>{renderItem?.(item)}</Item>
-        </View>
-      );
-    };
-
-    return (
-      <FlatList
-        ref={ref as React.RefObject<FlatList>}
-        {...props}
-        key={`ItemList-${numColumns}`}
-        keyExtractor={
-          // prefer caller's keyExtractor; fallback to common id/key/index
-          (props as any)?.keyExtractor ??
-          ((item: any, index: number) =>
-            (item?.id ?? item?.key ?? index).toString())
-        }
-        numColumns={numColumns}
-        renderItem={_renderItem}
-        horizontal={false}
-        ItemSeparatorComponent={() => <View style={{ height: gutterSize }} />}
-        style={[style, styles.protectedStyle]}
-        contentContainerStyle={[contentContainerStyle, styles.protectedStyle]}
-      />
-    );
-  },
-);
-
-export default ItemList;

package/src/foundations/Layout/ItemSectionList.tsx

@@ -1,40 +0,0 @@
-import React, { FC, useContext } from 'react';
-import { SectionList, SectionListProps, View } from 'react-native';
-import Item from './Item';
-import { GridContext } from './index';
-import styles from './styles';
-import { SpanNumber } from './types';
-
-export interface ItemSectionListProps extends SectionListProps<any> {
-  /**
-   * Represents the width of the Card component in terms of span numbers (1-12).
-   */
-  widthSpan?: SpanNumber;
-}
-
-const ItemSectionList: FC<ItemSectionListProps> = ({
-  renderItem,
-  widthSpan,
-  style,
-  contentContainerStyle,
-  ...props
-}) => {
-  const { gutterSize, numberOfColumns } = useContext(GridContext);
-  const widthItem = (widthSpan ?? numberOfColumns) as SpanNumber;
-  const _renderItem = (item: any) => {
-    return <Item widthSpan={widthItem}>{renderItem?.(item)}</Item>;
-  };
-
-  return (
-    <SectionList
-      {...props}
-      renderItem={_renderItem}
-      horizontal={false}
-      ItemSeparatorComponent={() => <View style={{ height: gutterSize }} />}
-      style={[style, styles.protectedStyle]}
-      contentContainerStyle={[contentContainerStyle, styles.protectedStyle]}
-    />
-  );
-};
-
-export default ItemSectionList;