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

package/src/libs/Title/index.tsx

@@ -0,0 +1,284 @@
+import React, { FC, useContext, useMemo, useState } from 'react';
+import {
+  Text as RNText,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from 'react-native';
+import {
+  ApplicationContext,
+  Badge,
+  Colors,
+  Icon,
+  MiniAppContext,
+  ScreenContext,
+  setAutomationID,
+  Text,
+  Typography,
+  useScaleSize,
+} from '@momo-kits/foundation';
+import styles from './styles';
+import { TitleProps } from './types';
+
+const Title: FC<TitleProps> = ({
+  accessibilityLabel,
+  title = 'Title',
+  type = 'section',
+  size = 'medium',
+  icon,
+  description,
+  iconColor = null,
+  iconAlign = 'top',
+  showRightAction = false,
+  showTrailingAction = false,
+  badgeLabel,
+  buttonTitle,
+  onPressRightAction = () => {},
+  onPressTrailingAction = () => {},
+  buttonSize = 'small',
+  textOnly = false,
+  style,
+}) => {
+  const { theme } = useContext(ApplicationContext);
+  const [badgeWidth, setBadgeWidth] = useState(0);
+  const [contentWidth, setContentWidth] = useState(0);
+
+  // Dynamic styles using useScaleSize hook
+  const dynamicStyles = {
+    card_small: {
+      fontSize: useScaleSize(14),
+      lineHeight: useScaleSize(20),
+    },
+    card_medium: {
+      fontSize: useScaleSize(16),
+      lineHeight: useScaleSize(22),
+    },
+    card_large: {
+      fontSize: useScaleSize(18),
+      lineHeight: useScaleSize(26),
+    },
+    section_medium: {
+      fontSize: useScaleSize(20),
+      lineHeight: useScaleSize(28),
+    },
+    section_small: {
+      fontSize: useScaleSize(16),
+      lineHeight: useScaleSize(22),
+    },
+    section_large: {
+      fontSize: useScaleSize(24),
+      lineHeight: useScaleSize(34),
+    },
+  };
+
+  const styleSheet: {
+    [key: string]: any;
+  } = { ...styles, ...dynamicStyles };
+  const typography = `${type}_${size}`;
+  const isSection = type === 'section';
+  const numberOfLines = showTrailingAction || !!badgeLabel ? 1 : 2;
+  const buttonTypo: Typography =
+    buttonSize === 'small' ? 'action_xs_bold' : 'action_s_bold';
+  const flexStyle: ViewStyle | undefined = showTrailingAction
+    ? { width: '70%' }
+    : undefined;
+  const componentName = 'Title';
+
+  const app = useContext<any>(MiniAppContext);
+  const screen = useContext<any>(ScreenContext);
+
+  const componentId = useMemo(() => {
+    if (accessibilityLabel) {
+      return accessibilityLabel;
+    }
+
+    return `${app.appId}/${app.code}/${screen.screenName}/${componentName}/${title}`;
+  }, [accessibilityLabel, app.appId, app.code, screen.screenName, title]);
+
+  const renderIcon = () => {
+    if (!icon) return null;
+
+    let iconStyle: ViewStyle = {
+      justifyContent: 'flex-start',
+    };
+
+    if (iconAlign === 'middle') {
+      iconStyle = { justifyContent: 'center' };
+    }
+
+    if (iconAlign === 'bottom') {
+      iconStyle = { justifyContent: 'flex-end' };
+    }
+
+    return (
+      <View
+        accessibilityLabel={componentId + '|icon'}
+        style={[styles.iconView, iconStyle]}
+      >
+        <Icon color={iconColor} source={icon} />
+      </View>
+    );
+  };
+
+  const renderContent = () => {
+    return (
+      <View style={styles.contentView}>
+        <View
+          onLayout={e => {
+            if (e.nativeEvent.layout.width !== contentWidth) {
+              setContentWidth(e.nativeEvent.layout.width);
+            }
+          }}
+          style={[styles.iconLeftView, flexStyle]}
+        >
+          <RNText
+            {...setAutomationID(componentId + '|title-text')}
+            allowFontScaling={false}
+            numberOfLines={numberOfLines}
+            style={[
+              styleSheet[typography],
+              styles.title,
+              {
+                maxWidth:
+                  contentWidth > 0 ? contentWidth - badgeWidth : undefined,
+              },
+            ]}
+          >
+            {title}
+          </RNText>
+          {badgeLabel && (
+            <View
+              onLayout={e => {
+                if (e.nativeEvent.layout.width !== badgeWidth) {
+                  setBadgeWidth(e.nativeEvent.layout.width);
+                }
+              }}
+              style={{
+                alignItems: 'center',
+              }}
+            >
+              <Badge
+                style={styles.badge}
+                label={badgeLabel}
+                accessibilityLabel={componentId + '|badge'}
+              />
+            </View>
+          )}
+          {renderActionLeft()}
+        </View>
+        {description && (
+          <Text
+            accessibilityLabel={componentId + '|description-text'}
+            style={styles.description}
+            color={theme.colors.text.secondary}
+            typography={'description_default_regular'}
+          >
+            {description}
+          </Text>
+        )}
+      </View>
+    );
+  };
+
+  const renderActionLeft = () => {
+    return (
+      <TouchableOpacity
+        accessibilityLabel={componentId + '|trailing-touch'}
+        onPress={onPressTrailingAction}
+        style={styles.iconLeftView}
+        hitSlop={{ top: 10, bottom: 10, left: 50, right: 10 }}
+      >
+        {showTrailingAction && !showRightAction && (
+          <View
+            style={[
+              styles.iconLeft,
+              {
+                backgroundColor: isSection
+                  ? Colors.black_06 + '99'
+                  : Colors.black_06 + '4D',
+              },
+            ]}
+          >
+            <Icon
+              source={'arrow_chevron_right_small'}
+              size={18}
+              color={theme.colors.text.default}
+            />
+          </View>
+        )}
+      </TouchableOpacity>
+    );
+  };
+
+  const renderActionRight = () => {
+    if (!showRightAction || showTrailingAction) return false;
+
+    const lineHeight = styleSheet[typography].lineHeight;
+
+    return (
+      <View
+        style={{
+          height: lineHeight,
+          justifyContent: 'center',
+        }}
+      >
+        {!buttonTitle ? (
+          <TouchableOpacity
+            onPress={onPressRightAction}
+            style={[
+              styles.iconRight,
+              {
+                backgroundColor: theme.colors.primary + '0F',
+              },
+            ]}
+            accessibilityLabel={componentId + '|label-right-action-touch'}
+          >
+            <Icon
+              source={'arrow_chevron_right_small'}
+              size={22}
+              color={theme.colors.primary}
+            />
+          </TouchableOpacity>
+        ) : (
+          <TouchableOpacity
+            onPress={onPressRightAction}
+            accessibilityLabel={componentId + '|label-right-action-touch'}
+          >
+            <Text color={theme.colors.primary} typography={buttonTypo}>
+              {buttonTitle}
+            </Text>
+          </TouchableOpacity>
+        )}
+      </View>
+    );
+  };
+
+  if (textOnly) {
+    return (
+      <View style={isSection && styles.margin}>
+        <RNText
+          {...setAutomationID(componentId + '|title-text')}
+          allowFontScaling={false}
+          numberOfLines={numberOfLines}
+          style={[styleSheet[typography], styles.title]}
+        >
+          {title}
+        </RNText>
+      </View>
+    );
+  }
+
+  return (
+    <View
+      style={[style, styles.wrapper, isSection && styles.margin]}
+      accessibilityLabel={componentId}
+    >
+      {renderIcon()}
+      {renderContent()}
+      {renderActionRight()}
+    </View>
+  );
+};
+
+export { Title };
+export type { TitleProps };

package/src/libs/Title/package.json

@@ -0,0 +1,17 @@
+{
+    "name": "@momo-kits/title",
+    "version": "0.157.1-beta.4",
+    "private": false,
+    "main": "index.tsx",
+    "dependencies": {},
+    "peerDependencies": {
+        "@momo-kits/foundation": "latest",
+        "prop-types": "^15.7.2",
+        "react": "16.9.0",
+        "react-native": ">=0.55"
+    },
+    "license": "MoMo",
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org/"
+    }
+}

