@momo-kits/foundation 0.168.1-beta.32 → 0.168.1-beta.34

package/Application/BottomSheet.tsx

@@ -17,7 +17,6 @@ import {
   Platform,
   Pressable,
   StyleSheet,
-  TouchableOpacity,
   useWindowDimensions,
   View,
 } from 'react-native';
@@ -26,7 +25,6 @@ import { ApplicationContext, MiniAppContext } from '../Context';
 import { BottomSheetParams } from './types';
 import { Colors, Radius, Spacing, Styles } from '../Consts';
 import { Text } from '../Text';
-import { Icon } from '../Icon';
 import { useHeaderHeight } from '@react-navigation/elements';
 import Animated, {
   Easing,
@@ -41,13 +39,11 @@ import { scheduleOnRN } from 'react-native-worklets';
 import layoutStyles from '../Layout/styles';
 import { isIPhoneDuo } from './device';
 import { useModalLayout } from './modalLayout';
+import { MODAL_ICON_BUTTON_SIZE, ModalIconButton } from './ModalIconButton';
 
 const INDICATOR_HEIGHT = 16;
 const HEADER_HEIGHT = 56;
 const DUO_ORIENTATIONS = ['portrait', 'landscape'];
-// foldable spec: icon button 32, icon 20
-const FOLDABLE_ICON_BUTTON_SIZE = 32;
-const FOLDABLE_ICON_SIZE = 20;
 
 const BottomSheet: React.FC<BottomSheetParams> = props => {
   const { theme, navigator } = useContext(ApplicationContext);
@@ -246,11 +242,6 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
    * render header
    */
   const renderHeader = useCallback(() => {
-    const iconButtonStyle = [
-      styles.iconButton,
-      isFoldable && styles.foldableIconButton,
-    ];
-    const iconSize = isFoldable ? FOLDABLE_ICON_SIZE : undefined;
     return (
       <View {...panResponder.panHandlers}>
         <View style={{ height: INDICATOR_HEIGHT }}>
@@ -266,16 +257,14 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
           ]}
         >
           {showBack ? (
-            <TouchableOpacity style={iconButtonStyle} onPress={onPressBack}>
-              <Icon source={iconBack} size={iconSize} />
-            </TouchableOpacity>
+            <ModalIconButton icon={iconBack} onPress={onPressBack} />
           ) : null}
 
           {options.header ? (
             <View style={Styles.flex}>{options.header}</View>
           ) : (
             <>
-              {!leftOptions ? <View style={iconButtonStyle} /> : null}
+              {!leftOptions ? <View style={styles.iconButtonSpace} /> : null}
               <Text
                 style={[Styles.flex, styles.title]}
                 numberOfLines={1}
@@ -285,15 +274,12 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
               </Text>
             </>
           )}
-          <TouchableOpacity style={iconButtonStyle} onPress={onPressClose}>
-            <Icon source="navigation_close" size={iconSize} />
-          </TouchableOpacity>
+          <ModalIconButton icon="navigation_close" onPress={onPressClose} />
         </View>
       </View>
     );
   }, [
     iconBack,
-    isFoldable,
     leftOptions,
     onPressBack,
     onPressClose,
@@ -445,18 +431,13 @@ const styles = StyleSheet.create({
     height: HEADER_HEIGHT,
     flexDirection: 'row',
     alignItems: 'center',
+    paddingHorizontal: Spacing.M,
+    gap: Spacing.S,
   },
   title: { textAlign: 'center' },
-  iconButton: {
-    width: 24,
-    height: 24,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginHorizontal: Spacing.M,
-  },
-  foldableIconButton: {
-    width: FOLDABLE_ICON_BUTTON_SIZE,
-    height: FOLDABLE_ICON_BUTTON_SIZE,
+  iconButtonSpace: {
+    width: MODAL_ICON_BUTTON_SIZE,
+    height: MODAL_ICON_BUTTON_SIZE,
   },
   shrink: { flexShrink: 1 },
   debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },

package/Application/ModalIconButton.tsx

@@ -0,0 +1,66 @@
+import React, { useContext } from 'react';
+import {
+  StyleProp,
+  StyleSheet,
+  TouchableOpacity,
+  ViewStyle,
+} from 'react-native';
+import { ApplicationContext } from '../Context';
+import { Radius, Spacing } from '../Consts';
+import { Icon } from '../Icon';
+
+// modal spec: icon button 32, icon 20, shared with the Compose / SwiftUI kits
+const MODAL_ICON_BUTTON_SIZE = Spacing.XXL;
+const MODAL_ICON_SIZE = 20;
+
+type ModalIconButtonProps = {
+  icon: string;
+  onPress: () => void;
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+};
+
+/**
+ * Close / back button of popups and bottom sheet headers
+ */
+const ModalIconButton: React.FC<ModalIconButtonProps> = ({
+  icon,
+  onPress,
+  accessibilityLabel,
+  style,
+}) => {
+  const { theme } = useContext(ApplicationContext);
+  return (
+    <TouchableOpacity
+      accessibilityLabel={accessibilityLabel}
+      onPress={onPress}
+      style={[
+        styles.button,
+        {
+          backgroundColor: theme.colors.background.surface,
+          borderColor: theme.colors.border.default,
+        },
+        style,
+      ]}
+    >
+      <Icon
+        source={icon}
+        color={theme.colors.text.default}
+        size={MODAL_ICON_SIZE}
+      />
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    width: MODAL_ICON_BUTTON_SIZE,
+    height: MODAL_ICON_BUTTON_SIZE,
+    borderRadius: Radius.L,
+    borderWidth: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export { ModalIconButton, MODAL_ICON_BUTTON_SIZE };

package/Badge/BadgeRibbon.tsx

@@ -46,7 +46,7 @@ const BadgeRibbon: FC<BadgeRibbonProps> = ({
     >
       <View
         collapsable={false}
-        style={{ transform: textTransform, marginVertical: -2 }}
+        style={[styles.ribbonLabelWrapper, { transform: textTransform }]}
       >
         <Text
           style={styles.ribbonLabel}
@@ -60,7 +60,7 @@ const BadgeRibbon: FC<BadgeRibbonProps> = ({
   );
 
   const renderSkewContent = () => (
-    <View style={{ flexDirection: 'row', marginTop: skewMargin }}>
+    <View style={[styles.ribbonSkewRow, { marginTop: skewMargin }]}>
       <View
         collapsable={false}
         style={[
@@ -70,7 +70,7 @@ const BadgeRibbon: FC<BadgeRibbonProps> = ({
       >
         <View
           collapsable={false}
-          style={{ transform: textTransform, marginVertical: -2 }}
+          style={[styles.ribbonLabelWrapper, { transform: textTransform }]}
         >
           <Text
             style={styles.ribbonLabel}

package/Badge/styles.ts

@@ -118,6 +118,8 @@ export default StyleSheet.create({
   ribbonLabel: {
     color: Colors.black_01,
   },
+  ribbonLabelWrapper: {marginVertical: -2},
+  ribbonSkewRow: {flexDirection: 'row'},
   skew: {width: 8, height: 16},
   tail: {width: 5, height: 20},
   debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },

package/Popup/PopupNotify.tsx

@@ -1,23 +1,21 @@
 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 { useModalLayout } from '../Application/modalLayout';
-
-// foldable spec: icon button 32, icon 20
-const FOLDABLE_CLOSE_SIZE = 32;
-const FOLDABLE_CLOSE_ICON_SIZE = 20;
+import { ModalIconButton } from '../Application/ModalIconButton';
+import { splitHighlightText } from './utils';
 
 const PopupNotify: React.FC<PopupNotifyProps> = ({
   image,
   title = 'Title',
   description = 'Description',
+  highlightText,
   error,
   secondary,
   primary,
@@ -142,6 +140,26 @@ 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) => {
+      if (segment.highlight) {
+        return (
+          <Text key={index} typography={'header_s_semibold'}>
+            {segment.text}
+          </Text>
+        );
+      }
+      return segment.text;
+    });
+  };
+
   /**
    * build close action
    */
@@ -149,49 +167,16 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
     if (typeof onIconClose !== 'function') {
       return null;
     }
-    if (isFoldable) {
-      return (
-        <TouchableOpacity
-          accessibilityLabel={'ic_popup_close'}
-          style={styles.foldableClose}
-          onPress={() => {
-            closeAction.current = 'icon_close';
-            onAction(onIconClose);
-          }}
-        >
-          <Icon
-            source="navigation_close"
-            color={theme.colors.text.default}
-            size={FOLDABLE_CLOSE_ICON_SIZE}
-          />
-        </TouchableOpacity>
-      );
-    }
     return (
-      <TouchableOpacity
+      <ModalIconButton
+        icon="navigation_close"
         accessibilityLabel={'ic_popup_close'}
-        style={styles.iconCloseContainer}
+        style={styles.iconClose}
         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>
+      />
     );
   };
 
@@ -213,7 +198,6 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
           accessibilityLabel={'title_popup_notify'}
           // keeps the title clear of the close button on a text only popup
           style={
-            isFoldable &&
             !image &&
             typeof onIconClose === 'function' &&
             styles.titleClearClose
@@ -233,7 +217,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
                 }
               }}
             >
-              {description}
+              {renderDescription(description)}
             </Text>
           ) : (
             description
@@ -298,29 +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 },
-  foldableClose: {
+  iconClose: {
     position: 'absolute',
     top: Spacing.M,
     right: Spacing.M,
-    width: FOLDABLE_CLOSE_SIZE,
-    height: FOLDABLE_CLOSE_SIZE,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  iconClose: {
-    width: 20,
-    height: 20,
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: Radius.M,
-    borderWidth: 2,
   },
 });
 

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

@@ -0,0 +1,54 @@
+type HighlightSegment = { text: string; highlight: boolean };
+
+const isWordChar = (char?: string) => {
+  if (!char) {
+    return false;
+  }
+  const isLetter = char.toLowerCase() !== char.toUpperCase();
+  return isLetter || /[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 => {
+    if (typeof keyword !== 'string') {
+      return false;
+    }
+    return keyword.length > 0;
+  });
+  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 { splitHighlightText };

package/package.json

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