@momo-kits/foundation 0.157.2-test.1 → 0.157.3-beta.21

package/Layout/Screen.tsx

@@ -9,7 +9,6 @@ import React, {
   useContext,
   useEffect,
   useImperativeHandle,
-  useMemo,
   useRef,
 } from 'react';
 import {
@@ -22,18 +21,12 @@ import {
   ScrollViewProps,
   StatusBar,
   StatusBarStyle,
-  TouchableOpacity,
   useWindowDimensions,
   View,
   ViewProps,
-  Text,
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import {
-  ApplicationContext,
-  ScreenContext,
-  ScreenRegistryContext,
-} from '../Context';
+import { ApplicationContext, ScreenContext } from '../Context';
 import Navigation from '../Application/Navigation';
 import {
   AnimatedHeader,
@@ -523,135 +516,6 @@ const Screen = forwardRef(
       }
     };
 
-    const registryRef = useRef<Map<string, string>>(new Map());
-    const registeredNamesRef = useRef<Set<string>>(new Set());
-
-    const register = useCallback((id: string, name: string) => {
-      registryRef.current.set(id, name);
-      registeredNamesRef.current.add(name);
-    }, []);
-
-    const unregister = useCallback((id: string) => {
-      const name = registryRef.current.get(id);
-      registryRef.current.delete(id);
-      const stillHasName = Array.from(registryRef.current.values()).includes(
-        name!,
-      );
-      if (!stillHasName) {
-        registeredNamesRef.current.delete(name!);
-      }
-    }, []);
-
-    const registryValue = useMemo(
-      () => ({ register, unregister }),
-      [register, unregister],
-    );
-
-    const WHITELISTED_COMPONENTS = useMemo(
-      () =>
-        new Set([
-          'View',
-          'TouchableOpacity',
-          'TouchableHighlight',
-          'TouchableWithoutFeedback',
-          'Pressable',
-          'ScrollView',
-          'FlatList',
-          'SectionList',
-          'SafeAreaView',
-          'KeyboardAvoidingView',
-          'ActivityIndicator',
-          'ImageBackground',
-          'Fragment',
-        ]),
-      [],
-    );
-
-    const [usageStats, setUsageStats] = React.useState<{
-      total: number;
-      internal: number;
-      external: number;
-      breakdown: Record<string, number>;
-      externalNames: string[];
-    }>({
-      total: 0,
-      internal: 0,
-      external: 0,
-      breakdown: {},
-      externalNames: [],
-    });
-    const [isUsageExpanded, setIsUsageExpanded] = React.useState(false);
-
-    const countExternalChildren = useCallback(
-      (node: React.ReactNode): { count: number; names: string[] } => {
-        let count = 0;
-        const names: string[] = [];
-        const traverse = (n: React.ReactNode) => {
-          React.Children.forEach(n, child => {
-            if (!React.isValidElement(child)) return;
-            const name =
-              (child.type as any)?.displayName ||
-              (child.type as any)?.name ||
-              '';
-            if (
-              !registeredNamesRef.current.has(name) &&
-              !WHITELISTED_COMPONENTS.has(name)
-            ) {
-              count++;
-              if (name) {
-                names.push(name);
-              } else {
-                names.push('Anonymous');
-              }
-            }
-            if ((child as any).props?.children) {
-              traverse((child as any).props.children);
-            }
-          });
-        };
-        traverse(node);
-        return { count, names };
-      },
-      [WHITELISTED_COMPONENTS],
-    );
-
-    useEffect(() => {
-      if (__DEV__) {
-        const allRegistered = Array.from(registryRef.current.values());
-        const internal = allRegistered.length;
-        const { count: external, names: externalNames } =
-          countExternalChildren(children);
-        const total = internal + external;
-        const counts: Record<string, number> = {};
-        allRegistered.forEach(name => {
-          counts[name] = (counts[name] || 0) + 1;
-        });
-        console.log(
-          `[Screen] Total: ${total}, Internal: ${internal}, External: ${external}`,
-        );
-        console.log(`[Screen] Internal components:`, counts);
-        if (externalNames.length > 0) {
-          console.log(`[Screen] External components:`, externalNames);
-        }
-        setUsageStats(prev => {
-          if (
-            prev.total === total &&
-            prev.internal === internal &&
-            prev.external === external
-          ) {
-            return prev;
-          }
-          return {
-            total,
-            internal,
-            external,
-            breakdown: counts,
-            externalNames,
-          };
-        });
-      }
-    });
-
     /**
      * build content for screen for grid rule
      */
@@ -699,144 +563,82 @@ const Screen = forwardRef(
       }
     };
 
-    const renderUsageRate = () => {
-      if (!__DEV__ || usageStats.total === 0) return null;
-      const rate = Math.round((usageStats.internal / usageStats.total) * 100);
-      let color = '#4caf50';
-      if (rate < 50) color = '#f44336';
-      else if (rate < 80) color = '#ff9800';
-
-      const hasExternals = usageStats.externalNames.length > 0;
-
-      return (
-        <TouchableOpacity
-          activeOpacity={0.8}
-          onPress={() => hasExternals && setIsUsageExpanded(prev => !prev)}
-          style={{
-            position: 'absolute',
-            bottom: insets.bottom + 100,
-            right: 16,
-            backgroundColor: 'rgba(0,0,0,0.7)',
-            padding: isUsageExpanded ? 12 : 8,
-            borderRadius: 8,
-            zIndex: 9999,
-            alignItems: 'flex-end',
-            minWidth: isUsageExpanded ? 160 : undefined,
-          }}
-        >
-          <Text style={{ color: 'white', fontSize: 12, fontWeight: 'bold' }}>
-            Kit Usage: <Text style={{ color }}>{rate}%</Text>
-            {hasExternals && !isUsageExpanded && ' ▼'}
-          </Text>
-          <Text style={{ color: '#ccc', fontSize: 10, marginTop: 4 }}>
-            {usageStats.internal} / {usageStats.total} Components
-          </Text>
-          {isUsageExpanded && hasExternals && (
-            <View style={{ marginTop: 8, alignSelf: 'stretch' }}>
-              <Text style={{ color: '#aaa', fontSize: 9, marginBottom: 4 }}>
-                External ({usageStats.externalNames.length}):
-              </Text>
-              <Text
-                style={{ color: '#f88', fontSize: 10 }}
-                numberOfLines={8}
-              >
-                {usageStats.externalNames.slice(0, 15).join(', ')}
-                {usageStats.externalNames.length > 15 &&
-                  ` ... +${usageStats.externalNames.length - 15} more`}
-              </Text>
-              <Text style={{ color: '#666', fontSize: 9, marginTop: 4 }}>
-                Tap to collapse ▲
-              </Text>
-            </View>
-          )}
-        </TouchableOpacity>
-      );
-    };
-
     return (
-      <ScreenRegistryContext.Provider value={registryValue}>
-        <View
-          style={[
-            Styles.flex,
-            {
-              backgroundColor:
-                backgroundColor ?? theme.colors.background.default,
-            },
-          ]}
+      <View
+        style={[
+          Styles.flex,
+          {
+            backgroundColor: backgroundColor ?? theme.colors.background.default,
+          },
+        ]}
+      >
+        <HeaderExtendHeader
+          headerType={headerType}
+          heightHeader={heightHeader}
+          headerRightWidth={headerRightWidth}
+          animatedValue={animatedValue.current}
+          inputSearchProps={inputSearchProps}
+          navigation={navigation}
+          inputSearchRef={inputSearchRef}
+          useShadowHeader={useShadowHeader}
+          gradientColor={gradientColor}
+          headerBackground={headerBackground}
+        />
+
+        <KeyboardAvoidingView
+          style={Styles.flex}
+          enabled={enableKeyboardAvoidingView}
+          keyboardVerticalOffset={keyboardVerticalOffset ?? keyboardOffset}
+          behavior={Platform.select({
+            ios: 'padding',
+            android: undefined,
+          })}
         >
-          <HeaderExtendHeader
-            headerType={headerType}
-            heightHeader={heightHeader}
-            headerRightWidth={headerRightWidth}
-            animatedValue={animatedValue.current}
-            inputSearchProps={inputSearchProps}
-            navigation={navigation}
-            inputSearchRef={inputSearchRef}
-            useShadowHeader={useShadowHeader}
-            gradientColor={gradientColor}
-            headerBackground={headerBackground}
-          />
-
-          <KeyboardAvoidingView
+          {Header}
+
+          <Component
+            {...scrollViewProps}
+            ref={screenRef}
+            showsVerticalScrollIndicator={false}
+            onScroll={handleScroll}
+            onScrollEndDrag={handleScrollEnd}
+            scrollEventThrottle={16}
             style={Styles.flex}
-            enabled={enableKeyboardAvoidingView}
-            keyboardVerticalOffset={keyboardVerticalOffset ?? keyboardOffset}
-            behavior={Platform.select({
-              ios: 'padding',
-              android: undefined,
-            })}
           >
-            {Header}
-
-            <Component
-              {...scrollViewProps}
-              ref={screenRef}
-              showsVerticalScrollIndicator={false}
-              onScroll={handleScroll}
-              onScrollEndDrag={handleScrollEnd}
-              scrollEventThrottle={16}
-              style={Styles.flex}
-            >
-              {renderAnimatedHeader()}
-
-              {useGridLayout ? renderContent(children) : children}
-            </Component>
-
-            {floatingButtonProps && (
-              <View>
-                <FloatingButton
-                  {...floatingButtonProps}
-                  animatedValue={animatedValue.current}
-                  bottom={
-                    Footer || isTab
-                      ? 12
-                      : Math.min(insets.bottom, 21) + Spacing.S
-                  }
-                />
-              </View>
-            )}
-
-            {Footer && (
-              <View
-                style={[
-                  styles.shadow,
-                  {
-                    paddingBottom: Math.min(insets.bottom, 21) + Spacing.S,
-                    backgroundColor: theme.colors.background.surface,
-                  },
-                ]}
-              >
-                <Section>{Footer}</Section>
-              </View>
-            )}
-          </KeyboardAvoidingView>
+            {renderAnimatedHeader()}
+
+            {useGridLayout ? renderContent(children) : children}
+          </Component>
+
+          {floatingButtonProps && (
+            <View>
+              <FloatingButton
+                {...floatingButtonProps}
+                animatedValue={animatedValue.current}
+                bottom={
+                  Footer || isTab ? 12 : Math.min(insets.bottom, 21) + Spacing.S
+                }
+              />
+            </View>
+          )}
 
-          {renderUsageRate()}
-        </View>
-      </ScreenRegistryContext.Provider>
+          {Footer && (
+            <View
+              style={[
+                styles.shadow,
+                {
+                  paddingBottom: Math.min(insets.bottom, 21) + Spacing.S,
+                  backgroundColor: theme.colors.background.surface,
+                },
+              ]}
+            >
+              <Section>{Footer}</Section>
+            </View>
+          )}
+        </KeyboardAvoidingView>
+      </View>
     );
   },
 );
 
