@momo-kits/foundation 0.169.9-beta.1 → 0.169.9

package/Pagination/PaginationScroll.tsx

@@ -13,6 +13,8 @@ import { ApplicationContext, MiniAppContext } from '../Context';
 
 const INDICATOR_WIDTH = 24;
 const INDICATOR_CONTAINER_WIDTH = 72;
+// one frame at 60 fps
+const SCROLL_EVENT_THROTTLE = 16;
 
 /**
  * Horizontal scroll view with a small indicator that tracks the scroll offset.
@@ -31,7 +33,7 @@ const PaginationScroll: FC<ScrollIndicatorProps> = ({
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
-  const onScroll = useAnimatedScrollHandler({
+  const handleScroll = useAnimatedScrollHandler({
     onScroll: (event) => {
       left.value = event.contentOffset.x;
     },
@@ -54,8 +56,8 @@ const PaginationScroll: FC<ScrollIndicatorProps> = ({
     return (
       <Animated.ScrollView
         ref={scrollViewRef as any}
-        onScroll={onScroll}
-        scrollEventThrottle={16}
+        onScroll={handleScroll}
+        scrollEventThrottle={SCROLL_EVENT_THROTTLE}
         alwaysBounceHorizontal={false}
         showsHorizontalScrollIndicator={false}
         horizontal

package/Pagination/types.ts

@@ -3,11 +3,9 @@ import {Ref} from 'react';
 
 export type PaginationProps = {
   /**
-   * Optional. Defines the visual style of the Pagination component.
-   * - 'default': Represents the default style.
-   * - 'black_white': Represents dots on a translucent dark background.
-   * - 'number': Represents a style where pages are represented by numbers.
-   * - 'scroll': Rendered as 'default'; use `PaginationScroll` instead.
+   * Optional. Visual style: 'default' dots, 'black_white' dots on a translucent
+   * dark background, 'number' page numbers. 'scroll' renders as 'default'; use
+   * `PaginationScroll` instead.
    */
   type?: 'default' | 'black_white' | 'number' | 'scroll';
 

package/Popup/PopupNotify.tsx

@@ -12,6 +12,9 @@ import { ModalIconButton } from '../Application/ModalIconButton';
 import { splitHighlightText } from './utils';
 
 const MAX_ROW_TITLE_LENGTH = 12;
