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

package/Application/BottomSheet.tsx

@@ -18,9 +18,6 @@ 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);
@@ -29,26 +26,6 @@ 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,
@@ -239,14 +216,9 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
         <Animated.View
           style={{
             transform: [{translateY}],
-            maxHeight: keyboardHeight > 0 ? heightDevice / 2 : undefined,
           }}>
           {renderHeader()}
-          <ScrollView
-            scrollEnabled={keyboardHeight > 0 ? true : false}
-            keyboardShouldPersistTaps="handled"
-            contentContainerStyle={{flexGrow: 1}}
-            style={{backgroundColor: backgroundColor}}>
+          <View style={{backgroundColor: backgroundColor}}>
             <Screen
               {...props}
               {...props.route.params}
@@ -255,7 +227,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
             {useBottomInset && (
               <View style={{height: Math.min(insets.bottom, 21)}} />
             )}
-          </ScrollView>
+          </View>
         </Animated.View>
       </KeyboardAvoidingView>
     </Container>

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,8 +113,7 @@ 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/InputOTP.tsx

@@ -12,6 +12,7 @@ import {
   NativeSyntheticEvent,
   TextInput,
   TextInputFocusEventData,
+  TouchableOpacity,
   View,
 } from 'react-native';
 import {
@@ -24,6 +25,7 @@ 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;
@@ -132,6 +134,10 @@ const InputOTP = forwardRef(
       onChangeText?.(text);
     };
 
+    const onClearText = () => {
+      _onChangeText('');
+    };
+
     const renderInputs = (inputLength: number) => {
       const TextInputs: React.ReactNode[] = [];
       for (let i = 0; i < inputLength; i++) {
@@ -215,6 +221,11 @@ 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,8 +150,14 @@ 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/package.json

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