@momo-kits/foundation 0.81.1-optimize.18 → 0.81.1-optimize.20

package/Application/BottomSheet.tsx

@@ -28,6 +28,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     barrierDismissible = false,
     draggable = true,
     useBottomInset = true,
+    keyboardVerticalOffset,
   }: BottomSheetParams = props.route.params;
   const pan = useRef(
     new Animated.ValueXY({
@@ -83,7 +84,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   /**
    * handler dismiss
    */
-  const onDismiss = (force = false) => {
+  const onDismiss = (force = false, callback?: () => void) => {
     if (barrierDismissible && !force) {
       return;
     }
@@ -93,9 +94,20 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
       duration: 100,
     }).start(() => {
       navigator?.pop();
+      callback?.();
     });
   };
 
+  /**
+   * manual close
+   */
+  const requestClose = useCallback((callback?: () => void) => {
+    onDismiss(true, callback);
+  }, []);
+
+  /**
+   * render header
+   */
   const renderHeader = useCallback(() => {
     return (
       <View
@@ -137,7 +149,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     <Modal transparent visible={true} onRequestClose={() => onDismiss()}>
       <KeyboardAvoidingView
         behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-        keyboardVerticalOffset={-20}
+        keyboardVerticalOffset={keyboardVerticalOffset ?? -20}
         style={[Styles.flex, {justifyContent: 'flex-end'}]}>
         <TouchableOpacity
           style={Styles.flex}
@@ -147,7 +159,11 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
         <Animated.View style={{transform: pan.getTranslateTransform()}}>
           {renderHeader()}
           <View style={{backgroundColor: backgroundColor}}>
-            <Screen {...props} {...props.route.params} />
+            <Screen
+              {...props}
+              {...props.route.params}
+              requestClose={requestClose}
+            />
             {useBottomInset && (
               <View style={{height: Math.min(insets.bottom, 21)}} />
             )}
@@ -157,6 +173,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     </Modal>
   );
 };
+
 export default BottomSheet;
 
 const styles = StyleSheet.create({

package/Application/StackScreen.tsx

@@ -50,10 +50,11 @@ const StackScreen: React.FC<ScreenParams> = props => {
    * tracking for screen
    */
   useEffect(() => {
-    Alert.alert(screenName);
+    if (__DEV__ && (!screenName || screenName == 'Invalid')) {
+      Alert.alert('Design system', `Unvalidated screen name "${screenName}" !`);
+    }
 
     navigator?.maxApi?.of?.({screenName});
-
     tracked.current.timeoutLoad = setTimeout(() => {
       onScreenLoad();
     }, 5000);

package/Application/types.ts

@@ -119,6 +119,7 @@ export type BottomSheetParams = {
   barrierDismissible?: boolean;
   draggable?: boolean;
   useBottomInset?: boolean;
+  keyboardVerticalOffset?: number;
 };
 
 export type NavigationButtonProps = {

package/Input/InputMoney.tsx

@@ -1,6 +1,7 @@
 import React, {
   forwardRef,
   useContext,
+  useEffect,
   useImperativeHandle,
   useRef,
   useState,
@@ -40,6 +41,7 @@ const InputMoney = forwardRef(
       defaultValue = '',
       accessibilityLabel,
       hintText,
+      value: _value,
       ...props
     }: InputMoneyProps,
     ref,
@@ -48,6 +50,13 @@ const InputMoney = forwardRef(
     const [focused, setFocused] = useState(false);
     const inputRef = useRef<TextInput>(null);
 
+    useEffect(() => {
+      if (_value) {
+        setValue(validateText(_value));
+        onChangeText?.(formatMoneyToNumber(_value, 'đ').toString());
+      }
+    }, [_value]);
+
     const validateText = (text: string) => {
       const valueFormat = formatMoneyToNumber(text, 'đ');
       return formatNumberToMoney(valueFormat, 'đ');

package/Input/index.tsx

@@ -6,13 +6,6 @@ import InputOTP from './InputOTP';
 import InputSearch from './InputSearch';
 import InputTextArea from './InputTextArea';
 
-export interface InputRef {
-  focus: () => void;
-  blur: () => void;
-  clear: () => void;
-  setText: (text: string) => void;
-}
-
 export interface InputProps extends TextInputProps {
   /**
    *  Optional. Defines the size of the Input component.
@@ -105,14 +98,8 @@ export interface InputProps extends TextInputProps {
   hintText?: string;
 }
 
-type InputPropsWithoutSizeAndIcon = Omit<
-  InputProps,
-  'size' | 'icon' | 'iconColor'
->;
-
-type InputPropsWithoutPlaceholder = Omit<InputProps, 'placeholder'>;
-
-export interface InputTextAreaProps extends InputPropsWithoutSizeAndIcon {
+export interface InputTextAreaProps
+  extends Omit<InputProps, 'size' | 'icon' | 'iconColor'> {
   /**
    * Optional. Defines the height of the InputTextArea component.
    * It can be used to set a specific height for the text area.
@@ -132,6 +119,9 @@ export interface InputSearchProps extends TextInputProps {
    */
   showButtonText?: boolean;
 
+  /**
+   * Optional. Represents the value for the floating title in the InputSearch component.
+   */
   onPressButtonText?: () => void;
 
   /**
@@ -145,18 +135,22 @@ export interface InputSearchProps extends TextInputProps {
   icon?: string;
 
   /**
-   *
+   * Optional. If `true`, the user won't be able to interact with the Input component.
    */
   hasColorBG?: boolean;
 
+  /**
+   * Optional. Represents the style of the InputSearch component.
+   */
   params?: any;
 }
 
-export interface InputMoneyProps extends InputPropsWithoutPlaceholder {}
+export interface InputMoneyProps extends Omit<InputProps, 'placeholder'> {}
 
 export type OTPInputLength = 2 | 4 | 6 | 8 | 10;
 
-export interface InputOTPProps extends InputPropsWithoutSizeAndIcon {
+export interface InputOTPProps
+  extends Omit<InputProps, 'size' | 'icon' | 'iconColor'> {
   /**
    * Optional. Defines the length of the OTP (One Time Password) input.
    * Can be 2, 4, 6, 8, or 10.

package/Layout/Screen.tsx

@@ -33,6 +33,9 @@ import styles from './styles';
 import {HeaderType} from './types';
 
 export interface ScreenProps extends ViewProps {
+  /**
+   * ReactNode representing the content of the screen.
+   */
   children: React.ReactNode;
   /**
    * Optional. Navigation object for handling navigation actions.
@@ -90,9 +93,10 @@ export interface ScreenProps extends ViewProps {
   floatingButtonProps?: Omit<FloatingButtonProps, 'animatedValue' | 'bottom'>;
 
   /**
-   * optional animated value
+   * Optional. Keyboard vertical offset.
    */
-  animatedValue?: Animated.Value;
+  keyboardVerticalOffset?: number;
+
   /**
    * Optional. If `true`, the screen content is using grid layout by span.
    */
@@ -115,13 +119,11 @@ const Screen = forwardRef(
       headerType = 'default',
       floatingButtonProps,
       useGridLayout = true,
-      animatedValue: animated,
+      keyboardVerticalOffset,
     }: ScreenProps,
     ref,
   ) => {
-    const animatedValue = useRef<Animated.Value>(
-      animated ?? new Animated.Value(0),
-    );
+    const animatedValue = useRef<Animated.Value>(new Animated.Value(0));
     const {theme} = useContext(ApplicationContext);
     const insets = useSafeAreaInsets();
     const heightHeader = useHeaderHeight();
@@ -132,10 +134,9 @@ const Screen = forwardRef(
     let handleScroll;
     let headerBackground: string | undefined = undefined;
     let Component: any = View;
-    let keyboardVerticalOffset = heightHeader - 20;
-
+    let keyboardOffset = heightHeader - 20;
     if (headerType == 'extended' || animatedHeader) {
-      keyboardVerticalOffset = -20;
+      keyboardOffset = -20;
     }
 
     if (headerType == 'extended') {
@@ -339,7 +340,7 @@ const Screen = forwardRef(
         <KeyboardAvoidingView
           style={Styles.flex}
           enabled={enableKeyboardAvoidingView}
-          keyboardVerticalOffset={keyboardVerticalOffset}
+          keyboardVerticalOffset={keyboardVerticalOffset ?? keyboardOffset}
           behavior={Platform.select({
             ios: 'padding',
             android: undefined,

package/Title/index.tsx

@@ -143,8 +143,14 @@ const Title: FC<TitleProps> = ({
   const renderActionRight = () => {
     if (!showRightAction || showTrailingAction) return false;
 
+    const lineHeight = styleSheet[typography].lineHeight;
+
     return (
-      <View>
+      <View
+        style={{
+          height: lineHeight,
+          justifyContent: 'center',
+        }}>
         {!buttonTitle ? (
           <TouchableOpacity
             onPress={onPressRightAction}
@@ -174,7 +180,6 @@ const Title: FC<TitleProps> = ({
   if (textOnly) {
     return (
       <View style={isSection && styles.margin}>
-        zZ
         <RNText
           numberOfLines={numberOfLines}
           style={[styleSheet[typography], styles.title]}>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.81.1-optimize.18",
+    "version": "0.81.1-optimize.20",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},