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

package/src/foundations/Application/Components/BackgroundImageView.tsx

@@ -1,126 +0,0 @@
-import React, { FC, useContext } from 'react';
-import { Animated, Platform, StyleSheet } from 'react-native';
-import { Image } from '../../Image';
-import { Colors } from '../../Consts';
-import { ApplicationContext } from '../../Context';
-
-type BackgroundImageViewProps = {
-  useShadowHeader: boolean;
-  headerBackground?: string;
-  heightHeader: number | `${number}%`;
-  opacityBackground: Animated.AnimatedInterpolation<any>;
-};
-
-const BackgroundImageView: FC<BackgroundImageViewProps> = ({
-  useShadowHeader = true,
-  headerBackground = null,
-  heightHeader,
-  opacityBackground,
-}) => {
-  const { theme } = useContext(ApplicationContext);
-  if (Platform.OS === 'android') {
-    return (
-      <Animated.View
-        style={[
-          useShadowHeader ? styles.shadowHeader : styles.dividerHeader,
-          styles.hidden,
-          {
-            height: heightHeader,
-            backgroundColor: theme.colors.background.surface,
-            opacity: opacityBackground,
-          },
-        ]}
-      >
-        {headerBackground && (
-          <Image
-            style={styles.headerBackground}
-            source={{ uri: headerBackground }}
-            loading={false}
-          />
-        )}
-      </Animated.View>
-    );
-  }
-
-  return (
-    <>
-      <Animated.View
-        style={[
-          useShadowHeader ? styles.shadowHeader : styles.dividerHeader,
-          styles.nonHidden,
-          {
-            height: heightHeader,
-            backgroundColor: theme.colors.background.surface,
-            opacity: opacityBackground,
-          },
-        ]}
-      />
-      <Animated.View
-        style={[
-          styles.hidden,
-          {
-            height: heightHeader,
-            opacity: opacityBackground,
-          },
-        ]}
-      >
-        {headerBackground && (
-          <Image
-            style={styles.headerBackground}
-            source={{ uri: headerBackground }}
-            loading={false}
-          />
-        )}
-      </Animated.View>
-    </>
-  );
-};
-
-export default BackgroundImageView;
-
-const styles = StyleSheet.create({
-  hidden: {
-    position: 'absolute',
-    width: '100%',
-    zIndex: 1,
-    overflow: 'hidden',
-  },
-  nonHidden: {
-    position: 'absolute',
-    width: '100%',
-    zIndex: 1,
-  },
-  headerBackground: {
-    width: '100%',
-    height: undefined,
-    position: 'absolute',
-    aspectRatio: 375 / 154,
-  },
-  dividerHeader: {
-    borderBottomWidth: 1,
-    borderColor: Colors.black_04,
-  },
-  shadowHeader: {
-    ...Platform.select({
-      ios: {
-        shadowColor: Colors.black_20,
-        shadowOffset: {
-          width: 3,
-          height: 3,
-        },
-        shadowOpacity: 0.12,
-        shadowRadius: 10,
-      },
-      android: {
-        shadowColor: Colors.black_17,
-        shadowOffset: {
-          width: 3,
-          height: 3,
-        },
-        shadowOpacity: 0.12,
-        shadowRadius: 10,
-        elevation: 10,
-      },
-    }),
-  },
-});

package/src/foundations/Application/Components/HeaderAnimated.tsx

@@ -1,69 +0,0 @@
-import { Animated, StyleSheet } from 'react-native';
-import { type HeaderAnimatedProps } from '../types';
-import React from 'react';
-import { Image } from '../../Image';
-import { Colors } from '../../Consts';
-
-/**
- * default header banner for header animated
- */
-const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
-  animatedValue,
-  image,
-  useScale = true,
-  children,
-}) => {
-  const scale = useScale
-    ? animatedValue.interpolate({
-        inputRange: [-300, 0, 300],
-        outputRange: [4, 1, 1],
-        extrapolate: 'clamp',
-      })
-    : 1;
-  const opacity = animatedValue.interpolate({
-    inputRange: [0, 150, 300],
-    outputRange: [1, 0.5, 0],
-    extrapolate: 'clamp',
-  });
-  const translateY = animatedValue.interpolate({
-    inputRange: [-300, 0],
-    outputRange: [-80, -2],
-    extrapolate: 'clamp',
-  });
-
-  return (
-    <Animated.View
-      style={[
-        styles.container,
-        {
-          opacity: opacity,
-          transform: [{ scale }, { translateY }],
-        },
-      ]}
-    >
-      {children ?? (
-        <Image
-          source={{
-            uri: image,
-          }}
-          style={styles.full}
-        />
-      )}
-    </Animated.View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: { width: '100%', aspectRatio: 16 / 9 },
-  verifiedDot: {
-    width: 4,
-    height: 4,
-    borderRadius: 2,
-    backgroundColor: Colors.green_03,
-    position: 'absolute',
-    alignSelf: 'center',
-  },
-  full: { width: '100%', height: '100%' },
-});
-
-export { HeaderAnimated };

