@momo-kits/foundation 0.115.3-beta.9 → 0.116.2

package/Application/BottomSheet.tsx

@@ -1,32 +1,23 @@
-import React, {
-  useCallback,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import React, {useCallback, useContext, useEffect, useRef} from 'react';
 import {
   Dimensions,
-  Keyboard,
   KeyboardAvoidingView,
-  LayoutAnimation,
   Modal,
   PanResponder,
   Platform,
   Pressable,
-  ScrollView,
   StyleSheet,
   TouchableOpacity,
   View,
 } from 'react-native';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
-import Animated, {Easing, Extrapolate} from 'react-native-reanimated';
-import {useHeaderHeight} from '@react-navigation/stack';
 import {ApplicationContext} from './index';
 import {BottomSheetParams} from './types';
 import {Colors, Radius, Spacing, Styles} from '../Consts';
 import {Text} from '../Text';
 import {Icon} from '../Icon';
+import {useHeaderHeight} from '@react-navigation/stack';
+import Animated, {Easing, Extrapolate} from 'react-native-reanimated';
 
 const BottomSheet: React.FC<BottomSheetParams> = props => {
   const {theme, navigator} = useContext(ApplicationContext);
@@ -34,8 +25,6 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   const action = useRef<undefined | string>();
   const insets = useSafeAreaInsets();
   const heightHeader = useHeaderHeight();
-  const [keyboardHeight, setKeyboardHeight] = useState(0);
-  const [contentHeight, setContentHeight] = useState(0);
   const keyboardOffset = heightHeader - Math.min(insets.bottom, 21);
 
   const {
@@ -47,7 +36,6 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     draggable = true,
     useBottomInset = true,
     useKeyboardAvoidingView = true,
-    useScrollOverflow = false,
     keyboardVerticalOffset,
   }: BottomSheetParams = props.route.params;
 
@@ -98,39 +86,14 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   ).current;
 
   let Container: any = View;
-  let Content: any = View;
   if (useNativeModal) {
     Container = Modal;
   }
-  if (useScrollOverflow) {
-    Content = ScrollView;
-  }
   let backgroundColor = theme.colors.background.default;
   if (surface) {
     backgroundColor = theme.colors.background.surface;
   }
 
-  const maxContentSize = heightDevice - 52 - keyboardHeight;
-
-  useEffect(() => {
-    const onKeyboardShow = (e: any) => {
-      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-      setKeyboardHeight(e.endCoordinates.height);
-    };
-    const onKeyboardHide = () => {
-      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-      setKeyboardHeight(0);
-    };
-
-    const showSub = Keyboard.addListener('keyboardWillShow', onKeyboardShow);
-    const hideSub = Keyboard.addListener('keyboardWillHide', onKeyboardHide);
-
-    return () => {
-      showSub.remove();
-      hideSub.remove();
-    };
-  }, []);
-
   /**
    * emit dismiss event
    */
@@ -142,17 +105,6 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     };
   }, []);
 
-  /**
-   * handle content bottom sheet change
-   * @param width
-   * @param height
-   */
-  const handleContentSizeChange = (width: number, height: number) => {
-    if (contentHeight !== height) {
-      setContentHeight(height);
-    }
-  };
-
   /**
    * handler dismiss
    */
@@ -264,13 +216,9 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
         <Animated.View
           style={{
             transform: [{translateY}],
-            maxHeight: maxContentSize,
           }}>
           {renderHeader()}
-          <Content
-            scrollEnabled={contentHeight + 20 > maxContentSize}
-            style={{backgroundColor: backgroundColor}}
-            onContentSizeChange={handleContentSizeChange}>
+          <View style={{backgroundColor: backgroundColor}}>
             <Screen
               {...props}
               {...props.route.params}
@@ -279,7 +227,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
             {useBottomInset && (
               <View style={{height: Math.min(insets.bottom, 21)}} />
             )}
-          </Content>
+          </View>
         </Animated.View>
       </KeyboardAvoidingView>
     </Container>

package/Application/Components/HeaderRight.tsx

