@momo-kits/foundation 0.169.7-beta.2 → 0.169.7-beta.4

package/Layout/screenScroll.ts

@@ -25,10 +25,6 @@ type ScrollHandlerParams = {
   ref: any;
 };
 
-/**
- * Scroll handlers for Screen: feed the header animated values, retint an animated header
- * past 50pt, snap the quick return header and reset a search screen scrolled under 100pt.
- */
 export const createScrollHandlers = ({
   scrollable,
   animatedValue,
@@ -43,6 +39,9 @@ export const createScrollHandlers = ({
 }: ScrollHandlerParams) => {
   let handleScroll;
 
+  /**
+   * animated when use scroll && animated value
+   */
   if (scrollable) {
     handleScroll = Animated.event(
       [
@@ -81,6 +80,10 @@ export const createScrollHandlers = ({
     );
   }
 
+  /**
+   * handle scroll end
+   * @param e
+   */
   const handleMomentumScrollEnd = (
     e: NativeSyntheticEvent<NativeScrollEvent>,
   ) => {

package/Layout/screenTypes.ts

@@ -38,7 +38,7 @@ export interface ScreenProps extends ViewProps {
   headerType?: HeaderType;
 
   /**
-   * Optional. Animated banner header: its component, tint and title.
+   * Optional. Props for the animated component or bool used top navigation animated.
    */
   animatedHeader?: AnimatedHeader;
 
@@ -71,8 +71,7 @@ export interface ScreenProps extends ViewProps {
   backgroundColor?: string;
 
   /**
-   * Optional. Shift of the content against the animated header banner bottom; negative
-   * values overlap the banner.
+   * Optional. layout card offset overlap header banner.
    */
   layoutOffset?: -8 | -24 | -56 | number;
 

package/Layout/types.ts

@@ -4,12 +4,14 @@ export type HeaderType = 'default' | 'extended' | 'none';
 
 export type ScreenRef = {
   /**
-   * Applies navigation options to the screen's header.
+   * Set options for screen
+   * @param params
    */
   setOptions: (params: NavigationOptions) => void;
 
   /**
-   * Replaces the header title with a search field.
+   * Show search header
+   * @param params
    */
   setSearchHeader: (params: SearchHeaderProps) => void;
 };

package/Layout/utils.ts

@@ -15,8 +15,9 @@ import {
 import { ReservedRegion, ReservedRegionsContext } from './ReservedRegions';
 
 /**
- * Warns when a child is not one of `childrenTypes` (Fragments pass) and returns the
- * children, flattened to the valid elements when given an array.
+ * validate children type
+ * @param children
+ * @param childrenTypes
  */
 const validateChildren = (
   children: React.ReactNode | React.ReactNode[],
@@ -53,20 +54,20 @@ const validateChildren = (
 const NO_INSETS: EdgeInsets = { top: 0, right: 0, bottom: 0, left: 0 };
 
 /**
- * How far system regions (e.g. the camera, at either end depending on the rotation) reach
- * into a side strip from its top and bottom ends, plus the center y of the region reaching
- * furthest from the top.
+ * how far system regions reach into a side strip from its top and from its bottom end
+ * (e.g. the camera, which sits at either end depending on the rotation), and the center
+ * y of the region reaching furthest from the top
  */
 const getStripOcclusion = (
   regions: ReservedRegion[],
   stripLeft: number,
   stripRight: number,
   windowHeight: number,
-) => {
-  return regions.reduce(
+) =>
+  regions.reduce(
     (occlusion, region) => {
-      const regionRight = region.x + region.width;
-      const overlapsStrip = region.x < stripRight && regionRight > stripLeft;
+      const overlapsStrip =
+        region.x < stripRight && region.x + region.width > stripLeft;
       if (!overlapsStrip) {
         return occlusion;
       }
@@ -83,11 +84,10 @@ const getStripOcclusion = (
     },
     { top: 0, topCenter: 0, bottom: 0 },
   );
-};
 
 /**
- * How far the clock and battery clusters of a status bar on the top edge reach in from
- * each side. `undefined` without reserved regions there.
+ * how far the clock and battery clusters of a status bar on the top edge reach in from
+ * each side. `undefined` without reserved regions there
  */
 const getStatusBarClusters = (
   regions: ReservedRegion[],
@@ -95,11 +95,12 @@ const getStatusBarClusters = (
   topInset: number,
 ) => {
   const midX = windowWidth / 2;
-  const clusters = regions.filter(region => {
-    const isInTopInset = region.y + region.height <= topInset;
-    const isOnOneSide = region.x + region.width <= midX || region.x >= midX;
-    return region.y < topInset && isInTopInset && isOnOneSide;
-  });
+  const clusters = regions.filter(
+    region =>
+      region.y < topInset &&
+      region.y + region.height <= topInset &&
+      (region.x + region.width <= midX || region.x >= midX),
+  );
   if (!clusters.length) {
     return undefined;
   }
@@ -117,10 +118,8 @@ const getStatusBarClusters = (
   );
 };
 
-/** iOS phone idiom: iPad keeps the plain header and is never treated as iPhone Duo. */
-const isIPhone = () => {
-  return Platform.OS === 'ios' && Platform.constants.interfaceIdiom === 'phone';
-};
+const isIPhone = () =>
+  Platform.OS === 'ios' && Platform.constants.interfaceIdiom === 'phone';
 
 /**
  * Header height and the room it keeps above the bar row for the status bar. On iPhone the
@@ -142,7 +141,7 @@ const getHeaderLayout = (topInset: number) => {
 
 /**
  * Header whose bar row is centered on a window y, at least iPhoneMinHeight tall and
- * reaching 8pt below a side bar control centered there.
+ * reaching 8pt below a side bar control centered there
  */
 const getCenteredHeaderLayout = (centerY: number) => {
   const headerHeight = Math.max(
@@ -222,7 +221,8 @@ const useScreenLayout = (): ScreenLayout => {
   if (sideInset >= DuoMetrics.controlSize + Spacing.M) {
     const edge = insets.right >= insets.left ? 'right' : 'left';
     const stripLeft = edge === 'right' ? width - sideInset : 0;
-    // clear the camera and status bar cluster; region frames include the system margin
+    // keep controls clear of the camera and of the status bar cluster, which grows for
+    // calls and Live Activities. Region frames already include the system's margin
     const occlusion = getStripOcclusion(
       reservedRegions,
       stripLeft,
@@ -242,7 +242,8 @@ const useScreenLayout = (): ScreenLayout => {
       } else if (height >= DuoMetrics.innerMinHeight) {
         top = DuoMetrics.firstItemTopLandscape;
       } else {
-        // outer landscape: title row centers on a camera at the top end, else on back
+        // outer display in landscape: no status bar in the strip, the title row centers
+        // on the camera when it sits at the top end, otherwise on the back button
         top = DuoMetrics.edgeInset;
         const cameraAtTop = occlusion.top > top;
         const backCenterY = top + DuoMetrics.controlSize / 2;
@@ -284,7 +285,7 @@ const useScreenLayout = (): ScreenLayout => {
 
 /**
  * Header row options for react-navigation: its height, the room for the status bar, and
- * on iPhone Duo inner portrait the buttons kept clear of the clock and battery clusters.
+ * on iPhone Duo inner portrait the buttons kept clear of the clock and battery clusters
  */
 const getHeaderRowOptions = ({
   headerHeight,
@@ -304,7 +305,9 @@ const getHeaderRowOptions = ({
   };
 };
 
-/** Side margin @react-navigation/elements Header adds to its content row. */
+/**
+ * Side margin @react-navigation/elements Header adds to its content row
+ */
 const getHeaderMargin = (width: number) => {
   if (Platform.OS === 'ios' && width >= HeaderMetrics.largeWidth) {
     return HeaderMetrics.largeMargin;
@@ -318,9 +321,11 @@ const InnerEdgeStyles: Record<SideBarEdge, ViewStyle> = {
 };
 
 /**
- * Absolute style floating a header item into the side bar, 12pt from the strip's inner
- * edge, relative to the `container` rendering it; `slot` 0 is back, 1 the toolkit below.
+ * Absolute style that floats a header item into the side bar, relative to the header
+ * container (left or right) rendering it, 12pt from the strip's inner edge.
  * `undefined` while there is no side bar.
+ * @param container header container rendering the item
+ * @param slot position in the side bar, 0 for back, 1 for the toolkit below it
  */
 const useSideBarItemStyle = (
   container: 'left' | 'right',
@@ -333,8 +338,10 @@ const useSideBarItemStyle = (
 
   const margin = getHeaderMargin(width);
   const columnLeft = sideBar.edge === 'left' ? 0 : width - sideBar.width;
-  const slotOffset = slot * (DuoMetrics.controlSize + Spacing.M);
-  const top = sideBar.top - headerStatusBarHeight + slotOffset;
+  const top =
+    sideBar.top -
+    headerStatusBarHeight +
+    slot * (DuoMetrics.controlSize + Spacing.M);
   const innerEdgeStyle = InnerEdgeStyles[sideBar.edge];
 
   if (container === 'left') {
@@ -357,7 +364,6 @@ const useSideBarItemStyle = (
   };
 };
 
-/** Column count of the content grid: 24 on content wider than 600pt, otherwise 12. */
 const useGridSystem = () => {
   const { contentWidth } = useScreenLayout();
   const numberOfColumns = contentWidth > 600 ? 24 : 12;

package/Loader/DotLoader.tsx

@@ -6,10 +6,6 @@ import { ApplicationContext } from '../Context';
 import { hexToRGBA } from './utils';
 import { LoaderProps } from './types';
 
-/**
- * Three-dot Lottie loader recolored to `color` (theme primary by default).
- * Recoloring mutates the shared animation JSON, so `Loader` remounts on change.
- */
 const DotLoader: FC<LoaderProps> = ({ color, style }) => {
   const { theme } = useContext(ApplicationContext);
 

package/Loader/Loader.tsx

@@ -3,10 +3,6 @@ import {LoaderProps} from './types';
 import DotLoader from './DotLoader';
 import Spinner from './Spinner';
 
-/**
- * Dot (default) or spinner loader. Keyed by `color` so a color change remounts
- * the Lottie view with the recolored source.
- */
 const Loader: FC<LoaderProps> = ({type = 'dot', ...props}) => {
   if (type === 'spinner') {
     return <Spinner {...props} key={props.color} />;

package/Loader/ProgressBar.tsx

@@ -9,7 +9,6 @@ import styles from './styles';
 import { ProgressBarProps } from './types';
 import { ApplicationContext } from '../Context';
 
-/** Full-width bar that animates its fill to `percent`, clamped to 0–100. */
 const ProgressBar: FC<ProgressBarProps> = ({ percent = 0, style }) => {
   const { theme } = useContext(ApplicationContext);
   const animation = useSharedValue(0);

package/Loader/Spinner.tsx

@@ -6,10 +6,6 @@ import { hexToRGBA } from './utils';
 import { ApplicationContext } from '../Context';
 import { LoaderProps } from './types';
 
-/**
- * Lottie spinner recolored to `color` (theme primary by default).
- * Recoloring mutates the shared animation JSON, so `Loader` remounts on change.
- */
 const Spinner: FC<LoaderProps> = ({ color, style }) => {
   const { theme } = useContext(ApplicationContext);
 

package/Loader/utils.ts

@@ -1,7 +1,3 @@
-/**
- * Converts `#rgb`/`#rrggbb` (the `#` is optional) to Lottie's `[r, g, b]` in
- * 0–1, rounded to 3 decimals. Throws on an invalid hex.
- */
 export const hexToRGBA = (hex: string) => {
   const normalizedHex = hex.startsWith('#') ? hex.slice(1) : hex;
 
@@ -9,13 +5,13 @@ export const hexToRGBA = (hex: string) => {
     throw new Error('Invalid HEX color.');
   }
 
-  let expandedHex = normalizedHex;
-  if (normalizedHex.length === 3) {
-    expandedHex = normalizedHex
-      .split('')
-      .map(val => val + val)
-      .join('');
-  }
+  const expandedHex =
+    normalizedHex.length === 3
+      ? normalizedHex
+          .split('')
+          .map(val => val + val)
+          .join('')
+      : normalizedHex;
 
   const hexMatch = expandedHex.match(/.{2}/g);
 

package/Pagination/Dot.tsx

@@ -4,10 +4,6 @@ import styles from './styles';
 import { DotProps } from './types';
 import { ApplicationContext } from '../Context';
 
-/**
- * One pagination dot: a wide bar in the caller's color when active, otherwise
- * a small dot in the theme pressed color.
- */
 const Dot: FC<DotProps> = ({ active, style }) => {
   const { theme } = useContext(ApplicationContext);
   const pressedColor = theme.colors.background.pressed;

package/Pagination/PaginationDot.tsx

@@ -6,7 +6,6 @@ import styles from './styles';
 import { Spacing } from '../Consts';
 import { ApplicationContext, MiniAppContext } from '../Context';
 
-/** Row of primary-color dots with the `activeIndex` dot widened. */
 const PaginationDot: FC<ChildPaginationProps> = ({
   dataLength = 2,
   activeIndex = 0,

package/Pagination/PaginationNumber.tsx

@@ -6,7 +6,6 @@ import { Text } from '../Text';
 import { Colors } from '../Consts';
 import { MiniAppContext } from '../Context';
 
-/** `n/total` counter on a translucent dark pill. */
 const PaginationNumber: FC<ChildPaginationProps> = ({
   activeIndex = 0,
   dataLength = 2,
@@ -15,16 +14,15 @@ const PaginationNumber: FC<ChildPaginationProps> = ({
   const context = useContext<any>(MiniAppContext);
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
-  const pageLabel = `${activeIndex + 1}/${dataLength}`;
 
   return (
     <View
       style={[style, styles.row, showBaseLineDebug && styles.debugBaseLine]}
     >
       <View style={styles.paginationNumberContainer}>
-        <Text color={Colors.black_01} typography={'label_default_medium'}>
-          {pageLabel}
-        </Text>
+        <Text color={Colors.black_01} typography={'label_default_medium'}>{`${
+          activeIndex + 1
+        }/${dataLength}`}</Text>
       </View>
     </View>
   );

package/Pagination/PaginationScroll.tsx

@@ -13,11 +13,6 @@ import { ApplicationContext, MiniAppContext } from '../Context';
 
 const INDICATOR_WIDTH = 24;
 const INDICATOR_CONTAINER_WIDTH = 72;
-
-/**
- * Horizontal scroll view with a small indicator that tracks the scroll offset.
- * The indicator shows only when the content is wider than the view.
- */
 const PaginationScroll: FC<ScrollIndicatorProps> = ({
   style,
   children,

package/Pagination/PaginationWhiteDot.tsx

@@ -6,7 +6,6 @@ import Dot from './Dot';
 import { Colors, Spacing } from '../Consts';
 import { MiniAppContext } from '../Context';
 
-/** Pagination dots on a translucent dark pill, for use over images. */
 const PaginationWhiteDot: FC<ChildPaginationProps> = ({
   dataLength = 2,
   activeIndex = 0,

package/Pagination/index.tsx

@@ -5,10 +5,6 @@ import PaginationDot from './PaginationDot';
 import PaginationNumber from './PaginationNumber';
 import PaginationScroll from './PaginationScroll';
 
-/**
- * Page indicator: `type` picks plain dots, dots on a dark pill or an `n/total`
- * counter. `PaginationScroll` is the separate scroll-indicator variant.
- */
 const Pagination: FC<PaginationProps> = props => {
   const {type} = props;
 

package/Pagination/types.ts

@@ -5,9 +5,9 @@ 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.
+   * - 'black_white': Represents a pagination that have black background.
    * - 'number': Represents a style where pages are represented by numbers.
-   * - 'scroll': Rendered as 'default'; use `PaginationScroll` instead.
+   * - 'scroll': Represents a scrollable style.
    */
   type?: 'default' | 'black_white' | 'number' | 'scroll';
 

package/Popup/PopupNotify.tsx

@@ -11,13 +11,6 @@ import { useModalLayout } from '../Application/modalLayout';
 import { ModalIconButton } from '../Application/ModalIconButton';
 import { splitHighlightText } from './utils';
 
-const MAX_ROW_TITLE_LENGTH = 12;
-
-/**
- * Notify popup body: optional image, title, description, error code and one or
- * two actions. Actions close via `onRequestClose` if given, else pop the modal
- * and then run the callback.
- */
 const PopupNotify: React.FC<PopupNotifyProps> = ({
   image,
   title = 'Title',
@@ -50,6 +43,10 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
     descriptionStyle = { maxHeight: scaledMaxHeight };
   }
 
+  /**
+   * on action popup
+   * @param callback
+   */
   const onAction = (callback?: () => void) => {
     if (typeof onRequestClose === 'function') {
       onRequestClose?.(callback);
@@ -59,6 +56,9 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
     }
   };
 
+  /**
+   *  build main action of popup
+   */
   const buildAction = () => {
     const renderRow = () => {
       return (
@@ -126,13 +126,10 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
     };
 
     if (buttonDirection === 'auto') {
-      const secondaryTitle = secondary?.title;
-      if (!secondaryTitle) {
-        return renderRow();
-      }
-      const isLongSecondary = secondaryTitle.length > MAX_ROW_TITLE_LENGTH;
-      const isLongPrimary = primary.title.length > MAX_ROW_TITLE_LENGTH;
-      if (isLongSecondary || isLongPrimary) {
+      if (
+        secondary?.title &&
+        (secondary.title.length > 12 || primary.title.length > 12)
+      ) {
         return renderColumn();
       }
       return renderRow();
@@ -143,7 +140,9 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
     return renderColumn();
   };
 
-  /** Highlighted keywords use weight 600 but keep the body size and line height. */
+  /**
+   * build description text, highlighted keywords keep size/lineHeight and use weight 600
+   */
   const renderDescription = (text: string) => {
     const segments = splitHighlightText(text, highlightText);
     if (!segments) {
@@ -161,6 +160,9 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
     });
   };
 
+  /**
+   * build close action
+   */
   const buildCloseIcon = () => {
     if (typeof onIconClose !== 'function') {
       return null;
@@ -178,44 +180,48 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
     );
   };
 
-  const hasCloseIcon = typeof onIconClose === 'function';
-  // keeps the title clear of the close button on a text only popup
-  const titleStyle = !image && hasCloseIcon && styles.titleClearClose;
-
-  let descriptionContent: React.ReactNode = description;
-  if (typeof description === 'string') {
-    descriptionContent = (
-      <Text
-        accessibilityLabel={'description_popup_notify'}
-        typography={'body_default_regular'}
-        onTextLayout={({ nativeEvent: { lines } }) => {
-          const enableScroll = lines.length > 8.5;
-          if (enableScroll !== scrollContent) {
-            setScrollContent(enableScroll);
-          }
-        }}
-      >
-        {renderDescription(description)}
-      </Text>
-    );
-  }
-
   const body = (
     <>
       {!!image && (
-        <Image source={{ uri: image }} style={styles.image} />
+        <Image
+          source={{ uri: image }}
+          style={[
+            styles.image,
+            { borderTopLeftRadius: radius, borderTopRightRadius: radius },
+          ]}
+        />
       )}
       <View style={[styles.content, isFoldable && styles.shrink]}>
         <Text
           typography={'header_default_bold'}
-          numberOfLines={2}
+          numberOfLines={3}
           accessibilityLabel={'title_popup_notify'}
-          style={titleStyle}
+          // keeps the title clear of the close button on a text only popup
+          style={
+            !image &&
+            typeof onIconClose === 'function' &&
+            styles.titleClearClose
+          }
         >
           {title}
         </Text>
         <Description style={[styles.description, descriptionStyle]}>
-          {descriptionContent}
+          {typeof description === 'string' ? (
+            <Text
+              accessibilityLabel={'description_popup_notify'}
+              typography={'body_default_regular'}
+              onTextLayout={({ nativeEvent: { lines } }) => {
+                const enableScroll = lines.length > 8.5;
+                if (enableScroll !== scrollContent) {
+                  setScrollContent(enableScroll);
+                }
+              }}
+            >
+              {renderDescription(description)}
+            </Text>
+          ) : (
+            description
+          )}
         </Description>
         {!!error && (
           <View style={styles.information}>
@@ -244,7 +250,6 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
           width: popupWidth,
           maxHeight,
         },
-        styles.card,
         showBaseLineDebug && styles.debugBaseLine,
       ]}
     >
@@ -257,10 +262,9 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
 
 const styles = StyleSheet.create({
   debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
-  // clips the image and content to the card radius
-  card: { overflow: 'hidden' },
   image: {
     aspectRatio: 1.7777,
+    overflow: 'hidden',
   },
   shrink: { flexShrink: 1 },
   content: { padding: Spacing.XL },

package/Popup/PopupPromotion.tsx

@@ -12,10 +12,6 @@ const ICON_CLOSE_SIZE = 20;
 // close button row under the image: marginTop + vertical padding + icon
 const CLOSE_ROW_HEIGHT = Spacing.S * 3 + ICON_CLOSE_SIZE;
 
-/**
- * Promotion popup body: a tappable portrait image with a close button under it.
- * Both close the popup first, then call `onActionClick` / `onIconClose`.
- */
 const PopupPromotion: React.FC<PopupPromotionProps> = ({
   image,
   onIconClose,
@@ -37,6 +33,10 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
+  /**
+   * on action popup
+   * @param callback
+   */
   const onAction = (callback?: () => void) => {
     if (typeof onRequestClose === 'function') {
       onRequestClose?.(callback);
@@ -46,6 +46,9 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
     }
   };
 
+  /**
+   * build close action
+   */
   const buildCloseIcon = () => {
     return (
       <View style={styles.iconCloseContainer}>

package/Popup/types.ts

@@ -56,7 +56,7 @@ export type PopupNotifyProps = {
   onIconClose?: () => void;
 
   /**
-   * `onRequestClose`: Optional. Closes the modal, then runs `callback`. ModalScreen injects it; without it the popup uses `navigator.pop()`.
+   * onRequestClose on request close for modal
    */
   onRequestClose?: (callback?: () => void) => void;
 };
@@ -73,17 +73,17 @@ export type PopupPromotionProps = {
   image: string;
 
   /**
-   * `onIconClose`: Optional. A callback function that is called after the popup closes from the close icon.
+   * `onClose`: Optional. A callback function that is called when the PopupPromotion component is closed.
    */
   onIconClose?: () => void;
 
   /**
-   * `onActionClick`: Optional. A callback function that is called after the popup closes from an image tap.
+   * `onActionClick`: Optional. A callback function that is called when the PopupPromotion component is closed.
    */
   onActionClick?: () => void;
 
   /**
-   * `onRequestClose`: Optional. Closes the modal, then runs `callback`. ModalScreen injects it; without it the popup uses `navigator.pop()`.
+   * onRequestClose on request close for modal
    */
   onRequestClose?: (callback?: () => void) => void;
 };

package/Popup/utils.ts

@@ -1,9 +1,5 @@
 type HighlightSegment = { text: string; highlight: boolean };
 
-/**
- * True for cased-script letters, digits and `_`; caseless scripts (CJK, Thai)
- * count as word breaks.
- */
 const isWordChar = (char?: string) => {
   if (!char) {
     return false;

package/Radio/index.tsx

@@ -11,10 +11,6 @@ import {
   MiniAppContext,
 } from '../Context';
 
-/**
- * Radio button, selected when `value === groupValue`. `onChange` is called on
- * press without arguments; the parent updates `groupValue`.
- */
 const Radio: FC<RadioProps> = ({
   value,
   groupValue,