-Screen.displayName = 'Screen';
 export default Screen;

package/Layout/Section.tsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import { Dimensions, View, ViewProps } from 'react-native';
-import { useGridSystem, useScreenRegistry } from './utils';
+import { useGridSystem } from './utils';
 import { GridContextProps } from './types';
 import { GridContext } from './index';
 import { ApplicationContext, MiniAppContext } from '../Context';
@@ -34,7 +34,6 @@ const Section: React.FC<SectionProps> = ({
   style,
   ...props
 }) => {
-  useScreenRegistry('Section');
   const { showGrid } = useContext(ApplicationContext);
   const { numberOfColumns } = useGridSystem();
 
@@ -49,7 +48,8 @@ const Section: React.FC<SectionProps> = ({
   }
 
   const sizePerSpan =
-    (widthSection - (numberOfColumns - 1) * gutterSize) / numberOfColumns;
+    (widthSection - gutterSize * (numberOfColumns - 1)) / numberOfColumns -
+    1 / numberOfColumns;
 
   const gridContext: GridContextProps = {
     numberOfColumns,

package/Layout/TrackingScope.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { TrackingScopeContext } from '../Context';
-import { useScreenRegistry } from './utils';
 
 const TrackingScope = ({
   scopeName,
@@ -9,7 +8,6 @@ const TrackingScope = ({
   scopeName: string;
   children: any;
 }) => {
-  useScreenRegistry('TrackingScope');
   return (
     <TrackingScopeContext.Provider value={{ scopeName }}>
       {children}

package/Layout/index.ts

@@ -1,7 +1,7 @@
 import Card from './Card';
 import Section from './Section';
 import GridSystem from './GridSystem';
-import { validateChildren, useScreenRegistry } from './utils';
+import { validateChildren } from './utils';
 import { createContext } from 'react';
 import { GridContextProps } from './types';
 import Item from './Item';
@@ -26,7 +26,6 @@ export {
   Section,
   GridSystem,
   validateChildren,
-  useScreenRegistry,
   Item,
   ItemList,
   ItemSectionList,

package/Layout/utils.ts

@@ -1,6 +1,5 @@
-import React, { Fragment, ReactElement, useContext, useEffect, useRef } from 'react';
+import React, { Fragment, ReactElement } from 'react';
 import { useWindowDimensions } from 'react-native';
-import { ScreenRegistryContext } from '../Context';
 
 /**
  * validate children type
@@ -45,16 +44,4 @@ const useGridSystem = () => {
   return { numberOfColumns };
 };
 
-let registryIdCounter = 0;
-
-const useScreenRegistry = (name: string) => {
-  const { register, unregister } = useContext(ScreenRegistryContext);
-  const id = useRef(`__sr_${name}_${registryIdCounter++}`).current;
-
-  useEffect(() => {
-    register(id, name);
-    return () => unregister(id);
-  }, [id, name, register, unregister]);
-};
-
-export { useGridSystem, validateChildren, useScreenRegistry };
+export { useGridSystem, validateChildren };

package/Loader/DotLoader.tsx

@@ -4,10 +4,8 @@ import animation from '../Assets/DotAnimation.json';
 import { ApplicationContext } from '../Context';
 import { hexToRGBA } from './utils';
 import { LoaderProps } from './types';
-import { useScreenRegistry } from '../Layout/utils';
 
 const DotLoader: FC<LoaderProps> = ({ color, style }) => {
-  useScreenRegistry('DotLoader');
   const { theme } = useContext(ApplicationContext);
 
   const arrayColor = [

package/Loader/Loader.tsx

@@ -2,10 +2,8 @@ import React, {FC} from 'react';
 import {LoaderProps} from './types';
 import DotLoader from './DotLoader';
 import Spinner from './Spinner';
-import { useScreenRegistry } from '../Layout';
 
-const Loader: FC<LoaderProps> = ({type = 'dot', ...props}) => { 
-  useScreenRegistry('Loader');
+const Loader: FC<LoaderProps> = ({type = 'dot', ...props}) => {
   if (type === 'spinner') {
     return <Spinner {...props} key={props.color} />;
   }

package/Loader/ProgressBar.tsx

@@ -4,10 +4,8 @@ import styles from './styles';
 import { ProgressBarProps } from './types';
 import { ApplicationContext } from '../Context';
 import { Radius } from '../Consts';
-import { useScreenRegistry } from '../Layout/utils';
 
 const ProgressBar: FC<ProgressBarProps> = ({ percent = 0, style }) => {
-  useScreenRegistry('ProgressBar');
   const { theme } = useContext(ApplicationContext);
   const animation = useRef(new Animated.Value(0)).current;
 

package/Loader/Spinner.tsx

@@ -4,10 +4,8 @@ import animation from '../Assets/SpinnerAnimation.json';
 import { hexToRGBA } from './utils';
 import { ApplicationContext } from '../Context';
 import { LoaderProps } from './types';
-import { useScreenRegistry } from '../Layout/utils';
 
 const Spinner: FC<LoaderProps> = ({ color, style }) => {
-  useScreenRegistry('Spinner');
   const { theme } = useContext(ApplicationContext);
 
   let source: any = animation;

package/Pagination/Dot.tsx

@@ -3,10 +3,8 @@ import { Animated } from 'react-native';
 import styles from './styles';
 import { DotProps } from './types';
 import { ApplicationContext } from '../Context';
-import { useScreenRegistry } from '../Layout/utils';
 
 const Dot: FC<DotProps> = ({ active, style }) => {
-  useScreenRegistry('Dot');
   const { theme } = useContext(ApplicationContext);
   const dotStyle = active
     ? [styles.activeDot]

package/Pagination/PaginationDot.tsx

@@ -5,14 +5,12 @@ import Dot from './Dot';
 import styles from './styles';
 import { Spacing } from '../Consts';
 import { ApplicationContext, MiniAppContext } from '../Context';
-import { useScreenRegistry } from '../Layout/utils';
 
 const PaginationDot: FC<ChildPaginationProps> = ({
   dataLength = 2,
   activeIndex = 0,
   style,
 }) => {
-  useScreenRegistry('PaginationDot');
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
 

package/Pagination/PaginationNumber.tsx

@@ -5,14 +5,12 @@ import styles from './styles';
 import { Text } from '../Text';
 import { Colors } from '../Consts';
 import { MiniAppContext } from '../Context';
-import { useScreenRegistry } from '../Layout/utils';
 
 const PaginationNumber: FC<ChildPaginationProps> = ({
   activeIndex = 0,
   dataLength = 2,
   style,
 }) => {
-  useScreenRegistry('PaginationNumber');
   const context = useContext<any>(MiniAppContext);
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;

package/Pagination/PaginationScroll.tsx

@@ -3,7 +3,6 @@ import { Animated, View } from 'react-native';
 import { ScrollIndicatorProps } from './types';
 import styles from './styles';
 import { ApplicationContext, MiniAppContext } from '../Context';
-import { useScreenRegistry } from '../Layout/utils';
 
 const INDICATOR_WIDTH = 24;
 const INDICATOR_CONTAINER_WIDTH = 72;
@@ -12,7 +11,6 @@ const PaginationScroll: FC<ScrollIndicatorProps> = ({
   children,
   scrollViewRef,
 }) => {
-  useScreenRegistry('PaginationScroll');
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
   const left = useRef(new Animated.Value(0)).current;

package/Pagination/PaginationWhiteDot.tsx

@@ -5,14 +5,12 @@ import styles from './styles';
 import Dot from './Dot';
 import { Colors, Spacing } from '../Consts';
 import { MiniAppContext } from '../Context';
-import { useScreenRegistry } from '../Layout/utils';
 
 const PaginationWhiteDot: FC<ChildPaginationProps> = ({
   dataLength = 2,
   activeIndex = 0,
   style,
 }) => {
-  useScreenRegistry('PaginationWhiteDot');
   const context = useContext<any>(MiniAppContext);
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;

package/Popup/PopupNotify.tsx

@@ -14,7 +14,6 @@ import { Image } from '../Image';
 import { Text, useScaleSize } from '../Text';
 import { PopupNotifyProps } from './types';
 import { runOnJS } from 'react-native-reanimated';
-import { useScreenRegistry } from '../Layout/utils';
 
 const PopupNotify: React.FC<PopupNotifyProps> = ({
   image,
@@ -27,7 +26,6 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
   onIconClose,
   onRequestClose,
 }) => {
-  useScreenRegistry('PopupNotify');
   const context = useContext<any>(MiniAppContext);
   const { theme, navigator, translate } = useContext(ApplicationContext);
   const [scrollContent, setScrollContent] = useState(false);

package/Popup/PopupPromotion.tsx

@@ -5,7 +5,6 @@ import { ApplicationContext, MiniAppContext } from '../Context';
 import { Image } from '../Image';
 import { Colors, Radius, Spacing } from '../Consts';
 import { Icon } from '../Icon';
-import { useScreenRegistry } from '../Layout/utils';
 
 const PopupPromotion: React.FC<PopupPromotionProps> = ({
   image,
@@ -13,7 +12,6 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
   onRequestClose,
   onActionClick,
 }) => {
-  useScreenRegistry('PopupPromotion');
   const context = useContext<any>(MiniAppContext);
   const { theme, navigator } = useContext(ApplicationContext);
   const { width: widthDevice } = Dimensions.get('window');

package/Radio/index.tsx

@@ -1,6 +1,6 @@
 import React, { FC, useContext } from 'react';
 import { TouchableOpacity, View } from 'react-native';
-import { useScreenRegistry } from '../Layout';
+
 import { RadioProps } from './types';
 import { Text } from '../Text';
 import styles from './styles';
@@ -24,7 +24,6 @@ const Radio: FC<RadioProps> = ({
   accessibilityLabel,
   ...props
 }) => {
-  useScreenRegistry('Radio');
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
   const selected = value === groupValue;

package/Skeleton/index.tsx

@@ -13,10 +13,8 @@ import { SkeletonTypes } from './types';
 import { Colors, Styles } from '../Consts';
 import styles from './styles';
 import { ScreenContext, SkeletonContext } from '../Context';
-import { useScreenRegistry } from '../Layout/utils';
 
 const Skeleton: React.FC<SkeletonTypes> = ({ style }) => {
-  useScreenRegistry('Skeleton');
   const screen = useContext<any>(ScreenContext);
   const [width, setWidth] = useState(0);
   const PRIMARY_COLOR = Colors.black_05;

package/Switch/index.tsx

@@ -5,7 +5,6 @@ import styles from './styles';
 import { Colors } from '../Consts';
 import { useComponentId } from '../Application';
 import { ComponentContext, MiniAppContext } from '../Context';
-import { useScreenRegistry } from '@momo-kits/foundation';
 
 const Switch: FC<SwitchProps> = ({
   value = false,
@@ -16,7 +15,6 @@ const Switch: FC<SwitchProps> = ({
   accessibilityLabel,
   ...props
 }) => {
-  useScreenRegistry('Switch');
   const context = useContext<any>(MiniAppContext);
   const circleBackgroundColor = value ? Colors.black_01 : Colors.black_03;
   const circleAlign = value ? 'flex-end' : 'flex-start';