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

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

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

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

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

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

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