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

package/Popup/PopupNotify.tsx

@@ -8,12 +8,18 @@ import { Image } from '../Image';
 import { Text, useScaleSize } from '../Text';
 import { PopupNotifyProps } from './types';
 import { scheduleOnRN } from 'react-native-worklets';
-import { getPopupRadius, usePopupMaxHeight, usePopupWidth } from './utils';
+import {
+  getPopupRadius,
+  splitHighlightText,
+  usePopupMaxHeight,
+  usePopupWidth,
+} from './utils';
 
 const PopupNotify: React.FC<PopupNotifyProps> = ({
   image,
   title = 'Title',
   description = 'Description',
+  highlightText,
   error,
   secondary,
   primary,
@@ -135,6 +141,25 @@ 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
    */
@@ -200,7 +225,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
                 }
               }}
             >
-              {description}
+              {renderDescription(description)}
             </Text>
           ) : (
             description

package/Popup/types.ts

@@ -20,6 +20,13 @@ 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

@@ -3,6 +3,8 @@ 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 };
+
 const usePopupWidth = () => {
   const insets = useSafeAreaInsets();
   const { width, height } = useWindowDimensions();
@@ -23,4 +25,47 @@ const usePopupMaxHeight = () => {
 
 const getPopupRadius = () => (isIPhoneDuo() ? Radius.XL : Radius.L);
 
-export { usePopupWidth, usePopupMaxHeight, getPopupRadius };
+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;
+};
+
+export { usePopupWidth, usePopupMaxHeight, getPopupRadius, splitHighlightText };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.168.1-beta.24",
+    "version": "0.168.1-beta.29",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},
@@ -8,21 +8,21 @@
         "@momo-kits/foundation"
     ],
     "dependencies": {
-        "react-native-fast-image": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-fast-image.git#v8.11.0",
         "@react-navigation/bottom-tabs": "7.4.2",
         "@react-navigation/core": "7.12.1",
         "@react-navigation/elements": "2.5.2",
         "@react-navigation/native": "7.1.14",
         "@react-navigation/routers": "7.4.1",
         "@react-navigation/stack": "7.4.2",
+        "@shopify/flash-list": "2.1.0",
+        "lottie-react-native": "7.2.4",
+        "react-native-fast-image": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-fast-image.git#v8.11.0",
         "react-native-gesture-handler": "2.27.1",
         "react-native-linear-gradient": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-linear-gradient#v3.0.0",
         "react-native-reanimated": "4.2.2",
-        "react-native-worklets": "0.6.1",
-        "react-native-safe-area-context": "5.5.2",
         "react-native-reserved-regions": "0.2.0",
-        "@shopify/flash-list": "2.1.0",
-        "lottie-react-native": "7.2.4"
+        "react-native-safe-area-context": "5.5.2",
+        "react-native-worklets": "0.6.1"
     },
     "peerDependencies": {
         "react-native": "*",
@@ -35,4 +35,4 @@
         "registry": "https://registry.npmjs.org/"
     },
     "license": "MoMo"
-}
+}