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

package/Application/NavigationContainer.tsx

@@ -41,17 +41,22 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
     enableForceFoundationList: false,
     enableHapticBottomTab: true,
     scaleSizeMaxRate: 1.5,
+    showBaseLineDebug: false,
   },
 }) => {
   const context = useContext<any>(MiniAppContext);
   const [currentContext, setCurrentContext] = useState({});
+
   return (
     <SafeAreaProvider>
       <MiniAppContext.Provider
         value={{
           ...context,
           ...currentContext,
-          features,
+          features: {
+            ...context?.features,
+            ...features,
+          },
         }}
       >
         <Navigation

package/Application/types.ts

@@ -142,11 +142,12 @@ export type Tool = {
   onPress: () => void;
 };
 
-export type FeaturesFlag = {
+export type FeatureFlags = {
   enableFoundationList?: boolean;
   enableBottomTabAnimation?: boolean;
   enableHapticBottomTab?: boolean;
   enableHapticDialog?: boolean;
+  showBaseLineDebug?: boolean;
 };
 
 export type NavigationContainerProps = {
@@ -156,7 +157,7 @@ export type NavigationContainerProps = {
   maxApi: any;
   initialParams?: any;
   localize: LocalizeProps;
-  features?: FeaturesFlag;
+  features?: FeatureFlags;
 };
 
 export type WidgetContainerProps = {

package/Input/Input.tsx

@@ -70,6 +70,7 @@ const Input = forwardRef(
   ) => {
     const { theme } = useContext(ApplicationContext);
     const scaledFontSize = useScaleSize(14);
+    const scaleHeight = useScaleSize(size === 'small' ? 48 : 56, 1.1);
     const [focused, setFocused] = useState(false);
     const haveValue = !!value || !!defaultValue;
     const inputRef = useRef<TextInput | null>(null);
@@ -135,7 +136,7 @@ const Input = forwardRef(
           style={[
             styles.inputWrapper,
             { backgroundColor: theme.colors.background.surface },
-            getSizeStyle(size),
+            getSizeStyle(size, undefined, scaleHeight),
             getBorderColor(theme, focused, errorMessage, disabled),
           ]}
         >

package/Input/InputDropDown.tsx

@@ -10,7 +10,7 @@ import {
   getSizeStyle,
 } from './common';
 import { InputDropDownProps } from './index';
-import { Text } from '../Text';
+import { Text, useScaleSize } from '../Text';
 import styles from './styles';
 import { Spacing } from '../Consts';
 
@@ -35,6 +35,7 @@ const InputDropDown = ({
   ...props
 }: InputDropDownProps) => {
   const { theme } = useContext(ApplicationContext);
+  const scaleHeight = useScaleSize(size === 'small' ? 48 : 56, 1.1);
   const componentName = 'InputDropDown';
 
   const { componentId } = useComponentId(
@@ -60,7 +61,7 @@ const InputDropDown = ({
         style={[
           styles.inputDropDownWrapper,
           { backgroundColor: theme.colors.background.surface },
-          getSizeStyle(size, multiline),
+          getSizeStyle(size, multiline, scaleHeight),
           getBorderColor(theme, false, errorMessage, disabled as boolean),
         ]}
       >

package/Input/InputMoney.tsx

@@ -62,6 +62,7 @@ const InputMoney = forwardRef(
     ref,
   ) => {
     const { theme } = useContext(ApplicationContext);
+    const scaleHeight = useScaleSize(size === 'small' ? 48 : 56, 1.1);
     const scaledFontSize = useScaleSize(20);
     const [focused, setFocused] = useState(false);
     const [displayValue, setDisplayValue] = useState('');
@@ -198,7 +199,7 @@ const InputMoney = forwardRef(
           style={[
             styles.inputWrapper,
             { backgroundColor: theme.colors.background.surface },
-            getSizeStyle(size),
+            getSizeStyle(size, undefined, scaleHeight),
             getBorderColor(theme, focused, errorMessage, disabled),
           ]}
         >

package/Input/InputPhoneNumber.tsx

@@ -62,6 +62,7 @@ const InputPhoneNumber = forwardRef(
     ref,
   ) => {
     const { theme } = useContext(ApplicationContext);
+    const scaleHeight = useScaleSize(size === 'small' ? 48 : 56, 1.1);
     const [focused, setFocused] = useState(false);
     const haveValue = !!value || !!defaultValue;
     const inputRef = useRef<TextInput | null>(null);
@@ -142,7 +143,7 @@ const InputPhoneNumber = forwardRef(
           style={[
             styles.inputWrapper,
             { backgroundColor: theme.colors.background.surface },
-            getSizeStyle(size),
+            getSizeStyle(size, undefined, scaleHeight),
             { borderWidth },
             getBorderColor(theme, focused, errorMessage, disabled),
           ]}

package/Input/common.tsx

@@ -61,8 +61,12 @@ export const getBorderColor = (
 export const getSizeStyle = (
   size?: 'small' | 'large',
   multiline: boolean = false,
+  height?: number,
 ) => {
-  const scaleInputHeight = useScaleSize(size === 'small' ? 48 : 56, 1.1);
+  let scaleStyle: ViewStyle = {};
+  if (height) {
+    scaleStyle = { height };
+  }
 
   if (multiline)
     return [
@@ -70,13 +74,15 @@ export const getSizeStyle = (
       {
         minHeight: size === 'small' ? 48 : 56,
       },
+      scaleStyle,
     ];
 
   if (size === 'small') {
-    return [styles.smallContainer, { height: scaleInputHeight }];
+    return [styles.smallContainer, scaleStyle];
   }
-  return [styles.container, { height: scaleInputHeight }];
+  return [styles.container, scaleStyle];
 };
+
 export const ErrorView: FC<{
   errorMessage?: string;
   errorSpacing?: boolean;

package/Text/index.tsx

@@ -2,10 +2,13 @@ import React, { useContext } from 'react';
 import { Text as RNText, TextProps as RNTextProps, View } from 'react-native';
 import styles from './styles';
 import { Typography, TypographyWeight } from './types';
-import { ApplicationContext, SkeletonContext } from '../Context';
+import {
+  ApplicationContext,
+  MiniAppContext,
+  SkeletonContext,
+} from '../Context';
 import { scaleSize, useScaleSize } from './utils';
 import { Skeleton } from '../Skeleton';
-import { Colors } from '../Consts';
 
 const SFProText: TypographyWeight = {
   100: 'Thin',
@@ -156,6 +159,7 @@ const Text: React.FC<TextProps> = ({
   ...rest
 }) => {
   const { theme } = useContext(ApplicationContext);
+  const context = useContext<any>(MiniAppContext);
   const skeleton = useContext(SkeletonContext);
   const textStyle = TypoStyles(typography, fontFamily, maxScaleRate);
 
@@ -165,6 +169,8 @@ const Text: React.FC<TextProps> = ({
     );
   }
 
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+
   if (skeleton.loading) {
     return (
       <View style={style}>
@@ -192,10 +198,9 @@ const Text: React.FC<TextProps> = ({
       style={[
         style,
         textStyle,
+        showBaseLineDebug && styles.debugBaseLine,
         {
           color: color ?? theme.colors.text.default,
-          borderWidth: 1,
-          borderColor: Colors.green_06,
         },
       ]}
     >

package/Text/styles.ts

@@ -1,3 +1,5 @@
+import { Colors } from '../Consts';
+
 export default {
   headline_l_bold: { fontSize: 28, lineHeight: 40, fontWeight: '700' },
   headline_default_bold: { fontSize: 24, lineHeight: 34, fontWeight: '700' },
@@ -71,4 +73,6 @@ export default {
   action_xxs: { fontSize: 10, lineHeight: 14, fontWeight: '700' },
   action_xs: { fontSize: 12, lineHeight: 16, fontWeight: '700' },
   action_s: { fontSize: 15, lineHeight: 22, fontWeight: '700' },
+
+  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
 };

package/package.json

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