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

package/src/libs/Title/index.tsx

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

@@ -1,17 +0,0 @@
-{
-    "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

@@ -1,16 +0,0 @@
-#!/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

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

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

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