@momo-kits/foundation 0.92.6-rc.22 → 0.92.6-rc.24

package/Application/Components.tsx

@@ -183,15 +183,18 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
 
 const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
   image,
-  backgroundColor,
   animatedValue,
-  useBorder = false,
+  useSurface = false,
 }) => {
   const {theme} = useContext(ApplicationContext);
   let headerImage = theme.assets?.headerBackground;
+  let backgroundColor;
   if (image === null) {
     headerImage = undefined;
   }
+  if (useSurface) {
+    backgroundColor = theme.colors.background.default;
+  }
   const opacity = animatedValue?.interpolate({
     inputRange: [0, 114],
     outputRange: [0, 1],
@@ -203,9 +206,9 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
       style={[
         Styles.flex,
         {
-          backgroundColor: backgroundColor ?? theme.colors.background.default,
+          backgroundColor,
           overflow: 'hidden',
-          borderBottomWidth: useBorder ? 1 : 0,
+          borderBottomWidth: useSurface ? 1 : 0,
           borderColor: theme.colors.border.default,
           opacity,
         },

package/Application/types.ts

@@ -165,9 +165,8 @@ export interface HeaderBackProps extends NavigationButtonProps {
 
 export type HeaderBackgroundProps = {
   image?: string | null;
-  backgroundColor?: string | null;
   animatedValue?: Animated.Value;
-  useBorder?: boolean;
+  useSurface?: boolean;
 };
 
 export type TitleCustomProps = {
@@ -223,4 +222,5 @@ export type FloatingButtonProps = {
 export type AnimatedHeader = {
   type: 'default' | 'surface';
   component?: (props?: any) => React.ReactElement;
+  headerTitle?: (props?: any) => React.ReactElement;
 };

package/Application/utils.tsx

@@ -100,11 +100,7 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
         ...options,
         headerTintColor: theme.colors.text.default,
         headerBackground: () => (
-          <HeaderBackground
-            image={null}
-            backgroundColor={theme.colors.background.surface}
-            useBorder={true}
-          />
+          <HeaderBackground image={null} useSurface={true} />
         ),
       };
     } else {

package/Button/index.tsx

@@ -58,7 +58,7 @@ export interface ButtonProps extends TouchableOpacityProps {
   /**
    *  If true, the icon of button will use the tint color provided by its container.
    */
-  useTintColor?: boolean;
+  tintColor?: string;
 
   /**
    *  If true, the icon of button will use be show indicator loading.
@@ -76,7 +76,7 @@ export interface ButtonProps extends TouchableOpacityProps {
 const Button: FC<ButtonProps> = ({
   type = 'primary',
   size = 'large',
-  useTintColor = true,
+  tintColor = null,
   full = true,
   iconRight,
   iconLeft,
@@ -231,7 +231,7 @@ const Button: FC<ButtonProps> = ({
   const renderLeading = () => {
     const iconSize = getIconSize();
     const marginRight = getIconSpace();
-    const color = useTintColor ? getTextColor() : undefined;
+    const color = tintColor ?? getTextColor();
 
     if (loading) {
       return (
@@ -245,7 +245,7 @@ const Button: FC<ButtonProps> = ({
               borderRadius: Spacing.M,
             },
           ]}>
-          <Loader type="spinner" color={color} />
+          <Loader type="spinner" color={getTextColor()} />
         </View>
       );
     }
@@ -266,7 +266,7 @@ const Button: FC<ButtonProps> = ({
    * render trailing
    */
   const renderTrailing = () => {
-    const color = useTintColor ? getTextColor() : undefined;
+    const color = tintColor ?? getTextColor();
     const marginLeft = getIconSpace();
 
     if (iconRight) {

package/Layout/Screen.tsx

@@ -158,18 +158,27 @@ const Screen = forwardRef(
         };
         if (animatedHeader.type == 'surface') {
           styleAnimatedHeader = {
-            headerTransparent: true,
+            ...styleAnimatedHeader,
             headerBackground: (props: any) => (
               <HeaderBackground
                 {...props}
                 image={null}
-                backgroundColor={theme.colors.background.surface}
-                useBorder={true}
+                useSurface={true}
                 animatedValue={animatedValue.current}
               />
             ),
           };
         }
+        if (animatedHeader.headerTitle) {
+          styleAnimatedHeader = {
+            ...styleAnimatedHeader,
+            headerTitle: (props: any) =>
+              animatedHeader.headerTitle?.({
+                ...props,
+                animatedValue: animatedValue.current,
+              }),
+          };
+        }
         navigation?.setOptions(styleAnimatedHeader);
       }
     }, [animatedHeader]);
@@ -192,12 +201,7 @@ const Screen = forwardRef(
               headerShown: true,
               headerTintColor: theme.colors.text.default,
               headerBackground: (props: any) => (
-                <HeaderBackground
-                  {...props}
-                  image={null}
-                  backgroundColor={theme.colors.background.surface}
-                  useBorder={true}
-                />
+                <HeaderBackground {...props} image={null} useSurface={true} />
               ),
               headerTitle: (props: any) => <HeaderTitle {...props} />,
             };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.92.6-rc.22",
+    "version": "0.92.6-rc.24",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},