@momo-kits/foundation 0.169.1 → 0.169.3-beta.1

package/Popup/PopupNotify.tsx

@@ -1,19 +1,15 @@
 import React, { useContext, useRef, useState } from 'react';
-import { ScrollView, StyleSheet, TouchableOpacity, View } from 'react-native';
+import { ScrollView, StyleSheet, View } from 'react-native';
 import { ApplicationContext, MiniAppContext } from '../Context';
 import { Button } from '../Button';
-import { Colors, Radius, Spacing, Styles } from '../Consts';
-import { Icon } from '../Icon';
+import { Colors, Spacing, Styles } from '../Consts';
 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 { useModalLayout } from '../Application/modalLayout';
+import { ModalIconButton } from '../Application/ModalIconButton';
+import { splitHighlightText } from './utils';
 
 const PopupNotify: React.FC<PopupNotifyProps> = ({
   image,
@@ -30,16 +26,19 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
   const context = useContext<any>(MiniAppContext);
   const { theme, navigator, translate } = useContext(ApplicationContext);
   const [scrollContent, setScrollContent] = useState(false);
-  const popupWidth = usePopupWidth();
-  const maxHeight = usePopupMaxHeight();
-  const radius = getPopupRadius();
+  const { isFoldable, popup } = useModalLayout();
+  const { width: popupWidth, maxHeight, radius } = popup;
   const scaledMaxHeight = useScaleSize(172);
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
   const closeAction = useRef('touch_outside');
   let descriptionStyle = {};
   let Description: any = View;
-  if (scrollContent) {
+  if (isFoldable) {
+    // foldables cap the popup height, the description takes what is left
+    Description = ScrollView;
+    descriptionStyle = styles.shrink;
+  } else if (scrollContent) {
     Description = ScrollView;
     descriptionStyle = { maxHeight: scaledMaxHeight };
   }
@@ -165,34 +164,20 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
    * build close action
    */
   const buildCloseIcon = () => {
-    if (typeof onIconClose === 'function') {
-      return (
-        <TouchableOpacity
-          accessibilityLabel={'ic_popup_close'}
-          style={styles.iconCloseContainer}
-          onPress={() => {
-            closeAction.current = 'icon_close';
-            onAction(onIconClose);
-          }}
-        >
-          <View
-            style={[
-              styles.iconClose,
-              {
-                backgroundColor: theme.colors.text.default,
-                borderColor: theme.colors.background.surface,
-              },
-            ]}
-          >
-            <Icon
-              source="navigation_close"
-              color={theme.colors.background.surface}
-              size={14}
-            />
-          </View>
-        </TouchableOpacity>
-      );
+    if (typeof onIconClose !== 'function') {
+      return null;
     }
+    return (
+      <ModalIconButton
+        icon="navigation_close"
+        accessibilityLabel={'ic_popup_close'}
+        style={styles.iconClose}
+        onPress={() => {
+          closeAction.current = 'icon_close';
+          onAction(onIconClose);
+        }}
+      />
+    );
   };
 
   const body = (
@@ -206,11 +191,17 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
           ]}
         />
       )}
-      <View style={styles.content}>
+      <View style={[styles.content, isFoldable && styles.shrink]}>
         <Text
           typography={'header_default_bold'}
           numberOfLines={3}
           accessibilityLabel={'title_popup_notify'}
+          // keeps the title clear of the close button on a text only popup
+          style={
+            !image &&
+            typeof onIconClose === 'function' &&
+            styles.titleClearClose
+          }
         >
           {title}
         </Text>
@@ -262,20 +253,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
         showBaseLineDebug && styles.debugBaseLine,
       ]}
     >
-      {maxHeight === undefined ? (
-        body
-      ) : (
-        // scrolls when iPhone Duo landscape is too short; actions stay visible
-        <ScrollView
-          style={[
-            styles.body,
-            { borderTopLeftRadius: radius, borderTopRightRadius: radius },
-          ]}
-          bounces={false}
-        >
-          {body}
-        </ScrollView>
-      )}
+      {body}
       <View style={styles.contentAction}>{buildAction()}</View>
       {buildCloseIcon()}
     </View>
