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

package/Input/ErrorView.tsx

@@ -1,59 +0,0 @@
-import React, { type FC, useContext } from 'react';
-import { View } from 'react-native';
-import { Styles } from '../Consts';
-import { ApplicationContext } from '../Context';
-import { Icon } from '../Icon';
-import { Text, useScaleSize } from '../Text';
-import styles from './styles';
-
-const ICON_SIZE = 16;
-
-type ErrorViewProps = {
-  errorMessage?: string;
-  errorSpacing?: boolean;
-  hintText?: string;
-  componentId?: string;
-};
-
-/**
- * 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.
- */
-const ErrorView: FC<ErrorViewProps> = ({
-  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(ICON_SIZE);
-
-  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 />;
-};
-
-export { ErrorView };

package/Input/FloatingView.tsx

@@ -1,101 +0,0 @@
-import React, { type FC, useContext } from 'react';
-import {
-  type GestureResponderEvent,
-  TouchableOpacity,
-  View,
-  type ViewStyle,
-} from 'react-native';
-import { ApplicationContext } from '../Context';
-import { Icon } from '../Icon';
-import { Text, useScaleSize } from '../Text';
-import { PRESSED_OPACITY } from './constants';
-import styles from './styles';
-
-const LABEL_OFFSET = 10;
-const ICON_SIZE = 16;
-
-type FloatingViewProps = {
-  floatingValue?: string;
-  floatingIconColor?: string;
-  componentId?: string;
-  disabled?: boolean;
-  floatingIcon?: string;
-  required?: boolean;
-  style?: ViewStyle;
-  onPress?: (e: GestureResponderEvent) => void;
-};
-
-/**
- * Floating label on the input's top border with a required `*` and an
- * optional pressable icon; renders nothing without `floatingValue`.
- */
-const FloatingView: FC<FloatingViewProps> = ({
-  floatingValue,
-  floatingIconColor,
-  disabled,
-  floatingIcon,
-  required,
-  style,
-  onPress,
-  componentId,
-}) => {
-  const { theme } = useContext(ApplicationContext);
-  const scaledTop = useScaleSize(LABEL_OFFSET);
-  if (!floatingValue) {
-    return null;
-  }
-
-  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 ? PRESSED_OPACITY : 1}
-          onPress={onPress}
-          accessibilityLabel={`${componentId}|floating-icon-touch`}
-        >
-          <Icon
-            color={floatingIconTintColor}
-            source={floatingIcon}
-            size={ICON_SIZE}
-            style={styles.floatingIcon}
-            accessibilityLabel={`${componentId}|floating-icon`}
-          />
-        </TouchableOpacity>
-      )}
-    </View>
-  );
-};
-
-export { FloatingView };

package/Input/RenderTrailing.tsx

@@ -1,79 +0,0 @@
-import React, { type FC, type ReactNode, useContext } from 'react';
-import { TouchableOpacity } from 'react-native';
-import IconSources from '../Assets/icon.json';
-import { ApplicationContext } from '../Context';
-import { Icon } from '../Icon';
-import { Loader } from '../Loader';
-import { Text } from '../Text';
-import styles from './styles';
-
-const ICON_SIZE = 24;
-const TEXT_MAX_LENGTH = 15;
-
-type IconSourceMap = Record<string, { uri?: string } | undefined>;
-
-type TrailingProps = {
-  loading?: boolean;
-  color?: string;
-  icon?: string;
-  componentId?: string;
-  onPressIcon?: () => void;
-};
-
-/**
- * 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).
- */
-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) {
-    return null;
-  }
-
-  const iconSources: IconSourceMap = IconSources;
-  const isIconName = !!iconSources[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}
-        size={ICON_SIZE}
-        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, TEXT_MAX_LENGTH)}
-    </Text>,
-  );
-};
-
-export { RenderTrailing };

package/Input/constants.ts

@@ -1,8 +0,0 @@
-/** Input text size before font scaling. */
-const INPUT_FONT_SIZE = 14;
-/** Size of the clear (x) icon shown while a focused field has a value. */
-const CLEAR_ICON_SIZE = 16;
-/** Pressed opacity of the floating icon, dropdown and typing placeholder. */
-const PRESSED_OPACITY = 0.6;
-
-export { INPUT_FONT_SIZE, CLEAR_ICON_SIZE, PRESSED_OPACITY };