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

package/Application/ModalScreen.tsx

@@ -27,6 +27,12 @@ import { isIPhoneDuo } from './utils';
 import { useModalLayout } from './modalLayout';
 import { scheduleOnRN } from 'react-native-worklets';
 
+const DUO_ORIENTATIONS = ['portrait', 'landscape'];
+const ENTER_DURATION = 250;
+const EXIT_DURATION = 200;
+const INITIAL_SCALE = 0.8;
+const ENTER_EASING = Easing.bezier(0.2, 0.0, 0, 1.0);
+
 /**
  * Screen of the `Modal` route: a bottom sheet when pushed by
  * `showBottomSheet`, otherwise a centered popup.
@@ -72,7 +78,7 @@ const Modal: React.FC<ModalParams> = props => {
   }, [context, description, navigator?.maxApi, title]);
 
   const opacity = useRef(new Animated.Value(0)).current;
-  const scale = useRef(new Animated.Value(0.8)).current;
+  const scale = useRef(new Animated.Value(INITIAL_SCALE)).current;
   const scrimStyle = useMemo(
     () => ({
       opacity: opacity.interpolate({
@@ -98,13 +104,13 @@ const Modal: React.FC<ModalParams> = props => {
     Animated.parallel([
       Animated.timing(opacity, {
         toValue: 1,
-        duration: 250,
+        duration: ENTER_DURATION,
         useNativeDriver: true,
       }),
       Animated.timing(scale, {
         toValue: 1,
-        duration: 250,
-        easing: Easing.bezier(0.2, 0.0, 0, 1.0),
+        duration: ENTER_DURATION,
+        easing: ENTER_EASING,
         useNativeDriver: true,
       }),
     ]).start();
@@ -114,7 +120,7 @@ const Modal: React.FC<ModalParams> = props => {
     };
   }, [opacity, props.route.params, scale]);
 
-  const onDismiss = useCallback(
+  const handleDismiss = useCallback(
     (callback = () => {}, preventClose = false) => {
       if (preventClose) {
         return;
@@ -122,12 +128,12 @@ const Modal: React.FC<ModalParams> = props => {
       Animated.parallel([
         Animated.timing(opacity, {
           toValue: 0,
-          duration: 200,
+          duration: EXIT_DURATION,
           useNativeDriver: true,
         }),
         Animated.timing(scale, {
-          toValue: 0.8,
-          duration: 200,
+          toValue: INITIAL_SCALE,
+          duration: EXIT_DURATION,
           easing: Easing.linear,
           useNativeDriver: true,
         }),
@@ -143,18 +149,18 @@ const Modal: React.FC<ModalParams> = props => {
     const backHandler = BackHandler.addEventListener(
       'hardwareBackPress',
       () => {
-        onDismiss(undefined, barrierDismissible);
+        handleDismiss(undefined, barrierDismissible);
         return true;
       },
     );
     return () => backHandler.remove();
-  }, [barrierDismissible, onDismiss]);
+  }, [barrierDismissible, handleDismiss]);
 
   return (
     <Container
       transparent
       visible={true}
-      onRequestClose={onDismiss}
+      onRequestClose={handleDismiss}
       style={StyleSheet.absoluteFillObject}
       isModalKit={true}
       supportedOrientations={isDuo ? DUO_ORIENTATIONS : undefined}
@@ -165,7 +171,7 @@ const Modal: React.FC<ModalParams> = props => {
       >
         <Pressable
           style={StyleSheet.absoluteFillObject}
-          onPress={() => onDismiss(undefined, barrierDismissible)}
+          onPress={() => handleDismiss(undefined, barrierDismissible)}
         >
           <Animated.View style={[styles.overlayContent, scrimStyle]} />
         </Pressable>
@@ -188,15 +194,13 @@ const Modal: React.FC<ModalParams> = props => {
             modalStyle,
           ]}
         >
-          <Component {...params} onRequestClose={onDismiss} />
+          <Component {...params} onRequestClose={handleDismiss} />
         </Animated.View>
       </KeyboardAvoidingView>
     </Container>
   );
 };
 
-const DUO_ORIENTATIONS = ['portrait', 'landscape'];
-
 const styles = StyleSheet.create({
   overlayContent: {
     flex: 1,

package/Application/StackScreen.tsx

@@ -10,6 +10,10 @@ import { createScreenTracking } from './StackScreen.tracking';
 import { TooltipPortalHost, TooltipPortalProvider } from './TooltipPortal';
 import { useHeaderFrameOptions } from './headerLayout';
 
+const TRACKING_TIMEOUT = 5000;
+const ELEMENT_IDLE_TIMEOUT = 2000;
+const LOADING_IDLE_TIMEOUT = 2000;
+
 const runAfterInteractions = InteractionManager.runAfterInteractions;
 
 /**
@@ -80,7 +84,7 @@ const StackScreen: React.FC<any> = props => {
 
   useEffect(() => {
     let focusScreen: any;
-    let onFocusApp: any;
+    let focusAppListener: { remove?: () => void } | undefined;
     if (['Invalid', 'screen'].includes(screenName)) {
       navigator?.maxApi?.showPopup?.('notice', {
         title: 'Invalid screen name',
@@ -94,19 +98,19 @@ const StackScreen: React.FC<any> = props => {
     if (!bottomTab) {
       focusScreen = props.navigation.addListener('focus', () => {
         navigator?.maxApi?.getDataObserver?.('current_screen', (item: any) => {
-          onScreenNavigated(item?.screenName, screenName);
+          handleScreenNavigated(item?.screenName, screenName);
           navigator?.maxApi?.setDataObserver?.('current_screen', {
             screenName,
             startTime,
           });
         });
       });
-      onFocusApp = navigator?.maxApi?.listen?.('onFocusApp', () => {
+      focusAppListener = navigator?.maxApi?.listen?.('onFocusApp', () => {
         if (props.navigation.isFocused()) {
           navigator?.maxApi?.getDataObserver?.(
             'current_screen',
             (item: any) => {
-              onScreenNavigated(item?.screenName, screenName);
+              handleScreenNavigated(item?.screenName, screenName);
               navigator?.maxApi?.setDataObserver?.('current_screen', {
                 screenName,
                 startTime,
@@ -135,7 +139,7 @@ const StackScreen: React.FC<any> = props => {
     tracking.current.timeoutTracking = setTimeout(() => {
       onScreenLoad();
       onScreenInteraction();
-    }, 5000);
+    }, TRACKING_TIMEOUT);
 
     return () => {
       onScreenLoad();
@@ -146,13 +150,13 @@ const StackScreen: React.FC<any> = props => {
       // eslint-disable-next-line react-hooks/exhaustive-deps
       clearTimeout(tracking.current.timeoutLoading);
       focusScreen?.();
-      onFocusApp?.remove?.();
+      focusAppListener?.remove?.();
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   /** Reports a navigation to this screen: `back` if it was shown before. */
-  const onScreenNavigated = (pre: string, current: string) => {
+  const handleScreenNavigated = (pre: string, current: string) => {
     if (!isBackgroundToForeground) {
       const item: any = {
         preScreenName: pre,
@@ -243,7 +247,7 @@ const StackScreen: React.FC<any> = props => {
 
             onScreenLoad();
             onScreenInteraction();
-          }, 2000);
+          }, ELEMENT_IDLE_TIMEOUT);
         },
         onLoading: (loading: boolean) => {
           if (loading && tracking.current.timeStartLoading === 0) {
@@ -257,7 +261,7 @@ const StackScreen: React.FC<any> = props => {
           clearTimeout(tracking.current.timeoutLoading);
           tracking.current.timeoutLoading = setTimeout(() => {
             onScreenLoading();
-          }, 2000);
+          }, LOADING_IDLE_TIMEOUT);
         },
         onSetParams: (item: ScreenTrackingParams) => {
           tracking.current.params = item;

package/Application/modalLayout.ts

@@ -73,6 +73,7 @@ type ModalLayoutInput = {
   hinge?: ReservedRegion;
 };
 
+/** `value` limited to the `[min, max]` range. */
 const clamp = (value: number, min: number, max: number) => {
   return Math.min(Math.max(value, min), max);
 };

package/Context/index.ts

@@ -5,9 +5,11 @@ import { defaultContext } from '../Consts';
 const Context = createContext({});
 const ApplicationContext = createContext(defaultContext);
 
-// Shared by the host app via `Platform`; standalone falls back to a local one.
+/** Mini app context shared by the host via `Platform`; local if standalone. */
 const MiniAppContext = (Platform as any).MiniAppContext ?? Context;
+/** Screen context shared by the host via `Platform`; local if standalone. */
 const ScreenContext = (Platform as any).ScreenContext ?? Context;
+/** Component context shared by the host via `Platform`; local if standalone. */
 const ComponentContext = (Platform as any).ComponentContext ?? Context;
 const SkeletonContext = createContext({ loading: false });
 /**

package/Image/index.tsx

@@ -44,7 +44,7 @@ const Image: React.FC<ImageProps> = ({
   const component: any = useContext(ComponentContext);
   const context = useContext<any>(MiniAppContext);
   const skeleton = useContext(SkeletonContext);
-  const error = useRef(false);
+  const hasErrorRef = useRef(false);
   const [status, setStatus] = useState<Status>('success');
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
@@ -92,30 +92,30 @@ const Image: React.FC<ImageProps> = ({
         showBaseLineDebug && styles.debugBaseLine,
       ]}
       onProgress={event => {
-        error.current = false;
+        hasErrorRef.current = false;
         if (status !== 'loading' && loading) {
           setStatus('loading');
         }
         onProgress?.(event);
       }}
       onLoadStart={() => {
-        error.current = false;
+        hasErrorRef.current = false;
         onLoadStart?.();
       }}
       onLoad={event => {
-        error.current = false;
+        hasErrorRef.current = false;
         onLoad?.(event);
       }}
       onLoadEnd={() => {
         let current: Status = 'success';
-        if (error.current) {
+        if (hasErrorRef.current) {
           current = 'error';
         }
         setStatus(prevState => (prevState !== current ? current : prevState));
         onLoadEnd?.();
       }}
       onError={() => {
-        error.current = true;
+        hasErrorRef.current = true;
         onError?.();
       }}
     >

package/Input/ErrorView.tsx

@@ -0,0 +1,59 @@
+import React, { type FC, useContext } from 'react';
+import { View } from 'react-native';
+import { Styles } from '../Consts';
+import { ApplicationContext } from '../Context';
+import { Icon } from '../Icon';
+import { Text, useScaleSize } from '../Text';
+import styles from './styles';
+
+const ICON_SIZE = 16;
+
+type ErrorViewProps = {
+  errorMessage?: string;
+  errorSpacing?: boolean;
+  hintText?: string;
+  componentId?: string;
+};
+
+/**
+ * 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.
+ */
+const ErrorView: FC<ErrorViewProps> = ({
+  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(ICON_SIZE);
+
+  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 />;
+};
+
+export { ErrorView };

package/Input/FloatingView.tsx

@@ -0,0 +1,101 @@
+import React, { type FC, useContext } from 'react';
+import {
+  type GestureResponderEvent,
+  TouchableOpacity,
+  View,
+  type ViewStyle,
+} from 'react-native';
+import { ApplicationContext } from '../Context';
+import { Icon } from '../Icon';
+import { Text, useScaleSize } from '../Text';
+import { PRESSED_OPACITY } from './constants';
+import styles from './styles';
+
+const LABEL_OFFSET = 10;
+const ICON_SIZE = 16;
+
+type FloatingViewProps = {
+  floatingValue?: string;
+  floatingIconColor?: string;
+  componentId?: string;
+  disabled?: boolean;
+  floatingIcon?: string;
+  required?: boolean;
+  style?: ViewStyle;
+  onPress?: (e: GestureResponderEvent) => void;
+};
+
+/**
+ * Floating label on the input's top border with a required `*` and an
+ * optional pressable icon; renders nothing without `floatingValue`.
+ */
+const FloatingView: FC<FloatingViewProps> = ({
+  floatingValue,
+  floatingIconColor,
+  disabled,
+  floatingIcon,
+  required,
+  style,
+  onPress,
+  componentId,
+}) => {
+  const { theme } = useContext(ApplicationContext);
+  const scaledTop = useScaleSize(LABEL_OFFSET);
+  if (!floatingValue) {
+    return null;
+  }
+
+  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 ? PRESSED_OPACITY : 1}
+          onPress={onPress}
+          accessibilityLabel={`${componentId}|floating-icon-touch`}
+        >
+          <Icon
+            color={floatingIconTintColor}
+            source={floatingIcon}
+            size={ICON_SIZE}
+            style={styles.floatingIcon}
+            accessibilityLabel={`${componentId}|floating-icon`}
+          />
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};
+
+export { FloatingView };

package/Input/Input.tsx

@@ -13,22 +13,25 @@ import {
 } from 'react-native';
 import { useComponentId } from '../Application';
 import { Icon } from '../Icon';
-import { exportFontFamily, useScaleSize } from '../Text';
-import {
-  ErrorView,
-  FloatingView,
-  getBorderColor,
-  getSizeStyle,
-  RenderTrailing,
-} from './common';
-import { InputProps } from './index';
-import styles from './styles';
-import SystemTextInput from './SystemTextInput';
 import {
   ApplicationContext,
   ComponentContext,
   MiniAppContext,
 } from '../Context';
+import { exportFontFamily, useScaleSize } from '../Text';
+import { CLEAR_ICON_SIZE, INPUT_FONT_SIZE } from './constants';
+import { ErrorView } from './ErrorView';
+import { FloatingView } from './FloatingView';
+import { InputProps } from './index';
+import { RenderTrailing } from './RenderTrailing';
+import styles from './styles';
+import SystemTextInput from './SystemTextInput';
+import {
+  getBorderColor,
+  getInputHeight,
+  getLeadingIconSize,
+  getSizeStyle,
+} from './utils';
 
 /**
  * Text input with floating label, leading/trailing/clear icons and an error or
@@ -73,11 +76,11 @@ const Input = forwardRef(
   ) => {
     const { theme } = useContext(ApplicationContext);
     const context = useContext<any>(MiniAppContext);
-    const scaledFontSize = useScaleSize(14);
-    const scaleHeight = useScaleSize(size === 'small' ? 48 : 56);
-    const [focused, setFocused] = useState(false);
+    const scaledFontSize = useScaleSize(INPUT_FONT_SIZE);
+    const scaleHeight = useScaleSize(getInputHeight(size));
+    const [isFocused, setIsFocused] = useState(false);
     const [internalText, setInternalText] = useState(defaultValue || '');
-    const haveValue = value !== undefined ? !!value : !!internalText;
+    const hasValue = value !== undefined ? !!value : !!internalText;
     const inputRef = useRef<TextInput | null>(null);
     const componentName = 'Input';
 
@@ -88,30 +91,30 @@ const Input = forwardRef(
       props.accessibilityLabel,
     );
 
-    const onClearText = () => {
+    const handleClearText = () => {
       inputRef?.current?.clear();
       inputRef.current?.setNativeProps({ text: '' });
-      _onChangeText('');
+      handleChangeText('');
     };
 
-    const _onChangeText = (text: string) => {
+    const handleChangeText = (text: string) => {
       if (value === undefined) {
         setInternalText(text);
       }
       onChangeText?.(text);
     };
 
-    const _onFocus = (e: TextInputFocusEvent) => {
-      setFocused(true);
+    const handleFocus = (e: TextInputFocusEvent) => {
+      setIsFocused(true);
       onFocus?.(e);
     };
 
-    const _onBlur = (e: TextInputFocusEvent) => {
-      setFocused(false);
+    const handleBlur = (e: TextInputFocusEvent) => {
+      setIsFocused(false);
       onBlur?.(e);
     };
 
-    const _setText = (text: string) => {
+    const handleSetText = (text: string) => {
       if (__DEV__ && value !== undefined) {
         console.error(
           `${componentName}: calling ref.setText() on a controlled input (\`value\` is provided) is an anti-pattern. ` +
@@ -120,21 +123,21 @@ const Input = forwardRef(
         );
       }
       inputRef?.current?.setNativeProps({ text });
-      _onChangeText(text);
+      handleChangeText(text);
     };
 
     useImperativeHandle(ref, () => {
       return {
-        clear: onClearText,
+        clear: handleClearText,
         focus: () => inputRef.current?.focus(),
         blur: () => inputRef.current?.blur(),
-        setText: _setText,
+        setText: handleSetText,
       };
     });
 
     const renderInputView = () => {
       const disabledColor = theme.colors.text.disable;
-      const secure = secureTextEntry;
+      const isSecure = secureTextEntry;
       let textColor = theme.colors.text.default;
       let placeholderColor = theme.colors.text.hint;
       let iconTintColor = trailingColor;
@@ -156,7 +159,7 @@ const Input = forwardRef(
             styles.inputWrapper,
             { backgroundColor: theme.colors.background.surface },
             getSizeStyle(size, undefined, scaleHeight),
-            getBorderColor(theme, focused, errorMessage, disabled),
+            getBorderColor(theme, isFocused, errorMessage, disabled),
           ]}
         >
           <FloatingView
@@ -178,7 +181,7 @@ const Input = forwardRef(
                   <Icon
                     color={leadingIconColor}
                     source={leadingIcon}
-                    size={size === 'small' ? 24 : 32}
+                    size={getLeadingIconSize(size)}
                     accessibilityLabel={`${componentId}|leading-icon`}
                   />
                 </TouchableOpacity>
@@ -188,7 +191,7 @@ const Input = forwardRef(
               {...props}
               accessibilityLabel={`${componentId}`}
               editable={editable && !disabled}
-              secureTextEntry={secure}
+              secureTextEntry={isSecure}
               textAlignVertical="center"
               ref={inputRef}
               accessibilityState={{
@@ -202,15 +205,15 @@ const Input = forwardRef(
                   color: textColor,
                   fontFamily: exportFontFamily(fontWeight ?? 'regular'),
                 },
-                secure && haveValue && secureTextStyle,
+                isSecure && hasValue && secureTextStyle,
               ]}
               defaultValue={defaultValue}
               allowFontScaling={false}
               textBreakStrategy="highQuality"
               value={value}
-              onChangeText={_onChangeText}
-              onFocus={_onFocus}
-              onBlur={_onBlur}
+              onChangeText={handleChangeText}
+              onFocus={handleFocus}
+              onBlur={handleBlur}
               placeholder={placeholder}
               selectionColor={theme.colors.primary}
               placeholderTextColor={placeholderColor}
@@ -218,16 +221,16 @@ const Input = forwardRef(
             />
           </View>
           <View style={styles.iconView}>
-            {showClearIcon && focused && haveValue && (
+            {showClearIcon && isFocused && hasValue && (
               <TouchableOpacity
                 accessibilityLabel={`${componentId}|clear-icon-touch`}
                 accessible={false}
                 style={styles.iconWrapper}
-                onPress={onClearText}
+                onPress={handleClearText}
               >
                 <Icon
                   source="24_navigation_close_circle_full"
-                  size={16}
+                  size={CLEAR_ICON_SIZE}
                   color={theme.colors.text.hint}
                   accessibilityLabel={`${componentId}|clear-icon`}
                 />

package/Input/InputDropDown.tsx

@@ -6,17 +6,20 @@ import {
   ComponentContext,
   MiniAppContext,
 } from '../Context';
+import { Spacing } from '../Consts';
 import { Icon } from '../Icon';
+import { Text, useScaleSize } from '../Text';
+import { PRESSED_OPACITY } from './constants';
+import { ErrorView } from './ErrorView';
+import { FloatingView } from './FloatingView';
+import { InputDropDownProps } from './index';
+import styles from './styles';
 import {
-  ErrorView,
-  FloatingView,
   getBorderColor,
+  getInputHeight,
+  getLeadingIconSize,
   getSizeStyle,
-} from './common';
-import { InputDropDownProps } from './index';
-import { Text, useScaleSize } from '../Text';
-import styles from './styles';
-import { Spacing } from '../Consts';
+} from './utils';
 
 /**
  * Pressable field styled like an input with a chevron; shows `value` or
@@ -44,7 +47,7 @@ const InputDropDown = ({
 }: InputDropDownProps) => {
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
-  const scaleHeight = useScaleSize(size === 'small' ? 48 : 56);
+  const scaleHeight = useScaleSize(getInputHeight(size));
   const componentName = 'InputDropDown';
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
@@ -99,7 +102,7 @@ const InputDropDown = ({
               <Icon
                 color={leadingIconColor}
                 source={leadingIcon}
-                size={size === 'small' ? 24 : 32}
+                size={getLeadingIconSize(size)}
                 accessibilityLabel={`${componentId}|leading-icon`}
               />
             </View>
@@ -136,7 +139,7 @@ const InputDropDown = ({
         {...props}
         accessibilityLabel={`${componentId}|touch`}
         accessibilityState={{ disabled: disabled as boolean }}
-        activeOpacity={0.6}
+        activeOpacity={PRESSED_OPACITY}
         style={[
           style,
           styles.wrapper,