@momo-kits/foundation 0.167.1-beta.2 → 0.167.1-beta.3

package/Application/BottomTab/BottomTabBar.tsx

@@ -58,13 +58,11 @@ export default function BottomTabBar({
   const { theme } = useContext(ApplicationContext);
   const { routes } = state;
   const widthDevice = useWindowDimensions()?.width;
-  const insets = useSafeAreaInsets();
   const useFloating = floatingButton && state.routes.length % 2 === 0;
-  const itemWidth =
-    (widthDevice - insets.left - insets.right) /
-    (state.routes.length + (useFloating ? 1 : 0));
+  const itemWidth = widthDevice / (state.routes.length + (useFloating ? 1 : 0));
   // const buildLink = useLinkBuilder();
   const indicatorAnimated = useSharedValue(0);
+  const insets = useSafeAreaInsets();
 
   const indicatorStyle = useAnimatedStyle(() => ({
     width: itemWidth,
@@ -248,8 +246,7 @@ export default function BottomTabBar({
         },
         {
           paddingBottom: paddingBottom,
-          paddingLeft: insets.left,
-          paddingRight: insets.right,
+          paddingHorizontal: Math.max(insets.left, insets.right),
         },
         style,
       ]}

package/Application/Components/HeaderExtendHeader.tsx

@@ -1,6 +1,6 @@
 import React, { Ref, useContext } from 'react';
 import LinearGradient from 'react-native-linear-gradient';
-import { Platform, StyleSheet, View } from 'react-native';
+import { Dimensions, Platform, StyleSheet, View } from 'react-native';
 import Animated, {
   Extrapolation,
   interpolate,
@@ -18,11 +18,12 @@ import {
   AnimatedCompatValue,
   useNormalizedSharedValue,
 } from '../utils';
-import { useHorizontalLayout } from '../../Layout/utils';
 
 const SCREEN_PADDING = 12;
 const BACK_WIDTH = 28;
 
+const { width: screenWidth } = Dimensions.get('window');
+
 const HeaderExtendHeader: React.FC<{
   headerType?: HeaderType;
   animatedValue: AnimatedCompatValue;
@@ -51,8 +52,6 @@ const HeaderExtendHeader: React.FC<{
   const gradientColor = customGradientColor ?? theme.colors.gradient;
   const headerBackground = customBackground ?? theme.assets?.headerBackground;
   const leftPosition = inputSearchProps?.leftPosition || BACK_WIDTH + 20;
-  const layout = useHorizontalLayout(SCREEN_PADDING);
-  const { insets } = layout;
 
   let useShadowHeader = useShadowHeaderProp;
   if (inputSearchProps && Platform.OS === 'android') {
@@ -80,7 +79,7 @@ const HeaderExtendHeader: React.FC<{
         translateX: interpolate(
           sharedValue.value,
           [0, 100],
-          [layout.marginLeft, leftPosition + insets.left],
+          [SCREEN_PADDING, leftPosition],
           Extrapolation.CLAMP,
         ),
       },
@@ -89,8 +88,8 @@ const HeaderExtendHeader: React.FC<{
       sharedValue.value,
       [0, 100],
       [
-        layout.width,
-        layout.width + SCREEN_PADDING - leftPosition - headerRightWidth,
+        screenWidth - SCREEN_PADDING * 2,
+        screenWidth - leftPosition - 12 - headerRightWidth,
       ],
       Extrapolation.CLAMP,
     ),

package/Application/Components/SearchHeader.tsx

@@ -1,13 +1,17 @@
 import { Colors, Radius, Spacing, Styles } from '../../Consts';
 import { InputRef, InputSearch } from '../../Input';
-import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import {
+  Dimensions,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native';
 import Animated, { useAnimatedStyle } from 'react-native-reanimated';
 import React, { useContext } from 'react';
 import { SearchHeaderProps } from '../types';
 import { ApplicationContext, MiniAppContext } from '../../Context';
 import { Text } from '../../Text';
 import { useNormalizedSharedValue } from '../utils';
-import { useHorizontalLayout } from '../../Layout/utils';
 
 const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
   (
@@ -23,7 +27,7 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
     const { theme, navigator } = useContext(ApplicationContext);
     const context = useContext<any>(MiniAppContext);
     const BACK_WIDTH = 28;
-    const { width: safeWidth } = useHorizontalLayout(0);
+    const { width: screenWidth } = Dimensions.get('window');
 
     const sharedValue = useNormalizedSharedValue(animatedValue);
     const leftPosition = props?.leftPosition ?? BACK_WIDTH + 20;
@@ -73,7 +77,7 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
           style={[
             Styles.flex,
             renderButtons && {
-              maxWidth: safeWidth - leftPosition - 12 - headerRightWidth,
+              maxWidth: screenWidth - leftPosition - 12 - headerRightWidth,
             },
           ]}
         >

package/Input/InputMoney.tsx

@@ -4,16 +4,13 @@ import React, {
   useContext,
   useEffect,
   useImperativeHandle,
-  useLayoutEffect,
   useRef,
   useState,
 } from 'react';
 import {
   NativeSyntheticEvent,
-  Platform,
   TextInput,
   TextInputFocusEventData,
-  TextInputSelectionChangeEventData,
   TouchableOpacity,
   View,
 } from 'react-native';
@@ -35,124 +32,9 @@ import {
 } from './common';
 import { InputMoneyProps } from './index';
 import styles from './styles';
+import { formatNumberToMoney } from './utils';
 import SystemTextInput from './SystemTextInput';
 
-type Selection = { start: number; end: number };
-type Edit = { start: number; end: number; inserted: string };
-
-const countDigits = (text: string) => text.replace(/\D/g, '').length;
-
-const groupDigits = (digits: string) =>
-  digits.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
-
-// Caret position right after the `digitIndex`-th digit of `display`.
-const caretFromDigitIndex = (display: string, digitIndex: number) => {
-  let count = 0;
-  for (let i = 0; i < display.length && count < digitIndex; i++) {
-    if (/\d/.test(display[i])) {
-      count += 1;
-      if (count === digitIndex) return i + 1;
-    }
-  }
-  return 0;
-};
-
-// Finds which range of `old` was replaced to produce `next`. `selection` is
-// the pre-edit selection on iOS and already the post-edit caret on Android,
-// where onSelectionChange fires before onChangeText.
-const detectEdit = (old: string, next: string, selection: Selection): Edit => {
-  const { start, end } = selection;
-  const removed = old.length - next.length;
-  const preEdit: Edit[] = [
-    {
-      start,
-      end,
-      inserted: next.slice(start, next.length - (old.length - end)),
-    },
-    { start: start - removed, end: start, inserted: '' },
-    { start, end: start + removed, inserted: '' },
-  ];
-  const postEdit: Edit[] = [];
-  const tail = next.length - start;
-  if (start === end && tail <= old.length) {
-    let prefix = 0;
-    while (
-      prefix < Math.min(start, old.length - tail) &&
-      old[prefix] === next[prefix]
-    ) {
-      prefix += 1;
-    }
-    postEdit.push({
-      start: prefix,
-      end: old.length - tail,
-      inserted: next.slice(prefix, start),
-    });
-  }
-  const candidates =
-    Platform.OS === 'android'
-      ? [...postEdit, ...preEdit]
-      : [...preEdit, ...postEdit];
-  const match = candidates.find(
-    e =>
-      e.start >= 0 &&
-      e.end >= e.start &&
-      e.end <= old.length &&
-      old.slice(0, e.start) + e.inserted + old.slice(e.end) === next,
-  );
-  if (match) return match;
-
-  let prefix = 0;
-  while (
-    prefix < Math.min(old.length, next.length) &&
-    old[prefix] === next[prefix]
-  ) {
-    prefix += 1;
-  }
-  let suffix = 0;
-  while (
-    suffix < Math.min(old.length, next.length) - prefix &&
-    old[old.length - 1 - suffix] === next[next.length - 1 - suffix]
-  ) {
-    suffix += 1;
-  }
-  return {
-    start: prefix,
-    end: old.length - suffix,
-    inserted: next.slice(prefix, next.length - suffix),
-  };
-};
-
-// Applies `edit` to the digits of `display`. Separators and currency are never
-// deleted: removing a separator deletes the digit before it instead, removing
-// only the currency leaves the digits untouched.
-const applyEdit = (display: string, edit: Edit, digitLimit: number) => {
-  const digits = display.replace(/\D/g, '');
-  let left = countDigits(display.slice(0, edit.start));
-  let removed = countDigits(display.slice(edit.start, edit.end));
-  const inserted = edit.inserted.replace(/\D/g, '');
-  if (
-    !removed &&
-    !inserted &&
-    left > 0 &&
-    display.slice(edit.start, edit.end).includes('.')
-  ) {
-    left -= 1;
-    removed = 1;
-  }
-  const next = digits.slice(0, left) + inserted + digits.slice(left + removed);
-  const trimmed = next.replace(/^0+(?=\d)/, '');
-  if ((!removed && !inserted) || trimmed.length > digitLimit) {
-    return { digits, caretDigit: left };
-  }
-  return {
-    digits: trimmed,
-    caretDigit: Math.max(
-      0,
-      left + inserted.length - (next.length - trimmed.length),
-    ),
-  };
-};
-
 const InputMoney = forwardRef(
   (
     {
@@ -191,14 +73,7 @@ const InputMoney = forwardRef(
     const [focused, setFocused] = useState(false);
     const [displayValue, setDisplayValue] = useState('');
     const [numericValue, setNumericValue] = useState('');
-    const [commitCount, setCommitCount] = useState(0);
-    const displayRef = useRef('');
-    const selectionRef = useRef<Selection>({ start: 0, end: 0 });
-    // Caret to push to native once the committed text is rendered.
-    const pendingCaretRef = useRef<number | null>(null);
-    // Caret the native input reports for the raw, unformatted text. On iOS that
-    // event lands after onChangeText and must not override the formatted caret.
-    const rawCaretRef = useRef<number | null>(null);
+    const [lastDisplayValue, setLastDisplayValue] = useState('');
     const inputRef = useRef<TextInput>(null);
     const componentName = 'InputMoney';
 
@@ -216,36 +91,25 @@ const InputMoney = forwardRef(
 
     useEffect(() => {
       if (value !== undefined && typeof value === 'string') {
-        const cleanValue = value.replace(/\D/g, '').replace(/^0+(?=\d)/, '');
+        const cleanValue = value.replace(/\D/g, '');
         if (cleanValue !== numericValue) {
-          commit(cleanValue, cleanValue.length);
+          setNumericValue(cleanValue);
+          updateDisplayValue(cleanValue);
         }
       }
     }, [value]);
 
-    // Always set the caret imperatively: a controlled `selection` prop is only
-    // sent to native when it differs from the last native selection, so it is
-    // skipped whenever a stale selection event already reported the same value.
-    useLayoutEffect(() => {
-      const caret = pendingCaretRef.current;
-      if (caret === null) return;
-      pendingCaretRef.current = null;
-      if (inputRef.current?.isFocused()) {
-        inputRef.current.setSelection(caret, caret);
-      }
-    }, [commitCount]);
+    useEffect(() => {
+      setLastDisplayValue(displayValue);
+    }, [displayValue]);
 
-    const commit = (digits: string, caretDigit: number) => {
-      const display = digits ? `${groupDigits(digits)}${currency}` : '';
-      const caret = caretFromDigitIndex(display, caretDigit);
-      const changed = digits !== numericValue;
-      displayRef.current = display;
-      selectionRef.current = { start: caret, end: caret };
-      pendingCaretRef.current = caret;
-      setCommitCount(count => count + 1);
-      setDisplayValue(display);
-      setNumericValue(digits);
-      return changed;
+    const updateDisplayValue = (numeric: string) => {
+      if (!numeric) {
+        setDisplayValue('');
+        return;
+      }
+      const formatted = formatNumberToMoney(Number(numeric));
+      setDisplayValue(formatted ? `${formatted}${currency}` : '');
     };
 
     const parseInputText = (text: string): string => {
@@ -255,49 +119,47 @@ const InputMoney = forwardRef(
       return textWithoutCurrency.replace(/[^\d]/g, '');
     };
 
+    const updateNumericValue = (val: string) => {
+      let next = val.replace(/[^\d]/g, '');
+      if (next.length > digitLimit) next = next.slice(0, digitLimit);
+      if (/^\d*$/.test(next)) {
+        setNumericValue(next);
+        updateDisplayValue(next);
+        onChangeText?.(next);
+      }
+    };
+
     const onClearText = () => {
       inputRef?.current?.clear();
       inputRef.current?.setNativeProps({ text: '' });
-      commit('', 0);
+      setDisplayValue('');
+      setNumericValue('');
       onChangeText?.('');
     };
 
     const _onChangeText = (text: string) => {
-      let digits = '';
-      let caretDigit = 0;
-      rawCaretRef.current = 0;
-      if (text) {
-        const edit = detectEdit(displayRef.current, text, selectionRef.current);
-        rawCaretRef.current = edit.start + edit.inserted.length;
-        ({ digits, caretDigit } = applyEdit(
-          displayRef.current,
-          edit,
-          digitLimit,
-        ));
-      }
-      if (commit(digits, caretDigit)) {
-        onChangeText?.(digits);
-      }
-    };
-
-    // Keeps the caret out of the currency suffix.
-    const _onSelectionChange = (
-      e: NativeSyntheticEvent<TextInputSelectionChangeEventData>,
-    ) => {
-      props.onSelectionChange?.(e);
-      const { start, end } = e.nativeEvent.selection;
-      const rawCaret = rawCaretRef.current;
-      rawCaretRef.current = null;
-      if (start === end && start === rawCaret) {
+      if (!text) {
+        setDisplayValue('');
+        setNumericValue('');
+        onChangeText?.('');
         return;
       }
-      const display = displayRef.current;
-      const max = display ? display.length - currency.length : 0;
-      const clamped = { start: Math.min(start, max), end: Math.min(end, max) };
-      selectionRef.current = clamped;
-      if (clamped.start !== start || clamped.end !== end) {
-        inputRef.current?.setSelection(clamped.start, clamped.end);
+      if (text.length < lastDisplayValue.length) {
+        const lastChar = lastDisplayValue.charAt(lastDisplayValue.length - 1);
+        const isRemovingCurrency =
+          lastDisplayValue.endsWith(currency) || lastChar === ' ';
+        const isRemovingDot = lastChar === '.';
+        if (isRemovingCurrency || isRemovingDot) {
+          const currentNumericValue = numericValue;
+          if (currentNumericValue.length > 0) {
+            const newNumericValue = currentNumericValue.slice(0, -1);
+            updateNumericValue(newNumericValue);
+            return;
+          }
+        }
       }
+      const newNumericValue = parseInputText(text);
+      updateNumericValue(newNumericValue);
     };
 
     const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
@@ -312,16 +174,13 @@ const InputMoney = forwardRef(
 
     const _setText = (text: string) => {
       if (!text) {
-        commit('', 0);
+        setDisplayValue('');
+        setNumericValue('');
         onChangeText?.('');
         return;
       }
-      const digits = parseInputText(text)
-        .replace(/^0+(?=\d)/, '')
-        .slice(0, digitLimit);
-      if (commit(digits, digits.length)) {
-        onChangeText?.(digits);
-      }
+      const newNumericValue = parseInputText(text);
+      updateNumericValue(newNumericValue);
     };
 
     useImperativeHandle(ref, () => {
@@ -388,7 +247,6 @@ const InputMoney = forwardRef(
               textBreakStrategy="highQuality"
               value={displayValue}
               onChangeText={_onChangeText}
-              onSelectionChange={_onSelectionChange}
               onFocus={_onFocus}
               onBlur={_onBlur}
               placeholder={placeholder}

package/Layout/Card.tsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
-import { View, ViewProps } from 'react-native';
-import { useGridSystem, useHorizontalLayout } from './utils';
+import { Dimensions, View, ViewProps } from 'react-native';
+import { useGridSystem } from './utils';
 import { GridContextProps } from './types';
 import { GridContext, GridSystem } from './index';
 import { Image } from '../Image';
@@ -32,8 +32,7 @@ const Card: React.FC<CardProps> = ({
 
   const gutterSize = 8;
   const margin = 12;
-  const layout = useHorizontalLayout(margin);
-  const widthSection = layout.width;
+  const widthSection = Dimensions.get('window').width - margin * 2;
   let sizePerSpan =
     (widthSection - margin * 2 - gutterSize * (numberOfColumns - 1)) /
       numberOfColumns -
@@ -77,8 +76,7 @@ const Card: React.FC<CardProps> = ({
           styles.card,
           {
             width: widthSection,
-            marginLeft: layout.marginLeft,
-            marginRight: layout.marginRight,
+            marginHorizontal: margin,
             gap: gutterSize,
           },
           !!backgroundImage && { backgroundColor: undefined },

package/Layout/FloatingButton.tsx

@@ -19,7 +19,6 @@ import {
   AnimatedCompatValue,
   useNormalizedSharedValue,
 } from '../Application/utils';
-import { useHorizontalLayout } from './utils';
 
 export interface FloatingButtonProps {
   label?: string;
@@ -57,7 +56,6 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
   const lastOffset = useSharedValue(0);
   const lastDirection = useSharedValue<string | null>(null);
   const [showText, setShowText] = useState(true);
-  const { marginRight } = useHorizontalLayout(12);
 
   useEffect(() => {
     if (!label) return;
@@ -121,7 +119,7 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
         style={[
           styles.container,
           {
-            right: position === 'right' ? marginRight : undefined,
+            right: position === 'right' ? 12 : undefined,
             alignSelf: position === 'center' ? 'center' : 'flex-end',
             bottom,
           },
@@ -138,7 +136,7 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
       style={[
         styles.container,
         {
-          right: position === 'right' ? marginRight : undefined,
+          right: position === 'right' ? 12 : undefined,
           alignSelf: position === 'center' ? 'center' : 'flex-end',
           height: size === 'small' ? 36 : 48,
           backgroundColor: theme.colors.primary,

package/Layout/Section.tsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
-import { useWindowDimensions, View, ViewProps } from 'react-native';
-import { useGridSystem, useHorizontalLayout } from './utils';
+import { Dimensions, View, ViewProps } from 'react-native';
+import { useGridSystem } from './utils';
 import { GridContextProps } from './types';
 import { GridContext } from './index';
 import { ApplicationContext, MiniAppContext } from '../Context';
@@ -38,9 +38,14 @@ const Section: React.FC<SectionProps> = ({
   const { numberOfColumns } = useGridSystem();
 
   const gutterSize = 12;
-  const layout = useHorizontalLayout(12);
-  const { width: windowWidth } = useWindowDimensions();
-  const widthSection = useMargin ? layout.width : windowWidth;
+  let margin = 0;
+  if (useMargin) {
+    margin = 12;
+  }
+  let widthSection = Dimensions.get('window').width;
+  if (useMargin) {
+    widthSection = widthSection - margin * 2;
+  }
 
   const sizePerSpan =
     (widthSection - gutterSize * (numberOfColumns - 1)) / numberOfColumns -
@@ -72,8 +77,7 @@ const Section: React.FC<SectionProps> = ({
           styles.protectedStyle,
           {
             width: widthSection,
-            marginLeft: useMargin ? layout.marginLeft : 0,
-            marginRight: useMargin ? layout.marginRight : 0,
+            marginHorizontal: margin,
             flexDirection: 'row',
             flexWrap: 'wrap',
             gap: gutterSize,

package/Layout/utils.ts

@@ -1,6 +1,5 @@
 import React, { Fragment, ReactElement } from 'react';
 import { useWindowDimensions } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 /**
  * validate children type
@@ -45,18 +44,4 @@ const useGridSystem = () => {
   return { numberOfColumns };
 };
 
-// Side insets are 0 on portrait iPhones; iPhone Duo and landscape report them
-const useHorizontalLayout = (margin: number) => {
-  const { width } = useWindowDimensions();
-  const insets = useSafeAreaInsets();
-  const marginLeft = margin + insets.left;
-  const marginRight = margin + insets.right;
-  return {
-    marginLeft,
-    marginRight,
-    width: width - marginLeft - marginRight,
-    insets,
-  };
-};
-
-export { useGridSystem, useHorizontalLayout, validateChildren };
+export { useGridSystem, validateChildren };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.167.1-beta.2",
+    "version": "0.167.1-beta.3",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},