+const DESCRIPTION_MAX_HEIGHT = 172;
+const MAX_DESCRIPTION_LINES = 8.5;
+const IMAGE_ASPECT_RATIO = 1.7777;
 
 /**
  * Notify popup body: optional image, title, description, error code and one or
@@ -32,10 +35,10 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
 }) => {
   const context = useContext<any>(MiniAppContext);
   const { theme, navigator, translate } = useContext(ApplicationContext);
-  const [scrollContent, setScrollContent] = useState(false);
+  const [isDescriptionScrollable, setIsDescriptionScrollable] = useState(false);
   const { isFoldable, popup } = useModalLayout();
   const { width: popupWidth, maxHeight, radius } = popup;
-  const scaledMaxHeight = useScaleSize(172);
+  const scaledMaxHeight = useScaleSize(DESCRIPTION_MAX_HEIGHT);
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
   const closeAction = useRef('touch_outside');
@@ -45,12 +48,12 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
     // foldables cap the popup height, the description takes what is left
     Description = ScrollView;
     descriptionStyle = styles.shrink;
-  } else if (scrollContent) {
+  } else if (isDescriptionScrollable) {
     Description = ScrollView;
     descriptionStyle = { maxHeight: scaledMaxHeight };
   }
 
-  const onAction = (callback?: () => void) => {
+  const handleAction = (callback?: () => void) => {
     if (typeof onRequestClose === 'function') {
       onRequestClose?.(callback);
     } else {
@@ -72,7 +75,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
                   size="medium"
                   onPress={() => {
                     closeAction.current = 'button_action';
-                    onAction(secondary?.onPress);
+                    handleAction(secondary?.onPress);
                   }}
                   accessibilityLabel={'btn_popup_cancel'}
                 />
@@ -86,7 +89,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
               size="medium"
               onPress={() => {
                 closeAction.current = 'button_action';
-                onAction(primary.onPress);
+                handleAction(primary.onPress);
               }}
               accessibilityLabel={'btn_popup_allow'}
             />
@@ -103,7 +106,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
             size="medium"
             onPress={() => {
               closeAction.current = 'button_action';
-              onAction(primary.onPress);
+              handleAction(primary.onPress);
             }}
           />
           {!!secondary?.title && (
@@ -116,7 +119,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
                 size="medium"
                 onPress={() => {
                   closeAction.current = 'button_action';
-                  onAction(secondary?.onPress);
+                  handleAction(secondary?.onPress);
                 }}
               />
             </>
@@ -150,7 +153,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
       return text;
     }
     return segments.map((segment, index) => {
-      if (segment.highlight) {
+      if (segment.isHighlighted) {
         return (
           <Text key={index} typography={'header_s_semibold'}>
             {segment.text}
@@ -172,7 +175,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
         style={styles.iconClose}
         onPress={() => {
           closeAction.current = 'icon_close';
-          onAction(onIconClose);
+          handleAction(onIconClose);
         }}
       />
     );
@@ -189,9 +192,9 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
         accessibilityLabel={'description_popup_notify'}
         typography={'body_default_regular'}
         onTextLayout={({ nativeEvent: { lines } }) => {
-          const enableScroll = lines.length > 8.5;
-          if (enableScroll !== scrollContent) {
-            setScrollContent(enableScroll);
+          const shouldScroll = lines.length > MAX_DESCRIPTION_LINES;
+          if (shouldScroll !== isDescriptionScrollable) {
+            setIsDescriptionScrollable(shouldScroll);
           }
         }}
       >
@@ -260,7 +263,7 @@ const styles = StyleSheet.create({
   // clips the image and content to the card radius
   card: { overflow: 'hidden' },
   image: {
-    aspectRatio: 1.7777,
+    aspectRatio: IMAGE_ASPECT_RATIO,
   },
   shrink: { flexShrink: 1 },
   content: { padding: Spacing.XL },

package/Popup/PopupPromotion.tsx

@@ -9,6 +9,7 @@ import { useModalLayout } from '../Application/modalLayout';
 
 const ASPECT_RATIO = 0.72;
 const ICON_CLOSE_SIZE = 20;
+const CLOSE_GLYPH_SIZE = 14;
 // close button row under the image: marginTop + vertical padding + icon
 const CLOSE_ROW_HEIGHT = Spacing.S * 3 + ICON_CLOSE_SIZE;
 
@@ -37,7 +38,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
-  const onAction = (callback?: () => void) => {
+  const handleAction = (callback?: () => void) => {
     if (typeof onRequestClose === 'function') {
       onRequestClose?.(callback);
     } else {
@@ -53,7 +54,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
           accessibilityLabel={'ic_popup_close'}
           onPress={() => {
             closeAction.current = 'icon_close';
-            onAction(onIconClose);
+            handleAction(onIconClose);
           }}
           style={styles.iconButton}
         >
@@ -69,7 +70,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
             <Icon
               source="navigation_close"
               color={theme.colors.background.surface}
-              size={14}
+              size={CLOSE_GLYPH_SIZE}
             />
           </View>
         </TouchableOpacity>
@@ -82,7 +83,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
       accessibilityLabel={'popup_promotion'}
       style={[{ width: imageWidth }, showBaseLineDebug && styles.debugBaseLine]}
     >
-      <TouchableOpacity onPress={() => onAction(onActionClick)}>
+      <TouchableOpacity onPress={() => handleAction(onActionClick)}>
         <Image
           source={{
             uri: image,

package/Popup/types.ts

@@ -43,10 +43,8 @@ export type PopupNotifyProps = {
   primary: PopupAction;
 
   /**
-   * `buttonDirection`: Optional. Represents the direction in which the action buttons are laid out.
-   * - 'row': Buttons are laid out horizontally.
-   * - 'column': Buttons are laid out vertically.
-   * - 'auto': The layout is automatically determined by title length.
+   * `buttonDirection`: Optional. Layout of the action buttons: 'row' horizontal,
+   * 'column' vertical, 'auto' column only when a title is too long for a row.
    */
   buttonDirection?: PopupActionDirection;
 

package/Popup/utils.ts

