sapo-components-ui-rn 1.0.0

package/src/components/ProgressBar.tsx

@@ -0,0 +1,272 @@
+import * as React from "react";
+import {
+  Animated,
+  I18nManager,
+  LayoutChangeEvent,
+  Platform,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from "react-native";
+
+import setColor from "color";
+
+import { useInternalTheme } from "../core/theming";
+import type { ThemeProp } from "../types";
+
+export type Props = React.ComponentPropsWithRef<typeof View> & {
+  /**
+   * Animated value (between 0 and 1). This tells the progress bar to rely on this value to animate it.
+   * Note: It should not be used in parallel with the `progress` prop.
+   */
+  animatedValue?: number;
+  /**
+   * Progress value (between 0 and 1).
+   * Note: It should not be used in parallel with the `animatedValue` prop.
+   */
+  progress?: number;
+  /**
+   * Color of the progress bar. The background color will be calculated based on this but you can change it by passing `backgroundColor` to `style` prop.
+   */
+  color?: string;
+  /**
+   * If the progress bar will show indeterminate progress.
+   */
+  indeterminate?: boolean;
+  /**
+   * Whether to show the ProgressBar (true, the default) or hide it (false).
+   */
+  visible?: boolean;
+  /**
+   * Style of filled part of the ProgresBar.
+   */
+  fillStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  style?: StyleProp<ViewStyle>;
+  /**
+   * @optional
+   */
+  theme?: ThemeProp;
+  /**
+   * testID to be used on tests.
+   */
+  testID?: string;
+};
+
+const INDETERMINATE_DURATION = 2000;
+const INDETERMINATE_MAX_WIDTH = 0.6;
+const { isRTL } = I18nManager;
+
+const ProgressBar = ({
+  color,
+  indeterminate,
+  progress = 0,
+  visible = true,
+  theme: themeOverrides,
+  animatedValue,
+  style,
+  fillStyle,
+  testID = "progress-bar",
+  ...rest
+}: Props) => {
+  const isWeb = Platform.OS === "web";
+  const theme = useInternalTheme();
+  const { current: timer } = React.useRef<Animated.Value>(
+    new Animated.Value(0)
+  );
+  const { current: fade } = React.useRef<Animated.Value>(new Animated.Value(0));
+  const passedAnimatedValue =
+    React.useRef<Props["animatedValue"]>(animatedValue);
+  const [width, setWidth] = React.useState<number>(0);
+  const [prevWidth, setPrevWidth] = React.useState<number>(0);
+
+  const indeterminateAnimation =
+    React.useRef<Animated.CompositeAnimation | null>(null);
+
+  const { scale } = theme.animation;
+
+  React.useEffect(() => {
+    passedAnimatedValue.current = animatedValue;
+  });
+
+  const startAnimation = React.useCallback(() => {
+    // Show progress bar
+    Animated.timing(fade, {
+      duration: 200 * scale,
+      toValue: 1,
+      useNativeDriver: true,
+      isInteraction: false,
+    }).start();
+
+    /**
+     * We shouldn't add @param animatedValue to the
+     * deps array, to avoid the unnecessary loop.
+     * We can only check if the prop is passed initially,
+     * and we do early return.
+     */
+    const externalAnimation =
+      typeof passedAnimatedValue.current !== "undefined" &&
+      passedAnimatedValue.current >= 0;
+
+    if (externalAnimation) {
+      return;
+    }
+
+    // Animate progress bar
+    if (indeterminate) {
+      if (!indeterminateAnimation.current) {
+        indeterminateAnimation.current = Animated.timing(timer, {
+          duration: INDETERMINATE_DURATION,
+          toValue: 1,
+          // Animated.loop does not work if useNativeDriver is true on web
+          useNativeDriver: !isWeb,
+          isInteraction: false,
+        });
+      }
+
+      // Reset timer to the beginning
+      timer.setValue(0);
+
+      Animated.loop(indeterminateAnimation.current).start();
+    } else {
+      Animated.timing(timer, {
+        duration: 200 * scale,
+        toValue: progress ? progress : 0,
+        useNativeDriver: true,
+        isInteraction: false,
+      }).start();
+    }
+  }, [fade, scale, indeterminate, timer, progress, isWeb]);
+
+  const stopAnimation = React.useCallback(() => {
+    // Stop indeterminate animation
+    if (indeterminateAnimation.current) {
+      indeterminateAnimation.current.stop();
+    }
+
+    Animated.timing(fade, {
+      duration: 200 * scale,
+      toValue: 0,
+      useNativeDriver: true,
+      isInteraction: false,
+    }).start();
+  }, [fade, scale]);
+
+  React.useEffect(() => {
+    if (visible) startAnimation();
+    else stopAnimation();
+  }, [visible, startAnimation, stopAnimation]);
+
+  React.useEffect(() => {
+    if (animatedValue && animatedValue >= 0) {
+      timer.setValue(animatedValue);
+    }
+  }, [animatedValue, timer]);
+
+  React.useEffect(() => {
+    // Start animation the very first time when previously the width was unclear
+    if (visible && prevWidth === 0) {
+      startAnimation();
+    }
+  }, [prevWidth, startAnimation, visible]);
+
+  const onLayout = (event: LayoutChangeEvent) => {
+    setPrevWidth(width);
+    setWidth(event.nativeEvent.layout.width);
+  };
+
+  const tintColor = color || theme.colors?.surfaceBrandDefault;
+  const trackTintColor = theme.colors.surfaceBrandDefault;
+
+  return (
+    <View
+      onLayout={onLayout}
+      {...rest}
+      accessible
+      accessibilityRole="progressbar"
+      accessibilityState={{ busy: visible }}
+      accessibilityValue={
+        indeterminate
+          ? {}
+          : { min: 0, max: 100, now: Math.round(progress * 100) }
+      }
+      testID={testID}
+    >
+      <Animated.View
+        style={[
+          styles.container,
+          { backgroundColor: trackTintColor, opacity: fade },
+          style,
+        ]}
+      >
+        {width ? (
+          <Animated.View
+            testID={`${testID}-fill`}
+            style={[
+              styles.progressBar,
+              {
+                width,
+                backgroundColor: tintColor,
+                transform: [
+                  {
+                    translateX: timer.interpolate(
+                      indeterminate
+                        ? {
+                            inputRange: [0, 0.5, 1],
+                            outputRange: [
+                              (isRTL ? 1 : -1) * 0.5 * width,
+                              (isRTL ? 1 : -1) *
+                                0.5 *
+                                INDETERMINATE_MAX_WIDTH *
+                                width,
+                              (isRTL ? -1 : 1) * 0.7 * width,
+                            ],
+                          }
+                        : {
+                            inputRange: [0, 1],
+                            outputRange: [(isRTL ? 1 : -1) * 0.5 * width, 0],
+                          }
+                    ),
+                  },
+                  {
+                    // Workaround for workaround for https://github.com/facebook/react-native/issues/6278
+                    scaleX: timer.interpolate(
+                      indeterminate
+                        ? {
+                            inputRange: [0, 0.5, 1],
+                            outputRange: [
+                              0.0001,
+                              INDETERMINATE_MAX_WIDTH,
+                              0.0001,
+                            ],
+                          }
+                        : {
+                            inputRange: [0, 1],
+                            outputRange: [0.0001, 1],
+                          }
+                    ),
+                  },
+                ],
+              },
+              fillStyle,
+            ]}
+          />
+        ) : null}
+      </Animated.View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    height: 4,
+    overflow: "hidden",
+    borderRadius: 10,
+  },
+
+  progressBar: {
+    flex: 1,
+  },
+});
+
+export default ProgressBar;

