@momo-kits/foundation 0.115.3-beta.4 → 0.115.3-beta.6

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/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/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/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/Text/utils.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/foundation",
-  "version": "0.115.3-beta.4",
+  "version": "0.115.3-beta.6",
   "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};