@momo-kits/foundation 0.167.1-beta.7 → 0.167.1-duo.2

package/Input/InputPhoneNumber.tsx

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

package/Input/InputSearch.tsx

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

package/Input/InputTextArea.tsx

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

package/Layout/Card.tsx

@@ -1,12 +1,12 @@
 import React, { useContext } from 'react';
-import { Dimensions, View, ViewProps } from 'react-native';
-import { useGridSystem } from './utils';
+import { View, ViewProps } from 'react-native';
+import { useGridSystem, useScreenLayout } from './utils';
 import { GridContextProps } from './types';
-import { GridContext, GridSystem } from './index';
+import { GridContext } from './index';
 import { Image } from '../Image';
-import { ApplicationContext, MiniAppContext } from '../Context';
+import { ApplicationContext } from '../Context';
 import styles from './styles';
-import { Colors, Radius, Shadow, Spacing } from '../Consts';
+import { Radius, Shadow, Spacing } from '../Consts';
 
 export interface CardProps extends ViewProps {
   /**
@@ -27,12 +27,13 @@ const Card: React.FC<CardProps> = ({
   useShadow = false,
   ...props
 }) => {
-  const { showGrid, theme } = useContext(ApplicationContext);
+  const { theme } = useContext(ApplicationContext);
   const { numberOfColumns } = useGridSystem();
+  const { contentWidth } = useScreenLayout();
 
   const gutterSize = 8;
   const margin = 12;
-  const widthSection = Dimensions.get('window').width - margin * 2;
+  const widthSection = contentWidth - margin * 2;
   let sizePerSpan =
     (widthSection - margin * 2 - gutterSize * (numberOfColumns - 1)) /
       numberOfColumns -
@@ -47,23 +48,6 @@ 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
@@ -95,9 +79,7 @@ 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) runOnJS(setShowText)(false);
+                if (finished) scheduleOnRN(setShowText, false);
               },
             );
           } else {
@@ -87,7 +87,7 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
               maxWidth.value,
               { duration: 100 },
               finished => {
-                if (finished) runOnJS(setShowText)(true);
+                if (finished) scheduleOnRN(setShowText, true);
               },
             );
           }

package/Layout/Item.tsx

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

package/Layout/Screen.tsx

@@ -21,7 +21,6 @@ import {
   ScrollViewProps,
   StatusBar,
   StatusBarStyle,
-  useWindowDimensions,
   View,
   ViewProps,
 } from 'react-native';
@@ -44,7 +43,7 @@ import styles from './styles';
 import { HeaderType } from './types';
 import { InputRef } from '../Input';
 import { exportHeaderTitle, getOptions } from '../Application/utils';
-import { validateChildren } from './utils';
+import { getHeaderMargin, useScreenLayout, validateChildren } from './utils';
 import Section from './Section';
 import {
   HeaderBackground,
@@ -118,7 +117,8 @@ export interface ScreenProps extends ViewProps {
   layoutOffset?: -8 | -24 | -56 | number;
 
   /**
-   * Optional. Width of the right header.
+   * Optional. Width of the right header. Defaults to the toolkit width (73), or 0 when
+   * iPhone Duo floats the toolkit into its side bar.
    */
   headerRightWidth?: 0 | 73 | 110 | number;
 
@@ -187,7 +187,7 @@ const Screen = forwardRef(
       footerComponent: Footer,
       marginFooter = true,
       layoutOffset = -56,
-      headerRightWidth = 73,
+      headerRightWidth,
       backgroundColor,
       headerType = 'default',
       floatingButtonProps,
@@ -204,8 +204,8 @@ const Screen = forwardRef(
     ref: any,
   ) => {
     const screenRef = useRef<View | ScrollView>(null);
-    const { width: widthDevice } = useWindowDimensions();
-    const { theme, navigator } = useContext(ApplicationContext);
+    const layout = useScreenLayout();
+    const { theme } = useContext(ApplicationContext);
     const screen: any = useContext(ScreenContext);
     const insets = useSafeAreaInsets();
     const frame = useSafeAreaFrame();
@@ -245,7 +245,7 @@ const Screen = forwardRef(
     }, [customAnimatedValue, internalShared]);
 
     const currentTint = useRef<string | undefined>(undefined);
-    
+
     const isTab = !!screen?.bottomTab;
 
     let handleScroll;
@@ -425,7 +425,13 @@ const Screen = forwardRef(
      * export search header
      */
     const setSearchHeader = (params: SearchHeaderProps) => {
-      const searchWidth = widthDevice - 24;
+      let searchWidth = layout.width - 24;
+      let searchLeft = Spacing.M;
+      if (layout.sideBar) {
+        // back floats in the side bar: the search spans the content width
+        searchWidth = layout.contentWidth - Spacing.M * 2;
+        searchLeft = Spacing.M - getHeaderMargin(layout.width);
+      }
       const options: StackNavigationOptions = {
         headerRight: undefined,
         headerTitleContainerStyle: {
@@ -437,10 +443,10 @@ const Screen = forwardRef(
           marginHorizontal: 0,
           marginVertical: 0,
           margin: 0,
-          left: Spacing.M,
+          left: searchLeft,
         },
         headerLeft: (props: any) =>
-          params?.hiddenBack ? null : <HeaderLeft {...props} />,
+          params?.hiddenBack ? null : <HeaderLeft {...props} floating />,
         headerTitle: () => (
           <SearchHeader {...params} animatedValue={sharedValue} />
         ),
@@ -591,6 +597,8 @@ const Screen = forwardRef(
                 key={`ScreenItem${index}`}
                 style={{
                   marginTop: space,
+                  marginLeft: layout.insetLeft,
+                  marginRight: layout.insetRight,
                   flex: item.props?.expanded ? 1 : undefined,
                 }}
                 onLayout={item.props?.onLayout}
@@ -611,6 +619,8 @@ const Screen = forwardRef(
             key={`ScreenItem`}
             style={{
               marginTop: space,
+              marginLeft: layout.insetLeft,
+              marginRight: layout.insetRight,
               flex: item?.props?.expanded ? 1 : undefined,
             }}
             onLayout={item?.props?.onLayout}
@@ -637,6 +647,15 @@ const Screen = forwardRef(
       return newHeight;
     };
 
+    // without the grid, the content container keeps clear of the horizontal insets.
+    // Only set when there are insets, so a caller's paddingHorizontal is never overridden.
+    const hasContentInset = layout.insetLeft > 0 || layout.insetRight > 0;
+    const contentInsetStyle = !useGridLayout &&
+      hasContentInset && {
+        paddingLeft: layout.insetLeft,
+        paddingRight: layout.insetRight,
+      };
+
     return (
       <View
         style={[
@@ -680,9 +699,10 @@ const Screen = forwardRef(
             onScroll={handleScroll}
             onScrollEndDrag={handleScrollEnd}
             scrollEventThrottle={16}
-            style={[Styles.flex]}
+            style={[Styles.flex, !scrollable && contentInsetStyle]}
             contentContainerStyle={[
               scrollable && !Footer && !isTab && { paddingBottom: bottomInset },
+              scrollable && contentInsetStyle,
               scrollViewProps?.contentContainerStyle,
             ]}
           >
@@ -692,7 +712,12 @@ const Screen = forwardRef(
           </Component>
 
           {floatingButtonProps && (
-            <View>
+            <View
+              style={{
+                marginLeft: layout.insetLeft,
+                marginRight: layout.insetRight,
+              }}
+            >
               <FloatingButton
                 {...floatingButtonProps}
                 animatedValue={sharedValue}
@@ -707,6 +732,8 @@ const Screen = forwardRef(
                 styles.shadow,
                 {
                   paddingBottom: bottomInset + Spacing.S,
+                  paddingLeft: layout.insetLeft,
+                  paddingRight: layout.insetRight,
                   backgroundColor: theme.colors.background.surface,
                 },
               ]}

package/Layout/Section.tsx

@@ -1,9 +1,8 @@
-import React, { useContext } from 'react';
-import { Dimensions, View, ViewProps } from 'react-native';
-import { useGridSystem } from './utils';
+import React from 'react';
+import { View, ViewProps } from 'react-native';
+import { useGridSystem, useScreenLayout } from './utils';
 import { GridContextProps } from './types';
 import { GridContext } from './index';
-import { ApplicationContext, MiniAppContext } from '../Context';
 import styles from './styles';
 import { Image } from '../Image';
 import { Spacing } from '../Consts';
@@ -34,18 +33,15 @@ const Section: React.FC<SectionProps> = ({
   style,
   ...props
 }) => {
-  const { showGrid } = useContext(ApplicationContext);
   const { numberOfColumns } = useGridSystem();
+  const { contentWidth } = useScreenLayout();
 
   const gutterSize = 12;
   let margin = 0;
   if (useMargin) {
     margin = 12;
   }
-  let widthSection = Dimensions.get('window').width;
-  if (useMargin) {
-    widthSection = widthSection - margin * 2;
-  }
+  const widthSection = contentWidth - margin * 2;
 
   const sizePerSpan =
     (widthSection - gutterSize * (numberOfColumns - 1)) / numberOfColumns -
@@ -60,13 +56,6 @@ const Section: React.FC<SectionProps> = ({
     },
   };
 
-  /**
-   * render overlay only dev mode
-   */
-  const renderOverlay = () => {
-    return <View pointerEvents={'none'} style={styles.boxGridSection} />;
-  };
-
   return (
     <GridContext.Provider value={gridContext}>
       <View
@@ -90,9 +79,7 @@ const Section: React.FC<SectionProps> = ({
             style={styles.imageBackground}
           />
         )}
-        {/* Render only allowed children as valid React elements */}
         {children}
-        {showGrid && renderOverlay()}
       </View>
     </GridContext.Provider>
   );

package/Layout/index.ts

@@ -1,7 +1,7 @@
 import Card from './Card';
 import Section from './Section';
-import GridSystem from './GridSystem';
-import { validateChildren } from './utils';
+import { useScreenLayout, validateChildren } from './utils';
+import type { ScreenLayout, SideBarEdge, SideBarLayout } from './utils';
 import { createContext } from 'react';
 import { GridContextProps } from './types';
 import Item from './Item';
@@ -18,14 +18,14 @@ const GridContext = createContext<GridContextProps>({
   getSizeSpan: () => 0,
 });
 
-export type { ScreenProps };
+export type { ScreenProps, ScreenLayout, SideBarEdge, SideBarLayout };
 
 export {
   GridContext,
   Card,
   Section,
-  GridSystem,
   validateChildren,
+  useScreenLayout,
   Item,
   ItemList,
   ItemSectionList,