@momo-kits/foundation 0.81.1-optimize.15 → 0.81.1-optimize.16

package/Application/BottomTab/BottomTabBar.tsx

@@ -26,7 +26,6 @@ type Props = BottomTabBarProps & {
   activeTintColor?: string;
   inactiveTintColor?: string;
   floatingButton?: FloatingButtonProps;
-  accessibilityLabel?: string;
 };
 
 const getPaddingBottom = (insets: EdgeInsets) => {
@@ -65,7 +64,7 @@ export default function BottomTabBar({
    */
   const renderTabItem = useCallback(
     (data: any[]) => {
-      return data?.map((route, index) => {
+      return data?.map((route, _) => {
         const focused = route.params.name === focusedTab;
         const {options} = descriptors[route?.key] as any;
         const onPress = () => {
@@ -90,19 +89,7 @@ export default function BottomTabBar({
           });
         };
 
-        const label =
-          options.tabBarLabel !== undefined
-            ? options.tabBarLabel
-            : options.title !== undefined
-            ? options.title
-            : route.name;
-
-        const accessibilityLabel =
-          options.tabBarAccessibilityLabel !== undefined
-            ? options.tabBarAccessibilityLabel
-            : typeof label === 'string'
-            ? `${label}, tab, ${index + 1} of ${routes.length}`
-            : undefined;
+        const label = options.tabBarLabel || options.title || route.name;
 
         return (
           <NavigationContext.Provider
@@ -115,7 +102,7 @@ export default function BottomTabBar({
                 horizontal={false}
                 onPress={onPress}
                 onLongPress={onLongPress}
-                accessibilityLabel={accessibilityLabel}
+                accessibilityLabel={`tab_item_${route.name}`}
                 to={buildLink(route.name, route.params)}
                 testID={options.tabBarTestID}
                 allowFontScaling={allowFontScaling}
@@ -232,7 +219,7 @@ export default function BottomTabBar({
         style,
       ]}
       pointerEvents={'auto'}>
-      <View style={styles.content}>
+      <View style={styles.content} accessibilityLabel={'bottom_tab_bar'}>
         {useFloating && floatingButton?.container}
         <Animated.View
           style={{

package/Application/BottomTab/index.tsx

@@ -81,11 +81,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
       initialRouteName={initialRouteName}
       backBehavior={'firstRoute'}
       tabBar={props => (
-        <BottomTabBar
-          {...props}
-          accessibilityLabel={'BottomTabBar'}
-          floatingButton={floatingButton}
-        />
+        <BottomTabBar {...props} floatingButton={floatingButton} />
       )}
       tabBarOptions={{
         style: {

package/Application/StackScreen.tsx

@@ -50,9 +50,7 @@ const StackScreen: React.FC<ScreenParams> = props => {
    * tracking for screen
    */
   useEffect(() => {
-    if (__DEV__ && (!screenName || screenName == 'Invalid')) {
-      Alert.alert('Design system', `Unvalidated screen name "${screenName}" !`);
-    }
+    Alert.alert(screenName);
 
     navigator?.maxApi?.of?.({screenName});
 

package/Layout/Card.tsx

@@ -144,6 +144,7 @@ const Card: React.FC<CardProps> = ({
     <GridContext.Provider value={gridContext}>
       <View
         {...props}
+        onLayout={undefined}
         style={[
           {backgroundColor: theme.colors.background.surface},
           style,

package/Layout/Screen.tsx

@@ -296,7 +296,8 @@ const Screen = forwardRef(
                 style={{
                   marginTop: space,
                   flex: item.props?.expanded ? 1 : undefined,
-                }}>
+                }}
+                onLayout={item.props?.onLayout}>
                 {item}
               </View>
             );
@@ -314,7 +315,8 @@ const Screen = forwardRef(
             style={{
               marginTop: space,
               flex: item?.props?.expanded ? 1 : undefined,
-            }}>
+            }}
+            onLayout={item?.props?.onLayout}>
             {children}
           </View>
         );

package/Layout/Section.tsx

@@ -151,6 +151,7 @@ const Section: React.FC<SectionProps> = ({
       }}>
       <View
         {...props}
+        onLayout={undefined}
         style={[
           style,
           styles.protectedStyle,

package/Loader/index.tsx

@@ -1,4 +1,6 @@
 import Loader from './Loader';
 import ProgressBar from './ProgressBar';
+import {LoaderProps, ProgressBarProps} from './types';
 
 export {Loader, ProgressBar};
+export type {LoaderProps, ProgressBarProps};

package/Popup/PopupNotify.tsx

@@ -188,7 +188,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
 
   return (
     <View
-      accessibilityLabel={'PopupNotify'}
+      accessibilityLabel={'popup_notify'}
       style={[
         styles.container,
         {backgroundColor: theme.colors.background.surface},

package/Popup/PopupPromotion.tsx

@@ -79,7 +79,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
   };
 
   return (
-    <View accessibilityLabel={'PopupPromotion'}>
+    <View accessibilityLabel={'popup_promotion'}>
       <Image
         source={{
           uri: image,

package/Popup/types.ts

@@ -18,7 +18,7 @@ export type PopupNotifyProps = {
   /**
    * `description`: Represents the description text to be displayed in the PopupNotify component.
    */
-  description: string | React.ReactNode;
+  description?: string | React.ReactNode;
 
   /**
    * `error`: Optional. Represents additional error text to be displayed in the PopupNotify component.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.81.1-optimize.15",
+    "version": "0.81.1-optimize.16",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},