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

package/Input/common.tsx

@@ -0,0 +1,257 @@
+import React, { FC, ReactNode, useContext } from 'react';
+import {
+  GestureResponderEvent,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from 'react-native';
+import { ApplicationContext } from '../Context';
+import { Theme } from '../Application/types';
+import { Styles } from '../Consts';
+import { Icon } from '../Icon';
+import { useScaleSize, Text } from '../Text';
+import styles from './styles';
+import { Loader } from '../Loader';
+import IconSources from '../Assets/icon.json';
+
+type FloatingViewProps = {
+  floatingValue?: string;
+  floatingIconColor?: string;
+  componentId?: string;
+  disabled?: boolean;
+  floatingIcon?: string;
+  required?: boolean;
+  style?: ViewStyle;
+  onPress?: (e: GestureResponderEvent) => void;
+};
+
+type TrailingProps = {
+  loading?: boolean;
+  color?: string;
+  icon?: string;
+  componentId?: string;
+  onPressIcon?: () => void;
+};
+
+export const MAX_LENGTH = 300;
+
+/** Border color by state; priority is disabled > error > focused > default. */
+export const getBorderColor = (
+  theme: Theme,
+  focused: boolean,
+  errorMessage?: string,
+  disabled?: boolean,
+) => {
+  let borderColor = theme.colors.border.default;
+
+  if (focused) {
+    borderColor = theme.colors.primary;
+  }
+
+  if (errorMessage) {
+    borderColor = theme.colors.error.primary;
+  }
+
+  if (disabled) {
+    borderColor = theme.colors.border.disable;
+  }
+
+  return { borderColor };
+};
+
+/**
+ * Container style for `size`; multiline uses `height` as minHeight so the
+ * field can grow with its content.
+ */
+export const getSizeStyle = (
+  size?: 'small' | 'large',
+  multiline: boolean = false,
+  height?: number,
+) => {
+  let scaleStyle: ViewStyle = {};
+  if (height) {
+    scaleStyle = { height };
+  }
+
+  if (multiline) {
+    return [
+      styles.multilineContainer,
+      {
+        minHeight: height,
+      },
+    ];
+  }
+
+  if (size === 'small') {
+    return [styles.smallContainer, scaleStyle];
+  }
+  return [styles.container, scaleStyle];
+};
+
+/**
+ * Error or hint row under an input (error wins); with neither, `errorSpacing`
+ * keeps an empty row so the layout doesn't jump when an error appears.
+ */
+export const ErrorView: FC<{
+  errorMessage?: string;
+  errorSpacing?: boolean;
+  hintText?: string;
+  componentId?: string;
+}> = ({ errorMessage, errorSpacing, hintText, componentId }) => {
+  const { theme } = useContext(ApplicationContext);
+  const errorColor = theme.colors.error.primary;
+  const hintColor = theme.colors.text.hint;
+  const hintTextDefault = hintText ?? 'Không thể chỉnh sửa';
+  const scaledIconSize = useScaleSize(16);
+
+  if (errorMessage || hintText) {
+    const messageColor = errorMessage ? errorColor : hintColor;
+    const messageType = errorMessage ? 'error' : 'hint';
+    return (
+      <View style={styles.errorView}>
+        <View style={styles.errorIcon}>
+          <Icon color={messageColor} source="ic_error" size={scaledIconSize} />
+        </View>
+        <Text
+          accessibilityLabel={`${componentId}|${messageType}-text`}
+          style={Styles.flex}
+          color={messageColor}
+          typography={'description_default_regular'}
+        >
+          {errorMessage ?? hintTextDefault}
+        </Text>
+      </View>
+    );
+  }
+  if (errorSpacing) {
+    return <View style={[styles.errorView, styles.errorSpacing]} />;
+  }
+  return <View />;
+};
+
+/**
+ * Floating label on the input's top border with a required `*` and an
+ * optional pressable icon; renders nothing without `floatingValue`.
+ */
+export const FloatingView: FC<FloatingViewProps> = ({
+  floatingValue,
+  floatingIconColor,
+  disabled,
+  floatingIcon,
+  required,
+  style,
+  onPress,
+  componentId,
+}) => {
+  const { theme } = useContext(ApplicationContext);
+  const scaledTop = useScaleSize(10);
+  if (floatingValue) {
+    let floatingTextColor = theme.colors.text.hint;
+    let floatingIconTintColor = floatingIconColor;
+    if (disabled) {
+      floatingTextColor = theme.colors.text.disable;
+      floatingIconTintColor = theme.colors.text.disable;
+    }
+
+    return (
+      <View
+        style={[
+          styles.floatingView,
+          styles.floatingViewLayer,
+          {
+            backgroundColor: theme.colors.background.surface,
+            top: -scaledTop,
+          },
+          style,
+        ]}
+      >
+        <Text
+          color={floatingTextColor}
+          typography={'label_s_medium'}
+          accessibilityLabel={`${componentId}|floating-text`}
+        >
+          {floatingValue}
+          {required && (
+            <Text
+              typography={'label_s_medium'}
+              color={theme.colors.error.primary}
+            >
+              *
+            </Text>
+          )}
+        </Text>
+        {!!floatingIcon && (
+          <TouchableOpacity
+            activeOpacity={onPress ? 0.6 : 1}
+            onPress={onPress}
+            accessibilityLabel={`${componentId}|floating-icon-touch`}
+          >
+            <Icon
+              color={floatingIconTintColor}
+              source={floatingIcon}
+              size={16}
+              style={styles.floatingIcon}
+              accessibilityLabel={`${componentId}|floating-icon`}
+            />
+          </TouchableOpacity>
+        )}
+      </View>
+    );
+  }
+  return null;
+};
+
+/**
+ * Trailing slot: spinner while `loading`, an icon when `icon` is a known icon
+ * name or URL, otherwise `icon` as a text action (first 15 chars).
+ */
+export const RenderTrailing: FC<TrailingProps> = ({
+  loading,
+  color,
+  icon,
+  onPressIcon,
+  componentId,
+}) => {
+  const { theme } = useContext(ApplicationContext);
+  if (loading) {
+    return <Loader type={'spinner'} color={color} style={styles.icon} />;
+  }
+
+  if (icon) {
+    const isIconName = !!(IconSources as any)?.[icon]?.uri;
+    const isIcon = isIconName || icon.includes('http');
+    const renderIconTouchable = (content: ReactNode) => {
+      return (
+        <TouchableOpacity
+          accessibilityLabel={`${componentId}|trailing-touch`}
+          onPress={onPressIcon}
+          style={styles.icon}
+        >
+          {content}
+        </TouchableOpacity>
+      );
+    };
+
+    if (isIcon) {
+      return renderIconTouchable(
+        <Icon
+          color={color}
+          source={icon as string}
+          size={24}
+          accessibilityLabel={`${componentId}|trailing-icon`}
+        />,
+      );
+    }
+    return renderIconTouchable(
+      <Text
+        typography="action_xs_bold"
+        color={color ?? theme.colors.primary}
+        numberOfLines={1}
+        accessibilityLabel={`${componentId}|trailing-text`}
+      >
+        {icon!.substring(0, 15)}
+      </Text>,
+    );
+  }
+  return null;
+};

package/Input/index.tsx

@@ -194,6 +194,12 @@ export interface InputSearchProps extends TextInputProps {
    */
   typingData?: string[];
 
+  /**
+   * Optional. `header` is the 32pt field with a 20pt search icon that sits in the
+   * navigation header. Defaults to `default`, the 36pt field for content.
+   */
+  size?: 'default' | 'header';
+
   /**
    * Optional. Called when the field is pressed while showing `typingData`.
    */
@@ -367,4 +373,4 @@ export {
   InputPhoneNumber,
 };
 
-export {checkValidPhoneNumber};
+export { checkValidPhoneNumber };

package/Input/moneyUtils.ts

@@ -0,0 +1,23 @@
+export const moneyFormatter = new Intl.NumberFormat('vi-VN');
+
+/**
+ * Locates the single edited span between `old` and `text`: common prefix
+ * length (`start`), common suffix length (`suffix`) and removed + inserted
+ * char count (`size`).
+ */
+export const findEdit = (old: string, text: string) => {
+  let start = 0;
+  while (start < text.length && old[start] === text[start]) {
+    start += 1;
+  }
+  const maxSuffix = Math.min(text.length, old.length) - start;
+  let suffix = 0;
+  while (suffix < maxSuffix) {
+    if (old[old.length - 1 - suffix] !== text[text.length - 1 - suffix]) {
+      break;
+    }
+    suffix += 1;
+  }
+  const size = old.length + text.length - 2 * (start + suffix);
+  return { old, start, suffix, size };
+};

package/Input/utils.ts

@@ -1,110 +1,4 @@
-import { type ViewStyle } from 'react-native';
-import Localize from '../Application/Localize';
-import { type Theme } from '../Application/types';
-import styles from './styles';
-
-const SMALL_HEIGHT = 48;
-const LARGE_HEIGHT = 56;
-const SMALL_LEADING_ICON_SIZE = 24;
-const LARGE_LEADING_ICON_SIZE = 32;
-const THOUSANDS_GROUP_SIZE = 3;
-const PHONE_DIGITS_WITHOUT_ZERO = 9;
-const MIN_PHONE_DIGITS = 10;
-const MAX_PHONE_DIGITS = 11;
-
-/** vi-VN number format (`.` thousands) for the InputMoney display value. */
-const moneyFormatter = new Intl.NumberFormat('vi-VN');
-
-/** Field height for `size` before font scaling; unset means large. */
-const getInputHeight = (size?: 'small' | 'large') => {
-  if (size === 'small') {
-    return SMALL_HEIGHT;
-  }
-  return LARGE_HEIGHT;
-};
-
-/** Leading icon size for `size`; unset means large. */
-const getLeadingIconSize = (size?: 'small' | 'large') => {
-  if (size === 'small') {
-    return SMALL_LEADING_ICON_SIZE;
-  }
-  return LARGE_LEADING_ICON_SIZE;
-};
-
-/** Border color by state; priority is disabled > error > focused > default. */
-const getBorderColor = (
-  theme: Theme,
-  isFocused: boolean,
-  errorMessage?: string,
-  isDisabled?: boolean,
-) => {
-  let borderColor = theme.colors.border.default;
-
-  if (isFocused) {
-    borderColor = theme.colors.primary;
-  }
-
-  if (errorMessage) {
-    borderColor = theme.colors.error.primary;
-  }
-
-  if (isDisabled) {
-    borderColor = theme.colors.border.disable;
-  }
-
-  return { borderColor };
-};
-
-/**
- * Container style for `size`; multiline uses `height` as minHeight so the
- * field can grow with its content.
- */
-const getSizeStyle = (
-  size?: 'small' | 'large',
-  isMultiline: boolean = false,
-  height?: number,
-) => {
-  let scaleStyle: ViewStyle = {};
-  if (height) {
-    scaleStyle = { height };
-  }
-
-  if (isMultiline) {
-    return [
-      styles.multilineContainer,
-      {
-        minHeight: height,
-      },
-    ];
-  }
-
-  if (size === 'small') {
-    return [styles.smallContainer, scaleStyle];
-  }
-  return [styles.container, scaleStyle];
-};
-
-/**
- * Locates the single edited span between `old` and `text`: common prefix
- * length (`start`), common suffix length (`suffix`) and removed + inserted
- * char count (`size`).
- */
-const findEdit = (old: string, text: string) => {
-  let start = 0;
-  while (start < text.length && old[start] === text[start]) {
-    start += 1;
-  }
-  const maxSuffix = Math.min(text.length, old.length) - start;
-  let suffix = 0;
-  while (suffix < maxSuffix) {
-    if (old[old.length - 1 - suffix] !== text[text.length - 1 - suffix]) {
-      break;
-    }
-    suffix += 1;
-  }
-  const size = old.length + text.length - 2 * (start + suffix);
-  return { old, start, suffix, size };
-};
+import { Localize } from '../Application';
 
 /**
  * Formats a number Vietnamese-style (`.` thousands, `,` decimals) with
@@ -124,7 +18,7 @@ const formatNumberToMoney = (number: number, currency = '') => {
   }
 
   const numberString = Math.abs(number).toString();
-  if (numberString.length < THOUSANDS_GROUP_SIZE) {
+  if (numberString.length < 3) {
     const sign = isNegative ? '-' : '';
     return `${sign}${numberString}${currency}`;
   }
@@ -138,7 +32,7 @@ const formatNumberToMoney = (number: number, currency = '') => {
     } else {
       array.push(numberString[i] as string);
     }
-    if (count === THOUSANDS_GROUP_SIZE && i >= 1) {
+    if (count === 3 && i >= 1) {
       array.push('.');
       count = 0;
     }
@@ -173,7 +67,6 @@ const formatMoneyToNumber = (money: string, currencyUnit: string) => {
   return Number(money);
 };
 
-/** Digits of `phone`, every other char stripped. */
 function formatPhoneNumber(phone: string): string {
   return phone.replace(/\D/g, '');
 }
@@ -186,32 +79,20 @@ function checkValidPhoneNumber(phone: string): {
   phoneFormatted: string;
   error?: string;
 } {
-  const hasLengthWithoutZero = phone.length === PHONE_DIGITS_WITHOUT_ZERO;
-  const isMissingLeadingZero = hasLengthWithoutZero && /^[1-9]/.test(phone);
+  const isMissingLeadingZero = phone.length === 9 && /^[1-9]/.test(phone);
   const phoneNumber = isMissingLeadingZero ? `0${phone}` : phone;
 
   const phoneFormatted = formatPhoneNumber(phoneNumber);
-  const digitCount = phoneFormatted.length;
   const localize = new Localize({ vi: {}, en: {} });
   let error: string | undefined;
 
-  if (digitCount === 0) {
+  if (phoneFormatted.length === 0) {
     error = localize.translate('enterPhoneNumber');
-  } else if (digitCount < MIN_PHONE_DIGITS || digitCount > MAX_PHONE_DIGITS) {
+  } else if (phoneFormatted.length < 10 || phoneFormatted.length > 11) {
     error = localize.translate('invalidPhoneNumber');
   }
 
   return { phoneFormatted: phoneFormatted, error };
 }
 
-export {
-  moneyFormatter,
-  getInputHeight,
-  getLeadingIconSize,
-  getBorderColor,
-  getSizeStyle,
-  findEdit,
-  formatMoneyToNumber,
-  formatNumberToMoney,
-  checkValidPhoneNumber,
-};
+export { formatMoneyToNumber, formatNumberToMoney, checkValidPhoneNumber };

package/Layout/FloatingButton.tsx

@@ -13,22 +13,12 @@ import Animated, {
 } from 'react-native-reanimated';
 import { scheduleOnRN } from 'react-native-worklets';
 import { ApplicationContext } from '../Context';
-import { Colors, Spacing } from '../Consts';
+import { Colors } from '../Consts';
 import { Icon } from '../Icon';
 import { useScaleSize, exportFontFamily } from '../Text';
 import { type AnimatedCompatValue } from '../Application/utils';
 import { useNormalizedSharedValue } from '../Application/hooks';
 
-const DEFAULT_BOTTOM = Spacing.M;
-const PILL_RADIUS = 100;
-const LABEL_FONT_SIZE = 16;
-const LABEL_LINE_HEIGHT = 22;
-const SMALL_SIZE = 36;
-const LARGE_SIZE = 48;
-const SMALL_ICON_SIZE = 12;
-const LARGE_ICON_SIZE = 24;
-const ANIMATION_DURATION = 100;
-
 export interface FloatingButtonProps {
   label?: string;
   onPress?: () => void;
@@ -54,64 +44,60 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
   iconColor = '',
   size = 'small',
   animatedValue,
-  bottom = DEFAULT_BOTTOM,
+  bottom = 12,
 }: FloatingButtonProps) => {
   const { theme } = useContext(ApplicationContext);
-  const hasScrollValue = animatedValue != null;
+  const enabled = animatedValue != null;
   const sharedValue = useNormalizedSharedValue(animatedValue);
-  const scaledFontSize = useScaleSize(LABEL_FONT_SIZE);
-  const scaledLineHeight = useScaleSize(LABEL_LINE_HEIGHT);
+  const scaledFontSize = useScaleSize(16);
+  const scaledLineHeight = useScaleSize(22);
   const labelFontFamily = exportFontFamily('bold');
   const maxWidth = useSharedValue(0);
-  const minWidth = size === 'small' ? SMALL_SIZE : LARGE_SIZE;
+  const minWidth = size === 'small' ? 36 : 48;
   const opacityAnimated = useSharedValue(0);
   const widthAnimated = useSharedValue<number | null>(null);
   const lastOffset = useSharedValue(0);
   const lastDirection = useSharedValue<string | null>(null);
-  const [isLabelShown, setIsLabelShown] = useState(true);
+  const [showText, setShowText] = useState(true);
 
   useEffect(() => {
     if (!label) return;
-    opacityAnimated.value = withTiming(1, { duration: ANIMATION_DURATION });
+    opacityAnimated.value = withTiming(1, { duration: 100 });
   }, [label, opacityAnimated]);
 
   useAnimatedReaction(
     () => sharedValue.value,
     value => {
       'worklet';
-      if (!label || !hasScrollValue) return;
+      if (!label || !enabled) return;
       if (value !== lastOffset.value && value > 0) {
         const direction = value > lastOffset.value ? 'down' : 'up';
         lastOffset.value = value;
         if (lastDirection.value !== direction) {
           lastDirection.value = direction;
           if (direction === 'down') {
-            opacityAnimated.value = withTiming(0, {
-              duration: ANIMATION_DURATION,
-            });
+            opacityAnimated.value = withTiming(0, { duration: 100 });
             widthAnimated.value = withTiming(
               minWidth,
-              { duration: ANIMATION_DURATION },
+              { duration: 100 },
               finished => {
-                if (finished) scheduleOnRN(setIsLabelShown, false);
+                if (finished) scheduleOnRN(setShowText, false);
               },
             );
           } else {
-            opacityAnimated.value = withTiming(1, {
-              duration: ANIMATION_DURATION,
-            });
+            opacityAnimated.value = withTiming(1, { duration: 100 });
             widthAnimated.value = withTiming(
               maxWidth.value,
-              { duration: ANIMATION_DURATION },
+              { duration: 100 },
               finished => {
-                if (finished) scheduleOnRN(setIsLabelShown, true);
+                if (finished) scheduleOnRN(setShowText, true);
               },
             );
           }
         }
       }
     },
-    [label, hasScrollValue, minWidth],
+    [label, enabled, minWidth],
   );
 
   const containerStyle = useAnimatedStyle(() => ({
@@ -160,10 +146,10 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
       <TouchableOpacity style={styles.content} onPress={onPress}>
         <Icon
           source={icon}
-          size={size === 'small' ? SMALL_ICON_SIZE : LARGE_ICON_SIZE}
+          size={size === 'small' ? 12 : 24}
           color={iconColor}
         />
-        {isLabelShown && !!label && (
+        {showText && !!label && (
           <Animated.Text
             allowFontScaling={false}
             style={[
@@ -192,19 +178,19 @@ const styles = StyleSheet.create({
     alignContent: 'center',
     alignItems: 'center',
     position: 'absolute',
-    borderRadius: PILL_RADIUS,
-    paddingHorizontal: Spacing.M,
+    borderRadius: 100,
+    paddingHorizontal: 12,
     flexWrap: 'wrap',
     alignSelf: 'flex-end',
   },
   label: {
-    marginLeft: Spacing.S,
+    marginLeft: 8,
   },
-  alignRight: { right: Spacing.M },
+  alignRight: { right: 12 },
   alignCenter: { alignSelf: 'center' },
   alignEnd: { alignSelf: 'flex-end' },
-  small: { height: SMALL_SIZE },
-  large: { height: LARGE_SIZE },
+  small: { height: 36 },
+  large: { height: 48 },
   content: {
     flexDirection: 'row',
     alignItems: 'center',

package/Layout/Screen.tsx

@@ -67,6 +67,7 @@ const Screen = forwardRef(
       headerBackground,
       gradientColor,
       trackingParams,
+      contentLayout,
     }: ScreenProps,
     ref: any,
   ) => {
@@ -144,6 +145,7 @@ const Screen = forwardRef(
       gradientColor,
       headerBackground,
       layoutOffset,
+      contentLayout,
     });
 
     // mutates the content node so callers keep its methods plus the header setters
@@ -223,6 +225,7 @@ const Screen = forwardRef(
           useShadowHeader={useShadowHeader}
           gradientColor={gradientColor}
           headerBackground={headerBackground}
+          contentLayout={contentLayout}
         />
       );
     };