sapo-components-ui-rn 1.0.63 → 1.0.64

package/dist/components/NumberKeyboard/index.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+export interface NumberKeyboardProps {
+    /** Giá trị hiện tại của input */
+    value?: string | number;
+    /** Label hiển thị trên modal */
+    label?: string;
+    /** Callback khi giá trị thay đổi */
+    onChangeText?: (value: string) => void;
+    /** Giá trị tối đa cho phép */
+    maxValue?: number;
+    /** Loại input: integer hoặc float */
+    type?: "integer" | "float";
+    /** Số chữ số thập phân cho phép */
+    formatDecimal?: 1 | 2 | 3;
+    /** Trạng thái hiển thị modal */
+    visible: boolean;
+    /** Callback khi đóng modal */
+    onClose: () => void;
+}
+declare const _default: React.NamedExoticComponent<NumberKeyboardProps>;
+export default _default;

package/dist/components/Switch/Switch.d.ts

@@ -1,7 +1,5 @@
 import * as React from "react";
-import { StyleProp, Switch as NativeSwitch, ViewStyle } from "react-native";
-import type { ThemeProp } from "../../types";
-export type Props = React.ComponentPropsWithRef<typeof NativeSwitch> & {
+export type Props = {
     /**
      * Disable toggling the switch.
      */
@@ -10,38 +8,10 @@ export type Props = React.ComponentPropsWithRef<typeof NativeSwitch> & {
      * 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;
+    onValueChange?: (value: boolean) => void;
 };
-/**
- * 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;
- * ```
- */
-declare const Switch: ({ value, disabled, onValueChange, color, theme: themeOverrides, ...rest }: Props) => React.JSX.Element;
+declare const Switch: React.MemoExoticComponent<({ value, disabled, onValueChange }: Props) => React.JSX.Element>;
 export default Switch;

package/dist/index.esm.js

@@ -1,8 +1,9 @@
-import { Platform, Dimensions, StyleSheet, useColorScheme, Animated, Easing, View as View$1, I18nManager, TouchableOpacity, NativeModules, Switch as Switch$1, Text as Text$2, Pressable, useWindowDimensions, TextInput as TextInput$1, Modal, ActivityIndicator as ActivityIndicator$1, ImageBackground, Image as Image$2 } from 'react-native';
+import { Platform, Dimensions, StyleSheet, useColorScheme, Animated, Easing, View as View$1, I18nManager, TouchableOpacity, Text as Text$2, Pressable, useWindowDimensions, TextInput as TextInput$1, Modal, ActivityIndicator as ActivityIndicator$1, ImageBackground, Image as Image$2 } from 'react-native';
 import * as React$3 from 'react';
-import React__default, { memo, forwardRef as forwardRef$1, useMemo, useState, useEffect, useRef, useImperativeHandle, useCallback } from 'react';
+import React__default, { memo, useCallback, forwardRef as forwardRef$1, useMemo, useState, useEffect, useRef, useImperativeHandle } from 'react';
 import require$$1 from 'deepmerge';
 import color from 'color';
+import Animated$1, { useSharedValue, withSequence, withTiming, withSpring, useAnimatedStyle, interpolateColor, useAnimatedReaction } from 'react-native-reanimated';
 import FontAwesome from 'react-native-vector-icons/FontAwesome';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
@@ -1708,7 +1709,7 @@ var ActivityIndicator = function (_a) {
         height: size / 2,
         overflow: "hidden",
     };
-    return (React$3.createElement(View$1, __assign({ style: [styles$i.container, style] }, rest, { accessible: true, accessibilityRole: "progressbar", accessibilityState: { busy: animating } }),
+    return (React$3.createElement(View$1, __assign({ style: [styles$j.container, style] }, rest, { accessible: true, accessibilityRole: "progressbar", accessibilityState: { busy: animating } }),
         React$3.createElement(Animated.View, { style: [{ width: size, height: size, opacity: fade }], collapsable: false }, [0, 1].map(function (index) {
             // Thanks to https://github.com/n4kz/react-native-indicators for the great work
             var inputRange = Array.from(new Array(frames), function (_, frameIndex) { return frameIndex / (frames - 1); });
@@ -1753,7 +1754,7 @@ var ActivityIndicator = function (_a) {
                 borderWidth: size / 10,
                 borderRadius: size / 2,
             };
-            return (React$3.createElement(Animated.View, { key: index, style: [styles$i.layer] },
+            return (React$3.createElement(Animated.View, { key: index, style: [styles$j.layer] },
                 React$3.createElement(Animated.View, { style: layerStyle },
                     React$3.createElement(Animated.View, { style: [containerStyle, offsetStyle], collapsable: false },
                         React$3.createElement(Animated.View, { style: viewportStyle },
@@ -1761,7 +1762,7 @@ var ActivityIndicator = function (_a) {
                                 React$3.createElement(Animated.View, { style: lineStyle })))))));
         }))));
 };
-var styles$i = StyleSheet.create({
+var styles$j = StyleSheet.create({
     container: {
         justifyContent: "center",
         alignItems: "center",
@@ -1869,11 +1870,11 @@ var ProgressBar = function (_a) {
             ? {}
             : { min: 0, max: 100, now: Math.round(progress * 100) }, testID: testID }),
         React$3.createElement(Animated.View, { style: [
-                styles$h.container,
+                styles$i.container,
                 { backgroundColor: trackTintColor, opacity: fade },
                 style,
             ] }, width ? (React$3.createElement(Animated.View, { testID: "".concat(testID, "-fill"), style: [
-                styles$h.progressBar,
+                styles$i.progressBar,
                 {
                     width: width,
                     backgroundColor: tintColor,
@@ -1917,7 +1918,7 @@ var ProgressBar = function (_a) {
                 fillStyle,
             ] })) : null)));
 };
-var styles$h = StyleSheet.create({
+var styles$i = StyleSheet.create({
     container: {
         height: 4,
         overflow: "hidden",
@@ -2055,109 +2056,86 @@ var ViewCustom = function (_a) {
 };
 var View = React__default.memo(ViewCustom);
 
-var getCheckedColor = function (_a) {
-    var theme = _a.theme, color = _a.color;
-    if (color) {
-        return color;
-    }
-    return theme.colors.toggleBackgroundActive;
-};
-var getThumbTintColor = function (_a) {
-    var theme = _a.theme, disabled = _a.disabled, value = _a.value, checkedColor = _a.checkedColor;
-    var isIOS = Platform.OS === "ios";
-    if (isIOS) {
-        return undefined;
-    }
-    if (disabled) {
-        if (theme.dark) {
-            return theme.colors.toggleBackgroundDefault;
-        }
-        return theme.colors.toggleBackgroundDefault;
-    }
-    if (value) {
-        return checkedColor;
-    }
-    if (theme.dark) {
-        return theme.colors.toggleBackgroundDefault;
-    }
-    return theme.colors.toggleBackgroundDefault;
-};
-var getOnTintColor = function (_a) {
-    var theme = _a.theme, disabled = _a.disabled, value = _a.value, checkedColor = _a.checkedColor;
-    var isIOS = Platform.OS === "ios";
-    if (isIOS) {
-        return checkedColor;
-    }
-    if (disabled) {
-        if (theme.dark) {
-            return theme.colors.toggleBackgroundDefault;
-        }
-        return theme.colors.toggleBackgroundDefault;
-    }
-    if (value) {
-        return checkedColor;
-    }
-    if (theme.dark) {
-        return theme.colors.toggleBackgroundDefault;
-    }
-    return theme.colors.toggleBackgroundDefault;
-};
-var getSwitchColor = function (_a) {
-    var theme = _a.theme, disabled = _a.disabled, value = _a.value, color = _a.color;
-    var checkedColor = getCheckedColor({ theme: theme, color: color });
-    return {
-        onTintColor: getOnTintColor({ theme: theme, disabled: disabled, value: value, checkedColor: checkedColor }),
-        thumbTintColor: getThumbTintColor({ theme: theme, disabled: disabled, value: value, checkedColor: checkedColor }),
-        checkedColor: checkedColor,
-    };
-};
-
-var version = NativeModules.PlatformConstants
-    ? NativeModules.PlatformConstants.reactNativeVersion
-    : undefined;
-/**
- * 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;
- * ```
- */
-var Switch = function (_a) {
-    var value = _a.value, disabled = _a.disabled, onValueChange = _a.onValueChange, color = _a.color; _a.theme; var rest = __rest(_a, ["value", "disabled", "onValueChange", "color", "theme"]);
+var Switch = memo(function (_a) {
+    var value = _a.value, disabled = _a.disabled, onValueChange = _a.onValueChange;
     var theme = useInternalTheme();
-    var _b = getSwitchColor({
-        theme: theme,
-        disabled: disabled,
-        value: value,
-        color: color,
-    }), onTintColor = _b.onTintColor, thumbTintColor = _b.thumbTintColor;
-    var props = version && version.major === 0 && version.minor <= 56
-        ? {
-            onTintColor: onTintColor,
-            thumbTintColor: thumbTintColor,
-        }
-        : {
-            thumbColor: thumbTintColor,
-            trackColor: {
-                true: onTintColor,
-                false: onTintColor,
-            },
+    var colors = theme.colors;
+    var progress = useSharedValue(value ? 1 : 0);
+    var handleSwitch = useCallback(function () {
+        if (disabled)
+            return;
+        var newValue = !value;
+        progress.value = withSequence(withTiming(newValue ? 1 : 0, {
+            duration: 150,
+        }), withSpring(newValue ? 1 : 0, {
+            damping: 20,
+            stiffness: 200,
+            mass: 0.5,
+            velocity: 0.5,
+        }));
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue);
+    }, [disabled, value, onValueChange]);
+    var animatedStyle = useAnimatedStyle(function () {
+        return {
+            transform: [{ translateX: progress.value * 20 }],
         };
+    });
+    var backgroundColor = useAnimatedStyle(function () {
+        return {
+            backgroundColor: interpolateColor(progress.value, [0, 1], [colors.toggleBackgroundDefault, colors.toggleBackgroundActive]),
+        };
+    });
+    useAnimatedReaction(function () { return value; }, function (currentValue) {
+        if (currentValue !== undefined) {
+            progress.value = withSequence(withTiming(currentValue ? 1 : 0, {
+                duration: 150,
+            }), withSpring(currentValue ? 1 : 0, {
+                damping: 20,
+                stiffness: 200,
+                mass: 0.5,
+                velocity: 0.5,
+            }));
+        }
+    }, [value]);
     return (React$3.createElement(View, { row: true },
-        React$3.createElement(Switch$1, __assign({ value: value, disabled: disabled, onValueChange: disabled ? undefined : onValueChange }, props, rest))));
-};
+        React$3.createElement(TouchableOpacity, { activeOpacity: 1, onPress: handleSwitch, disabled: disabled, style: disabled ? { opacity: 0.6 } : {} },
+            React$3.createElement(Animated$1.View, { style: [
+                    styles$h.vSegment,
+                    backgroundColor,
+                    {
+                        width: 52,
+                        height: 32,
+                    },
+                ] },
+                React$3.createElement(Animated$1.View, { style: [
+                        styles$h.animated,
+                        animatedStyle,
+                        {
+                            width: 28,
+                            height: 28,
+                            borderRadius: 14,
+                            backgroundColor: colors.surfacePrimaryDefault,
+                        },
+                    ] })))));
+});
+var styles$h = StyleSheet.create({
+    vSegment: {
+        overflow: "hidden",
+        borderRadius: 100,
+        flexDirection: "row",
+        alignItems: "center",
+    },
+    animated: {
+        position: "absolute",
+        // shadowColor: "#000000",
+        // shadowOffset: { width: 0, height: 0 },
+        // shadowOpacity: 0.15,
+        // shadowRadius: BORDER_RADIUS_6,
+        // elevation: 5,
+        marginHorizontal: 2,
+    },
+});
+Switch.displayName = "Switch";
 
 var AdornmentType;
 (function (AdornmentType) {