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

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

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

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