@momo-kits/foundation 0.161.1-beta.1 → 0.161.2-beta.1

package/Skeleton/index.tsx

@@ -1,13 +1,20 @@
-import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import {
-  Animated,
-  Easing,
   LayoutAnimation,
   Platform,
   StyleSheet,
   UIManager,
   View,
 } from 'react-native';
+import Animated, {
+  cancelAnimation,
+  Easing,
+  interpolate,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated';
 import LinearGradient from 'react-native-linear-gradient';
 import { SkeletonTypes } from './types';
 import { Colors, Styles } from '../Consts';
@@ -20,32 +27,31 @@ const Skeleton: React.FC<SkeletonTypes> = ({ style }) => {
   const PRIMARY_COLOR = Colors.black_05;
   const HIGHLIGHT_COLOR1 = Colors.black_05;
   const HIGHLIGHT_COLOR2 = Colors.black_03;
-  const beginShimmerPosition = useRef(new Animated.Value(0)).current;
+  const progress = useSharedValue(0);
 
   const shimmerColors = [HIGHLIGHT_COLOR1, HIGHLIGHT_COLOR2, HIGHLIGHT_COLOR1];
-  const linearTranslate = beginShimmerPosition.interpolate({
-    inputRange: [0, 1],
-    outputRange: [-width, width],
-  });
-  const animatedValue = useMemo(() => {
-    return Animated.loop(
-      Animated.timing(beginShimmerPosition, {
-        toValue: 1,
+
+  useEffect(() => {
+    progress.value = 0;
+    progress.value = withRepeat(
+      withTiming(1, {
         duration: 1000,
         easing: Easing.linear,
-        useNativeDriver: Platform.OS !== 'web',
       }),
+      -1,
+      false,
     );
-  }, [beginShimmerPosition]);
-
-  useEffect(() => {
-    animatedValue.start();
     screen?.onLoading?.(true);
     return () => {
-      animatedValue.stop();
+      cancelAnimation(progress);
       screen?.onLoading?.(false);
     };
-  }, [animatedValue, screen]);
+  }, [progress, screen]);
+
+  const shimmerStyle = useAnimatedStyle(() => {
+    const translateX = interpolate(progress.value, [0, 1], [-width, width]);
+    return { transform: [{ translateX }] };
+  });
 
   const onLayout = (newWidth: number) => {
     if (newWidth !== width) {
@@ -60,11 +66,13 @@ const Skeleton: React.FC<SkeletonTypes> = ({ style }) => {
         style={[Styles.flex, { backgroundColor: PRIMARY_COLOR }]}
       >
         <Animated.View
-          style={{
-            transform: [{ translateX: linearTranslate }],
-            width: '60%',
-            height: '100%',
-          }}
+          style={[
+            {
+              width: '60%',
+              height: '100%',
+            },
+            shimmerStyle,
+          ]}
         >
           <LinearGradient
             style={[StyleSheet.absoluteFill]}

package/Switch/index.tsx

@@ -22,7 +22,7 @@ const Switch: FC<SwitchProps> = ({
 
   const { componentId } = useComponentId(componentName, accessibilityLabel);
 
-  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
   let backgroundColor = value ? Colors.green_03 : Colors.black_07;
   if (disabled) {

package/Tag/index.tsx

@@ -38,7 +38,7 @@ const Tag: FC<TagProps> = ({
   const scaledHeight24 = useScaleSize(24);
   const scaledHeight18 = useScaleSize(18);
 
-  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
   const styles = StyleSheet.create({
     container: {

package/Text/index.tsx

@@ -158,7 +158,7 @@ const Text: React.FC<TextProps> = ({
     );
   }
 
-  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
   if (skeleton.loading) {
     return (

package/Text/utils.ts

@@ -1,39 +1,62 @@
 import { Dimensions, PixelRatio, useWindowDimensions } from 'react-native';
 import { useContext } from 'react';
-import { MiniAppContext } from '../Context';
+import { ScaleSizeContext } from '../Context';
 
 const deviceWidth = Dimensions.get('window').width;
 const DEFAULT_SCREEN_SIZE = 375;
-const MAX_FONT_SCALE = 1.2;
+const MAX_FONT_SCALE = 1.5;
+const MAX_DEVICE_SCALE = 5;
 
-const useScaleSize = (size: number) => {
+const useScaleSize = (size: number, scaleRate?: number) => {
+  const { scaleSizeMaxRate = MAX_FONT_SCALE } = useContext(ScaleSizeContext);
+  const fontScale = PixelRatio.getFontScale();
   const { width } = useWindowDimensions();
-  const context = useContext<any>(MiniAppContext);
-  const allowFontScale = context?.designSystemConfig?.allowFontScale ?? true;
+  const deviceScale = width / DEFAULT_SCREEN_SIZE;
+
+  const maxScaleRate = scaleRate ?? scaleSizeMaxRate;
 
-  if (allowFontScale) {
-    const deviceScale = width / DEFAULT_SCREEN_SIZE;
-    const fontScale = PixelRatio.getFontScale();
+  let fontSizeDeviceScale = size;
+  let fontSizeOSScale = size;
 
-    const maxSize = size * MAX_FONT_SCALE;
-    const fontSizeScaleDevice = deviceScale > 1 ? deviceScale * size : size;
-    const fontSizeScaleOS = fontScale > 1 ? fontScale * size : size;
+  if (deviceScale > 1) {
+    fontSizeDeviceScale = Math.min(
+      fontSizeDeviceScale * deviceScale,
+      fontSizeDeviceScale + MAX_DEVICE_SCALE,
+    );
+  }
 
-    return Math.min(Math.max(fontSizeScaleDevice, fontSizeScaleOS), maxSize);
+  if (fontScale > 1) {
+    fontSizeOSScale = Math.min(
+      fontSizeOSScale * fontScale,
+      fontSizeOSScale * maxScaleRate,
+    );
   }
 
-  return size;
+  return Math.max(fontSizeDeviceScale, fontSizeOSScale);
 };
 
 const scaleSize = (size: number) => {
-  const deviceScale = deviceWidth / DEFAULT_SCREEN_SIZE;
   const fontScale = PixelRatio.getFontScale();
+  const deviceScale = deviceWidth / DEFAULT_SCREEN_SIZE;
 
-  const maxSize = size * MAX_FONT_SCALE;
-  const fontSizeScaleDevice = deviceScale > 1 ? deviceScale * size : size;
-  const fontSizeScaleOS = fontScale > 1 ? fontScale * size : size;
+  let fontSizeDeviceScale = size;
+  let fontSizeOSScale = size;
+
+  if (deviceScale > 1) {
+    fontSizeDeviceScale = Math.min(
+      fontSizeDeviceScale * deviceScale,
+      fontSizeDeviceScale + MAX_DEVICE_SCALE,
+    );
+  }
+
+  if (fontScale > 1) {
+    fontSizeOSScale = Math.min(
+      fontSizeOSScale * fontScale,
+      fontSizeOSScale * MAX_FONT_SCALE,
+    );
+  }
 
-  return Math.min(Math.max(fontSizeScaleDevice, fontSizeScaleOS), maxSize);
+  return Math.max(fontSizeDeviceScale, fontSizeOSScale);
 };
 
 export { scaleSize, useScaleSize };

package/Title/index.tsx

@@ -39,7 +39,7 @@ const Title: FC<TitleProps> = ({
   const [badgeWidth, setBadgeWidth] = useState(0);
   const [contentWidth, setContentWidth] = useState(0);
 
-  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
   const size18 = useScaleSize(18);
   const size22 = useScaleSize(22);

package/package.json

@@ -1,35 +1,35 @@
 {
-  "name": "@momo-kits/foundation",
-  "version": "0.161.1-beta.1",
-  "description": "React Native Component Kits",
-  "main": "index.ts",
-  "scripts": {},
-  "keywords": [
-    "@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",
-    "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.1.0",
-    "react-native-safe-area-context": "5.5.2",
-    "@shopify/flash-list": "2.1.0",
-    "lottie-react-native": "7.2.4"
-  },
-  "peerDependencies": {
-    "react-native": "*"
-  },
-  "devDependencies": {
-    "@types/color": "3.0.6"
-  },
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
-  },
-  "license": "MoMo"
-}
+    "name": "@momo-kits/foundation",
+    "version": "0.161.2-beta.1",
+    "description": "React Native Component Kits",
+    "main": "index.ts",
+    "scripts": {},
+    "keywords": [
+        "@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",
+        "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-safe-area-context": "5.5.2",
+        "@shopify/flash-list": "2.1.0",
+        "lottie-react-native": "7.2.4"
+    },
+    "peerDependencies": {
+        "react-native": "*"
+    },
+    "devDependencies": {
+        "@types/color": "3.0.6"
+    },
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org/"
+    },
+    "license": "MoMo"
+}