package/src/foundations/Application/Components/HeaderBackground.tsx

@@ -1,83 +0,0 @@
-import LinearGradient from 'react-native-linear-gradient';
-import { Animated, StyleSheet, View } from 'react-native';
-import React, { useContext } from 'react';
-import { HeaderBackgroundProps } from '../types';
-import { ApplicationContext, MiniAppContext } from '../../Context';
-import { Colors, Styles } from '../../Consts';
-import { Image } from '../../Image';
-import BackgroundImageView from './BackgroundImageView';
-
-const LinearGradientAnimated = Animated.createAnimatedComponent(LinearGradient);
-
-/**
- * header background for default
- */
-const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
-  animatedValue = new Animated.Value(0),
-  useGradient = true,
-  useShadowHeader = true,
-  gradientColor: customGradientColor,
-  headerBackground,
-}) => {
-  const { theme } = useContext(ApplicationContext);
-  const context = useContext<any>(MiniAppContext);
-  const gradientColor = customGradientColor ?? theme.colors.gradient;
-  const headerImage = headerBackground ?? theme.assets?.headerBackground;
-
-  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
-
-  const opacityBackground = animatedValue?.interpolate({
-    inputRange: [0, 52],
-    outputRange: [0, 1],
-    extrapolate: 'clamp',
-  });
-
-  return (
-    <View style={[Styles.flex, showBaseLineDebug && styles.debugBaseLine]}>
-      <BackgroundImageView
-        useShadowHeader={useShadowHeader}
-        heightHeader={'100%'}
-        opacityBackground={opacityBackground}
-        headerBackground={headerImage}
-      />
-      <View style={styles.gradientContainer}>
-        {useGradient && !!gradientColor && (
-          <LinearGradientAnimated
-            colors={[gradientColor, gradientColor + '00']}
-            style={styles.extendedHeader}
-          >
-            {!!headerImage && (
-              <Image
-                style={styles.headerBackground}
-                source={{ uri: headerImage }}
-                loading={false}
-              />
-            )}
-          </LinearGradientAnimated>
-        )}
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  gradientContainer: {
-    width: '100%',
-    height: '100%',
-    position: 'absolute',
-    overflow: 'hidden',
-  },
-  extendedHeader: {
-    aspectRatio: 375 / 154,
-    position: 'absolute',
-    width: '100%',
-  },
-  headerBackground: {
-    width: '100%',
-    position: 'absolute',
-    aspectRatio: 375 / 154,
-  },
-  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
-});
-
-export { HeaderBackground };

package/src/foundations/Application/Components/HeaderExtendHeader.tsx

