@momo-kits/foundation 0.92.1-rc.16 → 0.92.1-rc.2

package/Application/BottomTab/BottomTabBar.tsx

@@ -14,6 +14,7 @@ import {
 import React, {useCallback} from 'react';
 import {
   Animated,
+  Dimensions,
   LayoutChangeEvent,
   Platform,
   StyleProp,
@@ -27,8 +28,10 @@ import {EdgeInsets, useSafeAreaInsets} from 'react-native-safe-area-context';
 import {Radius} from '../../Consts';
 import {Icon} from '../../Icon';
 import {Text} from '../../Text';
+import {CurvedViewComponent} from './CurvedView';
+import {getPathUp} from './path';
 import {FloatingButtonProps} from '../types';
-import {getAccessibilityID} from '../utils';
+const {width} = Dimensions.get('window');
 
 type Props = BottomTabBarProps & {
   activeTintColor?: string;
@@ -162,10 +165,10 @@ export default function BottomTabBar({
     tabStyle,
   });
   const focusedRoute = state.routes[state.index] as any;
-  const focusedDescriptor = descriptors[focusedRoute?.key] as any;
-  const focusedOptions = focusedDescriptor?.options;
+  const focusedDescriptor = descriptors[focusedRoute.key] as any;
+  const focusedOptions = focusedDescriptor.options;
   const shouldShowTabBar =
-    focusedOptions?.tabBarVisible !== false && !keyboardHidesTabBar;
+    focusedOptions.tabBarVisible !== false && !keyboardHidesTabBar;
   const [visible] = React.useState(
     () => new Animated.Value(shouldShowTabBar ? 1 : 0),
   );
@@ -173,13 +176,13 @@ export default function BottomTabBar({
   const indicatorAnimated = React.useRef(new Animated.Value(0)).current;
 
   const visibilityAnimationConfigRef = React.useRef(
-    focusedOptions?.tabBarVisibilityAnimationConfig,
+    focusedOptions.tabBarVisibilityAnimationConfig,
   );
   const onHeightChange = React.useContext(BottomTabBarHeightCallbackContext);
   const [isTabBarHidden, setIsTabBarHidden] = React.useState(!shouldShowTabBar);
   React.useEffect(() => {
     visibilityAnimationConfigRef.current =
-      focusedOptions?.tabBarVisibilityAnimationConfig;
+      focusedOptions.tabBarVisibilityAnimationConfig;
   });
 
   const handleLayout = (e: LayoutChangeEvent) => {
@@ -247,12 +250,22 @@ export default function BottomTabBar({
   const leftArr = routes.slice(0, 2);
   const rightArr = routes.slice(2, routes.length);
   const focusedTab = state?.routes[state.index]?.name || routes[0]?.params;
+  const tabBarHeight = getTabBarHeight({
+    state,
+    insets,
+    dimensions,
+    layout,
+    adaptive,
+    labelPosition,
+    tabStyle,
+    style,
+  });
 
   const renderTabItem = useCallback(
     (data: any[]) => {
       return data?.map((route, index) => {
         const focused = route.params.name === focusedTab;
-        const {options} = descriptors[route?.key] as any;
+        const {options} = descriptors[route.key] as any;
         const onPress = () => {
           const event = navigation.emit({
             type: 'tabPress',
@@ -317,7 +330,6 @@ export default function BottomTabBar({
                 labelStyle={labelStyle}
                 iconStyle={iconStyle}
                 style={tabStyle}
-                {...getAccessibilityID(`btn_tabbar_${route.name}`)}
               />
             </NavigationRouteContext.Provider>
           </NavigationContext.Provider>
@@ -410,6 +422,7 @@ export default function BottomTabBar({
           position: isTabBarHidden ? 'absolute' : (null as any),
         },
         {
+          // height: tabBarHeight,
           paddingBottom: paddingBottom - 0,
           paddingHorizontal: Math.max(insets.left, insets.right),
         },
@@ -418,7 +431,15 @@ export default function BottomTabBar({
       pointerEvents={isTabBarHidden ? 'none' : 'auto'}
       onLayout={handleLayout}>
       <View style={styles.content}>
-        {isFloating && floatingButton?.container}
+        {isFloating && (
+          <CurvedViewComponent
+            width={width}
+            height={61 + Math.min(insets.bottom, 21)}
+            style={styles.curved}
+            bgColor="white"
+            path={getPathUp(width, tabBarHeight, 50, false, 'CENTER')}
+          />
+        )}
         <Animated.View
           style={{
             width: itemWidth,
@@ -433,18 +454,25 @@ export default function BottomTabBar({
             ]}
           />
         </Animated.View>
-        {isFloating ? renderTabItem(leftArr) : renderTabItem(routes)}
-        {isFloating && renderCenterComponent()}
-        {isFloating && renderTabItem(rightArr)}
+
+        {renderTabItem(leftArr)}
+        {renderCenterComponent()}
+        {renderTabItem(rightArr)}
       </View>
     </Animated.View>
   );
 }
 
 const styles = StyleSheet.create({
+  curved: {
+    position: 'absolute',
+    bottom: 0,
+    // backgroundColor: 'red',
+  },
   content: {
     flex: 1,
     flexDirection: 'row',
+    // backgroundColor: 'red',
   },
   tabBar: {
     left: 0,
@@ -458,7 +486,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     left: 0,
     right: 0,
-    bottom: Platform.OS === 'ios' ? -6 : 0,
+    bottom: -6,
   },
   floatingContent: {
     alignItems: 'center',

package/Application/BottomTab/CurvedView.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import {StyleProp, View, ViewStyle} from 'react-native';
+import {Path, Svg} from 'react-native-svg';
+
+interface ICurvedView {
+  style?: StyleProp<ViewStyle>;
+  width: number;
+  height: number;
+  bgColor: string;
+  path: any;
+}
+
+export type CurvedView = React.FC<ICurvedView>;
+
+const CurvedContainer: CurvedView = props => {
+  const {style, width, height, bgColor, path} = props;
+
+  return (
+    <View style={style} pointerEvents="none">
+      <Svg width={width} height={height}>
+        <Path fill={bgColor} {...{d: path}} />
+      </Svg>
+    </View>
+  );
+};
+
+export const CurvedViewComponent: CurvedView = React.memo(CurvedContainer);

package/Application/BottomTab/index.tsx

@@ -4,13 +4,13 @@ import {createStackNavigator} from '@react-navigation/stack';
 import React, {useContext, useEffect} from 'react';
 import {Platform} from 'react-native';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import BottomTabBar from './BottomTabBar';
 import {Icon} from '../../Icon';
 import {Text} from '../../Text';
 import {ApplicationContext} from '../index';
+import {getAccessibilityID, getStackOptions} from '../utils';
 import StackScreen from '../StackScreen';
 import {BottomTabProps, NavigationScreenProps} from '../types';
-import {getAccessibilityID, getStackOptions} from '../utils';
-import BottomTabBar from './BottomTabBar';
 
 const Tab = createBottomTabNavigator();
 const Stack = createStackNavigator();
@@ -63,14 +63,11 @@ const BottomTab: React.FC<BottomTabProps> = ({
 
   return (
     <Tab.Navigator
+      {...getAccessibilityID('tbr_main_bottom')}
       initialRouteName={initialRouteName}
       backBehavior={'firstRoute'}
       tabBar={props => (
-        <BottomTabBar
-          {...getAccessibilityID('tbr_main_bottom')}
-          {...props}
-          floatingButton={floatingButton}
-        />
+        <BottomTabBar {...props} floatingButton={floatingButton} />
       )}
       tabBarOptions={{
         style: {
@@ -84,6 +81,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
       {tabs.map(item => {
         return (
           <Tab.Screen
+            {...getAccessibilityID(`btn_tabbar_${item.name}`)}
             key={item.name}
             name={item.name}
             component={TabScreen}

package/Application/BottomTab/path.ts

@@ -0,0 +1,202 @@
+import * as shape from 'd3-shape';
+import {Platform} from 'react-native';
+
+export const TABBAR_ITEM_TOP = Platform.OS === 'ios' ? 8 : 4;
+export const CIRCLE_SIZE = 50;
+export const TABBAR_ITEM_ICON_SIZE = 28;
+export const CIRCLE_POSITION_TOP =
+  CIRCLE_SIZE - TABBAR_ITEM_ICON_SIZE - TABBAR_ITEM_TOP;
+export const CIRCLE_OVER_SIZE = 10;
+export const CIRCLE_OVER_TOP = CIRCLE_POSITION_TOP + CIRCLE_OVER_SIZE;
+
+export const scale = (number: number) => {
+  return number;
+};
+
+const line = (width: number, height: number) => {
+  const path = (shape as any)
+    .line()
+    .x((d: {x: any}) => d.x)
+    .y((d: {y: any}) => d.y)([
+    {x: width / 2, y: scale(CIRCLE_OVER_TOP)},
+    {x: 0, y: scale(CIRCLE_OVER_TOP)},
+    {x: 0, y: height},
+    {x: width, y: height},
+    {x: width, y: scale(CIRCLE_OVER_TOP)},
+    {x: width / 2, y: scale(CIRCLE_OVER_TOP)},
+  ]);
+  //M195,30L0,30L0,106L390,106L390,30L195,30
+  // MaxApi.copyToClipboard(path, 'copied');
+  return path;
+};
+
+//** Path Line Border Left Right Up */
+const lineBorder = (width: number, height: number) => {
+  const border = (shape as any)
+    .line()
+    .x((d: {x: any}) => d.x)
+    .y((d: {y: any}) => d.y)
+    .curve(shape.curveBasis)([
+    // right
+    {x: width / 2, y: scale(30)},
+    {x: width - scale(20), y: scale(30)},
+    {x: width - scale(10), y: scale(32)},
+    {x: width - scale(2), y: scale(40)},
+    {x: width, y: scale(50)},
+    {x: width, y: height},
+    {x: width, y: height},
+    // bottom
+    {x: width, y: height},
+    {x: 0, y: height},
+    // left
+    {x: 0, y: height},
+    {x: 0, y: height},
+    {x: 0, y: scale(50)},
+    {x: 0 + scale(2), y: scale(40)},
+    {x: 0 + scale(10), y: scale(32)},
+    {x: 0 + scale(20), y: scale(30)},
+    {x: width / 2, y: scale(30)},
+  ]);
+
+  return border;
+};
+
+//** Path Line Border Left Right Down */
+const lineBorderLeft = (width: number, height: number) => {
+  const border = (shape as any)
+    .line()
+    .x((d: {x: any}) => d.x)
+    .y((d: {y: any}) => d.y)
+    .curve(shape.curveBasis)([
+    // right
+    {x: width, y: scale(30)},
+    {x: width, y: height},
+    {x: width, y: height},
+    // bottom
+    {x: width, y: height},
+    {x: 0, y: height},
+    // left
+    {x: 0, y: height},
+    {x: 0, y: height},
+    {x: 0, y: scale(50)},
+    {x: 0 + scale(2), y: scale(40)},
+    {x: 0 + scale(10), y: scale(32)},
+    {x: 0 + scale(20), y: scale(30)},
+    {x: width / 2, y: scale(30)},
+  ]);
+
+  return border;
+};
+
+//** Path Line Border Left Right Down */
+const lineBorderRight = (width: number, height: number) => {
+  const border = (shape as any)
+    .line()
+    .x((d: {x: any}) => d.x)
+    .y((d: {y: any}) => d.y)
+    .curve(shape.curveBasis)([
+    // right
+    {x: width / 2, y: scale(30)},
+    {x: width - scale(20), y: scale(30)},
+    {x: width - scale(10), y: scale(32)},
+    {x: width - scale(2), y: scale(40)},
+    {x: width, y: scale(50)},
+    {x: width, y: height},
+    {x: width, y: height},
+    // bottom
+    {x: width, y: height},
+    {x: 0, y: height},
+    // left
+    {x: 0, y: height},
+    {x: 0, y: height},
+    {x: 0, y: scale(30)},
+  ]);
+
+  return border;
+};
+
+//** Path Curved Up */
+const lineCurved = (position: number, circle: number) => {
+  const circleR = circle / 2;
+  const circleRightPos = circle + position;
+  const circleOverR = circle / 2 + CIRCLE_OVER_SIZE;
+  const centerX = (position + circleRightPos) / 2; //195
+  const centerY = CIRCLE_OVER_SIZE + circleR; //33
+  // {"circle":50,"position":170,"centerX":195,"circleWidth":220}
+  // WIDTH_SCREEN: 390
+
+  const curved = (shape as any)
+    .line()
+    .x((d: {x: any}) => d.x)
+    .y((d: {y: any}) => d.y)
+    .curve(shape.curveBundle.beta(1))([
+    {x: centerX - circleOverR - scale(50), y: CIRCLE_OVER_TOP},
+    {x: centerX - circleOverR, y: CIRCLE_OVER_TOP}, //y 20
+    {
+      x: centerX + circleOverR * Math.cos(-Math.PI / 2 - Math.PI / 4),
+      y: centerY + circleOverR * Math.sin(-Math.PI / 2 - Math.PI / 4),
+    },
+
+    {x: centerX, y: 0},
+
+    {
+      x: centerX + circleOverR * Math.cos(-Math.PI / 2 + Math.PI / 4),
+      y: centerY + circleOverR * Math.sin(-Math.PI / 2 + Math.PI / 4),
+    },
+    {x: centerX + circleOverR, y: CIRCLE_OVER_TOP}, //y 20
+    {x: centerX + circleOverR + scale(50), y: CIRCLE_OVER_TOP},
+  ]);
+
+  return curved;
+};
+
+export const getPathUp = (
+  width: number,
+  iHeight: number,
+  centerWidth = 50,
+  borderTopLeftRight = false,
+  position: 'CENTER' | 'LEFT' | 'RIGHT',
+) => {
+  const height = scale(iHeight);
+  const circleWidth = scale(centerWidth);
+
+  if (borderTopLeftRight && position === 'LEFT') {
+    return `${lineBorderRight(width, height)} ${lineCurved(
+      circleWidth / 1.7,
+      circleWidth,
+    )}`;
+  }
+
+  if (borderTopLeftRight && position === 'RIGHT') {
+    return `${lineBorderLeft(width, height)} ${lineCurved(
+      width - circleWidth * 1.6,
+      circleWidth,
+    )}`;
+  }
+
+  if (borderTopLeftRight && position === 'CENTER') {
+    return `${lineBorder(width, height)} ${lineCurved(
+      width / 2 - circleWidth / 2,
+      circleWidth,
+    )}`;
+  }
+
+  if (position === 'LEFT') {
+    return `${line(width, height)} ${lineCurved(
+      circleWidth / 1.7,
+      circleWidth,
+    )}`;
+  }
+
+  if (position === 'RIGHT') {
+    return `${line(width, height)} ${lineCurved(
+      width - circleWidth * 1.6,
+      circleWidth,
+    )}`;
+  }
+
+  return `${line(width, height)} ${lineCurved(
+    width / 2 - circleWidth / 2,
+    circleWidth,
+  )}`;
+};

package/Application/StackScreen.tsx

@@ -33,7 +33,7 @@ const StackScreen: React.FC<ScreenParams> = props => {
   delete data.screen;
   delete data.initialParams;
 
-  const screenName = Component?.name || Component?.type?.name || 'Invalid';
+  const screenName = Component?.name || Component?.type?.name || '';
 
   /**
    * set options for screen

package/Application/types.ts

@@ -214,7 +214,6 @@ export type BottomTabProps = {
 };
 
 export type FloatingButtonProps = {
-  container?: React.ReactNode;
   icon: string | React.ReactNode;
   label: string;
   onPress: () => void;

package/Input/Input.tsx

@@ -133,9 +133,7 @@ const Input = forwardRef(
         : getAccessibilityID(
             `${appId}/${code}/${
               screenInfo.screenName
-            }/input_${cleanNameForTracking(
-              floatingValue ?? placeholder ?? value,
-            )}`,
+            }/input_${cleanNameForTracking(floatingValue ?? placeholder)}`,
           );
 
       if (disabled) {

package/Input/InputSearch.tsx

@@ -34,9 +34,9 @@ const InputSearch = forwardRef(
       style,
       defaultValue,
       onPressButtonText,
+      hasColorBG = true,
       params,
       componentId,
-      hasColorBG = false,
       ...props
     }: InputSearchProps,
     ref,

package/Radio/index.tsx

@@ -54,7 +54,7 @@ const Radio: FC<RadioProps> = ({
   const accessibilityID = getAccessibilityID?.(
     `${appId}/${code}/${screenInfo.screenName}/rdo_${cleanNameForTracking(
       label,
-    )}_${selected}`,
+    )}_${value}`,
   );
 
   return (

package/Text/styles.ts

@@ -5,7 +5,7 @@ export default {
   header_s_semibold: {fontSize: 14, lineHeight: 20, fontWeight: '600'},
   header_xs_semibold: {fontSize: 12, lineHeight: 18, fontWeight: '600'},
   body_default_regular: {fontSize: 14, lineHeight: 20, fontWeight: '400'},
-  body_default_regularstrikethrought: {
+  body_regularstrikethrought: {
     fontSize: 14,
     lineHeight: 20,
     fontWeight: '400',

package/Text/types.ts

@@ -20,7 +20,7 @@ export type Typography =
   | 'header_s_semibold'
   | 'header_xs_semibold'
   | 'body_default_regular'
-  | 'body_default_regularstrikethrought'
+  | 'body_regularstrikethrought'
   | 'description_default_regular'
   | 'description_default_regularstrikethrought'
   | 'description_xs_regular'

package/Title/index.tsx

@@ -1,9 +1,10 @@
-import React, {FC, useContext, useState} from 'react';
+import React, {FC, useContext} from 'react';
 import {Text as RNText, TouchableOpacity, View, ViewStyle} from 'react-native';
 import styles from './styles';
 import {Icon} from '../Icon';
 import {scaleSize, Text} from '../Text';
 import {ApplicationContext} from '../Application';
+import {Colors, Spacing} from '../Consts';
 import {Badge} from '../Badge';
 import {Typography} from '../Text/types';
 import {TitleProps} from './types';
@@ -24,8 +25,6 @@ const Title: FC<TitleProps> = ({
   buttonSize = 'small',
 }) => {
   const {theme} = useContext(ApplicationContext);
-  const [badgeWidth, setBadgeWidth] = useState(0);
-  const [contentWidth, setContentWidth] = useState(0);
   const styleSheet: {
     [key: string]: any;
   } = styles;
@@ -34,7 +33,10 @@ const Title: FC<TitleProps> = ({
   const numberOfLines = showLeftAction || !!badgeLabel ? 1 : 2;
   const buttonTypo: Typography =
     buttonSize === 'small' ? 'action_xs_bold' : 'action_s_bold';
-  const flexStyle = showLeftAction && {maxWidth: '70%'};
+  const widthStyle =
+    !showLeftAction && !showRightAction && !badgeLabel
+      ? {width: '100%'}
+      : {width: '75%'};
 
   const renderIcon = () => {
     if (!icon) return null;
@@ -60,32 +62,24 @@ const Title: FC<TitleProps> = ({
 
   const renderContent = () => {
     return (
-      <View style={styles.contentView}>
-        <View
-          onLayout={e => {
-            setContentWidth(e.nativeEvent.layout.width);
-          }}
-          style={[styles.iconLeftView, flexStyle]}>
+      <View style={{flex: 1}}>
+        <View style={[styles.iconLeftView, widthStyle]}>
           <RNText
             numberOfLines={numberOfLines}
             style={[
               styleSheet[typography],
-              styles.title,
-              {maxWidth: contentWidth - badgeWidth},
+              {
+                fontWeight: 'bold',
+                marginBottom: Spacing.XS,
+              },
             ]}>
             {title}
           </RNText>
-          {badgeLabel && (
-            <View
-              onLayout={e => {
-                setBadgeWidth(e.nativeEvent.layout.width);
-              }}
-              style={{
-                alignItems: 'center',
-              }}>
-              <Badge style={styles.badge} label={badgeLabel} />
-            </View>
-          )}
+          <View style={{alignItems: 'center'}}>
+            {badgeLabel && (
+              <Badge style={{marginLeft: Spacing.XS}} label={badgeLabel} />
+            )}
+          </View>
           {renderActionLeft()}
         </View>
         <Text
@@ -101,7 +95,7 @@ const Title: FC<TitleProps> = ({
     return (
       <View style={styles.iconLeftView}>
         {showLeftAction && !showRightAction && (
-          <View style={styles.iconLeft}>
+          <View style={[styles.iconLeft, {backgroundColor: Colors.black_06}]}>
             <Icon
               source={'arrow_chevron_right_small'}
               size={scaleSize(18)}

package/Title/styles.ts

@@ -1,6 +1,6 @@
 import {StyleSheet} from 'react-native';
 import {scaleSize} from '../Text';
-import {Colors, Radius, Spacing} from '../Consts';
+import {Radius, Spacing} from '../Consts';
 
 export default StyleSheet.create({
   card_small: {
@@ -39,6 +39,10 @@ export default StyleSheet.create({
   wrapper: {
     flexDirection: 'row',
   },
+  textContent: {
+    marginRight: Spacing.S,
+    flex: 1,
+  },
   margin: {
     marginTop: Spacing.S,
   },
@@ -60,18 +64,9 @@ export default StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     marginHorizontal: Spacing.XS,
-    backgroundColor: Colors.black_06,
   },
   iconLeftView: {
     flexDirection: 'row',
     alignItems: 'center',
   },
-  contentView: {marginRight: Spacing.S, flex: 1},
-  title: {
-    fontWeight: 'bold',
-    marginBottom: Spacing.XS,
-  },
-  badge: {
-    marginLeft: Spacing.XS,
-  },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.92.1-rc.16",
+    "version": "0.92.1-rc.2",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {
@@ -21,6 +21,8 @@
         "@react-navigation/native": "5.9.8",
         "@react-navigation/routers": "5.7.4",
         "lottie-react-native": "3.3.2",
+        "d3-shape": "1.3.7",
+        "react-native-svg": "12.1.0",
         "@react-navigation/stack": "git+https://gitlab.com/momo-platform/react-navigation-stack.git#main"
     },
     "peerDependencies": {