@@ -288,7 +266,7 @@ const styles = StyleSheet.create({
     aspectRatio: 1.7777,
     overflow: 'hidden',
   },
-  body: { flexShrink: 1, overflow: 'hidden' },
+  shrink: { flexShrink: 1 },
   content: { padding: Spacing.XL },
   description: {
     marginTop: Spacing.S,
@@ -304,19 +282,11 @@ const styles = StyleSheet.create({
     width: Spacing.S,
     height: Spacing.S,
   },
-  iconCloseContainer: {
-    position: 'absolute',
-    top: -Spacing.M,
-    right: -Spacing.M,
-    padding: Spacing.XS,
-  },
+  titleClearClose: { paddingRight: Spacing.XL },
   iconClose: {
-    width: 20,
-    height: 20,
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: Radius.M,
-    borderWidth: 2,
+    position: 'absolute',
+    top: Spacing.M,
+    right: Spacing.M,
   },
 });
 

package/Popup/PopupPromotion.tsx

@@ -5,7 +5,7 @@ import { ApplicationContext, MiniAppContext } from '../Context';
 import { Image } from '../Image';
 import { Colors, Radius, Spacing } from '../Consts';
 import { Icon } from '../Icon';
-import { usePopupMaxHeight, usePopupWidth } from './utils';
+import { useModalLayout } from '../Application/modalLayout';
 
 const ASPECT_RATIO = 0.72;
 const ICON_CLOSE_SIZE = 20;
@@ -20,9 +20,10 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
 }) => {
   const context = useContext<any>(MiniAppContext);
   const { theme, navigator } = useContext(ApplicationContext);
-  const popupWidth = usePopupWidth();
-  const maxHeight = usePopupMaxHeight();
-  // fit the portrait image by height when iPhone Duo leaves too little room
+  const {
+    popup: { width: popupWidth, maxHeight },
+  } = useModalLayout();
+  // fit the portrait image by height when a foldable leaves too little room
   let imageWidth = popupWidth;
   if (maxHeight !== undefined) {
     const heightFitWidth = (maxHeight - CLOSE_ROW_HEIGHT) * ASPECT_RATIO;

package/Popup/utils.ts

@@ -1,30 +1,5 @@
-import { Dimensions, useWindowDimensions } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { Radius, Spacing } from '../Consts';
-import { getDuoModalBounds, isIPhoneDuo } from '../Application/utils';
-
 type HighlightSegment = { text: string; highlight: boolean };
 
-const usePopupWidth = () => {
-  const insets = useSafeAreaInsets();
-  const { width, height } = useWindowDimensions();
-  if (!isIPhoneDuo()) {
-    return Dimensions.get('window').width - Spacing.XL * 2;
-  }
-  return getDuoModalBounds(insets, width, height).maxWidth;
-};
-
-const usePopupMaxHeight = () => {
-  const insets = useSafeAreaInsets();
-  const { width, height } = useWindowDimensions();
-  if (!isIPhoneDuo()) {
-    return undefined;
-  }
-  return getDuoModalBounds(insets, width, height).maxHeight;
-};
-
-const getPopupRadius = () => (isIPhoneDuo() ? Radius.XL : Radius.L);
-
 const isWordChar = (char?: string) => {
   if (!char) {
     return false;
@@ -76,4 +51,4 @@ const splitHighlightText = (
   return segments;
 };
 
-export { usePopupWidth, usePopupMaxHeight, getPopupRadius, splitHighlightText };
+export { splitHighlightText };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.169.1",
+    "version": "0.169.3-beta.1",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},
@@ -26,6 +26,7 @@
     },
     "peerDependencies": {
         "react-native": "*",
+        "react-native-svg": "*",
         "react-native-worklets": "0.6.1"
     },
     "devDependencies": {

package/Application/BottomTab/DuoTabBar.parts.tsx

@@ -1,202 +0,0 @@
-import { CommonActions, Route } from '@react-navigation/native';
-import { BottomTabBarProps } from '@react-navigation/bottom-tabs';
-import React, { ReactNode, useContext, useMemo, useRef } from 'react';
-import {
-  StyleProp,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-  ViewStyle,
-} from 'react-native';
-import Animated from 'react-native-reanimated';
-import { Colors } from '../../Consts';
-import { ApplicationContext, MiniAppContext } from '../../Context';
-import { Icon } from '../../Icon';
-import { Text } from '../../Text';
-import { FloatingButtonProps } from '../types';
-import { TabBarIcon } from './TabBarIcon';
-import { LiquidSelection, useLiquidItem } from './hooks';
-import { styles } from './DuoTabBar.styles';
-
-export type Props = BottomTabBarProps & {
-  activeTintColor: string;
-  inactiveTintColor: string;
-  floatingButton?: FloatingButtonProps;
-};
-
-export const BarMaterial: React.FC<{ radius: number }> = ({ radius }) => {
-  const { theme } = useContext(ApplicationContext);
-  return (
-    <View
-      pointerEvents={'none'}
-      style={[
-        StyleSheet.absoluteFill,
-        styles.barMaterial,
-        {
-          borderRadius: radius,
-          backgroundColor: theme.colors.background.surface,
-          borderColor: theme.colors.border.default,
-        },
-      ]}
-    />
-  );
-};
-
-// Figma Home-2026 tab bar "Selection": brand pink at 8%
-const SELECTION_TINT_ALPHA = '14';
-
-/**
- * pink tinted capsule under the selected tab
- */
-export const SelectionMaterial: React.FC<{ radius: number }> = ({ radius }) => {
-  const { theme } = useContext(ApplicationContext);
-  return (
-    <View
-      pointerEvents={'none'}
-      style={[
-        StyleSheet.absoluteFill,
-        {
-          borderRadius: radius,
-          backgroundColor: theme.colors.primary + SELECTION_TINT_ALPHA,
-        },
-      ]}
-    />
-  );
-};
-
-/**
- * tab label at its design size: like the system tab bar it doesn't grow with the wide
- * Duo displays, which Text otherwise scales up to 5pt
- */
-export const TabLabel: React.FC<{
-  label: string;
-  color: string;
-  typography: 'label_xs_medium';
-}> = ({ label, color, typography }) => {
-  const context = useContext<any>(MiniAppContext);
-  return (
-    <MiniAppContext.Provider
-      value={{
-        ...context,
-        fontScale: { useOSScaleRate: false, userScaleRate: 1 },
-      }}
-    >
-      <Text numberOfLines={1} typography={typography} color={color}>
-        {label}
-      </Text>
-    </MiniAppContext.Provider>
-  );
-};
-
-export const getTabItems = ({
-  state,
-  descriptors,
-  navigation,
-  activeTintColor,
-  inactiveTintColor,
-}: Props) => {
-  return state.routes.map((route: Route<string>, index: number) => {
-    const { options } = descriptors[route.key];
-    const focused = index === state.index;
-    const label = options.title ?? route.name;
-
-    const onPress = () => {
-      const event = navigation.emit({
-        type: 'tabPress',
-        target: route.key,
-        canPreventDefault: true,
-      });
-      if (!focused && !event.defaultPrevented) {
-        navigation.dispatch({
-          ...CommonActions.navigate(route.name),
-          target: state.key,
-        });
-      }
-    };
-
-    const onLongPress = () => {
-      navigation.emit({ type: 'tabLongPress', target: route.key });
-    };
-
-    const renderIcon = (active: boolean) =>
-      options.tabBarIcon && (
-        <TabBarIcon
-          route={route}
-          badge={options.tabBarBadge}
-          badgeStyle={options.tabBarBadgeStyle}
-          activeOpacity={active ? 1 : 0}
-          inactiveOpacity={active ? 0 : 1}
-          activeTintColor={activeTintColor}
-          inactiveTintColor={inactiveTintColor}
-          renderIcon={options.tabBarIcon}
-          style={styles.icon}
-        />
-      );
-
-    return { route, focused, label, onPress, onLongPress, renderIcon };
-  });
-};
-
-export const QrIcon: React.FC<{
-  icon: FloatingButtonProps['icon'];
-  size: number;
-}> = ({ icon, size }) => {
-  if (typeof icon === 'string') {
-    return <Icon source={icon} size={size} color={Colors.black_01} />;
-  }
-  return <>{icon}</>;
-};
-
-export type TabItem = ReturnType<typeof getTabItems>[number];
-
-/**
- * tab item: a tap is handled here as before, a drag over the bar is handled by the bar's
- * gesture. The active layer fades in as the lens passes over it
- */
-export const LiquidTabItem: React.FC<{
-  item: TabItem;
-  itemIndex: number;
-  selection: LiquidSelection;
-  onSelect: () => void;
-  renderContent: (active: boolean) => ReactNode;
-  style: StyleProp<ViewStyle>;
-}> = ({ item, itemIndex, selection, onSelect, renderContent, style }) => {
-  const { activeStyle, popStyle } = useLiquidItem(selection, itemIndex);
-  const activeLayerStyle = useMemo(
-    () => [StyleSheet.absoluteFill, styles.itemLayer, activeStyle],
-    [activeStyle],
-  );
-  // like the system tab bar, a held tab is still picked when released
-  const longPressed = useRef(false);
-
-  return (
-    <TouchableOpacity
-      accessibilityRole={'tab'}
-      accessibilityLabel={item.label}
-      accessibilityState={{ selected: item.focused }}
-      activeOpacity={1}
-      onPressIn={() => {
-        longPressed.current = false;
-        selection.handlePressIn(itemIndex);
-      }}
-      onPressOut={() => {
-        if (selection.handlePressOut() && longPressed.current) {
-          onSelect();
-        }
-      }}
-      onPress={onSelect}
-      onLongPress={() => {
-        longPressed.current = true;
-        item.onLongPress();
-      }}
-      style={style}
-    >
-      <Animated.View style={popStyle}>
-        <View style={styles.itemLayer}>{renderContent(false)}</View>
-        <Animated.View style={activeLayerStyle}>
-          {renderContent(true)}
-        </Animated.View>
-      </Animated.View>
-    </TouchableOpacity>
-  );
-};

package/Application/BottomTab/badge.ts

@@ -1,41 +0,0 @@
-import { Colors } from '../../Consts';
-
-export const getBadgeProps = (itemBadgeLabel: string | number | undefined) => {
-  const isNum = !isNaN(parseInt(`${itemBadgeLabel}`, 10));
-  const isDot = typeof itemBadgeLabel === 'string' && !itemBadgeLabel;
-  const isNumZero = isNum && Number(itemBadgeLabel) === 0;
-
-  let badgeLabel = itemBadgeLabel;
-  if (isNumZero) {
-    badgeLabel = undefined;
-  }
-
-  let badgeStyle: {
-    marginRight: number;
-    top: number;
-    backgroundColor: string;
-    width?: number;
-  } = {
-    marginRight: -8,
-    top: -4,
-    backgroundColor: Colors.orange_03,
-  };
-
-  if (isNum) {
-    badgeStyle = {
-      marginRight: -4,
-      top: -4,
-      backgroundColor: Colors.red_03,
-    };
-  }
-  if (isDot) {
-    badgeStyle = {
-      marginRight: -2,
-      top: -2,
-      backgroundColor: Colors.orange_03,
-      width: 12,
-    };
-  }
-
-  return { badgeLabel, badgeStyle };
-};