@@ -50,7 +50,6 @@ const HeaderRight: React.FC<any> = props => {
 const HeaderToolkitAction: React.FC<any> = ({
   tintColor,
   preventClose,
-  useSystemTools = true,
   useShortcut = false,
   useMore = false,
   tools = [],
@@ -199,7 +198,6 @@ const HeaderToolkitAction: React.FC<any> = ({
     navigator?.maxApi?.dispatchFunction?.(
       'showTools',
       {
-        useSystemTools,
         tools,
         context,
       },

package/Application/types.ts

@@ -98,7 +98,6 @@ export type Tool = {
   name: {vi: string; en: string};
   key: string;
   showBadge?: boolean;
-  showRightIcon?: boolean;
   onPress: () => void;
 };
 
@@ -151,7 +150,6 @@ export type BottomSheetParams = {
   useBottomInset?: boolean;
   useKeyboardAvoidingView?: boolean;
   keyboardVerticalOffset?: number;
-  useScrollOverflow?: boolean;
 };
 
 export interface NavigationButtonProps extends TouchableOpacityProps {

package/Divider/index.tsx

@@ -1,43 +1,19 @@
 import React, {useContext} from 'react';
-import {View, ViewStyle} from 'react-native';
+import {View} from 'react-native';
 import {ApplicationContext} from '../Application';
 import {Spacing} from '../Consts';
-import {DashDivider} from './DashDivider';
 
-export interface DividerProps {
-  /**
-   * Custom styles for divider
-   */
-  style?: ViewStyle;
-
-  /**
-   * Enable margin vertical 4px
-   */
-  useMargin?: boolean;
-
-  type?: 'dash' | 'default';
-}
-
-const Divider: React.FC<DividerProps> = ({
-  style,
-  useMargin = true,
-  type = 'default',
-}) => {
+const Divider = () => {
   const {theme} = useContext(ApplicationContext);
 
-  if (type === 'dash') return <DashDivider style={style} />;
-
   return (
     <View
-      style={[
-        style,
-        {
-          height: 1,
-          width: '100%',
-          backgroundColor: theme.colors.border.default,
-          marginVertical: useMargin ? Spacing.XS : 0,
-        },
-      ]}
+      style={{
+        height: 1,
+        width: '100%',
+        backgroundColor: theme.colors.border.default,
+        marginVertical: Spacing.XS,
+      }}
     />
   );
 };

package/Input/InputOTP.tsx

@@ -12,7 +12,6 @@ import {
   NativeSyntheticEvent,
   TextInput,
   TextInputFocusEventData,
-  TouchableOpacity,
   View,
 } from 'react-native';
 import {
@@ -25,7 +24,6 @@ import {scaleSize, Text} from '../Text';
 import {ErrorView, getBorderColor} from './common';
 import {CaretProps, InputOTPProps} from './index';
 import styles from './styles';
-import {Icon} from "../Icon";
 
 const OTPCaret: FC<CaretProps> = ({index, length}) => {
   const DURATION = 300;
@@ -134,10 +132,6 @@ const InputOTP = forwardRef(
       onChangeText?.(text);
     };
 
-    const onClearText = () => {
-      _onChangeText('');
-    };
-
     const renderInputs = (inputLength: number) => {
       const TextInputs: React.ReactNode[] = [];
       for (let i = 0; i < inputLength; i++) {
@@ -221,11 +215,6 @@ const InputOTP = forwardRef(
               </Text>
             </View>
           )}
-          {value.length > 0 && focused && (
-            <TouchableOpacity onPress={onClearText} style={styles.clearIcon}>
-              <Icon source={'24_navigation_close_circle_full'} size={12} />
-            </TouchableOpacity>
-          )}
           <View style={styles.otpInputsView}>
             {length ? renderInputs(length) : renderUnidentifiedInputs()}
           </View>

package/Input/styles.ts

@@ -150,14 +150,8 @@ export default StyleSheet.create({
   otpInput: {
     height: 56,
     borderRadius: Radius.S,
-    justifyContent: 'center',
     borderWidth: 1,
   },
-  clearIcon: {
-    position: 'absolute',
-    right: Spacing.M,
-    zIndex: 4,
-  },
   otpFloatingView: {
     position: 'absolute',
     top: -Spacing.M + 2,

package/Text/utils.ts

@@ -1,24 +1,15 @@
-import {Dimensions, PixelRatio} from 'react-native';
+import {Dimensions} from 'react-native';
 
 const deviceWidth = Dimensions.get('window').width;
 const DEFAULT_SCREEN_SIZE = 375;
-const MAX_FONT_SCALE = 1.2;
-const MAX_DEVICE_SCALE = 5;
-
 const scaleSize = (size: number) => {
-  const fontScale = PixelRatio.getFontScale();
-  const deviceScale = deviceWidth / DEFAULT_SCREEN_SIZE;
-  let fontSize = size;
-
-  if (deviceScale > 1) {
-    fontSize = Math.min(fontSize * deviceScale, fontSize + MAX_DEVICE_SCALE);
-  }
+  const scaleRate = deviceWidth / DEFAULT_SCREEN_SIZE;
 
-  if (fontScale > 1) {
-    fontSize = Math.min(fontSize * fontScale, fontSize * MAX_FONT_SCALE);
+  if (scaleRate > 1) {
+    return Math.min(Math.round(size * scaleRate), size + 3);
   }
 
-  return fontSize;
+  return size;
 };
 
 export {scaleSize};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/foundation",
-  "version": "0.115.3-beta.9",
+  "version": "0.116.2",
   "description": "React Native Component Kits",
   "main": "index.ts",
   "scripts": {},
@@ -14,14 +14,13 @@
     "react-native-linear-gradient": "2.8.3",
     "react-native-gesture-handler": "1.10.3",
     "react-native-fast-image": "8.1.5",
-    "@react-navigation/bottom-tabs": "https://gitlab.mservice.com.vn/momo-platform/react-native-bottom-tabs.git",
     "@react-navigation/core": "5.16.1",
     "@react-navigation/native": "5.9.8",
     "@react-navigation/routers": "5.7.4",
-    "react-native-reanimated": "git+https://gitlab.mservice.com.vn/momo-platform/react-native-reanimated.git#v1.13.4_gradle_7",
-    "lottie-react-native": "git+https://gitlab.mservice.com.vn/momo-platform/momo-lottie-react-native.git",
-    "@react-navigation/stack": "https://gitlab.mservice.com.vn/momo-platform/react-navigation-stack.git",
-    "react-native-svg": "git+https://gitlab.mservice.com.vn/momo-platform/react-native-svg.git#v12.1.0.public"
+    "react-native-reanimated": "git+https://oauth2:q9C8ByV3vnsw_vjwrDay@gitlab.mservice.com.vn/momo-platform/react-native-reanimated.git#v1.13.4_gradle_7",
+    "lottie-react-native": "git+https://oauth2:oZFuaMKUc7GV7HeP8xq6@gitlab.mservice.com.vn/momo-platform/momo-lottie-react-native.git",
+    "@react-navigation/stack": "git+https://oauth2:ntR45Ct8MSUKVd52rG7a@gitlab.mservice.com.vn/momo-platform/react-navigation-stack.git",
+    "@react-navigation/bottom-tabs": "git+https://oauth2:RQq-YxRT5sme7Hx3xkKk@gitlab.mservice.com.vn/momo-platform/react-native-bottom-tabs.git"
   },
   "peerDependencies": {
     "react-native": "*"

package/Divider/DashDivider.tsx

@@ -1,45 +0,0 @@
-import React, {useContext} from 'react';
-import {View, ViewStyle} from 'react-native';
-import {ApplicationContext} from '../Application';
-import {Spacing} from '../Consts';
-import Svg, {Line} from 'react-native-svg';
-
-export interface DashDividerProps {
-  /**
-   * Custom styles for dash divider
-   */
-  style?: ViewStyle;
-}
-
-const DashDivider: React.FC<DashDividerProps> = ({style}) => {
-  const {theme} = useContext(ApplicationContext);
-  const borderColor = theme.colors.border.default;
-
-  return (
-    <View
-      style={[
-        {
-          width: '100%',
-          height: 1,
-          marginVertical: Spacing.XS,
-        },
-        style,
-      ]}>
-      <Svg height="1" width="100%">
-        <Line
-          x1="0"
-          y1="0"
-          x2="100%"
-          y2="0"
-          stroke={borderColor}
-          strokeWidth="1"
-          strokeDasharray={`4, 4`}
-          strokeLinecap={'round'}
-          strokeLinejoin={'miter'}
-        />
-      </Svg>
-    </View>
-  );
-};
-
-export {DashDivider};