package/src/libs/Title/publish.sh

@@ -0,0 +1,16 @@
+#!/bin/bash
+
+if [ "$1" == "stable" ]; then
+  npm version $(npm view @momo-kits/foundation@stable version)
+  npm version patch
+  npm publish --tag stable --access=public
+elif [ "$1" == "latest" ]; then
+  npm publish --tag latest --access=public
+elif [ "$1" == "beta" ]; then
+  npm publish --tag beta --access=public
+else
+  npm publish --tag alpha --access=public
+fi
+
+PACKAGE_NAME=$(npm pkg get name)
+NEW_PACKAGE_VERSION=$(npm pkg get version)

package/src/libs/Title/styles.ts

@@ -0,0 +1,54 @@
+import {StyleSheet} from 'react-native';
+import {Colors, Radius, Spacing} from '@momo-kits/foundation';
+
+export default StyleSheet.create({
+  actionIcon: {
+    borderRadius: Radius.M,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  icon: {
+    marginRight: Spacing.S,
+    borderRadius: Radius.XS,
+  },
+  wrapper: {
+    flexDirection: 'row',
+  },
+  margin: {
+    marginTop: Spacing.S,
+  },
+  iconView: {
+    marginRight: Spacing.S,
+  },
+  iconRight: {
+    width: 22,
+    height: 22,
+    borderRadius: Radius.M,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginLeft: Spacing.S,
+  },
+  iconLeft: {
+    width: 18,
+    height: 18,
+    borderRadius: Radius.M,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginHorizontal: Spacing.XS,
+  },
+  iconLeftView: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  contentView: {marginRight: Spacing.S, flex: 1},
+  title: {
+    fontWeight: 'bold',
+    color: Colors.black_17,
+  },
+  badge: {
+    marginLeft: Spacing.XS,
+  },
+  description: {
+    marginTop: Spacing.XS,
+  },
+});

package/src/libs/Title/types.ts

@@ -0,0 +1,21 @@
+import {ViewStyle} from 'react-native';
+
+export type TitleProps = {
+  type?: 'card' | 'section';
+  size?: 'small' | 'medium' | 'large';
+  title: string;
+  icon?: string;
+  description?: string;
+  iconColor?: string;
+  iconAlign?: 'top' | 'middle' | 'bottom';
+  showRightAction?: boolean;
+  showTrailingAction?: boolean;
+  badgeLabel?: string;
+  buttonTitle?: string;
+  buttonSize?: 'small' | 'large';
+  onPressRightAction?: () => void;
+  onPressTrailingAction?: () => void;
+  textOnly?: boolean;
+  style?: ViewStyle;
+  accessibilityLabel?: string;
+};

package/src/libs/Tooltip/TooltipButtons.tsx

@@ -0,0 +1,54 @@
+import React, { FC } from 'react';
+import { TouchableOpacity } from 'react-native';
+import {
+  Button,
+  ButtonProps,
+  Colors,
+  Icon,
+  IconButtonProps,
+  Text,
+  useScaleSize,
+} from '@momo-kits/foundation';
+import styles from './styles';
+
+const PrimaryButton: FC<ButtonProps> = ({ title, onPress }) => {
+  return (
+    <Button
+      full={false}
+      title={title}
+      onPress={onPress}
+      type={'secondary'}
+      size={'medium'}
+    />
+  );
+};
+
+const SecondaryButton: FC<ButtonProps> = ({ title, onPress, style }) => {
+  return (
+    <TouchableOpacity
+      style={[styles.secondaryButtonContainer, style]}
+      onPress={onPress}
+    >
+      <Text color={Colors.black_01} typography={'action_s_bold'}>
+        {title}
+      </Text>
+    </TouchableOpacity>
+  );
+};
+
+const IconButton: FC<IconButtonProps> = ({ icon, onPress, style }) => {
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      style={[
+        { width: useScaleSize(36), height: useScaleSize(36) },
+        styles.iconButtonContainer,
+        style,
+      ]}
+    >
+      <Icon source={icon} />
+    </TouchableOpacity>
+  );
+};
+
+export { PrimaryButton, SecondaryButton, IconButton };