@@ -1,225 +0,0 @@
-import React, { Ref, useContext, useEffect, useRef } from 'react';
-import LinearGradient from 'react-native-linear-gradient';
-import { ApplicationContext, MiniAppContext } from '../../Context';
-import { Animated, Dimensions, Platform, StyleSheet, View } from 'react-native';
-import { HeaderType } from '../../Layout/types';
-import { InputRef, InputSearch } from '../../Input';
-import Navigation from '../Navigation';
-import { Colors, Radius, Spacing } from '../../Consts';
-import { Image } from '../../Image';
-import { SearchHeaderProps } from '../types';
-import BackgroundImageView from './BackgroundImageView';
-
-const SCREEN_PADDING = 12;
-const BACK_WIDTH = 28;
-
-const { width: screenWidth } = Dimensions.get('window');
-const LinearGradientAnimated = Animated.createAnimatedComponent(LinearGradient);
-
-/**
- * Header extended with background image
- * @constructor
- */
-const HeaderExtendHeader: React.FC<{
-  headerType?: HeaderType;
-  animatedValue: Animated.Value;
-  heightHeader: number;
-  headerRightWidth: number;
-  inputSearchProps?: SearchHeaderProps;
-  inputSearchRef?: Ref<InputRef>;
-  navigation?: Navigation;
-  useShadowHeader?: boolean;
-  gradientColor?: string;
-  headerBackground?: string;
-}> = ({
-  headerType = 'default',
-  animatedValue,
-  heightHeader,
-  headerRightWidth = 73,
-  inputSearchProps,
-  inputSearchRef,
-  useShadowHeader = true,
-  gradientColor: customGradientColor,
-  headerBackground: customBackground,
-}) => {
-  const { theme } = useContext(ApplicationContext);
-  const context = useContext<any>(MiniAppContext);
-  const animated = useRef(new Animated.Value(0));
-  const gradientColor = customGradientColor ?? theme.colors.gradient;
-  const headerBackground = customBackground ?? theme.assets?.headerBackground;
-  const leftPosition = inputSearchProps?.leftPosition || BACK_WIDTH + 20;
-
-  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
-
-  const opacityBackground = animatedValue?.interpolate({
-    inputRange: [0, 52],
-    outputRange: [0, 1],
-    extrapolate: 'clamp',
-  });
-  const opacityGradient = animatedValue?.interpolate({
-    inputRange: [0, 52],
-    outputRange: [1, 0],
-    extrapolate: 'clamp',
-  });
-
-  useEffect(() => {
-    const listener = animatedValue.addListener(({ value }) => {
-      animated.current.setValue(value);
-    });
-    return () => {
-      animatedValue?.removeListener(listener);
-    };
-  }, [animatedValue]);
-
-  const height = animated.current.interpolate({
-    inputRange: [0, 100],
-    outputRange: [heightHeader + 52, heightHeader],
-    extrapolate: 'clamp',
-  });
-
-  const translateX = animated.current.interpolate({
-    inputRange: [0, 100],
-    outputRange: [SCREEN_PADDING, leftPosition],
-    extrapolate: 'clamp',
-  });
-
-  const backgroundColor = animated.current.interpolate({
-    inputRange: [0, 100],
-    outputRange: [
-      theme.colors.background.surface,
-      theme.colors.background.default,
-    ],
-    extrapolate: 'clamp',
-  });
-
-  if (inputSearchProps && Platform.OS === 'android') {
-    useShadowHeader = false;
-  }
-
-  if (inputSearchProps) {
-    return (
-      <View style={[{ zIndex: 0 }, showBaseLineDebug && styles.debugBaseLine]}>
-        <Animated.View style={{ height: height }} />
-        <BackgroundImageView
-          useShadowHeader={useShadowHeader}
-          heightHeader={heightHeader}
-          opacityBackground={opacityBackground}
-          headerBackground={headerBackground}
-        />
-        <Animated.View
-          style={[
-            styles.headerBox,
-            { height: headerType === 'extended' ? height : heightHeader },
-          ]}
-        >
-          {!!gradientColor && (
-            <LinearGradientAnimated
-              colors={[gradientColor, gradientColor + '00']}
-              style={[styles.extendedHeader, { opacity: opacityGradient }]}
-            >
-              {!!theme.assets?.headerBackground && (
-                <Image
-                  style={styles.headerBackground}
-                  source={{ uri: theme.assets?.headerBackground }}
-                  loading={false}
-                />
-              )}
-            </LinearGradientAnimated>
-          )}
-        </Animated.View>
-        <Animated.View
-          style={{
-            justifyContent: 'flex-end',
-            height,
-            position: 'absolute',
-            zIndex: 2,
-          }}
-        >
-          <Animated.View
-            style={{
-              transform: [{ translateX }],
-              marginVertical: Spacing.S,
-              width: animated.current.interpolate({
-                inputRange: [0, 100],
-                outputRange: [
-                  screenWidth - SCREEN_PADDING * 2,
-                  screenWidth - leftPosition - 12 - headerRightWidth,
-                ],
-                extrapolate: 'clamp',
-              }),
-            }}
-          >
-            <Animated.View style={{ backgroundColor, borderRadius: Radius.XL }}>
-              <InputSearch
-                {...inputSearchProps}
-                ref={inputSearchRef}
-                backgroundColor={'transparent'}
-                showButtonText={false}
-              />
-            </Animated.View>
-          </Animated.View>
-        </Animated.View>
-      </View>
-    );
-  }
-
-  if (headerType === 'extended') {
-    return (
-      <View style={[{ zIndex: 0 }, showBaseLineDebug && styles.debugBaseLine]}>
-        <BackgroundImageView
-          useShadowHeader={useShadowHeader}
-          heightHeader={heightHeader}
-          opacityBackground={opacityBackground}
-          headerBackground={headerBackground}
-        />
-        {!!gradientColor && (
-          <LinearGradientAnimated
-            colors={[gradientColor, gradientColor + '00']}
-            style={[styles.extendedHeader, { opacity: opacityGradient }]}
-          >
-            {!!headerBackground && (
-              <Image
-                style={styles.headerBackground}
-                source={{ uri: headerBackground }}
-                loading={false}
-              />
-            )}
-          </LinearGradientAnimated>
-        )}
-        <View style={{ height: heightHeader }} />
-      </View>
-    );
-  }
-
-  return <View />;
-};
-
-const styles = StyleSheet.create({
-  headerBackground: {
-    width: '100%',
-    height: undefined,
-    position: 'absolute',
-    aspectRatio: 375 / 154,
-  },
-  extendedHeader: {
-    aspectRatio: 375 / 154,
-    position: 'absolute',
-    width: '100%',
-  },
-  headerBox: {
-    width: '100%',
-    position: 'absolute',
-    overflow: 'hidden',
-  },
-  verifiedDot: {
-    width: 4,
-    height: 4,
-    borderRadius: 2,
-    backgroundColor: Colors.green_03,
-    position: 'absolute',
-    alignSelf: 'center',
-  },
-  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
-});
-
-export { HeaderExtendHeader };

