@momo-kits/native-kits 0.157.1-beta.9 → 0.157.1-com.1-debug

package/src/foundations/Application/BottomSheet.tsx

@@ -0,0 +1,358 @@
+import React, { useCallback, useContext, useEffect, useRef } from 'react';
+import {
+  BackHandler,
+  Dimensions,
+  KeyboardAvoidingView,
+  Modal,
+  PanResponder,
+  Platform,
+  Pressable,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { ApplicationContext, MiniAppContext } from '../Context';
+import { BottomSheetParams } from './types';
+import { Colors, Radius, Spacing, Styles } from '../Consts';
+import { Text } from '../Text';
+import { Icon } from '../Icon';
+import { useHeaderHeight } from '@react-navigation/elements';
+import Animated, {
+  Easing,
+  Extrapolate,
+  interpolate,
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated';
+import layoutStyles from '../Layout/styles';
+
+const BottomSheet: React.FC<BottomSheetParams> = props => {
+  const { theme, navigator } = useContext(ApplicationContext);
+  const context = useContext<any>(MiniAppContext);
+  const heightDevice = Dimensions.get('screen').height;
+  const action = useRef<undefined | string>(undefined);
+  const insets = useSafeAreaInsets();
+  const heightHeader = useHeaderHeight();
+  const keyboardOffset = heightHeader - Math.min(insets.bottom, 21);
+
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+
+  const {
+    screen: Screen,
+    options,
+    useNativeModal = false,
+    surface,
+    barrierDismissible = false,
+    draggable = true,
+    useBottomInset = true,
+    useKeyboardAvoidingView = true,
+    keyboardVerticalOffset,
+    useDivider = true,
+    footerComponent,
+    leftOptions,
+  }: BottomSheetParams = props.route.params;
+
+  const translateY = useSharedValue(heightDevice);
+
+  const openAnimation = useCallback(() => {
+    translateY.value = withTiming(0, {
+      duration: 350,
+      easing: Easing.bezier(0.05, 0.7, 0.1, 1),
+    });
+  }, [translateY]);
+
+  const closeAnimation = useCallback(
+    (callback = () => {}) => {
+      translateY.value = withTiming(
+        heightDevice,
+        {
+          duration: 200,
+          easing: Easing.bezier(0.3, 0.0, 0.8, 0.15),
+        },
+        () => runOnJS(callback)(),
+      );
+    },
+    [heightDevice, translateY],
+  );
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => draggable,
+      onMoveShouldSetPanResponder: (_, gestureState) =>
+        draggable && gestureState.dy > 0,
+      onPanResponderMove: (_, gestureState) => {
+        if (gestureState.dy > 0) {
+          translateY.value = gestureState.dy;
+        }
+      },
+      onPanResponderRelease: (_, gestureState) => {
+        if (gestureState.dy > 100) {
+          action.current = 'gesture';
+          onDismiss(true);
+        } else {
+          translateY.value = withSpring(0, {
+            damping: 20,
+            mass: 1,
+            stiffness: 100,
+            overshootClamping: false,
+            energyThreshold: 1e-10,
+          });
+        }
+      },
+    }),
+  ).current;
+
+  let Container: any = View;
+  if (useNativeModal) {
+    Container = Modal;
+  }
+  let backgroundColor = theme.colors.background.default;
+  if (surface) {
+    backgroundColor = theme.colors.background.surface;
+  }
+
+  /**
+   * emit dismiss event
+   */
+  useEffect(() => {
+    translateY.value = heightDevice;
+    openAnimation();
+    return () => {
+      props.route.params?.onDismiss?.(action.current);
+    };
+  }, [heightDevice, openAnimation, props.route.params, translateY]);
+
+  /**
+   * handler dismiss
+   */
+  const onDismiss = useCallback(
+    (force = false, callback?: () => void) => {
+      if (barrierDismissible && !force) {
+        return;
+      }
+      closeAnimation(() => {
+        navigator?.pop();
+        runOnJS(() => {
+          callback?.();
+        })();
+      });
+    },
+    [barrierDismissible, closeAnimation, navigator],
+  );
+
+  /**
+   * on request close
+   */
+  const onRequestClose = useCallback(
+    (callback?: () => void) => {
+      onDismiss(true, callback);
+    },
+    [onDismiss],
+  );
+
+  useEffect(() => {
+    const backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      () => {
+        onDismiss();
+        return true;
+      },
+    );
+    return () => backHandler.remove();
+  }, [barrierDismissible, onDismiss]);
+
+  /**
+   * render header
+   */
+  const renderHeader = useCallback(() => {
+    return (
+      <View {...panResponder.panHandlers}>
+        <View style={{ height: 16 }}>
+          <View style={styles.indicator} />
+        </View>
+        <View
+          style={[
+            styles.header,
+            useDivider && {
+              borderBottomColor: theme.colors.border.default,
+              borderBottomWidth: 1,
+            },
+          ]}
+        >
+          {leftOptions?.onPressIconLeft ? (
+            <TouchableOpacity
+              style={styles.iconButton}
+              onPress={() => {
+                onDismiss(true, leftOptions.onPressIconLeft);
+              }}
+            >
+              <Icon source={leftOptions.iconLeft ?? 'ic_back'} />
+            </TouchableOpacity>
+          ) : null}
+
+          {options.header ? (
+            <View style={Styles.flex}>{options.header}</View>
+          ) : (
+            <>
+              {!leftOptions ? <View style={styles.iconButton} /> : null}
+              <Text
+                style={[Styles.flex, { textAlign: 'center' }]}
+                numberOfLines={1}
+                typography="header_default_bold"
+              >
+                {options.title ?? ''}
+              </Text>
+            </>
+          )}
+          <TouchableOpacity
+            style={styles.iconButton}
+            onPress={() => {
+              action.current = 'icon_close';
+              onDismiss(true);
+            }}
+          >
+            <Icon source="navigation_close" />
+          </TouchableOpacity>
+        </View>
+      </View>
+    );
+  }, [
+    onDismiss,
+    leftOptions,
+    options.header,
+    options.title,
+    panResponder.panHandlers,
+    theme.colors.border.default,
+    useDivider,
+  ]);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateY: translateY.value }],
+    };
+  });
+
+  const animatedOverlayStyle = useAnimatedStyle(() => {
+    return {
+      opacity: interpolate(
+        translateY.value,
+        [0, heightDevice],
+        [1, 0],
+        Extrapolate.CLAMP,
+      ),
+    };
+  });
+
+  return (
+    <Container
+      transparent
+      visible={true}
+      onRequestClose={() => {
+        onDismiss();
+      }}
+      style={StyleSheet.absoluteFillObject}
+      isModalKit={true}
+    >
+      <KeyboardAvoidingView
+        behavior={Platform.select({
+          ios: 'position',
+          android: undefined,
+        })}
+        keyboardVerticalOffset={keyboardVerticalOffset ?? keyboardOffset}
+        enabled={useKeyboardAvoidingView}
+        contentContainerStyle={styles.container}
+        style={styles.container}
+      >
+        <Pressable
+          style={StyleSheet.absoluteFillObject}
+          onPress={() => {
+            action.current = 'touch';
+            onDismiss();
+          }}
+        >
+          <Animated.View style={[styles.overlay, animatedOverlayStyle]} />
+        </Pressable>
+
+        <Animated.View
+          style={[
+            animatedStyle,
+            {
+              backgroundColor,
+              borderTopLeftRadius: Radius.M,
+              borderTopRightRadius: Radius.M,
+              overflow: 'hidden',
+            },
+            showBaseLineDebug && styles.debugBaseLine,
+          ]}
+        >
+          {renderHeader()}
+          <Screen
+            {...props}
+            {...props.route.params}
+            onRequestClose={onRequestClose}
+          />
+          {footerComponent && (
+            <View
+              style={[
+                layoutStyles.shadow,
+                {
+                  paddingBottom: Spacing.S,
+                  backgroundColor: theme.colors.background.surface,
+                },
+              ]}
+            >
+              {footerComponent}
+            </View>
+          )}
+          {useBottomInset && (
+            <View
+              style={{
+                height: Math.min(insets.bottom, 21),
+                backgroundColor: backgroundColor,
+              }}
+            />
+          )}
+        </Animated.View>
+      </KeyboardAvoidingView>
+    </Container>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'flex-end',
+  },
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.6)',
+  },
+  indicator: {
+    width: 40,
+    height: 4,
+    borderRadius: Radius.S,
+    backgroundColor: Colors.black_06,
+    position: 'absolute',
+    alignSelf: 'center',
+    top: Spacing.S,
+  },
+  header: {
+    height: 56,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  iconButton: {
+    width: 24,
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginHorizontal: Spacing.M,
+  },
+  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
+});
+
+export default BottomSheet;

