@momo-kits/foundation 0.169.9-beta.1 → 0.169.9

package/Input/common.tsx

@@ -1,257 +0,0 @@
-import React, { FC, ReactNode, useContext } from 'react';
-import {
-  GestureResponderEvent,
-  TouchableOpacity,
-  View,
-  ViewStyle,
-} from 'react-native';
-import { ApplicationContext } from '../Context';
-import { Theme } from '../Application/types';
-import { Styles } from '../Consts';
-import { Icon } from '../Icon';
-import { useScaleSize, Text } from '../Text';
-import styles from './styles';
-import { Loader } from '../Loader';
-import IconSources from '../Assets/icon.json';
-
-type FloatingViewProps = {
-  floatingValue?: string;
-  floatingIconColor?: string;
-  componentId?: string;
-  disabled?: boolean;
-  floatingIcon?: string;
-  required?: boolean;
-  style?: ViewStyle;
-  onPress?: (e: GestureResponderEvent) => void;
-};
-
-type TrailingProps = {
-  loading?: boolean;
-  color?: string;
-  icon?: string;
-  componentId?: string;
-  onPressIcon?: () => void;
-};
-
-export const MAX_LENGTH = 300;
-
-/** Border color by state; priority is disabled > error > focused > default. */
-export const getBorderColor = (
-  theme: Theme,
-  focused: boolean,
-  errorMessage?: string,
-  disabled?: boolean,
-) => {
-  let borderColor = theme.colors.border.default;
-
-  if (focused) {
-    borderColor = theme.colors.primary;
-  }
-
-  if (errorMessage) {
-    borderColor = theme.colors.error.primary;
-  }
-
-  if (disabled) {
-    borderColor = theme.colors.border.disable;
-  }
-
-  return { borderColor };
-};
-
-/**
- * Container style for `size`; multiline uses `height` as minHeight so the
- * field can grow with its content.
- */
-export const getSizeStyle = (
-  size?: 'small' | 'large',
-  multiline: boolean = false,
-  height?: number,
-) => {
-  let scaleStyle: ViewStyle = {};
-  if (height) {
-    scaleStyle = { height };
-  }
-
-  if (multiline) {
-    return [
-      styles.multilineContainer,
-      {
-        minHeight: height,
-      },
-    ];
-  }
-
-  if (size === 'small') {
-    return [styles.smallContainer, scaleStyle];
-  }
-  return [styles.container, scaleStyle];
-};
-
-/**
- * Error or hint row under an input (error wins); with neither, `errorSpacing`
- * keeps an empty row so the layout doesn't jump when an error appears.
- */
-export const ErrorView: FC<{
-  errorMessage?: string;
-  errorSpacing?: boolean;
-  hintText?: string;
-  componentId?: string;
-}> = ({ errorMessage, errorSpacing, hintText, componentId }) => {
-  const { theme } = useContext(ApplicationContext);
-  const errorColor = theme.colors.error.primary;
-  const hintColor = theme.colors.text.hint;
-  const hintTextDefault = hintText ?? 'Không thể chỉnh sửa';
-  const scaledIconSize = useScaleSize(16);
-
-  if (errorMessage || hintText) {
-    const messageColor = errorMessage ? errorColor : hintColor;
-    const messageType = errorMessage ? 'error' : 'hint';
-    return (
-      <View style={styles.errorView}>
-        <View style={styles.errorIcon}>
-          <Icon color={messageColor} source="ic_error" size={scaledIconSize} />
-        </View>
-        <Text
-          accessibilityLabel={`${componentId}|${messageType}-text`}
-          style={Styles.flex}
-          color={messageColor}
-          typography={'description_default_regular'}
-        >
-          {errorMessage ?? hintTextDefault}
-        </Text>
-      </View>
-    );
-  }
-  if (errorSpacing) {
-    return <View style={[styles.errorView, styles.errorSpacing]} />;
-  }
-  return <View />;
-};
-
-/**
- * Floating label on the input's top border with a required `*` and an
- * optional pressable icon; renders nothing without `floatingValue`.
- */
-export const FloatingView: FC<FloatingViewProps> = ({
-  floatingValue,
-  floatingIconColor,
-  disabled,
-  floatingIcon,
-  required,
-  style,
-  onPress,
-  componentId,
-}) => {
-  const { theme } = useContext(ApplicationContext);
-  const scaledTop = useScaleSize(10);
-  if (floatingValue) {
-    let floatingTextColor = theme.colors.text.hint;
-    let floatingIconTintColor = floatingIconColor;
-    if (disabled) {
-      floatingTextColor = theme.colors.text.disable;
-      floatingIconTintColor = theme.colors.text.disable;
-    }
-
-    return (
-      <View
-        style={[
-          styles.floatingView,
-          styles.floatingViewLayer,
-          {
-            backgroundColor: theme.colors.background.surface,
-            top: -scaledTop,
-          },
-          style,
-        ]}
-      >
-        <Text
-          color={floatingTextColor}
-          typography={'label_s_medium'}
-          accessibilityLabel={`${componentId}|floating-text`}
-        >
-          {floatingValue}
-          {required && (
-            <Text
-              typography={'label_s_medium'}
-              color={theme.colors.error.primary}
-            >
-              *
-            </Text>
-          )}
-        </Text>
-        {!!floatingIcon && (
-          <TouchableOpacity
-            activeOpacity={onPress ? 0.6 : 1}
-            onPress={onPress}
-            accessibilityLabel={`${componentId}|floating-icon-touch`}
-          >
-            <Icon
-              color={floatingIconTintColor}
-              source={floatingIcon}
-              size={16}
-              style={styles.floatingIcon}
-              accessibilityLabel={`${componentId}|floating-icon`}
-            />
-          </TouchableOpacity>
-        )}
-      </View>
-    );
-  }
-  return null;
-};
-
-/**
- * Trailing slot: spinner while `loading`, an icon when `icon` is a known icon
- * name or URL, otherwise `icon` as a text action (first 15 chars).
- */
-export const RenderTrailing: FC<TrailingProps> = ({
-  loading,
-  color,
-  icon,
-  onPressIcon,
-  componentId,
-}) => {
-  const { theme } = useContext(ApplicationContext);
-  if (loading) {
-    return <Loader type={'spinner'} color={color} style={styles.icon} />;
-  }
-
-  if (icon) {
-    const isIconName = !!(IconSources as any)?.[icon]?.uri;
-    const isIcon = isIconName || icon.includes('http');
-    const renderIconTouchable = (content: ReactNode) => {
-      return (
-        <TouchableOpacity
-          accessibilityLabel={`${componentId}|trailing-touch`}
-          onPress={onPressIcon}
-          style={styles.icon}
-        >
-          {content}
-        </TouchableOpacity>
-      );
-    };
-
-    if (isIcon) {
-      return renderIconTouchable(
-        <Icon
-          color={color}
-          source={icon as string}
-          size={24}
-          accessibilityLabel={`${componentId}|trailing-icon`}
-        />,
-      );
-    }
-    return renderIconTouchable(
-      <Text
-        typography="action_xs_bold"
-        color={color ?? theme.colors.primary}
-        numberOfLines={1}
-        accessibilityLabel={`${componentId}|trailing-text`}
-      >
-        {icon!.substring(0, 15)}
-      </Text>,
-    );
-  }
-  return null;
-};

package/Input/moneyUtils.ts

@@ -1,23 +0,0 @@
-export const moneyFormatter = new Intl.NumberFormat('vi-VN');
-
-/**
- * Locates the single edited span between `old` and `text`: common prefix
- * length (`start`), common suffix length (`suffix`) and removed + inserted
- * char count (`size`).
- */
-export const findEdit = (old: string, text: string) => {
-  let start = 0;
-  while (start < text.length && old[start] === text[start]) {
-    start += 1;
-  }
-  const maxSuffix = Math.min(text.length, old.length) - start;
-  let suffix = 0;
-  while (suffix < maxSuffix) {
-    if (old[old.length - 1 - suffix] !== text[text.length - 1 - suffix]) {
-      break;
-    }
-    suffix += 1;
-  }
-  const size = old.length + text.length - 2 * (start + suffix);
-  return { old, start, suffix, size };
-};