sapo-components-ui-rn 1.0.0

package/src/components/Checkbox/index.tsx

@@ -0,0 +1,107 @@
+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";
+import Text from "../Text";
+import { useInternalTheme } from "../../core/theming";
+import containerStyles from "../../theme/container-styles";
+import Icon from "../Icon";
+
+interface CheckboxProps {
+  style?: StyleProp<ViewStyle>;
+  content: string;
+  onPress?: (val?: any) => void;
+  textStyle?: StyleProp<TextStyle>;
+  disabled?: boolean;
+  leftIcon?: React.ReactNode;
+  checked?: boolean;
+  iconSize?: number;
+}
+
+const useCheckboxColor = (isActive: boolean, disabled: boolean) => {
+  const theme = useInternalTheme();
+  const { colors } = theme;
+
+  return useMemo(() => {
+    if (disabled) {
+      return colors.iconPrimaryDisabled;
+    }
+    if (isActive) {
+      return colors.iconBrandDefault;
+    }
+    return colors.surfacePrimaryDefault;
+  }, [isActive, disabled, colors]);
+};
+
+const Checkbox = ({
+  style,
+  content = "content",
+  textStyle,
+  onPress,
+  disabled = false,
+  leftIcon,
+  checked = false,
+  iconSize = 24,
+}: CheckboxProps) => {
+  const theme = useInternalTheme();
+  const { colors } = theme;
+  const [isActive, setActive] = useState<boolean>(checked);
+  const checkboxColor = useCheckboxColor(isActive, disabled);
+
+  const handlePressChipBar = useCallback(() => {
+    setActive(!isActive);
+    onPress?.();
+  }, [isActive, onPress]);
+
+  useEffect(() => {
+    setActive(checked);
+  }, [checked]);
+
+  return (
+    <View
+      row
+      disabled={disabled}
+      alignCenter
+      style={[style]}
+      onPress={handlePressChipBar}
+    >
+      {leftIcon ? (
+        <View paddingRight={CONSTANTS.SPACE_8}>{leftIcon}</View>
+      ) : (
+        <View paddingRight={CONSTANTS.SPACE_8}>
+          <Icon
+            name={isActive ? "IconCheckboxActive" : "IconCheckbox"}
+            type="Svg"
+            size={iconSize}
+            color={checkboxColor}
+          />
+        </View>
+      )}
+
+      <View>
+        <Text
+          color={colors.textDefault}
+          style={[
+            styles.text14,
+            disabled && {
+              color: colors.textSecondary,
+            },
+            textStyle,
+          ]}
+        >
+          {content}
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  ...containerStyles,
+  icon: {
+    width: 24,
+    height: 24,
+  },
+});
+
+export default Checkbox;

package/src/components/ChipBar/index.tsx

@@ -0,0 +1,112 @@
+import React, { useState, useCallback, useEffect } from "react";
+import { StyleProp, ViewStyle, StyleSheet, TextStyle } from "react-native";
+import View from "../View";
+import { CONSTANTS } from "../../styles/themes/tokens";
+import Text from "../Text";
+import { useInternalTheme } from "../../core/theming";
+import containerStyles from "../../theme/container-styles";
+import CountingDot from "../CountingDot";
+
+interface ChipBarProps {
+  style?: StyleProp<ViewStyle>;
+  title: string;
+  borderRadius?: number;
+  onPress?: (val?: any) => void;
+  textStyle?: StyleProp<TextStyle>;
+  disabled?: boolean;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  badge?: number;
+  isActive?: boolean;
+}
+
+const ChipBar = ({
+  style,
+  borderRadius = CONSTANTS.BORDER_RADIUS_ROUNDED,
+  title = "content",
+  textStyle,
+  onPress,
+  disabled = false,
+  leftIcon,
+  rightIcon,
+  badge = 0,
+  isActive = false,
+}: ChipBarProps) => {
+  const theme = useInternalTheme();
+  const { colors } = theme;
+  const [active, setActive] = useState<boolean>(isActive);
+
+  const handlePressChipBar = useCallback(() => {
+    setActive(!active);
+    onPress?.();
+  }, [active]);
+
+  useEffect(() => {
+    setActive(isActive);
+  }, [isActive]);
+
+  return (
+    <View row>
+      <View
+        row
+        disabled={disabled}
+        paddingHorizontal={CONSTANTS.SPACE_12}
+        paddingVertical={CONSTANTS.SPACE_8}
+        borderRadius={borderRadius}
+        borderWidth={1}
+        alignCenter
+        style={[
+          style,
+          disabled && {
+            backgroundColor: colors.surfaceSecondaryDefault,
+            borderColor: colors.surfaceSecondaryDefault,
+          },
+        ]}
+        onPress={handlePressChipBar}
+        borderColor={
+          active ? colors.borderBrandDefault : colors.borderPrimaryDefault
+        }
+        backgroundColor={
+          active
+            ? colors.surfaceBrandInverseDefault
+            : colors.backgroundSecondary
+        }
+      >
+        {leftIcon && <View paddingRight={CONSTANTS.SPACE_4}>{leftIcon}</View>}
+        <View>
+          <Text
+            color={active ? colors.textBrandDefault : colors.textDefault}
+            style={[
+              styles.text14,
+              styles.textMedium,
+              disabled && {
+                color: colors.textSecondary,
+              },
+              textStyle,
+            ]}
+          >
+            {title}
+          </Text>
+        </View>
+        {rightIcon && <View paddingLeft={CONSTANTS.SPACE_4}>{rightIcon}</View>}
+      </View>
+      {badge > 0 && (
+        <View style={styles.badgeContainer}>
+          <CountingDot value={badge} />
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  ...containerStyles,
+  badgeContainer: {
+    position: "absolute",
+    right: 0,
+    top: -4,
+    zIndex: 999,
+  },
+});
+
+export default ChipBar;

package/src/components/CountingDot/index.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import View from "../View";
+import Text from "../Text";
+import { CONSTANTS } from "../../styles/themes/tokens";
+import { useInternalTheme } from "../../core/theming";
+import { StyleProp, ViewStyle, StyleSheet, TextStyle } from "react-native";
+import containerStyles from "../../theme/container-styles";
+
+interface CountingDotProps {
+  children?: React.ReactNode;
+  value: string | number;
+  borderColor?: string;
+  backgroundColor?: string;
+  style?: StyleProp<ViewStyle>;
+  textColor?: string;
+  textStyle?: StyleProp<TextStyle>;
+}
+
+const CountingDot = ({
+  children,
+  value = "1",
+  backgroundColor,
+  style,
+  textColor,
+  textStyle,
+}: CountingDotProps) => {
+  const theme = useInternalTheme();
+  const { colors } = theme;
+
+  if (children) {
+    return <View style={style}>{children}</View>;
+  }
+  return (
+    <View row>
+      <View
+        center
+        borderRadius={CONSTANTS.BORDER_RADIUS_12}
+        backgroundColor={backgroundColor || colors.surfaceCriticalDefault}
+        paddingHorizontal={CONSTANTS.SPACE_4}
+        paddingVertical={CONSTANTS.SPACE_2}
+        style={[styles.container, style]}
+      >
+        <Text
+          size={10}
+          style={[styles.textMedium, textStyle]}
+          color={textColor || colors.textOnFillDefault}
+        >
+          {value}
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  ...containerStyles,
+  container: {
+    minWidth: 16,
+    minHeight: 16,
+  },
+});
+
+export default CountingDot;

package/src/components/FloatingButton/index.tsx

@@ -0,0 +1,99 @@
+//
+//  Created by Dung Nguyen on 25/04/25.
+//
+import React from "react";
+import {
+  ActivityIndicator,
+  StyleProp,
+  ViewStyle,
+  StyleSheet,
+  TouchableOpacity,
+} from "react-native";
+import View from "../View";
+import { memoDeepEqual } from "../../utils/function-utils";
+import { CONSTANTS } from "../../styles/themes/tokens";
+import { useInternalTheme } from "../../core/theming";
+
+export interface FloatingButtonProps {
+  isLoading?: boolean;
+  disabled?: boolean;
+  onPress?: (val?: any) => void;
+  style?: StyleProp<ViewStyle>;
+  children?: React.ReactNode;
+  size?: number;
+  hiddenBackground?: boolean;
+  props?: object;
+  backgroundColor?: string;
+  top?: number;
+  right?: number;
+}
+const FloatingButton = ({
+  isLoading,
+  disabled,
+  onPress,
+  style,
+  hiddenBackground = false,
+  size = CONSTANTS.BUTTON_HEIGHT,
+  children,
+  backgroundColor,
+  props,
+  top = 0,
+  right = 0,
+}: FloatingButtonProps) => {
+  const { colors } = useInternalTheme();
+  return (
+    <TouchableOpacity
+      activeOpacity={0.8}
+      disabled={disabled || isLoading || !onPress}
+      onPress={onPress}
+    >
+      <View
+        style={[
+          styles.btn,
+          !hiddenBackground
+            ? {
+                backgroundColor: backgroundColor || colors.surfaceBrandDefault,
+              }
+            : {
+                backgroundColor: "transparent",
+              },
+          {
+            width: size,
+            height: size,
+            borderRadius: size / 2,
+            top: top,
+            right: right,
+          },
+
+          disabled && {
+            borderWidth: 0,
+            backgroundColor: colors.surfaceBrandDisabled,
+          },
+          style,
+        ]}
+        {...props}
+      >
+        {isLoading ? <ActivityIndicator size={"small"} /> : children}
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  btn: {
+    position: "absolute",
+    justifyContent: "center",
+    alignItems: "center",
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+
+    elevation: 5,
+  },
+});
+
+export default memoDeepEqual(FloatingButton);

package/src/components/Icon/index.tsx

@@ -0,0 +1,135 @@
+import React, { useMemo } 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";
+import IconCheckboxActive from "../../icons/IconCheckboxActive";
+import IconCheckbox from "../../icons/IconCheckbox";
+import IconRadio from "../../icons/IconRadio";
+import IconRadioActive from "../../icons/IconRadioActive";
+import IconRadioDisable from "../../icons/IconRadioDisable";
+import IconArrowDown from "../../icons/IconArrowDown";
+import IconClearText from "../../icons/IconClearText";
+
+export type IconType =
+  | "FontAwesome"
+  | "Image"
+  | "MaterialIcons"
+  | "Feather"
+  | "MaterialCommunityIcons"
+  | "Svg";
+
+export interface IconProps {
+  name:
+    | "IconCheckboxActive"
+    | "IconCheckbox"
+    | "IconRadio"
+    | "IconRadioActive"
+    | "IconRadioDisable"
+    | "IconArrowDown"
+    | "IconClearText";
+  backgroundColor?: string;
+  size?: number;
+  color?: string;
+  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":
+        return IconCheckboxActive;
+      case "IconCheckbox":
+        return IconCheckbox;
+      case "IconRadio":
+        return IconRadio;
+      case "IconRadioActive":
+        return IconRadioActive;
+      case "IconRadioDisable":
+        return IconRadioDisable;
+      case "IconArrowDown":
+        return IconArrowDown;
+      case "IconClearText":
+        return IconClearText;
+      default:
+        return IconCheckbox;
+    }
+  };
+
+  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}
+        color={color || colors.iconPrimaryDefault}
+        {...rest}
+      />
+    );
+  };
+
+  return (
+    <TouchableOpacity disabled={!onPress} onPress={onPress}>
+      <View
+        style={[
+          {
+            width: size,
+            height: size,
+            borderRadius: CONSTANTS.BORDER_RADIUS_8,
+          },
+          style,
+        ]}
+      >
+        {renderIcon()}
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+export default React.memo(Icon);

package/src/components/IconSvg/index.tsx

@@ -0,0 +1,42 @@
+import colors from "../../theme/colors";
+import React from "react";
+import { View } from "react-native";
+
+interface SvgIconProps {
+  name: any;
+  width?: number;
+  height?: number;
+  color?: string;
+  style?: any;
+  onPress?: () => void;
+  disabled?: boolean;
+}
+const SvgIcon: React.FC<SvgIconProps> = ({
+  name,
+  width = 24,
+  height = 24,
+  color = colors.ink.INK40,
+  style,
+  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 = name;
+
+  return (
+    <IconComponent
+      width={width}
+      height={height}
+      color={disabled ? colors.ink.INK20 : color}
+      style={style}
+      onPress={disabled ? undefined : onPress}
+    />
+  );
+};
+
+export default SvgIcon;

package/src/components/Image/index.tsx

@@ -0,0 +1,127 @@
+import React, { useState } from "react";
+import {
+  Image as RNImage,
+  ImageBackground,
+  ImageProps,
+  View,
+  StyleProp,
+  ImageStyle,
+} from "react-native";
+import FastImage, { ResizeMode } from "@d11/react-native-fast-image";
+import { memoDeepEqual } from "../../utils/function-utils";
+
+interface PropsCustomImage extends ImageProps {
+  useFastImage?: boolean;
+  disableDefaultImage?: boolean;
+  children?: React.ReactNode;
+  resizeMode?: "cover" | "contain" | "stretch" | "center";
+  source: any;
+  style?: StyleProp<ImageStyle>;
+  loadingColor?: string;
+  showLoading?: boolean;
+}
+
+const getSource = (source: any) => {
+  let newSource = source;
+  if (typeof source === "string") {
+    newSource = { uri: source };
+  }
+  return newSource;
+};
+
+const Image = (props: PropsCustomImage) => {
+  const {
+    children,
+    source,
+    useFastImage,
+    disableDefaultImage,
+    style,
+    resizeMode = "contain",
+  } = props;
+
+  const [hasError, setHasError] = useState(false);
+
+  const image = getSource(
+    disableDefaultImage
+      ? source
+      : hasError
+      ? require("./assets/images/image_default.png")
+      : source || require("./assets/images/image_default.png")
+  );
+  const ImageComponent = children ? ImageBackground : RNImage;
+
+  const getUriImage = (uri: string) => {
+    return uri !== null &&
+      uri !== undefined &&
+      uri.includes("/") &&
+      uri.includes(".")
+      ? uri
+      : "";
+  };
+
+  const handleError = () => {
+    setHasError(true);
+  };
+
+  const getFastImageResizeMode = (mode: string): ResizeMode => {
+    switch (mode) {
+      case "cover":
+        return FastImage.resizeMode.cover;
+      case "contain":
+        return FastImage.resizeMode.contain;
+      case "stretch":
+        return FastImage.resizeMode.stretch;
+      case "center":
+        return FastImage.resizeMode.center;
+      default:
+        return FastImage.resizeMode.contain;
+    }
+  };
+
+  if (useFastImage && image?.uri) {
+    const {
+      defaultSource,
+      onLoad,
+      onLoadStart,
+      onLoadEnd,
+      onProgress,
+      style: imageStyle,
+      ...restProps
+    } = props;
+
+    return (
+      <View style={style}>
+        <FastImage
+          resizeMode={getFastImageResizeMode(resizeMode)}
+          {...restProps}
+          onError={handleError}
+          source={{
+            uri: getUriImage(image.uri),
+            cache: FastImage.cacheControl.immutable,
+          }}
+          style={imageStyle as any}
+        />
+      </View>
+    );
+  }
+
+  if (!source && disableDefaultImage) {
+    if (children) {
+      return <View {...props}>{children}</View>;
+    }
+    return null;
+  }
+
+  return (
+    <View style={style}>
+      <ImageComponent
+        resizeMode={resizeMode}
+        {...props}
+        source={image}
+        onError={handleError}
+      />
+    </View>
+  );
+};
+
+export default memoDeepEqual<PropsCustomImage>(Image);