package/src/foundations/Application/Components/HeaderLeft.tsx

@@ -1,93 +0,0 @@
-import { BackHandler, StyleSheet, View } from 'react-native';
-import { HeaderBackProps } from '../types';
-import React, { useCallback, useContext, useEffect } from 'react';
-import { ApplicationContext, MiniAppContext } from '../../Context';
-import { PopupNotify } from '../../Popup';
-import { NavigationButton } from './NavigationButton';
-
-/**
- * default header left used for nav
- */
-const HeaderLeft: React.FC<HeaderBackProps> = ({
-  tintColor,
-  preventBack,
-  onPressLeftHeader,
-  onBackHandler,
-}) => {
-  const context = useContext<any>(MiniAppContext);
-  const { navigator } = useContext(ApplicationContext);
-
-  const goBack = useCallback(() => {
-    const canGoBack = navigator?.ref?.current?.canGoBack?.();
-    const currentRoute = navigator?.ref?.current?.getCurrentRoute?.();
-    context?.autoTracking?.({
-      ...context,
-      componentName: 'IconButton',
-      componentId: 'navigation_back',
-      screenName: currentRoute?.params?.screen?.name ?? currentRoute?.name,
-    });
-
-    if (canGoBack) {
-      navigator?.ref?.current?.goBack?.();
-    } else if (navigator?.maxApi) {
-      navigator?.maxApi?.dismiss?.(navigator?.dismissData);
-    } else {
-      (globalThis as any)?.miniAppApi?.dispatch?.('dismiss', context);
-    }
-  }, [navigator, context]);
-
-  const goBackSafe = useCallback(() => {
-    if (preventBack) {
-      navigator?.showModal({
-        screen: () => (
-          <PopupNotify
-            {...preventBack}
-            primary={{
-              title: preventBack.primary.title,
-              onPress: () => {
-                preventBack?.primary.onPress();
-                goBack();
-              },
-            }}
-          />
-        ),
-      });
-    } else {
-      onPressLeftHeader?.();
-      if (typeof onBackHandler === 'function') {
-        onBackHandler(goBack);
-      } else {
-        goBack();
-      }
-    }
-    return true;
-  }, [preventBack, navigator, goBack, onPressLeftHeader, onBackHandler]);
-
-  useEffect(() => {
-    const backHandler = BackHandler.addEventListener(
-      'hardwareBackPress',
-      goBackSafe,
-    );
-
-    return () => backHandler.remove();
-  }, [goBackSafe]);
-
-  return (
-    <View style={styles.headerLeft}>
-      <NavigationButton
-        accessibilityLabel="btn_navigation_back"
-        icon="arrow-back"
-        tintColor={tintColor}
-        onPress={goBackSafe}
-      />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  headerLeft: {
-    marginLeft: 8,
-  },
-});
-
-export { HeaderLeft };