@momo-kits/foundation 0.152.1-beta.7 → 0.152.3

package/Application/BottomTab/index.tsx

@@ -330,6 +330,40 @@ const BottomTab: React.FC<BottomTabProps> = ({
       {tabs.map((item, index) => {
         const isNum = !isNaN(parseInt(`${item?.badgeLabel}`, 10));
         const isDot = typeof item?.badgeLabel === 'string' && !item?.badgeLabel;
+        const isNumZero = isNum && Number(item.badgeLabel) === 0;
+
+        let badgeLabel = item?.badgeLabel;
+        if (isNumZero) {
+          badgeLabel = undefined;
+        }
+
+        let badgeStyle: {
+          marginRight: number;
+          top: number;
+          backgroundColor: string;
+          width?: number;
+        } = {
+          marginRight: -8,
+          top: -4,
+          backgroundColor: Colors.orange_03,
+        };
+
+        if (isNum) {
+          badgeStyle = {
+            marginRight: -4,
+            top: -4,
+            backgroundColor: Colors.red_03,
+          };
+        }
+        if (isDot) {
+          badgeStyle = {
+            marginRight: -2,
+            top: -2,
+            backgroundColor: Colors.orange_03,
+            width: 12,
+          };
+        }
+
         return (
           <Tab.Screen
             key={`BottomTab-${item.name}`}
@@ -358,20 +392,19 @@ const BottomTab: React.FC<BottomTabProps> = ({
                 },
                 styles.tabStyle,
               ],
-              tabBarBadge: item?.badgeLabel,
-              tabBarBadgeStyle: {
-                borderColor: 'white',
-                borderWidth: 2,
-                fontSize: 10,
-                lineHeight: 14,
-                fontWeight: 'bold',
-                alignSelf: 'center',
-                fontFamily: exportFontFamily('bold'),
-                marginRight: isDot ? -2 : isNum ? -4 : -8,
-                top: isDot ? -2 : -4,
-                backgroundColor: isNum ? Colors.red_03 : Colors.orange_03,
-                width: isDot ? 12 : undefined,
-              },
+              tabBarBadge: badgeLabel,
+              tabBarBadgeStyle: [
+                {
+                  borderColor: 'white',
+                  borderWidth: 2,
+                  fontSize: 10,
+                  lineHeight: 14,
+                  fontWeight: 'bold',
+                  alignSelf: 'center',
+                  fontFamily: exportFontFamily('bold'),
+                },
+                badgeStyle,
+              ],
               tabBarIcon: ({ color }) => (
                 <Icon source={item.icon} color={color} size={28} />
               ),

package/Application/NavigationContainer.tsx

@@ -40,6 +40,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
     enableHapticDialog: true,
     enableForceFoundationList: false,
     enableHapticBottomTab: true,
+    scaleSizeMaxRate: 1.5,
   },
 }) => {
   const context = useContext<any>(MiniAppContext);

package/Application/ScaleSizeProvider.tsx

@@ -0,0 +1,16 @@
+import React, { FC } from 'react';
+import { ScaleSizeContext } from '../Context';
+import { ScaleSizeProviderProps } from './types';
+
+const ScaleSizeProvider: FC<ScaleSizeProviderProps> = ({
+  scaleSizeMaxRate,
+  children,
+}) => {
+  return (
+    <ScaleSizeContext.Provider value={{ scaleSizeMaxRate }}>
+      {children}
+    </ScaleSizeContext.Provider>
+  );
+};
+
+export default ScaleSizeProvider;

package/Application/index.ts

@@ -16,6 +16,7 @@ export * from './Components/SearchHeader';
 import { exportHeaderTitle, setAutomationID, useComponentId } from './utils';
 import Navigation from './Navigation';
 import Navigator from './Navigator';
+import ScaleSizeProvider from './ScaleSizeProvider';
 
 export {
   NavigationContainer,
@@ -27,4 +28,5 @@ export {
   Navigation,
   Navigator,
   exportHeaderTitle,
+  ScaleSizeProvider,
 };

package/Application/types.ts

@@ -106,6 +106,11 @@ export type Theme = {
   };
 };
 
+export type ScaleSizeProviderProps = {
+  scaleSizeMaxRate?: number;
+  children: ViewProps['children'];
+};
+
 export type Context = {
   [key: string]: any;
   theme: Theme;
@@ -151,7 +156,7 @@ export type NavigationContainerProps = {
   maxApi: any;
   initialParams?: any;
   localize: LocalizeProps;
-  features: FeaturesFlag;
+  features?: FeaturesFlag;
 };
 
 export type WidgetContainerProps = {

package/Context/index.ts

@@ -9,6 +9,9 @@ const MiniAppContext = (Platform as any).MiniAppContext ?? Context;
 const ScreenContext = (Platform as any).ScreenContext ?? Context;
 const ComponentContext = (Platform as any).ComponentContext ?? Context;
 const SkeletonContext = createContext({ loading: false });
+const ScaleSizeContext = createContext<{ scaleSizeMaxRate?: number }>({
+  scaleSizeMaxRate: undefined,
+});
 const TrackingScopeContext = createContext<{ scopeName?: string }>({
   scopeName: undefined,
 });
@@ -20,4 +23,5 @@ export {
   ComponentContext,
   SkeletonContext,
   TrackingScopeContext,
+  ScaleSizeContext,
 };

package/Input/InputTextArea.tsx

@@ -26,6 +26,7 @@ import {
 import { InputTextAreaProps } from './index';
 import styles from './styles';
 import SystemTextInput from './SystemTextInput';
+import { useComponentId } from '../Application';
 
 const InputTextArea = forwardRef(
   (
@@ -51,6 +52,14 @@ const InputTextArea = forwardRef(
     }: InputTextAreaProps,
     ref,
   ) => {
+
+    const componentName = 'InputTextArea';
+
+
+    const { componentId } = useComponentId(
+      `${componentName}/${placeholder}`,
+      props.accessibilityLabel,
+    );
     const { theme } = useContext(ApplicationContext);
     const [focused, setFocused] = useState(false);
     const [inputValue, setInputValue] = useState(defaultValue ?? '');
@@ -129,12 +138,18 @@ const InputTextArea = forwardRef(
             disabled={disabled}
             floatingIcon={floatingIcon}
             required={required}
+            componentId={componentId}
           />
           <View style={styles.rowArea}>
             <View style={styles.textAreaView}>
               <SystemTextInput
                 {...props}
                 ref={inputRef}
+                accessibilityLabel={`${componentId}`}
+                accessibilityState={{
+                  disabled: disabled,
+                  ...props.accessibilityState,
+                }}
                 editable={!disabled}
                 textAlignVertical="top"
                 allowFontScaling={false}
@@ -160,11 +175,13 @@ const InputTextArea = forwardRef(
               <TouchableOpacity
                 style={styles.iconWrapper}
                 onPress={onClearText}
+                accessibilityLabel={`${componentId}|clear-icon-touch`}
               >
                 <Icon
                   source="24_navigation_close_circle_full"
                   size={16}
                   color={theme.colors.text.hint}
+                  accessibilityLabel={`${componentId}|clear-icon`}
                 />
               </TouchableOpacity>
             )}

package/Text/utils.ts

@@ -1,31 +1,64 @@
-import {Dimensions, PixelRatio} from 'react-native';
+import { Dimensions, PixelRatio } from 'react-native';
+import { useContext } from 'react';
+import { MiniAppContext, ScaleSizeContext } from '../Context';
 
 const deviceWidth = Dimensions.get('window').width;
 const DEFAULT_SCREEN_SIZE = 375;
 const MAX_FONT_SCALE = 1.5;
 const MAX_DEVICE_SCALE = 5;
 
+const useScaleSize = (size: number) => {
+  const context = useContext<any>(MiniAppContext);
+  const scaleSizeContext = useContext<any>(ScaleSizeContext);
+  const fontScale = PixelRatio.getFontScale();
+  const deviceScale = deviceWidth / DEFAULT_SCREEN_SIZE;
+  const maxScaleRate =
+    scaleSizeContext?.scaleSizeMaxRate ||
+    context?.features?.scaleSizeMaxRate ||
+    MAX_FONT_SCALE;
+
+  let fontSizeDeviceScale = size;
+  let fontSizeOSScale = size;
+
+  if (deviceScale > 1) {
+    fontSizeDeviceScale = Math.min(
+      fontSizeDeviceScale * deviceScale,
+      fontSizeDeviceScale + maxScaleRate,
+    );
+  }
+
+  if (fontScale > 1) {
+    fontSizeOSScale = Math.min(
+      fontSizeOSScale * fontScale,
+      fontSizeOSScale * maxScaleRate,
+    );
+  }
+
+  return Math.max(fontSizeDeviceScale, fontSizeOSScale);
+};
+
 const scaleSize = (size: number) => {
   const fontScale = PixelRatio.getFontScale();
   const deviceScale = deviceWidth / DEFAULT_SCREEN_SIZE;
+
   let fontSizeDeviceScale = size;
   let fontSizeOSScale = size;
 
   if (deviceScale > 1) {
     fontSizeDeviceScale = Math.min(
       fontSizeDeviceScale * deviceScale,
-      fontSizeDeviceScale + MAX_DEVICE_SCALE
+      fontSizeDeviceScale + MAX_DEVICE_SCALE,
     );
   }
 
   if (fontScale > 1) {
     fontSizeOSScale = Math.min(
       fontSizeOSScale * fontScale,
-      fontSizeOSScale * MAX_FONT_SCALE
+      fontSizeOSScale * MAX_FONT_SCALE,
     );
   }
 
   return Math.max(fontSizeDeviceScale, fontSizeOSScale);
 };
 
-export {scaleSize};
+export { scaleSize, useScaleSize };

package/package.json

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

package/publish.sh

@@ -6,12 +6,8 @@ if [ "$1" == "stable" ]; then
   npm version patch
   npm publish --tag stable --access=public
 elif [ "$1" == "latest" ]; then
-  npm version $(npm view @momo-kits/foundation@latest version)
-  npm version prerelease --preid=rc
   npm publish --tag latest --access=public
 elif [ "$1" == "beta" ]; then
-  npm version $(npm view @momo-kits/foundation@beta version)
-  npm version prerelease --preid=beta
   npm publish --tag beta --access=public
 else
   npm publish --tag alpha --access=public