@momo-kits/foundation 0.167.1-beta.13 → 0.167.1-beta.14

package/Input/styles.ts

@@ -218,4 +218,13 @@ export default StyleSheet.create({
     marginLeft: Spacing.M,
   },
   debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
+  moneyInputView: {
+    paddingLeft: Spacing.M,
+  },
+  moneyTextInput: {
+    flexShrink: 1,
+    paddingLeft: 0,
+    paddingRight: Spacing.XXS,
+    paddingVertical: 0,
+  },
 });

package/Input/utils.ts

@@ -15,9 +15,8 @@ const formatNumberToMoney = (number: number, currency = '') => {
 
   const numberString = Math.abs(number).toString();
   if (numberString.length < 3) {
-    return isNegative
-      ? `-${numberString}${currency}`
-      : `${numberString}${currency}`;
+    const sign = isNegative ? '-' : '';
+    return `${sign}${numberString}${currency}`;
   }
 
   let count = 0;

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);
               },
             );
           }
@@ -190,6 +190,5 @@ const styles = StyleSheet.create({
   },
   label: {
     marginLeft: 8,
-    fontWeight: '700',
   },
 });

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/ReservedRegions.tsx

@@ -0,0 +1,78 @@
+import React, { createContext, ReactNode, useMemo } from 'react';
+import { Platform, StyleSheet } from 'react-native';
+
+export type ReservedRegion = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+type NativeReservedRegions = typeof import('react-native-reserved-regions');
+
+// native lib is optional so apps without react-native-reserved-regions still bundle
+let nativeLib: NativeReservedRegions | undefined;
+try {
+  nativeLib = require('react-native-reserved-regions');
+} catch {
+  nativeLib = undefined;
+}
+
+/**
+ * screen regions the system currently occludes, relative to the provider, which fills
+ * the root view so they line up with window coordinates
+ */
+const ReservedRegionsContext = createContext<ReservedRegion[]>([]);
+
+/**
+ * keeps the occlusion regions reported by the native provider, the only kind layout reads
+ */
+const OcclusionRegions: React.FC<{
+  useRegions: NativeReservedRegions['useReservedRegions'];
+  children: ReactNode;
+}> = ({ useRegions, children }) => {
+  const regions = useRegions();
+  const occlusion = useMemo(
+    () =>
+      regions
+        .filter(region => region.kind === 'occlusion')
+        .map(region => region.frame),
+    [regions],
+  );
+
+  return (
+    <ReservedRegionsContext.Provider value={occlusion}>
+      {children}
+    </ReservedRegionsContext.Provider>
+  );
+};
+
+/**
+ * tracks the system occlusion regions (iOS 27.1+), e.g. the iPhone Duo status bar
+ * cluster growing for a call or a Live Activity
+ */
+const ReservedRegionsProvider: React.FC<{ children: ReactNode }> = ({
+  children,
+}) => {
+  if (Platform.OS !== 'ios' || !nativeLib) {
+    return <>{children}</>;
+  }
+
+  const { ReservedRegionsProvider: NativeProvider, useReservedRegions } =
+    nativeLib;
+  return (
+    <NativeProvider style={styles.container}>
+      <OcclusionRegions useRegions={useReservedRegions}>
+        {children}
+      </OcclusionRegions>
+    </NativeProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});
+
+export { ReservedRegionsContext, ReservedRegionsProvider };