@momo-kits/foundation 0.80.9 → 0.81.1

package/Input/InputSearch.tsx

@@ -37,7 +37,7 @@ const InputSearch = forwardRef(
     const [focused, setFocused] = useState(false);
     const [haveValue, setHaveValue] = useState(!!value || !!defaultValue);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
-    let iconTintColor = iconColor;
+    const accessibilityLabel = `InputMoney/${placeholder}`;
 
     const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
       setFocused(true);
@@ -60,19 +60,16 @@ const InputSearch = forwardRef(
     };
 
     const renderInputView = () => {
-      let textColor = theme.colors.text.default;
-      let placeholderColor = theme.colors.text.hint;
-
       return (
         <TextInput
           {...props}
-          accessibilityLabel={`TextInput`}
+          accessibilityLabel={accessibilityLabel}
           textAlignVertical="top"
           ref={inputRef}
           style={[
             styles.searchInput,
             {
-              color: textColor,
+              color: theme.colors.text.default,
             },
           ]}
           value={value}
@@ -81,7 +78,7 @@ const InputSearch = forwardRef(
           onBlur={_onBlur}
           placeholder={placeholder}
           selectionColor={theme.colors.primary}
-          placeholderTextColor={placeholderColor}
+          placeholderTextColor={theme.colors.text.hint}
         />
       );
     };
@@ -112,7 +109,7 @@ const InputSearch = forwardRef(
                 ]}
               />
               <Icon
-                color={iconTintColor}
+                color={iconColor}
                 source={icon}
                 style={styles.iconSearchInput}
               />
@@ -124,7 +121,7 @@ const InputSearch = forwardRef(
     return (
       <View
         style={[style, styles.searchInputContainer]}
-        accessibilityLabel={`InputSearch/${placeholder}`}>
+        accessibilityLabel={accessibilityLabel}>
         <View
           style={[
             styles.searchInputWrapper,

package/Input/InputTextArea.tsx

@@ -37,6 +37,7 @@ const InputTextArea = forwardRef(
       maxLength,
       required,
       errorSpacing,
+      style,
       ...props
     }: InputTextAreaProps,
     ref,
@@ -45,6 +46,7 @@ const InputTextArea = forwardRef(
     const [focused, setFocused] = useState(false);
     const [inputValue, setInputValue] = useState(defaultValue ?? '');
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
+    const accessibilityLabel = `InputTextArea/${floatingValue ?? placeholder}`;
 
     const onClearText = () => {
       inputRef?.current?.clear();
@@ -106,7 +108,7 @@ const InputTextArea = forwardRef(
             <View style={styles.textAreaView}>
               <TextInput
                 {...props}
-                accessibilityLabel={`TextInput`}
+                accessibilityLabel={accessibilityLabel}
                 ref={inputRef}
                 editable={!disabled}
                 textAlignVertical="top"
@@ -147,8 +149,8 @@ const InputTextArea = forwardRef(
 
     return (
       <View
-        style={styles.wrapper}
-        accessibilityLabel={`InputTextArea/${floatingValue}`}>
+        style={[style, styles.wrapper]}
+        accessibilityLabel={accessibilityLabel}>
         {renderInputView()}
         <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
       </View>

package/Input/common.tsx

@@ -1,6 +1,6 @@
 import {View, ViewStyle} from 'react-native';
 import styles from './styles';
-import {Text} from '../Text';
+import {scaleSize, Text} from '../Text';
 import React, {FC, useContext} from 'react';
 import {ApplicationContext} from '../Application';
 import {Icon} from '../Icon';
@@ -16,7 +16,7 @@ type FloatingViewProps = {
   style?: ViewStyle;
 };
 
-export const DEFAULT_HEIGHT = 112;
+export const DEFAULT_HEIGHT = scaleSize(104);
 export const MAX_LENGTH = 300;
 
 export const getBorderColor = (

package/Input/index.tsx

@@ -4,7 +4,7 @@ import InputSearch from './InputSearch';
 import InputMoney from './InputMoney';
 import InputOTP from './InputOTP';
 import InputDropDown from './InputDropDown';
-import {TextInputProps} from 'react-native';
+import {TextInputProps, ViewStyle} from 'react-native';
 
 export interface InputProps extends TextInputProps {
   /**
@@ -238,6 +238,8 @@ export interface InputDropDownProps {
    * Optional. Represents the color of the leading icon in the InputDropDown component.
    */
   leadingIconColor?: string;
+
+  style: ViewStyle | ViewStyle[];
 }
 
 export {Input, InputTextArea, InputSearch, InputMoney, InputOTP, InputDropDown};

package/Layout/Card.tsx

@@ -7,16 +7,23 @@ import Item from './Item';
 import {Image} from '../Image';
 import {ApplicationContext} from '../Application';
 import styles from './styles';
-import {Colors, Spacing} from '../Consts';
+import {Colors, Shadow, Spacing} from '../Consts';
 
 export interface CardProps extends ViewProps {
   /**
    * Optional. Background image for the card.
    */
   backgroundImage?: string;
+
+  useShadow?: boolean;
 }
 
-const Card: React.FC<CardProps> = ({children, style, backgroundImage}) => {
+const Card: React.FC<CardProps> = ({
+  children,
+  style,
+  backgroundImage,
+  useShadow = false,
+}) => {
   const {showGrid} = useContext(ApplicationContext);
   const {numberOfColumns} = useGridSystem();
 
@@ -127,6 +134,7 @@ const Card: React.FC<CardProps> = ({children, style, backgroundImage}) => {
     return element;
   };
 
+  const {theme} = useContext(ApplicationContext);
   return (
     <GridContext.Provider value={gridContext}>
       <View
@@ -137,12 +145,14 @@ const Card: React.FC<CardProps> = ({children, style, backgroundImage}) => {
           {
             width: widthSection,
             marginHorizontal: gridContext.margin,
+            backgroundColor: theme.colors.background.surface,
           },
+          useShadow && Shadow.Light,
         ]}>
         {!!backgroundImage && (
           <Image
             source={{uri: backgroundImage}}
-            style={[style, styles.imageBackground]}
+            style={styles.imageBackground}
           />
         )}
         {renderView(validateChildren(children, [Item]))}

package/Layout/Screen.tsx

@@ -1,6 +1,9 @@
 import {
   Animated,
+  Image,
   KeyboardAvoidingView,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
   Platform,
   ScrollViewProps,
   View,
@@ -8,13 +11,26 @@ import {
 } from 'react-native';
 import {useHeaderHeight} from '@react-navigation/stack';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
-import React, {ReactNode, useContext, useEffect, useRef} from 'react';
-import {Spacing, Styles} from '../Consts';
+import React, {
+  forwardRef,
+  ReactNode,
+  useContext,
+  useEffect,
+  useRef,
+} from 'react';
+import {Colors, Spacing, Styles} from '../Consts';
 import {Card, Section, validateChildren} from './index';
-import {ApplicationContext, HeaderTitle} from '../Application';
+import {
+  ApplicationContext,
+  HeaderBackground,
+  HeaderTitle,
+} from '../Application';
 import Navigation from '../Application/Navigation';
+import styles from './styles';
+import {AnimatedHeader, NavigationOptions} from '../Application/types';
 
 export interface ScreenProps extends ViewProps {
+  children: React.ReactNode;
   /**
    * Optional. Navigation object for handling navigation actions.
    */
@@ -25,25 +41,20 @@ export interface ScreenProps extends ViewProps {
    */
   enableKeyboardAvoidingView?: boolean;
 
-  /**
-   * Optional. Background color of the header.
-   */
-  headerBackground?: string;
-
   /**
    * Optional. If `true`, the screen content is scrollable.
    */
   scrollable?: boolean;
 
   /**
-   * Optional. If `true`, use an animated header for the screen.
+   * Optional. If `true`, use an extended header for the screen.
    */
-  useAnimatedHeader?: boolean;
+  useExtendedHeader?: boolean;
 
   /**
-   * Optional. If `true`, use an extended header for the screen.
+   * Optional. Props for the animated component or bool used top navigation animated.
    */
-  useExtendedHeader?: boolean;
+  animatedHeader?: AnimatedHeader;
 
   /**
    * Optional. Props for the underlying ScrollView component when `scrollable` is `true`.
@@ -51,206 +62,242 @@ export interface ScreenProps extends ViewProps {
   scrollViewProps?: ScrollViewProps;
 
   /**
-   * Optional. ReactNode representing the footer component of the screen.
+   * Optional. ReactNode representing the header component of the screen.
    */
-  footerComponent?: ReactNode;
+  headerComponent?: ReactNode;
 
   /**
-   * Optional. Margin for the header component.
+   * Optional. ReactNode representing the footer component of the screen.
    */
-  marginHeader?: number;
+  footerComponent?: ReactNode;
 
   /**
    * Optional. Background color of the screen.
    */
   backgroundColor?: string;
-}
-
-const Screen: React.FC<ScreenProps> = ({
-  children,
-  enableKeyboardAvoidingView = false,
-  scrollable = false,
-  navigation,
-  marginHeader,
-  useAnimatedHeader,
-  useExtendedHeader,
-  headerBackground,
-  scrollViewProps,
-  footerComponent: Footer,
-  backgroundColor,
-}) => {
-  const animatedValue = useRef<Animated.Value | undefined>(undefined);
-  const {theme} = useContext(ApplicationContext);
-  const insets = useSafeAreaInsets();
-  const headerTransparent = useAnimatedHeader || useExtendedHeader;
-
-  let handleScroll;
-  let imageAnimatedStyle = {};
-  let opacity;
-  let Component: any = View;
-  animatedValue.current = undefined;
 
   /**
-   * automatic margin content if use header transparent
+   * Optional. layout card offset overlap header banner.
    */
-  if (headerTransparent) {
-    animatedValue.current = new Animated.Value(0);
-    marginHeader = marginHeader ?? useHeaderHeight();
+  layoutOffset?: -8 | -24 | -56;
+}
+
+const Screen = forwardRef(
+  (
+    {
+      children,
+      enableKeyboardAvoidingView = false,
+      scrollable = false,
+      navigation,
+      useExtendedHeader,
+      animatedHeader,
+      scrollViewProps,
+      headerComponent: Header,
+      footerComponent: Footer,
+      layoutOffset = -56,
+      backgroundColor,
+    }: ScreenProps,
+    ref,
+  ) => {
+    const animatedValue = useRef<Animated.Value | undefined>(undefined);
+    const {theme} = useContext(ApplicationContext);
+    const insets = useSafeAreaInsets();
+    const heightHeader = useHeaderHeight();
+    const currentTint = useRef(Colors.black_01);
+    let styleAnimatedHeader: NavigationOptions;
+    let handleScroll;
+    let headerBackground: string | undefined = undefined;
+    let Component: any = View;
+    animatedValue.current = undefined;
+
     if (useExtendedHeader) {
       headerBackground = theme.assets?.headerBackground;
     }
-  }
 
-  useEffect(() => {
-    if (useAnimatedHeader != undefined || useExtendedHeader != undefined) {
-      let title = {};
+    useEffect(() => {
       if (useExtendedHeader) {
-        title = {headerTitle: HeaderTitle};
+        navigation?.setOptions({
+          headerTransparent: true,
+          headerBackground: () => null,
+        });
       }
-      navigation?.setOptions({
-        animatedValue: animatedValue.current,
-        headerTransparent: headerTransparent,
-        ...title,
-      });
-    }
-  }, [useExtendedHeader, useAnimatedHeader]);
+    }, [useExtendedHeader]);
 
-  /**
-   * animated for header stack when used bottom tab
-   */
-  useEffect(() => {
-    const current: any = navigation;
-    if (headerTransparent) {
-      return current?.addListener?.('focus', () => {
-        const stackNavigation = new Navigation(current?.getParent(), theme);
-        stackNavigation?.setOptions({
-          animatedValue: animatedValue.current,
-        });
-      });
-    }
-  }, [useAnimatedHeader, useExtendedHeader, navigation]);
+    useEffect(() => {
+      if (animatedHeader) {
+        styleAnimatedHeader = {
+          headerTransparent: true,
+          headerBackground: (props: any) => (
+            <HeaderBackground
+              {...props}
+              animatedValue={animatedValue.current}
+            />
+          ),
+          headerTitle: (props: any) => (
+            <HeaderTitle {...props} animatedValue={animatedValue.current} />
+          ),
+        };
+        if (animatedHeader.type == 'surface') {
+          styleAnimatedHeader = {
+            headerTransparent: true,
+            headerBackground: (props: any) => (
+              <HeaderBackground
+                {...props}
+                image={null}
+                backgroundColor={theme.colors.background.surface}
+                useBorder={true}
+                animatedValue={animatedValue.current}
+              />
+            ),
+          };
+        }
+        navigation?.setOptions(styleAnimatedHeader);
+        const current: any = navigation;
+        const parent = current?.getParent?.();
+        if (parent) {
+          return current?.addListener?.('focus', () => {
+            const stackNavigation = new Navigation(parent, theme);
+            stackNavigation?.setOptions(styleAnimatedHeader);
+          });
+        }
+      }
+    }, [animatedHeader]);
 
-  /**
-   * animated when use scroll && animated value
-   */
-  if (scrollable) {
-    Component = Animated.ScrollView;
-    if (useAnimatedHeader) {
-      opacity = animatedValue.current?.interpolate({
-        inputRange: [0, 100],
-        outputRange: [1, 0],
-        extrapolate: 'clamp',
-      });
-      imageAnimatedStyle = {
-        transform: [
-          {
-            scale: animatedValue.current?.interpolate?.({
-              inputRange: [-300, 0, 1],
-              outputRange: [1.75, 1, 1],
-              extrapolate: 'clamp',
-            }),
-          },
-        ],
-      };
-      handleScroll = Animated.event(
-        [
+    /**
+     * animated when use scroll && animated value
+     */
+    if (scrollable) {
+      Component = Animated.ScrollView;
+      handleScroll = scrollViewProps?.onScroll;
+      if (animatedHeader) {
+        animatedValue.current = new Animated.Value(0);
+        handleScroll = Animated.event(
+          [
+            {
+              nativeEvent: {
+                contentOffset: {y: animatedValue.current as Animated.Value},
+              },
+            },
+          ],
           {
-            nativeEvent: {
-              contentOffset: {y: animatedValue.current as Animated.Value},
+            useNativeDriver: true,
+            listener: (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+              if (animatedHeader.type == 'surface') {
+                const offsetY = e.nativeEvent.contentOffset.y;
+                let color = Colors.black_01;
+                if (offsetY > 50) {
+                  color = theme.colors.text.default;
+                }
+                if (color != currentTint.current) {
+                  currentTint.current = color;
+                  navigation?.setOptions({
+                    headerTintColor: color,
+                  });
+                }
+              }
+              scrollViewProps?.onScroll?.(e);
             },
           },
-        ],
-        {useNativeDriver: true},
-      );
+        );
+      }
     }
-  }
 
-  /**
-   * build content for screen
-   */
-  const renderContent = () => {
-    const results = validateChildren(children, [Section, Card]);
-    if (Array.isArray(results)) {
-      return results.map((item, index) => {
-        const space = item.props?.useMargin === false ? 0 : Spacing.M;
+    /**
+     * render top navigation banner
+     */
+    const renderHeader = () => {
+      if (typeof animatedHeader?.component === 'function') {
+        return animatedHeader?.component({
+          animatedValue: animatedValue.current,
+        });
+      }
+    };
+
+    /**
+     * build content for screen
+     */
+    const renderContent = () => {
+      const results = validateChildren(children, [Section, Card]);
+      if (Array.isArray(results)) {
+        return results.map((item, index) => {
+          const space = item.props?.useMargin === false ? 0 : Spacing.M;
+          return (
+            <View
+              key={`ScreenItem${index}`}
+              style={{
+                marginTop: space,
+                flex: item.props?.expanded ? 1 : undefined,
+              }}>
+              {item}
+            </View>
+          );
+        });
+      } else {
+        const item: any = children;
+        const space = item?.props?.useMargin === false ? 0 : Spacing.M;
         return (
           <View
-            key={`ScreenItem${index}`}
+            key={`ScreenItem`}
             style={{
               marginTop: space,
-              flex: item.props?.expanded ? 1 : undefined,
+              flex: item?.props?.expanded ? 1 : undefined,
             }}>
-            {item}
+            {children}
           </View>
         );
-      });
-    } else {
-      const item: any = children;
-      const space = item?.props?.useMargin === false ? 0 : Spacing.M;
-      return (
-        <View
-          key={`ScreenItem`}
-          style={{
-            marginTop: space,
-            flex: item?.props?.expanded ? 1 : undefined,
-          }}>
-          {children}
-        </View>
-      );
-    }
-  };
+      }
+    };
 
-  return (
-    <View
-      style={[Styles.flex, {backgroundColor}]}
-      accessibilityLabel={`ScreenContainer`}>
+    return (
       <View
-        style={{
-          position: 'absolute',
-          maxHeight: 215,
-          width: '100%',
-          overflow: 'hidden',
-        }}>
+        style={[Styles.flex, {backgroundColor}]}
+        accessibilityLabel={`ScreenContainer`}>
         {!!headerBackground && (
-          <Animated.Image
-            source={{
-              uri: headerBackground,
-            }}
-            style={{
-              opacity: opacity ?? 1,
-              aspectRatio: 1.75,
-              ...imageAnimatedStyle,
-            }}
-          />
+          <>
+            <Image
+              source={{
+                uri: headerBackground,
+              }}
+              style={styles.extendedHeader}
+            />
+            <View style={{height: heightHeader}} />
+          </>
         )}
+        <KeyboardAvoidingView
+          style={Styles.flex}
+          enabled={enableKeyboardAvoidingView}
+          behavior={Platform.select({
+            ios: 'padding',
+            android: undefined,
+          })}>
+          {Header}
+          <Component
+            {...scrollViewProps}
+            ref={ref}
+            heightHeader={heightHeader}
+            showsVerticalScrollIndicator={false}
+            onScroll={handleScroll}
+            style={Styles.flex}>
+            <View
+              style={[styles.screenBanner, {maxHeight: 210 + layoutOffset}]}>
+              {renderHeader()}
+            </View>
+            {renderContent()}
+          </Component>
+          {Footer && (
+            <View
+              style={{
+                paddingTop: Spacing.S,
+                paddingBottom: Math.min(insets.bottom, 20) + Spacing.S,
+                backgroundColor: theme.colors.background.surface,
+              }}>
+              <Section>{Footer}</Section>
+            </View>
+          )}
+        </KeyboardAvoidingView>
       </View>
-      <KeyboardAvoidingView
-        style={Styles.flex}
-        enabled={enableKeyboardAvoidingView}
-        behavior={Platform.select({
-          ios: 'padding',
-          android: undefined,
-        })}>
-        <Component
-          {...scrollViewProps}
-          showsVerticalScrollIndicator={false}
-          onScroll={handleScroll}
-          style={[Styles.flex, {marginTop: marginHeader}]}>
-          {renderContent()}
-        </Component>
-        {Footer && (
-          <View
-            style={{
-              paddingTop: Spacing.S,
-              paddingBottom: Math.min(insets.bottom, 20) + Spacing.S,
-              backgroundColor: theme.colors.background.surface,
-            }}>
-            <Section>{Footer}</Section>
-          </View>
-        )}
-      </KeyboardAvoidingView>
-    </View>
-  );
-};
+    );
+  },
+);
 
 export default Screen;

package/Layout/styles.ts

@@ -1,6 +1,16 @@
 import {StyleSheet} from 'react-native';
+import {Radius, Spacing} from '../Consts';
 
 export default StyleSheet.create({
+  extendedHeader: {
+    aspectRatio: 1.75,
+    position: 'absolute',
+    width: '100%',
+    height: 210,
+  },
+  screenBanner: {
+    width: '100%',
+  },
   boxGrid: {
     position: 'absolute',
     top: 0,
@@ -34,6 +44,7 @@ export default StyleSheet.create({
   card: {
     flexDirection: 'row',
     flexWrap: 'wrap',
+    borderRadius: Radius.M,
     paddingTop: undefined,
     paddingBottom: undefined,
     paddingLeft: undefined,
@@ -64,5 +75,6 @@ export default StyleSheet.create({
     bottom: 0,
     left: 0,
     right: 0,
+    borderRadius: Spacing.M,
   },
 });