package/src/components/RadioButton/index.tsx

@@ -0,0 +1,105 @@
+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 RadioButtonProps {
+  style?: StyleProp<ViewStyle>;
+  content: string;
+  onPress?: (val?: any) => void;
+  textStyle?: StyleProp<TextStyle>;
+  disabled?: boolean;
+  leftIcon?: React.ReactNode;
+  checked?: boolean;
+}
+
+const RadioButton = ({
+  style,
+  content = "content",
+  textStyle,
+  onPress,
+  disabled = false,
+  leftIcon,
+  checked = false,
+}: RadioButtonProps) => {
+  const theme = useInternalTheme();
+  const { colors } = theme;
+  const [isActive, setActive] = useState<boolean>(checked);
+
+  const handlePressChipBar = useCallback(() => {
+    setActive(!isActive);
+    onPress?.();
+  }, [isActive]);
+
+  useEffect(() => {
+    setActive(checked);
+  }, [checked]);
+
+  const getColorCheckbox = useMemo(() => {
+    if (disabled) {
+      return colors.iconPrimaryDisabled;
+    }
+    if (isActive) {
+      return colors.iconBrandDefault;
+    }
+    return colors.surfacePrimaryDefault;
+  }, [isActive, disabled]);
+
+  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={
+              disabled
+                ? "IconRadioDisable"
+                : isActive
+                ? "IconRadioActive"
+                : "IconRadio"
+            }
+            type="Svg"
+            size={24}
+            color={getColorCheckbox}
+          />
+        </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 RadioButton;

package/src/components/ScaleButton/index.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { TouchableOpacity, TouchableOpacityProps } from "react-native";
+
+const ScaleButton = ({
+  children,
+  style,
+  onPress = () => {},
+  ...rest
+}: TouchableOpacityProps) => {
+  return (
+    <TouchableOpacity {...rest} onPress={onPress}>
+      {children}
+    </TouchableOpacity>
+  );
+};
+
+export default React.memo(ScaleButton);

package/src/components/SelectionField/index.tsx

@@ -0,0 +1,166 @@
+//
+//  Created by Dung Nguyen on 08/01/25.
+//
+import React from "react";
+import {
+  StyleSheet,
+  StyleProp,
+  ViewStyle,
+  TouchableOpacityProps,
+  TextStyle,
+} from "react-native";
+
+import { CONSTANTS } from "../../styles/themes/tokens";
+import ScaleButton from "../ScaleButton";
+import Text, { IText } from "../Text";
+import View from "../View";
+import { useInternalTheme } from "../../core/theming";
+import { ThemeProp } from "../../types";
+import Spacer from "../Spacer";
+import Icon from "../Icon";
+import containerStyles from "../../theme/container-styles";
+
+export interface SelectionFieldProps extends TouchableOpacityProps {
+  style?: StyleProp<ViewStyle>;
+  borderColor?: string;
+  content?: string;
+  label?: string;
+  error?: string;
+  left?: React.ReactNode;
+  right?: React.ReactNode;
+  textProps?: IText;
+  textColor?: string;
+  labelColor?: string;
+  size?: number;
+  textStyle?: TextStyle;
+  labelStyle?: TextStyle;
+  disabled?: boolean;
+  onPress?: (res?: any) => void;
+  theme?: ThemeProp;
+}
+const SelectionField = ({
+  style,
+  content = "content",
+  label = "",
+  error = "",
+  borderColor,
+  left,
+  right,
+  textStyle,
+  labelStyle,
+  textProps,
+  onPress,
+  disabled = false,
+  textColor,
+  labelColor,
+  size = 16,
+  theme: themeOverrides,
+  ...props
+}: SelectionFieldProps) => {
+  const theme = useInternalTheme();
+  const { colors } = theme;
+
+  const disabledTextStyle = {
+    color: colors.textSecondary,
+  };
+
+  return (
+    <View>
+      <ScaleButton
+        activeOpacity={0.8}
+        onPress={onPress}
+        {...props}
+        disabled={disabled || false}
+      >
+        <View
+          style={[
+            styles.container,
+            {
+              borderRadius: CONSTANTS.BORDER_RADIUS_6,
+            },
+
+            [styles.border, { borderColor: colors.borderBrandDefault }],
+            borderColor && { borderColor: borderColor },
+            disabled && [
+              styles.disabled,
+              {
+                borderColor: colors.borderPrimaryDisabled,
+                backgroundColor: colors.surfacePrimaryDisabled,
+              },
+            ],
+            error.length > 0 && [
+              {
+                borderColor: colors.borderErrorDefault,
+                backgroundColor: colors.surfacePrimaryDefault,
+              },
+            ],
+            style,
+          ]}
+        >
+          <Spacer width={CONSTANTS.SPACE_12} />
+
+          <View full>
+            {label.toString() !== "" && (
+              <Text
+                color={labelColor || colors.textSecondary}
+                style={[
+                  styles.text12,
+                  disabled && {
+                    color: colors.textPlaceholder,
+                  },
+                  error.length > 0 && {
+                    color: colors.textErrorDefault,
+                  },
+                ]}
+              >
+                {label}
+              </Text>
+            )}
+            <Text
+              numberOfLines={1}
+              color={textColor || colors.textDefault}
+              size={size}
+              style={[disabled && disabledTextStyle, textStyle]}
+              {...textProps}
+            >
+              {content}
+            </Text>
+          </View>
+
+          {right || <Icon name={"IconArrowDown"} type="Svg" size={24} />}
+          <Spacer width={CONSTANTS.SPACE_12} />
+        </View>
+      </ScaleButton>
+      {error.length > 0 && (
+        <View
+          paddingHorizontal={CONSTANTS.SPACE_12}
+          paddingVertical={CONSTANTS.SPACE_4}
+        >
+          <Text style={styles.text12} color={colors.textErrorDefault}>
+            {error}
+          </Text>
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  ...containerStyles,
+  disabled: { opacity: 0.6 },
+  container: {
+    minHeight: CONSTANTS.BUTTON_HEIGHT,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingVertical: CONSTANTS.SPACE_6,
+  },
+  border: {
+    borderWidth: CONSTANTS.BORDER_WIDTH_1,
+  },
+  small: {
+    height: CONSTANTS.BUTTON_HEIGHT_SMALL,
+  },
+});
+
+export default React.memo(SelectionField);

package/src/components/Spacer/index.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import View from "../View";
+import { CONSTANTS } from "../../styles/themes/tokens";
+import { StyleProp, ViewStyle } from "react-native";
+interface SpacerProps {
+  width?: number;
+  height?: number;
+  style?: StyleProp<ViewStyle>;
+}
+
+const Spacer = ({
+  style,
+  width = CONSTANTS.SPACE_16,
+  height = CONSTANTS.SPACE_12,
+}: SpacerProps) => {
+  return <View width={width} height={height} style={[style]} />;
+};
+
+export default Spacer;

package/src/components/Switch/Switch.tsx

@@ -0,0 +1,110 @@
+import * as React from "react";
+import {
+  NativeModules,
+  Platform,
+  StyleProp,
+  Switch as NativeSwitch,
+  ViewStyle,
+} from "react-native";
+import View from "../View";
+import { getSwitchColor } from "./utils";
+import { useInternalTheme } from "../../core/theming";
+import type { ThemeProp } from "../../types";
+
+const version = NativeModules.PlatformConstants
+  ? NativeModules.PlatformConstants.reactNativeVersion
+  : undefined;
+
+export type Props = React.ComponentPropsWithRef<typeof NativeSwitch> & {
+  /**
+   * Disable toggling the switch.
+   */
+  disabled?: boolean;
+  /**
+   * Value of the switch, true means 'on', false means 'off'.
+   */
+  value?: boolean;
+  /**
+   * Custom color for switch.
+   */
+  color?: string;
+  /**
+   * Callback called with the new value when it changes.
+   */
+  onValueChange?: Function;
+  style?: StyleProp<ViewStyle>;
+  /**
+   * @optional
+   */
+  theme?: ThemeProp;
+};
+
+/**
+ * Switch is a visual toggle between two mutually exclusive states — on and off.
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Switch } from 'react-native-paper';
+ *
+ * const MyComponent = () => {
+ *   const [isSwitchOn, setIsSwitchOn] = React.useState(false);
+ *
+ *   const onToggleSwitch = () => setIsSwitchOn(!isSwitchOn);
+ *
+ *   return <Switch value={isSwitchOn} onValueChange={onToggleSwitch} />;
+ * };
+ *
+ * export default MyComponent;
+ * ```
+ */
+const Switch = ({
+  value,
+  disabled,
+  onValueChange,
+  color,
+  theme: themeOverrides,
+  ...rest
+}: Props) => {
+  const theme = useInternalTheme();
+  const { checkedColor, onTintColor, thumbTintColor } = getSwitchColor({
+    theme,
+    disabled,
+    value,
+    color,
+  });
+
+  const props =
+    version && version.major === 0 && version.minor <= 56
+      ? {
+          onTintColor,
+          thumbTintColor,
+        }
+      : Platform.OS === "web"
+      ? {
+          activeTrackColor: onTintColor,
+          thumbColor: thumbTintColor,
+          activeThumbColor: checkedColor,
+        }
+      : {
+          thumbColor: thumbTintColor,
+          trackColor: {
+            true: onTintColor,
+            false: onTintColor,
+          },
+        };
+
+  return (
+    <View row>
+      <NativeSwitch
+        value={value}
+        disabled={disabled}
+        onValueChange={disabled ? undefined : onValueChange}
+        {...props}
+        {...rest}
+      />
+    </View>
+  );
+};
+
+export default Switch;