@momo-kits/foundation 0.81.32 → 0.81.33

package/Application/utils.tsx

@@ -12,6 +12,11 @@ import {
 } from './Components';
 import {NavigationOptions, Theme} from './types';
 import {Colors} from '../Consts';
+import {NativeModules} from 'react-native';
+
+let config: {
+  [key: string]: any;
+};
 
 /**
  * default options for stack screen
@@ -132,4 +137,21 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
   };
 };
 
-export {getStackOptions, getDialogOptions, getModalOptions, getOptions};
+const getThemeConfig = () => {
+  if (!config) {
+    try {
+      config = JSON.parse(
+        NativeModules?.ConfigsModule?.getConfigSync?.('DESIGN_SYSTEM'),
+      );
+    } catch (e) {}
+  }
+  return config;
+};
+
+export {
+  getStackOptions,
+  getDialogOptions,
+  getModalOptions,
+  getOptions,
+  getThemeConfig,
+};

package/Button/index.tsx

@@ -1,10 +1,13 @@
 import React, {FC, useContext} from 'react';
 import {
+  Animated,
   StyleSheet,
   TouchableOpacity,
   TouchableOpacityProps,
   View,
 } from 'react-native';
+
+import LinearGradient from 'react-native-linear-gradient';
 import {ApplicationContext} from '../Application';
 import {Text} from '../Text';
 import {Typography} from '../Text/types';
@@ -12,6 +15,9 @@ import {Colors, Spacing} from '../Consts';
 import styles from './styles';
 import {Icon} from '../Icon';
 import {Loader} from '../Loader';
+import {getThemeConfig} from '../Application/utils';
+
+const AnimationLinear = Animated.createAnimatedComponent(LinearGradient);
 
 export interface ButtonProps extends TouchableOpacityProps {
   /**
@@ -80,6 +86,15 @@ const Button: FC<ButtonProps> = ({
   ...rest
 }) => {
   const {theme} = useContext(ApplicationContext);
+  const {gradient, color} = getThemeConfig()?.navigationBar?.buttonColors ?? {};
+  let gradientPros;
+  if (gradient?.length > 0 && type == 'primary') {
+    gradientPros = {
+      colors: gradient,
+      start: {x: 1, y: 0.5},
+      end: {x: 0, y: 0.5},
+    };
+  }
   const getSizeStyle = () => {
     const styleSheet: {[key: string]: any} = styles;
     return styleSheet[size ?? 'small'];
@@ -103,7 +118,7 @@ const Button: FC<ButtonProps> = ({
         return {
           backgroundColor: theme.colors.background.surface,
           borderWidth: 1,
-          borderColor: theme.colors.primary,
+          borderColor: color ?? theme.colors.primary,
         };
       case 'tonal':
         return {
@@ -178,13 +193,13 @@ const Button: FC<ButtonProps> = ({
       case 'secondary':
         return theme.colors.text.default;
       case 'outline':
-        return theme.colors.primary;
+        return color ?? theme.colors.primary;
       case 'tonal':
         return theme.colors.primary;
       case 'danger':
         return Colors.black_01;
       case 'text':
-        return theme.colors.primary;
+        return color ?? theme.colors.primary;
       default:
         return Colors.black_01;
     }
@@ -286,6 +301,10 @@ const Button: FC<ButtonProps> = ({
       {renderLeading()}
       {renderTitle()}
       {renderTrailing()}
+      {gradientPros && (
+        <AnimationLinear {...gradientPros} style={styles.gradientView} />
+      )}
+      {gradientPros && <View style={styles.strokeView} />}
     </TouchableOpacity>
   );
 };

package/Button/styles.ts

@@ -38,4 +38,19 @@ export default StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  gradientView: {
+    position: 'absolute',
+    zIndex: -1,
+    borderRadius: 8,
+  },
+  strokeView: {
+    position: 'absolute',
+    top: 2,
+    bottom: 2,
+    left: 2,
+    right: 2,
+    borderRadius: 6,
+    borderWidth: 0.5,
+    borderColor: '#FFF9E1',
+  },
 });

package/Consts/theme.ts

@@ -4,7 +4,7 @@ import {Colors} from './colors+spacing+radius';
 const defaultTheme: Theme = {
   dark: false,
   colors: {
-    primary: Colors.pink_03,
+    primary: '#FF0073',
     secondary: Colors.pink_07,
     background: {
       default: '#f2f2f6',
@@ -53,7 +53,7 @@ const defaultTheme: Theme = {
   font: 'SFProText',
   assets: {
     headerBackground:
-      'https://static.momocdn.net/app/img/app/img/header-background.png',
+      'https://static.momocdn.net/app/img/kits/background/header/header_banner_tet_2024.png',
   },
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.81.32",
+    "version": "0.81.33",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {