sapo-components-ui-rn 1.1.19 → 1.1.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sapo-components-ui-rn",
-  "version": "1.1.19",
+  "version": "1.1.21",
   "description": "React Native UI Components Library",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/src/assets/svg/icon-radio-active.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12Z" fill="#0088FF"/>
+<circle cx="12" cy="12" r="6" fill="white"/>
+<circle cx="12" cy="12" r="4" fill="#0088FF"/>
+</svg>

package/src/assets/svg/icon-radio.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12Z" fill="#A3A8AF"/>
+<path d="M6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12C18 15.3137 15.3137 18 12 18C8.68629 18 6 15.3137 6 12Z" fill="white"/>
+</svg>

package/src/assets/svg/index.ts

@@ -0,0 +1,13 @@
+import IconClose from "./icon-close.svg";
+import IconCheckbox from "./icon-checkbox.svg";
+import IconCheckboxActive from "./icon-checkbox-active.svg";
+import IconRadio from "./icon-radio.svg";
+import IconRadioActive from "./icon-radio-active.svg";
+
+export const Svg = {
+  IconClose,
+  IconCheckbox,
+  IconCheckboxActive,
+  IconRadio,
+  IconRadioActive,
+};

package/src/components/Checkbox/index.tsx

@@ -70,7 +70,6 @@ const Checkbox = ({
         <View paddingRight={CONSTANTS.SPACE_8}>
           <Icon
             name={isActive ? "IconCheckboxActive" : "IconCheckbox"}
-            type="Svg"
             size={iconSize}
             color={checkboxColor}
           />

package/src/components/Icon/index.tsx

@@ -1,8 +1,5 @@
-import React, { useMemo } from "react";
+import React from "react";
 import { StyleProp, TextStyle, TouchableOpacity, View } from "react-native";
-import FontAwesome from "react-native-vector-icons/FontAwesome";
-import MaterialIcons from "react-native-vector-icons/MaterialIcons";
-import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
 import { useInternalTheme } from "../../core/theming";
 import { CONSTANTS } from "../../styles/themes/tokens";
 import SvgIcon from "../IconSvg";
@@ -21,14 +18,6 @@ import IconInfo from "@/icons/IconInfo";
 import IconWarning from "@/icons/IconWarning";
 import IconDelNumber from "@/icons/IconDelNumber";
 
-export type IconType =
-  | "FontAwesome"
-  | "Image"
-  | "MaterialIcons"
-  | "Feather"
-  | "MaterialCommunityIcons"
-  | "Svg";
-
 export interface IconProps {
   name:
     | "IconCheckboxActive"
@@ -51,40 +40,20 @@ export interface IconProps {
   style?: StyleProp<TextStyle>;
   showBackground?: boolean;
   onPress?: () => void;
-  type?: IconType;
   tintColor?: string;
   animatedProps?: Record<string, unknown>;
 }
 
-const getIconComponent = (type: IconType) => {
-  switch (type) {
-    case "MaterialIcons":
-      return MaterialIcons;
-    case "MaterialCommunityIcons":
-      return MaterialCommunityIcons;
-    case "FontAwesome":
-    default:
-      return FontAwesome;
-  }
-};
-
 const Icon: React.FC<IconProps> = ({
   name,
   size = 14,
   color,
   style,
-  showBackground,
-  backgroundColor,
   onPress,
-  type = "FontAwesome",
-  tintColor,
-  ...rest
 }) => {
   const theme = useInternalTheme();
   const { colors } = theme;
 
-  const IconComponent = useMemo(() => getIconComponent(type), [type]);
-
   const renderName = () => {
     switch (name) {
       case "IconCheckboxActive":
@@ -121,23 +90,12 @@ const Icon: React.FC<IconProps> = ({
   };
 
   const renderIcon = () => {
-    if (type === "Svg") {
-      return (
-        <SvgIcon
-          name={renderName()}
-          width={size}
-          height={size}
-          color={color || colors.iconPrimaryDefault}
-        />
-      );
-    }
-
     return (
-      <IconComponent
-        name={name as string}
-        size={size}
+      <SvgIcon
+        name={renderName()}
+        width={size}
+        height={size}
         color={color || colors.iconPrimaryDefault}
-        {...rest}
       />
     );
   };

package/src/components/IconSvg/index.tsx

@@ -1,6 +1,6 @@
 import colors from "../../theme/colors";
 import React from "react";
-import { View } from "react-native";
+import { Svg } from "../../assets/svg";
 
 interface SvgIconProps {
   name: any;
@@ -20,13 +20,12 @@ const SvgIcon: React.FC<SvgIconProps> = ({
   onPress,
   disabled = false,
 }) => {
-  // Kiểm tra kỹ hơn
-  if (!name || typeof name !== "function") {
-    console.warn(`Icon is not a valid React component:`, name);
-    return <View style={{ width, height }} />;
-  }
+  const IconComponent = (Svg as any)[name];
 
-  const IconComponent = name;
+  if (!IconComponent) {
+    console.warn(`Icon "${name}" không tồn tại trong Svg.`);
+    return null;
+  }
 
   return (
     <IconComponent

package/src/components/NumberKeyboard/index.tsx

@@ -217,7 +217,6 @@ const NumberKeyboard: React.FC<NumberKeyboardProps> = ({
             <TouchableOpacity onPress={handleClear} style={styles.clearButton}>
               <Icon
                 name="IconClearText"
-                type="Svg"
                 size={24}
                 color={colors.textSecondary}
               />
@@ -249,7 +248,7 @@ const NumberKeyboard: React.FC<NumberKeyboardProps> = ({
                     }
                   >
                     {key === "del" ? (
-                      <Icon name="IconDelNumber" type="Svg" size={24} />
+                      <Icon name="IconDelNumber" size={24} />
                     ) : (
                       <Text
                         style={[

package/src/components/RadioButton/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from "react";
+import React, { useState, useCallback, useMemo, useEffect } from "react";
 import { StyleProp, ViewStyle, StyleSheet, TextStyle } from "react-native";
 import View from "../View";
 import { CONSTANTS } from "../../styles/themes/tokens";
@@ -63,7 +63,6 @@ const RadioButton = ({
                 ? "IconRadioActive"
                 : "IconRadio"
             }
-            type="Svg"
             size={24}
             color={getColorCheckbox}
           />

package/src/components/SearchInput/index.tsx

@@ -1,7 +1,6 @@
 import React from "react";
-import { StyleProp, ViewStyle, StyleSheet, TextStyle } from "react-native";
+import { StyleProp, ViewStyle, TextStyle } from "react-native";
 import View from "../View";
-import containerStyles from "../../theme/container-styles";
 import Icon from "../Icon";
 import TextInput from "../TextInput/TextInput";
 import { useInternalTheme } from "../../core/theming";
@@ -49,7 +48,7 @@ const SearchInput = ({
     <TextInput
       left={
         <View>
-          <Icon name={"IconSearch"} type="Svg" size={18} />
+          <Icon name={"IconSearch"} size={18} />
         </View>
       }
       disabled={disabled}

package/src/components/SelectionField/index.tsx

@@ -146,7 +146,7 @@ const SelectionField = ({
             </Text>
           </View>
 
-          {right || <Icon name={"IconArrowDown"} type="Svg" size={24} />}
+          {right || <Icon name={"IconArrowDown"} size={24} />}
           <Spacer width={SPACE_12} />
         </View>
       </ScaleButton>

package/src/components/Tag/index.tsx

@@ -97,7 +97,6 @@ const Tag = ({
           <View paddingLeft={CONSTANTS.SPACE_4}>
             <Icon
               name={"IconClose"}
-              type="Svg"
               size={20}
               color={colors.iconBrandDefault}
             />

package/src/components/Text/index.tsx

@@ -26,11 +26,11 @@ const Text = (props: IText) => {
       fontWeight: "normal",
       color: colors.textDefault,
       fontFamily: "Inter-Regular",
-      fontSize: 15,
+      fontSize: 14,
       lineHeight: 20,
     };
     const {
-      size = 15,
+      size = 14,
       lineHeight,
       center,
       color,

package/src/components/TextInput/TextInputDefault.tsx

@@ -393,7 +393,7 @@ const TextInputDefault = ({
             onPress={handleClear}
             style={multiline ? styles.clearButtonMultiline : styles.clearButton}
           >
-            <Icon name={"IconClearText"} type="Svg" size={24} />
+            <Icon name={"IconClearText"} size={24} />
           </TouchableOpacity>
         ) : (
           <Spacer width={CONSTANTS.SPACE_12} />

package/src/components/TextInput/TextInputFlat.tsx

@@ -501,7 +501,7 @@ const TextInputFlat = ({
         </View>
         {parentState.focused && !disabled && clearButton && inputValue ? (
           <TouchableOpacity onPress={handleClear} style={styles.clearButton}>
-            <Icon name="IconClearText" type="Svg" size={24} />
+            <Icon name="IconClearText" size={24} />
           </TouchableOpacity>
         ) : (
           <Spacer width={SPACE_12} />

package/src/components/TextInput/TextInputNumber.tsx

@@ -363,7 +363,7 @@ const TextInputNumber = ({
           </View>
           {clearButton && !checkValueEmpty() && (
             <TouchableOpacity activeOpacity={0.8} onPress={handleClearInput}>
-              <Icon name={"IconClearText"} type="Svg" size={24} />
+              <Icon name={"IconClearText"} size={24} />
             </TouchableOpacity>
           )}
           {right && numberValue && (
@@ -430,7 +430,6 @@ const TextInputNumber = ({
               >
                 <Icon
                   name="IconClearText"
-                  type="Svg"
                   size={24}
                   color={colors.textSecondary}
                 />
@@ -462,7 +461,7 @@ const TextInputNumber = ({
                       }
                     >
                       {key === "del" ? (
-                        <Icon name="IconDelNumber" type="Svg" size={24} />
+                        <Icon name="IconDelNumber" size={24} />
                       ) : (
                         <Text
                           style={[

package/src/components/TextInput/constants.tsx

@@ -1,5 +1,5 @@
-export const MAXIMIZED_LABEL_FONT_SIZE = 15;
-export const MINIMIZED_LABEL_FONT_SIZE = 13;
+export const MAXIMIZED_LABEL_FONT_SIZE = 14;
+export const MINIMIZED_LABEL_FONT_SIZE = 12;
 export const LABEL_WIGGLE_X_OFFSET = 4;
 
 export const ADORNMENT_SIZE = 24;

package/src/components/Toast/index.tsx

@@ -236,7 +236,7 @@ const Toast = memoWithRef(
         >
           <View row style={{ alignItems: "flex-start" }}>
             <View>
-              <Icon name={getSourceIcon()} type="Svg" size={20} />
+              <Icon name={getSourceIcon()} size={20} />
             </View>
             <View full paddingLeft={CONSTANTS.SPACE_8}>
               <Text bold color={colors.textOnFillDefault}>

package/src/icons/IconRadio.tsx

@@ -1,17 +1,10 @@
 import * as React from "react";
-import Svg, { Path } from "react-native-svg";
+import Svg, { Circle } from "react-native-svg";
 import { SvgProps } from "react-native-svg";
 
 const IconRadio = (props: SvgProps) => (
   <Svg width={24} height={24} viewBox="0 0 24 24" fill="none" {...props}>
-    <Path
-      d="M4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12Z"
-      fill="#9F9FA9"
-    />
-    <Path
-      d="M6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12C18 15.3137 15.3137 18 12 18C8.68629 18 6 15.3137 6 12Z"
-      fill="white"
-    />
+    <Circle cx={12} cy={12} r={9.25} stroke="#A1A5AB" strokeWidth={1.5} />
   </Svg>
 );
 

package/src/icons/IconRadioActive.tsx

@@ -1,17 +1,11 @@
 import * as React from "react";
-import Svg, { Circle, Path } from "react-native-svg";
+import Svg, { Circle } from "react-native-svg";
 import { SvgProps } from "react-native-svg";
 
 const IconRadioActive = (props: SvgProps) => (
   <Svg width={24} height={24} viewBox="0 0 24 24" fill="none" {...props}>
-    {/* <Circle cx={12} cy={12} r={9.25} stroke="currentColor" strokeWidth={1.5} />
-    <Circle cx={12} cy={12} r={6} fill="currentColor" /> */}
-    <Path
-      d="M4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12Z"
-      fill="#0071ED"
-    />
-    <Circle cx="12" cy="12" r="6" fill="white" />
-    <Circle cx="12" cy="12" r="4" fill="#0071ED" />
+    <Circle cx={12} cy={12} r={9.25} stroke="currentColor" strokeWidth={1.5} />
+    <Circle cx={12} cy={12} r={6} fill="currentColor" />
   </Svg>
 );