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

package/Application/BottomSheet.tsx

@@ -1,4 +1,4 @@
-import React, {useContext, useEffect, useRef, useState} from 'react';
+import React, {useCallback, useContext, useEffect, useRef} from 'react';
 import {
   Animated,
   Dimensions,
@@ -26,19 +26,20 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     options,
     surface,
     barrierDismissible = false,
-    snapPoint = 'content',
     draggable = true,
-    dragOnContent = false,
     useBottomInset = true,
   }: BottomSheetParams = props.route.params;
-  const [modalVisible, setModalVisible] = useState(false);
-  const animatedHeight = useRef(new Animated.Value(0)).current;
-  const pan = useRef(new Animated.ValueXY()).current;
+  const pan = useRef(
+    new Animated.ValueXY({
+      y: heightDevice,
+      x: 0,
+    }),
+  ).current;
   const panResponder = useRef(
     PanResponder.create({
       onStartShouldSetPanResponder: () => draggable,
       onMoveShouldSetPanResponder: (_, gestureState) => {
-        return draggable && dragOnContent && gestureState.dy > 0;
+        return draggable && gestureState.dy > 0;
       },
       onPanResponderMove: (e, gestureState) => {
         gestureState.dy > 0 &&
@@ -59,44 +60,26 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
       },
     }),
   ).current;
-  const [estimate, setEstimate] = useState(0.9);
-  const timeoutMount = useRef<any>();
 
   let backgroundColor = theme.colors.background.default;
   if (surface) {
     backgroundColor = theme.colors.background.surface;
   }
 
-  /**
-   * handle open & emit dismiss event
-   */
-  useEffect(() => {
-    clearTimeout(timeoutMount.current);
-    timeoutMount.current = setTimeout(() => {
-      const mapSnapPoint: any = {
-        '30%': 0.3,
-        '50%': 0.5,
-        '70%': 0.7,
-        '90%': 0.9,
-      };
-      const point = mapSnapPoint[snapPoint] ?? estimate;
-      setModalVisible(true);
-      Animated.timing(animatedHeight, {
-        useNativeDriver: false,
-        toValue: heightDevice * point,
-        duration: 150,
-      }).start();
-    }, 50);
-  }, [estimate]);
-
   /**
    * emit dismiss event
    */
   useEffect(() => {
+    Animated.timing(pan, {
+      toValue: {x: 0, y: 0},
+      useNativeDriver: false,
+      duration: 150,
+    }).start();
     return () => {
       props.route.params?.onDismiss?.();
     };
   }, []);
+
   /**
    * handler dismiss
    */
@@ -104,94 +87,74 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     if (barrierDismissible && !force) {
       return;
     }
-    Animated.timing(animatedHeight, {
+    Animated.timing(pan, {
+      toValue: {x: 0, y: heightDevice},
       useNativeDriver: false,
-      toValue: 0,
-      duration: 200,
+      duration: 100,
     }).start(() => {
-      pan.setValue({x: 0, y: 0});
       navigator?.pop();
     });
   };
 
-  return (
-    <>
-      <Modal
-        transparent
-        visible={modalVisible}
-        onRequestClose={() => onDismiss()}>
-        <KeyboardAvoidingView
-          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-          keyboardVerticalOffset={-20}
-          style={Styles.flex}>
+  const renderHeader = useCallback(() => {
+    return (
+      <View
+        style={{
+          backgroundColor,
+          borderTopLeftRadius: Radius.M,
+          borderTopRightRadius: Radius.M,
+        }}
+        {...panResponder.panHandlers}>
+        <View style={{height: 16}}>
+          <View style={styles.indicator} />
+        </View>
+        <View
+          style={[
+            styles.header,
+            surface && {
+              borderBottomColor: theme.colors.border.default,
+              borderBottomWidth: 1,
+            },
+          ]}>
+          <View style={styles.iconButton} />
+          <Text
+            style={[Styles.flex, {textAlign: 'center'}]}
+            numberOfLines={1}
+            typography="header_default_bold">
+            {options.title ?? ''}
+          </Text>
           <TouchableOpacity
-            style={Styles.flex}
-            activeOpacity={1}
-            onPress={() => onDismiss()}
-          />
-          <Animated.View
-            {...(dragOnContent && panResponder.panHandlers)}
-            style={[
-              styles.container,
-              {transform: pan.getTranslateTransform()},
-              {
-                height: animatedHeight,
-                backgroundColor,
-              },
-            ]}>
-            {draggable && (
-              <View
-                {...(!dragOnContent && panResponder.panHandlers)}
-                style={styles.draggableContainer}>
-                <View style={{height: 16}}>
-                  <View style={styles.indicator} />
-                </View>
-                <View
-                  style={[
-                    styles.header,
-                    surface && {
-                      borderBottomColor: theme.colors.border.default,
-                      borderBottomWidth: 1,
-                    },
-                  ]}>
-                  <View style={styles.iconButton} />
-                  <Text
-                    style={[Styles.flex, {textAlign: 'center'}]}
-                    numberOfLines={1}
-                    typography="header_default_bold">
-                    {options.title ?? ''}
-                  </Text>
-                  <TouchableOpacity
-                    style={styles.iconButton}
-                    onPress={() => onDismiss(true)}>
-                    <Icon source="navigation_close" />
-                  </TouchableOpacity>
-                </View>
-              </View>
-            )}
+            style={styles.iconButton}
+            onPress={() => onDismiss(true)}>
+            <Icon source="navigation_close" />
+          </TouchableOpacity>
+        </View>
+      </View>
+    );
+  }, []);
+
+  return (
+    <Modal transparent visible={true} onRequestClose={() => onDismiss()}>
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        keyboardVerticalOffset={-20}
+        style={[Styles.flex, {justifyContent: 'flex-end'}]}>
+        <TouchableOpacity
+          style={Styles.flex}
+          activeOpacity={1}
+          onPress={() => onDismiss()}
+        />
+        <Animated.View style={{transform: pan.getTranslateTransform()}}>
+          {renderHeader()}
+          <View style={{backgroundColor: backgroundColor}}>
             <Screen {...props} {...props.route.params} />
             {useBottomInset && (
               <View style={{height: Math.min(insets.bottom, 21)}} />
             )}
-          </Animated.View>
-        </KeyboardAvoidingView>
-      </Modal>
-      {snapPoint == 'content' && (
-        <View
-          style={styles.estimate}
-          onLayout={e => {
-            const current = (e.nativeEvent.layout.height + 72) / heightDevice;
-            if (current != estimate) {
-              setEstimate(current);
-            }
-          }}>
-          <Screen {...props} {...props.route.params} />
-          {useBottomInset && (
-            <View style={{height: Math.min(insets.bottom, 21)}} />
-          )}
-        </View>
-      )}
-    </>
+          </View>
+        </Animated.View>
+      </KeyboardAvoidingView>
+    </Modal>
   );
 };
 export default BottomSheet;

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/Application/types.ts

@@ -114,12 +114,10 @@ export type BottomSheetParams = {
     title: string;
     surface?: boolean;
   };
-  snapPoint?: '30%' | '50%' | '70%' | '90%' | 'content';
   surface?: boolean;
   onDismiss?: (type?: string) => void;
   barrierDismissible?: boolean;
   draggable?: boolean;
-  dragOnContent?: boolean;
   useBottomInset?: boolean;
 };
 

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.17",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},