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

package/src/foundations/Layout/Card.tsx

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

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

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

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

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

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