@momo-kits/foundation 0.115.2-beta.13 → 0.115.3-beta.10

package/Application/BottomSheet.tsx

@@ -1,23 +1,32 @@
-import React, {useCallback, useContext, useEffect, useRef} from 'react';
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} 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);
@@ -25,6 +34,8 @@ 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 {
@@ -36,6 +47,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     draggable = true,
     useBottomInset = true,
     useKeyboardAvoidingView = true,
+    useScrollOverflow = false,
     keyboardVerticalOffset,
   }: BottomSheetParams = props.route.params;
 
@@ -86,14 +98,39 @@ 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
    */
@@ -105,6 +142,17 @@ 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
    */
@@ -216,9 +264,13 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
         <Animated.View
           style={{
             transform: [{translateY}],
+            maxHeight: maxContentSize,
           }}>
           {renderHeader()}
-          <View style={{backgroundColor: backgroundColor}}>
+          <Content
+            scrollEnabled={contentHeight + 20 > maxContentSize}
+            style={{backgroundColor: backgroundColor}}
+            onContentSizeChange={handleContentSizeChange}>
             <Screen
               {...props}
               {...props.route.params}
@@ -227,7 +279,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
             {useBottomInset && (
               <View style={{height: Math.min(insets.bottom, 21)}} />
             )}
-          </View>
+          </Content>
         </Animated.View>
       </KeyboardAvoidingView>
     </Container>

package/Application/Components/HeaderRight.tsx

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

package/Application/types.ts

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

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/Input/InputSearch.tsx

@@ -237,7 +237,7 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
   const renderTrailing = () => {
     return (
       <View style={Styles.row}>
-        {focused && haveValue && (
+        {haveValue && (
           <TouchableOpacity
             style={styles.iconWrapper}
             onPress={onClearText}

package/package.json

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