@@ -1,4 +1,4 @@
-type HighlightSegment = { text: string; highlight: boolean };
+type HighlightSegment = { text: string; isHighlighted: boolean };
 
 /**
  * True for cased-script letters, digits and `_`; caseless scripts (CJK, Thai)
@@ -46,12 +46,15 @@ const splitHighlightText = (
       continue;
     }
     if (start > lastIndex) {
-      segments.push({ text: text.slice(lastIndex, start), highlight: false });
+      segments.push({
+        text: text.slice(lastIndex, start),
+        isHighlighted: false,
+      });
     }
-    segments.push({ text: match[0], highlight: true });
+    segments.push({ text: match[0], isHighlighted: true });
     lastIndex = end;
   }
-  segments.push({ text: text.slice(lastIndex), highlight: false });
+  segments.push({ text: text.slice(lastIndex), isHighlighted: false });
   return segments;
 };
 

package/Skeleton/index.tsx

@@ -21,6 +21,12 @@ import { Colors, Styles } from '../Consts';
 import styles from './styles';
 import { ScreenContext, SkeletonContext } from '../Context';
 
+const PRIMARY_COLOR = Colors.black_05;
+const HIGHLIGHT_COLOR1 = Colors.black_05;
+const HIGHLIGHT_COLOR2 = Colors.black_03;
+const SHIMMER_DURATION = 1000;
+const LAYOUT_ANIMATION_DURATION = 500;
+
 /**
  * Shimmering placeholder that fills its parent. Reports loading to the screen
  * context while mounted.
@@ -28,9 +34,6 @@ import { ScreenContext, SkeletonContext } from '../Context';
 const Skeleton: React.FC<SkeletonTypes> = ({ style }) => {
   const screen = useContext<any>(ScreenContext);
   const [width, setWidth] = useState(0);
-  const PRIMARY_COLOR = Colors.black_05;
-  const HIGHLIGHT_COLOR1 = Colors.black_05;
-  const HIGHLIGHT_COLOR2 = Colors.black_03;
   const progress = useSharedValue(0);
 
   const shimmerColors = [HIGHLIGHT_COLOR1, HIGHLIGHT_COLOR2, HIGHLIGHT_COLOR1];
@@ -39,7 +42,7 @@ const Skeleton: React.FC<SkeletonTypes> = ({ style }) => {
     progress.value = 0;
     progress.value = withRepeat(
       withTiming(1, {
-        duration: 1000,
+        duration: SHIMMER_DURATION,
         easing: Easing.linear,
       }),
       -1,
@@ -57,7 +60,7 @@ const Skeleton: React.FC<SkeletonTypes> = ({ style }) => {
     return { transform: [{ translateX }] };
   });
 
-  const onLayout = (newWidth: number) => {
+  const handleLayout = (newWidth: number) => {
     if (newWidth !== width) {
       setWidth(newWidth);
     }
@@ -66,7 +69,7 @@ const Skeleton: React.FC<SkeletonTypes> = ({ style }) => {
   return (
     <View style={[styles.container, style]}>
       <View
-        onLayout={e => onLayout(e.nativeEvent.layout.width)}
+        onLayout={e => handleLayout(e.nativeEvent.layout.width)}
         style={[Styles.flex, { backgroundColor: PRIMARY_COLOR }]}
       >
         <Animated.View style={[styles.shimmer, shimmerStyle]}>
@@ -96,28 +99,28 @@ const SkeletonProvider: React.FC<{ loading: boolean; children: any }> = ({
   loading = true,
   children,
 }) => {
-  const [previous, setPrevious] = useState(loading);
+  const [isLoadingShown, setIsLoadingShown] = useState(loading);
 
   useEffect(() => {
-    if (previous !== loading) {
+    if (isLoadingShown !== loading) {
       if (Platform.OS === 'android') {
         if (UIManager.setLayoutAnimationEnabledExperimental) {
           UIManager.setLayoutAnimationEnabledExperimental(true);
         }
       }
       LayoutAnimation.configureNext({
-        duration: 500,
+        duration: LAYOUT_ANIMATION_DURATION,
         create: {
           type: LayoutAnimation.Types.easeInEaseOut,
           property: LayoutAnimation.Properties.opacity,
         },
       });
-      setPrevious(loading);
+      setIsLoadingShown(loading);
     }
-  }, [loading, previous]);
+  }, [loading, isLoadingShown]);
 
   return (
-    <SkeletonContext.Provider value={{ loading: previous }}>
+    <SkeletonContext.Provider value={{ loading: isLoadingShown }}>
       {children}
     </SkeletonContext.Provider>
   );

package/package.json

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

package/Application/headerLayout.ts

@@ -1,165 +0,0 @@
-import { useMemo } from 'react';
-import { useWindowDimensions, type ViewStyle } from 'react-native';
-import type { StackNavigationOptions } from '@react-navigation/stack';
-import { Spacing } from '../Consts';
-import { getHeaderMargin } from '../Layout/utils';
-import { FOLDABLE_MIN_WIDTH } from './modalLayout';
-import { isIPhoneDuo } from './utils';
-
-// Top navigation spec, shared with the Compose / SwiftUI kits
-const HEADER_FRAME_MAX_WIDTH = 600;
-
-/**
- * Top navigation geometry on every device
- * - buttonSize / iconSize: round back and shortcut buttons, icons inside them and the pill
- * - pillWidth / pillHeight: help center | home capsule
- * - clusterWidth: shortcut, gap and pill on the right of the bar
- * - searchHeight: search field inside the header
- * - titleGap: space between back and the title, and the title and the right cluster
- * - sidePadding: bar edge to back and to the right cluster
- * - gradientHeight: header gradient, kept at the phone height on wide windows
- * - bannerWidth: animated banner image, kept at the phone width on wide windows
- */
-const HeaderBarMetrics = {
-  buttonSize: 32,
-  iconSize: 20,
-  pillWidth: 72,
-  pillHeight: 32,
-  clusterWidth: 112,
-  searchHeight: 32,
-  titleGap: Spacing.S,
-  sidePadding: Spacing.M,
-  gradientHeight: 154,
-  bannerWidth: 375,
-};
-
-/**
- * `grid` keeps the header row at the bar edges, `stretch` centers it in a 600pt
- * frame on wide windows. Background and status bar always span the window.
- */
-type HeaderContentLayout = 'grid' | 'stretch';
-
-type HeaderLayout = typeof HeaderBarMetrics & {
-  /**
-   * Window whose short side is at least 600 (Galaxy Z Fold / Pixel Fold inner
-   * display, tablets), iPhone Duo excluded. Phones, landscape included, are not.
-   */
-  isWide: boolean;
-  /**
-   * Banner kept at `bannerWidth`, centered: wide windows plus the iPhone Duo
-   * inner display, portrait and landscape.
-   */
-  isBannerCentered: boolean;
-  /**
-   * Window edge to back and to the right cluster: `sidePadding`, or centering the
-   * row in the 600pt frame with `stretch` on a wide window.
-   */
-  frameInset: number;
-  /**
-   * Header row width between the two `frameInset`s.
-   */
-  frameWidth: number;
-};
-
-type HeaderLayoutInput = {
-  width: number;
-  height: number;
-  isDuo: boolean;
-  contentLayout?: HeaderContentLayout;
-};
-
-/**
- * Header geometry for a window, pure so it can be tested without a device.
- */
-const getHeaderLayout = ({
-  width,
-  height,
-  isDuo,
-  contentLayout = 'grid',
-}: HeaderLayoutInput): HeaderLayout => {
-  const { sidePadding } = HeaderBarMetrics;
-  const isLargeWindow = Math.min(width, height) >= FOLDABLE_MIN_WIDTH;
-  const isWide = !isDuo && isLargeWindow;
-  let frameInset = sidePadding;
-  if (isWide && contentLayout === 'stretch') {
-    const centered = (width - HEADER_FRAME_MAX_WIDTH) / 2;
-    frameInset = Math.max(sidePadding, centered);
-  }
-  return {
-    ...HeaderBarMetrics,
-    isWide,
-    isBannerCentered: isLargeWindow,
-    frameInset,
-    frameWidth: width - frameInset * 2,
-  };
-};
-
-/**
- * Widest a title can be between back and the right cluster of the header row.
- */
-const getTitleBudget = (layout: HeaderLayout) => {
-  const { buttonSize, titleGap, clusterWidth } = layout;
-  return layout.frameWidth - buttonSize - titleGap * 2 - clusterWidth;
-};
-
-/**
- * Header geometry for the current window; follows fold, unfold and rotation.
- */
-const useHeaderLayout = (contentLayout?: HeaderContentLayout): HeaderLayout => {
-  const { width, height } = useWindowDimensions();
-  const isDuo = isIPhoneDuo();
-  return useMemo(() => {
-    return getHeaderLayout({ width, height, isDuo, contentLayout });
-  }, [width, height, isDuo, contentLayout]);
-};
-
-const TITLE_CONTAINER_RESET: ViewStyle = {
-  marginLeft: 0,
-  marginEnd: 0,
-  marginStart: 0,
-  marginHorizontal: 0,
-  marginVertical: 0,
-  margin: 0,
-};
-
-/**
- * React Navigation container styles that keep back, title and the right cluster
- * in the `stretch` frame. `undefined` for `grid`, and on iPhone Duo, which keeps
- * its own header row.
- */
-const useHeaderFrameOptions = (
-  contentLayout?: HeaderContentLayout,
-): StackNavigationOptions | undefined => {
-  const layout = useHeaderLayout(contentLayout);
-  const { width } = useWindowDimensions();
-  const isDuo = isIPhoneDuo();
-  return useMemo(() => {
-    if (contentLayout !== 'stretch' || isDuo) {
-      return undefined;
-    }
-    // the header content row already sits this far in on large iOS windows
-    const shift = layout.frameInset - layout.sidePadding;
-    const containerShift = Math.max(0, shift - getHeaderMargin(width));
-    return {
-      headerLeftContainerStyle: { paddingLeft: containerShift },
-      headerRightContainerStyle: { paddingRight: containerShift },
-      headerTitleContainerStyle: {
-        ...TITLE_CONTAINER_RESET,
-        left: layout.titleGap,
-        maxWidth: getTitleBudget(layout),
-      },
-    };
-  }, [contentLayout, isDuo, layout, width]);
-};
-
-export type { HeaderContentLayout, HeaderLayout };
-
-export {
-  HeaderBarMetrics,
-  HEADER_FRAME_MAX_WIDTH,
-  TITLE_CONTAINER_RESET,
-  getHeaderLayout,
-  getTitleBudget,
-  useHeaderLayout,
-  useHeaderFrameOptions,
-};