@momo-kits/foundation 0.115.2-beta.11 → 0.115.2-beta.12

package/Application/BottomSheet.tsx

@@ -18,6 +18,9 @@ import {Text} from '../Text';
 import {Icon} from '../Icon';
 import {useHeaderHeight} from '@react-navigation/stack';
 import Animated, {Easing, Extrapolate} from 'react-native-reanimated';
+import {Keyboard, LayoutAnimation} from 'react-native';
+import {useState} from 'react';
+import {ScrollView} from 'react-native-gesture-handler';
 
 const BottomSheet: React.FC<BottomSheetParams> = props => {
   const {theme, navigator} = useContext(ApplicationContext);
@@ -26,6 +29,26 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   const insets = useSafeAreaInsets();
   const heightHeader = useHeaderHeight();
   const keyboardOffset = heightHeader - Math.min(insets.bottom, 21);
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+
+  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('keyboardDidShow', onKeyboardShow);
+    const hideSub = Keyboard.addListener('keyboardDidHide', onKeyboardHide);
+
+    return () => {
+      showSub.remove();
+      hideSub.remove();
+    };
+  }, []);
 
   const {
     screen: Screen,
@@ -216,9 +239,14 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
         <Animated.View
           style={{
             transform: [{translateY}],
+            maxHeight: keyboardHeight > 0 ? heightDevice / 2 : undefined,
           }}>
           {renderHeader()}
-          <View style={{backgroundColor: backgroundColor}}>
+          <ScrollView
+            scrollEnabled={keyboardHeight > 0 ? true : false}
+            keyboardShouldPersistTaps="handled"
+            contentContainerStyle={{flexGrow: 1}}
+            style={{backgroundColor: backgroundColor}}>
             <Screen
               {...props}
               {...props.route.params}
@@ -227,7 +255,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
             {useBottomInset && (
               <View style={{height: Math.min(insets.bottom, 21)}} />
             )}
-          </View>
+          </ScrollView>
         </Animated.View>
       </KeyboardAvoidingView>
     </Container>

package/Divider/index.tsx

@@ -1,37 +1,21 @@
 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;
-}
-
-const Divider: React.FC<DividerProps> = ({style, useMargin = true}) => {
+const Divider = () => {
   const {theme} = useContext(ApplicationContext);
 
   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,
+      }}
     />
   );
 };
 
-export {Divider, DashDivider};
+export {Divider};

package/Input/InputMoney.tsx

@@ -97,10 +97,10 @@ const InputMoney = forwardRef(
     };
 
     const onClearText = () => {
+      inputRef?.current?.clear();
       setDisplayValue('');
       setNumericValue('');
       onChangeText?.('');
-      inputRef?.current?.focus();
     };
 
     const _onChangeText = (text: string) => {
@@ -113,7 +113,8 @@ const InputMoney = forwardRef(
 
       if (text.length < lastDisplayValue.length) {
         const lastChar = lastDisplayValue.charAt(lastDisplayValue.length - 1);
-        const isRemovingCurrency = lastDisplayValue.endsWith(currency) || lastChar === ' ';
+        const isRemovingCurrency =
+          lastDisplayValue.endsWith(currency) || lastChar === ' ';
         const isRemovingDot = lastChar === '.';
 
         if (isRemovingCurrency || isRemovingDot) {

package/package.json

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

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};