@momo-kits/foundation 0.167.1-duotest.2 → 0.167.1

package/Input/InputPhoneNumber.tsx

@@ -6,9 +6,10 @@ import React, {
   useState,
 } from 'react';
 import {
+  NativeSyntheticEvent,
   StyleSheet,
   TextInput,
-  TextInputFocusEvent,
+  TextInputFocusEventData,
   TouchableOpacity,
   View,
 } from 'react-native';
@@ -92,12 +93,12 @@ const InputPhoneNumber = forwardRef(
       onChangeText?.(text);
     };
 
-    const _onFocus = (e: TextInputFocusEvent) => {
+    const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
       setFocused(true);
       onFocus?.(e);
     };
 
-    const _onBlur = (e: TextInputFocusEvent) => {
+    const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
       setFocused(false);
       onBlur?.(e);
     };

package/Input/InputSearch.tsx

@@ -10,8 +10,9 @@ import React, {
   useState,
 } from 'react';
 import {
+  NativeSyntheticEvent,
   TextInput,
-  TextInputFocusEvent,
+  TextInputFocusEventData,
   TouchableOpacity,
   View,
 } from 'react-native';
@@ -165,12 +166,12 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
     props.accessibilityLabel,
   );
 
-  const _onFocus = (e: TextInputFocusEvent) => {
+  const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
     setFocused(true);
     onFocus?.(e);
   };
 
-  const _onBlur = (e: TextInputFocusEvent) => {
+  const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
     setFocused(false);
     onBlur?.(e);
   };

package/Input/InputTextArea.tsx

@@ -7,8 +7,9 @@ import React, {
   useState,
 } from 'react';
 import {
+  NativeSyntheticEvent,
   TextInput,
-  TextInputFocusEvent,
+  TextInputFocusEventData,
   TouchableOpacity,
   View,
 } from 'react-native';
@@ -78,12 +79,12 @@ const InputTextArea = forwardRef(
       setInputValue(text);
     };
 
-    const _onFocus = (e: TextInputFocusEvent) => {
+    const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
       setFocused(true);
       onFocus?.(e);
     };
 
-    const _onBlur = (e: TextInputFocusEvent) => {
+    const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
       setFocused(false);
       onBlur?.(e);
     };

package/Layout/Card.tsx

@@ -1,12 +1,12 @@
 import React, { useContext } from 'react';
-import { View, ViewProps } from 'react-native';
-import { useGridSystem, useScreenLayout } from './utils';
+import { Dimensions, View, ViewProps } from 'react-native';
+import { useGridSystem } from './utils';
 import { GridContextProps } from './types';
-import { GridContext } from './index';
+import { GridContext, GridSystem } from './index';
 import { Image } from '../Image';
-import { ApplicationContext } from '../Context';
+import { ApplicationContext, MiniAppContext } from '../Context';
 import styles from './styles';
-import { Radius, Shadow, Spacing } from '../Consts';
+import { Colors, Radius, Shadow, Spacing } from '../Consts';
 
 export interface CardProps extends ViewProps {
   /**
@@ -27,13 +27,12 @@ const Card: React.FC<CardProps> = ({
   useShadow = false,
   ...props
 }) => {
-  const { theme } = useContext(ApplicationContext);
+  const { showGrid, theme } = useContext(ApplicationContext);
   const { numberOfColumns } = useGridSystem();
-  const { contentWidth } = useScreenLayout();
 
   const gutterSize = 8;
   const margin = 12;
-  const widthSection = contentWidth - margin * 2;
+  const widthSection = Dimensions.get('window').width - margin * 2;
   let sizePerSpan =
     (widthSection - margin * 2 - gutterSize * (numberOfColumns - 1)) /
       numberOfColumns -
@@ -48,6 +47,23 @@ const Card: React.FC<CardProps> = ({
     },
   };
 
+  /**
+   * 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
@@ -79,7 +95,9 @@ const Card: React.FC<CardProps> = ({
             ]}
           />
         )}
+        {/* Render only allowed children as valid React elements */}
         {children}
+        {showGrid && renderOverlay()}
       </View>
     </GridContext.Provider>
   );

package/Layout/FloatingButton.tsx

@@ -10,8 +10,8 @@ import Animated, {
   useAnimatedStyle,
   useSharedValue,
   withTiming,
+  runOnJS,
 } from 'react-native-reanimated';
-import { scheduleOnRN } from 'react-native-worklets';
 import { ApplicationContext } from '../Context';
 import { Icon } from '../Icon';
 import { useScaleSize, exportFontFamily } from '../Text';
@@ -78,7 +78,7 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
               minWidth,
               { duration: 100 },
               finished => {
-                if (finished) scheduleOnRN(setShowText, false);
+                if (finished) runOnJS(setShowText)(false);
               },
             );
           } else {
@@ -87,7 +87,7 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
               maxWidth.value,
               { duration: 100 },
               finished => {
-                if (finished) scheduleOnRN(setShowText, true);
+                if (finished) runOnJS(setShowText)(true);
               },
             );
           }

package/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/Layout/Item.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import { View, ViewProps } from 'react-native';
 import { GridContext } from './index';
-import { MiniAppContext } from '../Context';
+import { ApplicationContext, MiniAppContext } from '../Context';
 import styles from './styles';
 import { SpanNumber } from './types';
 
@@ -23,11 +23,19 @@ const Item: React.FC<ItemProps> = ({
   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={[
@@ -41,6 +49,7 @@ const Item: React.FC<ItemProps> = ({
       ]}
     >
       {children}
+      {showGrid && renderOverlay()}
     </View>
   );
 };