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

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

@@ -1,596 +0,0 @@
-import React, { useContext } from 'react';
-import {
-  Animated,
-  Dimensions,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-import { ApplicationContext, MiniAppContext } from '../../Context';
-import { exportFontFamily, Text, useScaleSize } from '../../Text';
-import { Colors, Radius, Spacing, Styles } from '../../Consts';
-import {
-  TitleJourneyProps,
-  TitleLocationProps,
-  TitleUserProps,
-} from '../types';
-import { Image } from '../../Image';
-import { Icon } from '../../Icon';
-import { Skeleton } from '../../Skeleton';
-
-/**
- * default header title used for nav
- */
-const HeaderTitle: React.FC<any> = props => {
-  const context = useContext<any>(MiniAppContext);
-
-  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
-
-  const opacity = props.animatedValue?.interpolate(
-    props.interpolate ?? {
-      inputRange: [0, 200],
-      outputRange: [0, 1],
-      extrapolate: 'clamp',
-    },
-  );
-
-  return (
-    <View
-      pointerEvents={'none'}
-      style={[
-        {
-          justifyContent: 'center',
-          maxWidth: Dimensions.get('window').width - 172,
-        },
-        showBaseLineDebug && styles.debugBaseLine,
-      ]}
-    >
-      <Animated.Text
-        {...props}
-        allowFontScaling={false}
-        accessibilityLabel={'title_navigation_header'}
-        style={[
-          {
-            fontSize: useScaleSize(15),
-            lineHeight: useScaleSize(22),
-            fontWeight: 'bold',
-          },
-          {
-            fontFamily: exportFontFamily('bold', 'action_xs_bold'),
-            opacity,
-            color: props.tintColor,
-          },
-        ]}
-        numberOfLines={1}
-      />
-    </View>
-  );
-};
-
-/**
- * Title custom for header
- * @constructor
- */
-const TitleCustom: React.FC<any> = ({ type, data, ...props }) => {
-  switch (type) {
-    case 'user':
-      return <TitleUser {...(data as TitleUserProps)} {...props} />;
-    case 'location':
-      return <TitleLocation {...(data as TitleLocationProps)} {...props} />;
-    case 'journey':
-      return <TitleJourney {...(data as TitleJourneyProps)} {...props} />;
-    default:
-      return <View />;
-  }
-};
-
-/**
- * Header user title
- * @constructor
- */
-const TitleUser: React.FC<TitleUserProps> = ({
-  title,
-  subTitle,
-  image: image,
-  tintColor,
-  dotColor,
-  onPress,
-  verify,
-  icons,
-  isLoading,
-}) => {
-  const { theme } = useContext(ApplicationContext);
-  const maxWidth = Dimensions.get('window').width - 172;
-  const getShortName = (name: string) => {
-    const words = name.split(' ');
-    const lastTwoWords = words.slice(-2);
-    return lastTwoWords.map(word => word.charAt(0).toUpperCase()).join('');
-  };
-
-  const renderImage = () => {
-    const avatarWidth = Spacing.XXL;
-    if (Array.isArray(image) && image.length > 0) {
-      switch (image.length) {
-        case 1: {
-          return image.map((i: string) => (
-            <Image
-              key={`avatar-${i}`}
-              source={{ uri: i }}
-              style={styles.circle}
-            />
-          ));
-        }
-        case 2: {
-          return (
-            <View style={[Styles.flex, styles.groupAvtContainer]}>
-              <Image
-                source={{ uri: image[0] }}
-                style={[
-                  styles.circleMedium,
-                  { position: 'absolute', top: 0, right: 0, zIndex: 0 },
-                ]}
-              />
-              <Image
-                source={{ uri: image[1] }}
-                style={[
-                  styles.circleMedium,
-                  { position: 'absolute', left: 0, bottom: 0, zIndex: 1 },
-                ]}
-              />
-            </View>
-          );
-        }
-        case 3: {
-          return (
-            <View style={[Styles.flex, styles.groupAvtContainer]}>
-              <Image
-                source={{ uri: image[0] }}
-                style={[
-                  styles.circleSmall,
-                  { position: 'absolute', bottom: 2, right: 2, zIndex: 0 },
-                ]}
-              />
-              <Image
-                source={{ uri: image[1] }}
-                style={[
-                  styles.circleSmall,
-                  {
-                    position: 'absolute',
-                    top: 2,
-                    left: avatarWidth / 2 - 16 / 2,
-                    zIndex: 1,
-                  },
-                ]}
-              />
-              <Image
-                source={{ uri: image[2] }}
-                style={[
-                  styles.circleSmall,
-                  { position: 'absolute', left: 2, bottom: 2, zIndex: 2 },
-                ]}
-              />
-            </View>
-          );
-        }
-        case 4: {
-          return (
-            <View style={[Styles.flex, styles.groupAvtContainer]}>
-              <Image
-                source={{ uri: image[0] }}
-                style={[
-                  styles.circleSmall,
-                  { position: 'absolute', bottom: 2, left: 2, zIndex: 0 },
-                ]}
-              />
-              <Image
-                source={{ uri: image[1] }}
-                style={[
-                  styles.circleSmall,
-                  { position: 'absolute', bottom: 2, right: 2, zIndex: 1 },
-                ]}
-              />
-              <Image
-                source={{ uri: image[2] }}
-                style={[
-                  styles.circleSmall,
-                  { position: 'absolute', top: 2, right: 2, zIndex: 2 },
-                ]}
-              />
-              <Image
-                source={{ uri: image[2] }}
-                style={[
-                  styles.circleSmall,
-                  { position: 'absolute', top: 2, left: 2, zIndex: 3 },
-                ]}
-              />
-            </View>
-          );
-        }
-        default: {
-          return (
-            <View style={[Styles.flex, styles.groupAvtContainer]}>
-              <Image
-                source={{ uri: image[0] }}
-                style={[
-                  styles.circleSmall,
-                  { position: 'absolute', left: 2, bottom: 2, zIndex: 0 },
-                ]}
-              />
-              <Image
-                source={{ uri: image[1] }}
-                style={[
-                  styles.circleSmall,
-                  { position: 'absolute', top: 2, right: 2, zIndex: 2 },
-                ]}
-              />
-              <Image
-                source={{ uri: image[2] }}
-                style={[
-                  styles.circleSmall,
-                  { position: 'absolute', left: 2, top: 2, zIndex: 3 },
-                ]}
-              />
-              <View
-                style={[
-                  styles.circleSmall,
-                  {
-                    position: 'absolute',
-                    bottom: 2,
-                    right: 2,
-                    zIndex: 1,
-                    backgroundColor: Colors.pink_09,
-                  },
-                ]}
-              >
-                <Text
-                  color={Colors.pink_03}
-                  typography={'description_xs_regular'}
-                >
-                  {`+${image.length - 3}`}
-                </Text>
-              </View>
-            </View>
-          );
-        }
-      }
-    }
-
-    if (typeof image === 'string' && image) {
-      return <Image source={{ uri: image }} style={styles.circle} />;
-    }
-
-    return (
-      <View
-        style={[
-          styles.imageContainer,
-          { borderColor: theme.colors.border.default },
-        ]}
-      >
-        <Text color={Colors.pink_03} typography={'description_xs_regular'}>
-          {getShortName(title)}
-        </Text>
-      </View>
-    );
-  };
-
-  const renderVerifyIcon = () => {
-    if (icons && icons.length > 0) {
-      return (
-        <View style={[Styles.row]}>
-          {icons.map(icon => (
-            <Image
-              key={`verified-icon-${icon}`}
-              source={{
-                uri: icon,
-              }}
-              style={styles.verifiedIcon}
-            />
-          ))}
-        </View>
-      );
-    }
-  };
-
-  const renderShimmer = () => {
-    return (
-      <View style={Styles.row}>
-        <View
-          style={[
-            styles.imageContainer,
-            {
-              borderColor: theme.colors.border.default,
-              marginRight: Spacing.M / 2,
-            },
-          ]}
-        >
-          <Skeleton />
-        </View>
-        <View style={Styles.flex}>
-          <View style={styles.shimmerTitle}>
-            <Skeleton />
-          </View>
-          <View style={{ height: Spacing.XXS }} />
-          <View style={styles.shimmerDescription}>
-            <Skeleton />
-          </View>
-        </View>
-      </View>
-    );
-  };
-
-  if (verify) {
-    console.warn(`Warning: The verify value "${verify}" is deprecated.`);
-  }
-
-  if (isLoading) {
-    return renderShimmer();
-  }
-
-  return (
-    <TouchableOpacity
-      style={{
-        justifyContent: 'center',
-        maxWidth: maxWidth - (icons?.length ?? 0) * 16,
-      }}
-      onPress={onPress}
-      disabled={onPress === undefined}
-    >
-      <View
-        style={[Styles.row, { maxWidth: maxWidth - (icons?.length ?? 0) * 16 }]}
-      >
-        <View>
-          {renderImage()}
-          {!!dotColor && (
-            <View style={[styles.dotAvatar, { backgroundColor: dotColor }]} />
-          )}
-        </View>
-        <View style={{ marginLeft: 6 }}>
-          <View style={Styles.row}>
-            <Text
-              typography="action_xs_bold"
-              color={tintColor}
-              numberOfLines={1}
-            >
-              {title}
-            </Text>
-            {renderVerifyIcon()}
-          </View>
-          {!!subTitle && (
-            <Text
-              typography="description_xs_regular"
-              color={tintColor}
-              numberOfLines={1}
-            >
-              {subTitle}
-            </Text>
-          )}
-        </View>
-      </View>
-    </TouchableOpacity>
-  );
-};
-
-/**
- * Header user title
- * @constructor
- */
-const TitleLocation: React.FC<TitleLocationProps> = ({
-  tintColor,
-  location,
-  description,
-  onPress,
-  isLoading,
-}) => {
-  const maxWidth = Dimensions.get('window').width - 172;
-  const renderShimmer = () => {
-    return (
-      <View style={Styles.flex}>
-        <View style={styles.shimmerDescription}>
-          <Skeleton />
-        </View>
-        <View style={{ height: Spacing.XXS }} />
-        <View style={styles.shimmerTitle}>
-          <Skeleton />
-        </View>
-      </View>
-    );
-  };
-  if (isLoading) {
-    return renderShimmer();
-  }
-  return (
-    <TouchableOpacity
-      style={{
-        justifyContent: 'center',
-        maxWidth: maxWidth,
-        alignItems: 'flex-start',
-      }}
-      onPress={onPress}
-    >
-      {!!description && (
-        <Text
-          typography="description_xs_regular"
-          color={tintColor}
-          numberOfLines={1}
-        >
-          {description}
-        </Text>
-      )}
-      <View style={Styles.row}>
-        <Text typography="action_xs_bold" color={tintColor} numberOfLines={1}>
-          {location}
-        </Text>
-        <Icon
-          source={'16_arrow_chevron_down_small'}
-          size={16}
-          style={{ marginHorizontal: Spacing.XS }}
-        />
-      </View>
-    </TouchableOpacity>
-  );
-};
-
-/**
- * Header user title
- * @constructor
- */
-const TitleJourney: React.FC<TitleJourneyProps> = ({
-  start,
-  end,
-  description,
-  icon,
-  iconColor,
-  tintColor,
-  onPress,
-  isLoading,
-}) => {
-  const { width } = Dimensions.get('screen');
-  const maxWidth = Dimensions.get('window').width - 172;
-  const startWidth = width * 0.25;
-  const endWidth = width * 0.75 - 212;
-  const renderShimmer = () => {
-    return (
-      <View style={Styles.flex}>
-        <View style={styles.shimmerTitle}>
-          <Skeleton />
-        </View>
-        <View style={{ height: Spacing.XXS }} />
-        <View style={styles.shimmerDescription}>
-          <Skeleton />
-        </View>
-      </View>
-    );
-  };
-  if (isLoading) {
-    return renderShimmer();
-  }
-  return (
-    <TouchableOpacity
-      style={{
-        justifyContent: 'center',
-        maxWidth: maxWidth,
-      }}
-      onPress={onPress}
-    >
-      <View style={styles.rowJourney}>
-        <View style={Styles.row}>
-          <Text
-            typography="action_xs_bold"
-            style={{ maxWidth: startWidth }}
-            color={tintColor}
-            numberOfLines={1}
-          >
-            {start}
-          </Text>
-          <Icon
-            source={icon}
-            size={16}
-            color={iconColor ?? tintColor}
-            style={{ marginHorizontal: Spacing.S, marginVertical: Spacing.XXS }}
-          />
-          {!!end && (
-            <Text
-              style={{ maxWidth: endWidth }}
-              typography="action_xs_bold"
-              color={tintColor}
-              numberOfLines={1}
-            >
-              {end}
-            </Text>
-          )}
-        </View>
-        <Icon
-          source={'16_arrow_chevron_down_small'}
-          size={16}
-          color={tintColor}
-          style={{ marginHorizontal: Spacing.XS, marginVertical: Spacing.XXS }}
-        />
-      </View>
-      {!!description && (
-        <View style={styles.rowJourney}>
-          <Text
-            typography="description_xs_regular"
-            color={tintColor}
-            numberOfLines={1}
-          >
-            {description}
-          </Text>
-        </View>
-      )}
-    </TouchableOpacity>
-  );
-};
-
-const styles = StyleSheet.create({
-  rowJourney: { flexDirection: 'row', width: '100%', alignItems: 'flex-start' },
-  verifiedDot: {
-    width: 4,
-    height: 4,
-    borderRadius: 2,
-    backgroundColor: Colors.green_03,
-    position: 'absolute',
-    alignSelf: 'center',
-  },
-  circle: {
-    width: 32,
-    height: 32,
-    borderRadius: 16,
-    borderWidth: 0.5,
-    borderColor: Colors.black_04,
-  },
-  circleMedium: {
-    width: 24,
-    height: 24,
-    borderRadius: 16,
-    borderWidth: 0.5,
-    borderColor: Colors.black_04,
-  },
-  circleSmall: {
-    width: 16,
-    height: 16,
-    borderRadius: 16,
-    borderWidth: 0.5,
-    borderColor: Colors.black_04,
-  },
-  groupAvtContainer: {
-    width: Spacing.XXL,
-    height: Spacing.XXL,
-    position: 'relative',
-  },
-  imageContainer: {
-    width: 32,
-    height: 32,
-    borderRadius: 16,
-    backgroundColor: Colors.pink_09,
-    borderWidth: 0.5,
-    justifyContent: 'center',
-    alignItems: 'center',
-    overflow: 'hidden',
-  },
-  dotAvatar: {
-    position: 'absolute',
-    width: 12,
-    height: 12,
-    borderRadius: 6,
-    bottom: -2,
-    right: -2,
-    borderWidth: 2,
-    borderColor: Colors.black_01,
-  },
-  verifiedIcon: { width: 16, height: 16, marginLeft: Spacing.XS },
-  shimmerTitle: {
-    height: 18,
-    width: 120,
-    borderRadius: Radius.XS,
-    overflow: 'hidden',
-  },
-  shimmerDescription: {
-    height: 12,
-    width: 120,
-    borderRadius: Radius.XS,
-    overflow: 'hidden',
-  },
-  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
-});
-
-export { HeaderTitle, TitleCustom };

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

@@ -1,76 +0,0 @@
-import { NavigationButtonProps } from '../types';
-import React, { useContext } from 'react';
-import { ApplicationContext, MiniAppContext } from '../../Context';
-import { StyleSheet, TouchableOpacity, View, ViewStyle } from 'react-native';
-import { Colors, Spacing } from '../../Consts';
-import { Icon } from '../../Icon';
-import { BadgeDot } from '../../Badge';
-
-/**
- * default navigation button used header nav
- */
-const NavigationButton: React.FC<NavigationButtonProps> = ({
-  icon,
-  tintColor,
-  showBadge = false,
-  ...props
-}) => {
-  const { theme } = useContext(ApplicationContext);
-  let buttonStyle: ViewStyle = {};
-  if (tintColor === Colors.black_01) {
-    buttonStyle = {
-      backgroundColor: '#00000099',
-      borderColor: '#FFFFFF33',
-    };
-  }
-
-  return (
-    <View style={{ width: 28 }}>
-      <TouchableOpacity
-        {...props}
-        style={[styles.navigationButton, buttonStyle]}
-        hitSlop={{ top: 7, bottom: 7, left: 7, right: 7 }}
-      >
-        <Icon
-          source={icon}
-          color={tintColor ?? theme.colors.text.default}
-          size={20}
-        />
-      </TouchableOpacity>
-      {showBadge && <BadgeDot size={'small'} style={styles.badgeDot} />}
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  navigationButton: {
-    height: 28,
-    width: 28,
-    borderRadius: 14,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#FFFFFF99',
-    borderColor: '#00000033',
-    borderWidth: 0.2,
-  },
-  badgeDot: {
-    position: 'absolute',
-    top: -Spacing.XXS,
-    right: -Spacing.XXS,
-  },
-  badgeDotAnimation: {
-    position: 'absolute',
-    top: -Spacing.XS,
-    right: -Spacing.XS,
-  },
-  verifiedDot: {
-    width: 4,
-    height: 4,
-    borderRadius: 2,
-    backgroundColor: Colors.green_03,
-    position: 'absolute',
-    alignSelf: 'center',
-  },
-});
-
-export { NavigationButton };