@momo-kits/foundation 0.168.1-beta.29 → 0.168.1-beta.30

package/Application/BottomSheet.tsx

@@ -41,10 +41,10 @@ import Animated, {
 import { scheduleOnRN } from 'react-native-worklets';
 import layoutStyles from '../Layout/styles';
 import { DuoMetrics, InnerEdgeStyles, useScreenLayout } from '../Layout/utils';
-import { getDuoTopInset, isIPhoneDuo } from './device';
+import { getDuoTopInset, isFoldableDevice } from './device';
 import { SideBarButton } from './Components/SideBarButton';
 
-// iPhone Duo inner display: center the sheet instead of spanning the width
+// foldable inner display: center the sheet instead of spanning the width
 const DUO_REGULAR_MIN_WIDTH = 600;
 
 const INDICATOR_HEIGHT = 16;
@@ -59,7 +59,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   const { theme, navigator } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
   const windowSize = useWindowDimensions();
-  const isDuo = isIPhoneDuo();
+  const isDuo = isFoldableDevice();
   const isDuoCentered =
     isDuo &&
     Math.min(windowSize.width, windowSize.height) >= DUO_REGULAR_MIN_WIDTH;
@@ -91,6 +91,9 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   const isIOS = Platform.OS === 'ios';
   const bottomInset = isIOS ? Math.min(insets.bottom, 21) : insets.bottom;
   const keyboardOffset = heightHeader - bottomInset;
+  // Android shrinks the root for the keyboard but keeps the window height and
+  // fires no keyboardWill* events, so only the root can bound the sheet
+  const fitsResizedRoot = isDuo && !isIOS;
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
@@ -209,8 +212,8 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   }
 
   /**
-   * emit dismiss event, once: folding or rotating iPhone Duo changes the
-   * window height while the sheet stays open
+   * emit dismiss event, once: folding or rotating a foldable device changes
+   * the window height while the sheet stays open
    */
   useEffect(() => {
     openAnimation();
@@ -473,6 +476,8 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
               maxHeight: windowSize.height - topGap - keyboardLift,
               marginBottom: keyboardLift,
             },
+            fitsResizedRoot && styles.shrink,
+            fitsResizedRoot && { marginTop: topGap },
             isDuoFloating && { marginHorizontal: Spacing.M },
             sideColumn && {
               minHeight:

package/Application/ModalScreen.tsx

@@ -18,7 +18,7 @@ import { Styles } from '../Consts';
 import Navigation from './Navigation';
 import { ModalParams } from './types';
 import BottomSheet from './BottomSheet';
-import { getDuoModalBounds, isIPhoneDuo } from './device';
+import { getDuoModalBounds, isFoldableDevice } from './device';
 import { scheduleOnRN } from 'react-native-worklets';
 
 const ModalScreen: React.FC<any> = props => {
@@ -42,7 +42,7 @@ const Modal: React.FC<ModalParams> = props => {
   const Component = useRef(screen).current;
   const insets = useSafeAreaInsets();
   const windowSize = useWindowDimensions();
-  const isDuo = isIPhoneDuo();
+  const isDuo = isFoldableDevice();
 
   /**
    * Fire auto_popup_displayed tracking event on mount

package/Application/device.ts

@@ -1,4 +1,4 @@
-import { Dimensions, Platform, ScaledSize } from 'react-native';
+import { Dimensions, NativeModules, Platform, ScaledSize } from 'react-native';
 import type { EdgeInsets } from 'react-native-safe-area-context';
 import { Spacing } from '../Consts';
 
@@ -23,6 +23,13 @@ const isIPhoneDuo = () => {
   );
 };
 
+// reported by the host; hosts without the constant count as not foldable
+const isAndroidFoldable = () =>
+  Platform.OS === 'android' &&
+  NativeModules?.FoldStateModule?.isFoldableDevice === true;
+
+const isFoldableDevice = () => isIPhoneDuo() || isAndroidFoldable();
+
 // portrait side status bar is about twice as tall as its inset is wide
 const getDuoTopInset = (insets: EdgeInsets, width: number, height: number) =>
   Math.max(
@@ -31,8 +38,9 @@ const getDuoTopInset = (insets: EdgeInsets, width: number, height: number) =>
   );
 
 /**
- * Max modal size on iPhone Duo: inside the safe area, so clear of the side
- * toolbar strip, and capped so it stays a dialog on the inner display.
+ * Max modal size on foldable devices: inside the safe area, so clear of the
+ * side toolbar strip on iPhone Duo, and capped so it stays a dialog on the
+ * inner display.
  */
 const getDuoModalBounds = (
   insets: EdgeInsets,
@@ -49,4 +57,10 @@ const getDuoModalBounds = (
   ),
 });
 
-export { isIPhoneDuo, getDuoTopInset, getDuoModalBounds };
+export {
+  isIPhoneDuo,
+  isAndroidFoldable,
+  isFoldableDevice,
+  getDuoTopInset,
+  getDuoModalBounds,
+};

package/Popup/PopupNotify.tsx

@@ -8,18 +8,12 @@ import { Image } from '../Image';
 import { Text, useScaleSize } from '../Text';
 import { PopupNotifyProps } from './types';
 import { scheduleOnRN } from 'react-native-worklets';
-import {
-  getPopupRadius,
-  splitHighlightText,
-  usePopupMaxHeight,
-  usePopupWidth,
-} from './utils';
+import { getPopupRadius, usePopupMaxHeight, usePopupWidth } from './utils';
 
 const PopupNotify: React.FC<PopupNotifyProps> = ({
   image,
   title = 'Title',
   description = 'Description',
-  highlightText,
   error,
   secondary,
   primary,
@@ -141,25 +135,6 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
     return renderColumn();
   };
 
-  /**
-   * build description text, highlighted keywords keep size/lineHeight and use weight 600
-   */
-  const renderDescription = (text: string) => {
-    const segments = splitHighlightText(text, highlightText);
-    if (!segments) {
-      return text;
-    }
-    return segments.map((segment, index) =>
-      segment.highlight ? (
-        <Text key={index} typography={'header_s_semibold'}>
-          {segment.text}
-        </Text>
-      ) : (
-        segment.text
-      ),
-    );
-  };
-
   /**
    * build close action
    */
@@ -225,7 +200,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
                 }
               }}
             >
-              {renderDescription(description)}
+              {description}
             </Text>
           ) : (
             description

package/Popup/types.ts

@@ -20,13 +20,6 @@ export type PopupNotifyProps = {
    */
   description?: string | React.ReactNode;
 
-  /**
-   * `highlightText`: Optional. List of words/phrases within `description` to be rendered in semibold.
-   * Only applies when `description` is a string. Matching is whole-word and case-sensitive;
-   * every occurrence of each string is highlighted.
-   */
-  highlightText?: string[];
-
   /**
    * `error`: Optional. Represents additional error text to be displayed in the PopupNotify component.
    */

package/Popup/utils.ts

@@ -1,14 +1,12 @@
 import { Dimensions, useWindowDimensions } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Radius, Spacing } from '../Consts';
-import { getDuoModalBounds, isIPhoneDuo } from '../Application/device';
-
-type HighlightSegment = { text: string; highlight: boolean };
+import { getDuoModalBounds, isFoldableDevice } from '../Application/device';
 
 const usePopupWidth = () => {
   const insets = useSafeAreaInsets();
   const { width, height } = useWindowDimensions();
-  if (!isIPhoneDuo()) {
+  if (!isFoldableDevice()) {
     return Dimensions.get('window').width - Spacing.XL * 2;
   }
   return getDuoModalBounds(insets, width, height).maxWidth;
@@ -17,55 +15,12 @@ const usePopupWidth = () => {
 const usePopupMaxHeight = () => {
   const insets = useSafeAreaInsets();
   const { width, height } = useWindowDimensions();
-  if (!isIPhoneDuo()) {
+  if (!isFoldableDevice()) {
     return undefined;
   }
   return getDuoModalBounds(insets, width, height).maxHeight;
 };
 
-const getPopupRadius = () => (isIPhoneDuo() ? Radius.XL : Radius.L);
-
-const isWordChar = (char?: string) =>
-  !!char && (char.toLowerCase() !== char.toUpperCase() || /[0-9_]/.test(char));
-
-/**
- * Split `text` into plain/highlighted segments (same matching as Information `highlightText`):
- * whole-word, case-sensitive, every occurrence, longest keyword first.
- * Returns `undefined` when there is nothing to highlight.
- */
-const splitHighlightText = (
-  text: string,
-  highlightText?: string[],
-): HighlightSegment[] | undefined => {
-  const keywords = highlightText?.filter(
-    keyword => typeof keyword === 'string' && keyword,
-  );
-  if (!keywords?.length) {
-    return undefined;
-  }
-  const pattern = [...keywords]
-    .sort((a, b) => b.length - a.length)
-    .map(keyword => keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
-    .join('|');
-  const regex = new RegExp(pattern, 'g');
-  const segments: HighlightSegment[] = [];
-  let lastIndex = 0;
-  let match;
-  while ((match = regex.exec(text))) {
-    const start = match.index;
-    const end = start + match[0].length;
-    if (isWordChar(text[start - 1]) || isWordChar(text[end])) {
-      regex.lastIndex = start + 1;
-      continue;
-    }
-    if (start > lastIndex) {
-      segments.push({ text: text.slice(lastIndex, start), highlight: false });
-    }
-    segments.push({ text: match[0], highlight: true });
-    lastIndex = end;
-  }
-  segments.push({ text: text.slice(lastIndex), highlight: false });
-  return segments;
-};
+const getPopupRadius = () => (isFoldableDevice() ? Radius.XL : Radius.L);
 
-export { usePopupWidth, usePopupMaxHeight, getPopupRadius, splitHighlightText };
+export { usePopupWidth, usePopupMaxHeight, getPopupRadius };

package/package.json

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