package/src/foundations/Application/BottomTab/BottomTabBar.tsx

@@ -0,0 +1,320 @@
+import { BottomTabBarProps } from '@react-navigation/bottom-tabs';
+import { CommonActions, Route } from '@react-navigation/native';
+import React, { useCallback, useContext } from 'react';
+import {
+  Animated,
+  Platform,
+  StyleSheet,
+  TouchableOpacity,
+  useWindowDimensions,
+  View,
+} from 'react-native';
+import { EdgeInsets, useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Colors, Radius, Styles } from '../../Consts';
+import { Icon } from '../../Icon';
+import { Text } from '../../Text';
+import { FloatingButtonProps } from '../types';
+import CustomBottomTabItem from './CustomBottomTabItem';
+import { ApplicationContext, MiniAppContext } from '../../Context';
+
+type Props = BottomTabBarProps & {
+  activeTintColor?: string;
+  inactiveTintColor?: string;
+  floatingButton?: FloatingButtonProps;
+  activeBackgroundColor?: string;
+  allowFontScaling?: boolean;
+  inactiveBackgroundColor?: string;
+  labelStyle?: any;
+  iconStyle?: any;
+  showLabel?: boolean;
+  style?: any;
+  tabStyle?: any;
+  badgeStyle?: any;
+};
+
+const getPaddingBottom = (insets: EdgeInsets) => {
+  return Math.max(insets.bottom - Platform.select({ ios: 4, default: 0 }), 0);
+};
+
+export default function BottomTabBar({
+  state,
+  navigation,
+  descriptors,
+  activeBackgroundColor,
+  activeTintColor,
+  allowFontScaling,
+  inactiveBackgroundColor,
+  inactiveTintColor,
+  labelStyle,
+  iconStyle,
+  showLabel,
+  style,
+  floatingButton,
+}: Props) {
+  const { theme } = useContext(ApplicationContext);
+  const { routes } = state;
+  const widthDevice = useWindowDimensions()?.width;
+  const useFloating = floatingButton && state.routes.length % 2 === 0;
+  const itemWidth = widthDevice / (state.routes.length + (useFloating ? 1 : 0));
+  // const buildLink = useLinkBuilder();
+  const indicatorAnimated = React.useRef(new Animated.Value(0)).current;
+  const insets = useSafeAreaInsets();
+  const paddingBottom = getPaddingBottom(insets);
+  const focusedTab = state?.routes[state.index]?.name || routes[0]?.params;
+
+  const context = useContext<any>(MiniAppContext);
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+
+  /**
+   * render tab item
+   */
+  const renderTabItem = useCallback(
+    (data: Route<string, any>[]) => {
+      return data?.map(route => {
+        const focused = route?.params?.name === focusedTab;
+        const { options } = descriptors[route.key];
+
+        const onPress = () => {
+          const event = navigation.emit({
+            type: 'tabPress',
+            target: route.key,
+            canPreventDefault: true,
+          });
+
+          if (!focused && !event.defaultPrevented) {
+            navigation.dispatch({
+              ...CommonActions.navigate(route.name),
+              target: state.key,
+            });
+          }
+        };
+
+        const onLongPress = () => {
+          navigation.emit({
+            type: 'tabLongPress',
+            target: route.key,
+          });
+        };
+
+        return (
+          <CustomBottomTabItem
+            key={route.key}
+            route={route}
+            label={options.tabBarLabel || options.title || route.name}
+            focused={focused}
+            onPress={onPress}
+            onLongPress={onLongPress}
+            activeTintColor={activeTintColor ?? theme.colors.primary}
+            inactiveTintColor={inactiveTintColor ?? theme.colors.text.default}
+            activeBackgroundColor={activeBackgroundColor}
+            inactiveBackgroundColor={inactiveBackgroundColor}
+            icon={options.tabBarIcon}
+            badge={options.tabBarBadge}
+            showLabel={showLabel}
+            labelStyle={labelStyle}
+            iconStyle={iconStyle}
+            style={options.tabBarStyle}
+            badgeStyle={options.tabBarBadgeStyle}
+            allowFontScaling={allowFontScaling}
+          />
+        );
+      });
+    },
+    [
+      focusedTab,
+      descriptors,
+      activeTintColor,
+      theme.colors.primary,
+      theme.colors.text.default,
+      inactiveTintColor,
+      activeBackgroundColor,
+      inactiveBackgroundColor,
+      showLabel,
+      labelStyle,
+      iconStyle,
+      allowFontScaling,
+      navigation,
+      state.key,
+    ],
+  );
+
+  /**
+   * render floating button
+   */
+  const renderFloatingButton = useCallback(() => {
+    const renderFloatingIcon = () => {
+      if (typeof floatingButton?.icon === 'string') {
+        return <Icon source={floatingButton?.icon} size={32} color={'white'} />;
+      }
+      return floatingButton?.icon;
+    };
+
+    return (
+      <View style={[Styles.flex, showBaseLineDebug && styles.debugBaseLine]}>
+        <TouchableOpacity
+          onPress={floatingButton?.onPress}
+          style={styles.floatingContainer}
+        >
+          <View
+            style={{
+              ...styles.floatingContent,
+              backgroundColor: activeTintColor ?? theme.colors.primary,
+            }}
+          >
+            {renderFloatingIcon()}
+          </View>
+          <View
+            style={{
+              top: -4,
+              backgroundColor: activeTintColor ?? theme.colors.primary,
+              borderRadius: Radius.XL,
+              paddingHorizontal: 6,
+            }}
+          >
+            <Text
+              numberOfLines={1}
+              typography={'description_xs_regular'}
+              color={'white'}
+            >
+              {floatingButton?.label}
+            </Text>
+          </View>
+        </TouchableOpacity>
+      </View>
+    );
+  }, [
+    activeTintColor,
+    floatingButton?.icon,
+    floatingButton?.label,
+    floatingButton?.onPress,
+    showBaseLineDebug,
+    theme.colors.primary,
+  ]);
+
+  /**
+   * animated indicator
+   */
+  React.useEffect(() => {
+    let index = state.index;
+    if (useFloating && index > (state.routes.length - 1) / 2) {
+      index += 1;
+    }
+    Animated.timing(indicatorAnimated, {
+      toValue: itemWidth * index,
+      useNativeDriver: true,
+      duration: 200,
+    }).start();
+  }, [
+    state.index,
+    itemWidth,
+    indicatorAnimated,
+    useFloating,
+    state.routes.length,
+  ]);
+
+  /**
+   * render tab bar
+   */
+  const renderTabBar = () => {
+    if (useFloating) {
+      const middleIndex = routes.length / 2;
+      const leftArr = routes.slice(0, middleIndex);
+      const rightArr = routes.slice(middleIndex);
+      return (
+        <>
+          {renderTabItem(leftArr)}
+          {renderFloatingButton()}
+          {renderTabItem(rightArr)}
+        </>
+      );
+    }
+    return renderTabItem(routes);
+  };
+
+  return (
+    <Animated.View
+      style={[
+        floatingButton ? styles.tabBarFloatingButton : styles.tabBar,
+        {
+          backgroundColor: theme.colors.background.surface,
+          borderTopColor: theme.colors.border.default,
+        },
+        {
+          paddingBottom: paddingBottom,
+          paddingHorizontal: Math.max(insets.left, insets.right),
+        },
+        style,
+      ]}
+      pointerEvents={'auto'}
+    >
+      <View style={styles.content} accessibilityLabel={'bottom_tab_bar'}>
+        {useFloating && floatingButton?.container}
+        <Animated.View
+          style={{
+            width: itemWidth,
+            position: 'absolute',
+            top: 0,
+            transform: [{ translateX: indicatorAnimated }],
+          }}
+        >
+          <View
+            style={[
+              styles.indicator,
+              { backgroundColor: activeTintColor ?? theme.colors.primary },
+            ]}
+          />
+        </Animated.View>
+        {renderTabBar()}
+      </View>
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  content: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  tabBar: {
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    elevation: 8,
+  },
+  tabBarFloatingButton: {
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 1,
+    shadowColor: Colors.black_20,
+    shadowOffset: { width: 0, height: -2 },
+    shadowOpacity: 0.05,
+    shadowRadius: 3,
+    elevation: 8,
+  },
+  floatingContainer: {
+    position: 'absolute',
+    alignItems: 'center',
+    left: 0,
+    right: 0,
+    top: -2,
+    bottom: Platform.OS === 'ios' ? -6 : 4
+  },
+  floatingContent: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: 48,
+    width: 48,
+    borderRadius: 24,
+    top: -10,
+  },
+  indicator: {
+    height: 2,
+    width: 44,
+    alignSelf: 'center',
+    borderBottomLeftRadius: 1,
+    borderBottomRightRadius: 1,
+  },
+  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
+});