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

package/src/foundations/Application/BottomSheet.tsx

@@ -1,358 +0,0 @@
-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

@@ -1,320 +0,0 @@
-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 },
-});