sapo-components-ui-rn 1.1.84 → 1.1.86

package/README.md

@@ -19,10 +19,9 @@ Thư viện này yêu cầu các peer dependencies sau:
   "react": ">=18.0.0",
   "react-native": ">=0.70.0",
   "@react-native-community/masked-view": "*",
-  "react-native-gesture-handler": "*",
-  "react-native-reanimated": "*",
   "react-native-safe-area-context": "*",
-  "react-native-screens": "*"
+  "react-native-screens": "*",
+  "react-native-svg": "*"
 }
 ```
 

package/dist/index.esm.js

@@ -1,8 +1,7 @@
-import { Dimensions, Platform, StyleSheet, useColorScheme, TouchableOpacity, View as View$1, Text as Text$2, Animated as Animated$1, Pressable, I18nManager, useWindowDimensions, TextInput as TextInput$1, Modal, Keyboard, ActivityIndicator, ImageBackground, Image as Image$2 } from 'react-native';
+import { Dimensions, Platform, StyleSheet, useColorScheme, TouchableOpacity, View as View$1, Animated, Text as Text$2, Pressable, I18nManager, useWindowDimensions, TextInput as TextInput$1, Modal, Keyboard, ActivityIndicator, ImageBackground, Image as Image$2 } from 'react-native';
 import * as React$3 from 'react';
-import React__default, { forwardRef as forwardRef$1, memo, useCallback, useState, useEffect, useMemo, useRef, useImperativeHandle } from 'react';
+import React__default, { forwardRef as forwardRef$1, memo, useRef, useEffect, useCallback, useState, useMemo, useImperativeHandle } from 'react';
 import require$$1 from 'deepmerge';
-import Animated, { useSharedValue, withSequence, withTiming, withSpring, useAnimatedStyle, interpolateColor, useAnimatedReaction } from 'react-native-reanimated';
 import color from 'color';
 import IconClose from './assets/svg/icon-close.svg';
 import IconCheckbox from './assets/svg/icon-checkbox.svg';
@@ -1530,47 +1529,51 @@ var ViewCustom = forwardRef$1(function (_a, ref) {
 });
 var View = React__default.memo(ViewCustom);
 
+var animateProgress = function (progress, toValue) {
+    Animated.sequence([
+        Animated.timing(progress, {
+            toValue: toValue,
+            duration: 150,
+            useNativeDriver: false,
+        }),
+        Animated.spring(progress, {
+            toValue: toValue,
+            damping: 20,
+            stiffness: 200,
+            mass: 0.5,
+            velocity: 0.5,
+            useNativeDriver: false,
+        }),
+    ]).start();
+};
 var Switch = memo(function (_a) {
     var value = _a.value, disabled = _a.disabled, onValueChange = _a.onValueChange, _b = _a.size, size = _b === void 0 ? "normal" : _b;
     var theme = useInternalTheme();
     var colors = theme.colors;
-    var progress = useSharedValue(value ? 1 : 0);
+    var progress = useRef(new Animated.Value(value ? 1 : 0)).current;
+    useEffect(function () {
+        if (value !== undefined) {
+            animateProgress(progress, value ? 1 : 0);
+        }
+    }, [value, progress]);
     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,
-        }));
+        animateProgress(progress, newValue ? 1 : 0);
         onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue);
-    }, [disabled, value, onValueChange]);
-    var animatedStyle = useAnimatedStyle(function () {
-        return {
-            transform: [{ translateX: progress.value * 20 }],
-        };
+    }, [disabled, value, onValueChange, progress]);
+    var translateX = progress.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, 20],
     });
-    var backgroundColor = useAnimatedStyle(function () {
-        return {
-            backgroundColor: interpolateColor(progress.value, [0, 1], [colors.toggleBackgroundDefault, colors.toggleBackgroundActive]),
-        };
+    var backgroundColor = progress.interpolate({
+        inputRange: [0, 1],
+        outputRange: [
+            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]);
     var getSizeSwitch = useCallback(function () {
         switch (size) {
             case "small":
@@ -1605,8 +1608,12 @@ var Switch = memo(function (_a) {
     }, [size, colors]);
     return (React$3.createElement(View, { row: true },
         React$3.createElement(TouchableOpacity, { activeOpacity: 1, onPress: handleSwitch, disabled: disabled, style: disabled ? { opacity: 0.6 } : {} },
-            React$3.createElement(Animated.View, { style: [styles$j.vSegment, backgroundColor, getSizeSwitch()] },
-                React$3.createElement(Animated.View, { style: [styles$j.animated, animatedStyle, getSizeCircle()] })))));
+            React$3.createElement(Animated.View, { style: [styles$j.vSegment, { backgroundColor: backgroundColor }, getSizeSwitch()] },
+                React$3.createElement(Animated.View, { style: [
+                        styles$j.animated,
+                        { transform: [{ translateX: translateX }] },
+                        getSizeCircle(),
+                    ] })))));
 });
 var styles$j = StyleSheet.create({
     vSegment: {
@@ -1617,11 +1624,6 @@ var styles$j = StyleSheet.create({
     },
     animated: {
         position: "absolute",
-        // shadowColor: "#000000",
-        // shadowOffset: { width: 0, height: 0 },
-        // shadowOpacity: 0.15,
-        // shadowRadius: BORDER_RADIUS_6,
-        // elevation: 5,
         marginHorizontal: 2,
     },
 });
@@ -1983,7 +1985,7 @@ var TextInputAffix = function (_a) {
         _b);
     var textColor = getTextColor({ theme: theme, disabled: disabled });
     var content = (React__default.createElement(Text$2, { maxFontSizeMultiplier: maxFontSizeMultiplier, style: [{ color: textColor }, textStyle, labelStyle], onLayout: onTextLayout, testID: "".concat(testID, "-text") }, text));
-    return (React__default.createElement(Animated$1.View, { style: [
+    return (React__default.createElement(Animated.View, { style: [
             styles$i.container,
             style,
             {
@@ -2051,7 +2053,7 @@ var AnimatedText = forwardRef(function AnimatedText(_a, ref) {
         if (typeof font !== "object") {
             throw new Error("Variant ".concat(variant, " was not provided properly. Valid variants are ").concat(Object.keys(theme.fonts).join(", "), "."));
         }
-        return (React$3.createElement(Animated$1.Text, __assign({ ref: ref }, rest, { style: [
+        return (React$3.createElement(Animated.Text, __assign({ ref: ref }, rest, { style: [
                 font,
                 styles$h.text,
                 { writingDirection: writingDirection, color: theme.colors.backgroundPrimary },
@@ -4648,7 +4650,7 @@ var InputLabel = function (props) {
     // Position colored placeholder and gray placeholder on top of each other and crossfade them
     // This gives the effect of animating the color, but allows us to use native driver
     React__default.createElement(View$1, { pointerEvents: "none", style: [StyleSheet.absoluteFill, styles$g.overflow, styles$g.labelContainer] },
-        React__default.createElement(Animated$1.View, { pointerEvents: "none", style: [
+        React__default.createElement(Animated.View, { pointerEvents: "none", style: [
                 StyleSheet.absoluteFill,
                 Platform.OS !== "web" && { width: width },
                 { opacity: opacity },
@@ -4910,8 +4912,8 @@ var TextInputFlat = function (_a) {
     adjustPaddingFlat(__assign(__assign({}, paddingSettings), { pad: pad }));
     var baseLabelTranslateY = -labelHalfHeight - (topPosition + MINIMIZED_LABEL_Y_OFFSET);
     var placeholderOpacityAnims = React$3.useRef([
-        new Animated$1.Value(0),
-        new Animated$1.Value(1),
+        new Animated.Value(0),
+        new Animated.Value(1),
     ]).current;
     var placeholderOpacity = hasActiveOutline
         ? parentState.labeled
@@ -5980,8 +5982,8 @@ var TextInput = forwardRef(function (_a, ref) {
     var theme = useInternalTheme();
     var isControlled = rest.value !== undefined;
     var validInputValue = isControlled ? rest.value : rest.defaultValue;
-    var labeled = React__default.useRef(new Animated$1.Value(validInputValue ? 0 : 1)).current;
-    var error = React__default.useRef(new Animated$1.Value(errorProp ? 1 : 0)).current;
+    var labeled = React__default.useRef(new Animated.Value(validInputValue ? 0 : 1)).current;
+    var error = React__default.useRef(new Animated.Value(errorProp ? 1 : 0)).current;
     var _k = React__default.useState(false), focused = _k[0], setFocused = _k[1];
     var _l = React__default.useState(false), displayPlaceholder = _l[0], setDisplayPlaceholder = _l[1];
     var _m = React__default.useState(validInputValue), uncontrolledValue = _m[0], setUncontrolledValue = _m[1];
@@ -6021,7 +6023,7 @@ var TextInput = forwardRef(function (_a, ref) {
         // When the input has an error, we wiggle the label and apply error styles
         if (errorProp) {
             // show error
-            Animated$1.timing(error, {
+            Animated.timing(error, {
                 toValue: 1,
                 duration: FOCUS_ANIMATION_DURATION * scale,
                 // To prevent this - https://github.com/callstack/react-native-paper/issues/941
@@ -6031,7 +6033,7 @@ var TextInput = forwardRef(function (_a, ref) {
         else {
             // hide error
             {
-                Animated$1.timing(error, {
+                Animated.timing(error, {
                     toValue: 0,
                     duration: BLUR_ANIMATION_DURATION * scale,
                     // To prevent this - https://github.com/callstack/react-native-paper/issues/941
@@ -6071,7 +6073,7 @@ var TextInput = forwardRef(function (_a, ref) {
         // https://github.com/callstack/react-native-paper/pull/1440
         if (value || focused) {
             // minimize label
-            Animated$1.timing(labeled, {
+            Animated.timing(labeled, {
                 toValue: 0,
                 duration: BLUR_ANIMATION_DURATION * scale,
                 // To prevent this - https://github.com/callstack/react-native-paper/issues/941
@@ -6080,7 +6082,7 @@ var TextInput = forwardRef(function (_a, ref) {
         }
         else {
             // restore label
-            Animated$1.timing(labeled, {
+            Animated.timing(labeled, {
                 toValue: 1,
                 duration: FOCUS_ANIMATION_DURATION * scale,
                 // To prevent this - https://github.com/callstack/react-native-paper/issues/941
@@ -6395,9 +6397,9 @@ var ViewVisibleAnimated = React__default.memo(React__default.forwardRef(function
         hide: hide,
         show: show,
     }); });
-    var visibleAnimation = useRef(new Animated$1.Value(0)).current;
-    var translateAnimation = useRef(new Animated$1.Value(0)).current;
-    var scaleAnimation = useRef(new Animated$1.Value(scaleType === "in" ? 0 : 3)).current;
+    var visibleAnimation = useRef(new Animated.Value(0)).current;
+    var translateAnimation = useRef(new Animated.Value(0)).current;
+    var scaleAnimation = useRef(new Animated.Value(scaleType === "in" ? 0 : 3)).current;
     var _o = useState(false), visible = _o[0], setVisible = _o[1];
     var TIME_OUT = null;
     useEffect(function () {
@@ -6428,18 +6430,18 @@ var ViewVisibleAnimated = React__default.memo(React__default.forwardRef(function
         if (position === void 0) { position = "bottom"; }
         setVisible(true);
         translateAnimation.setValue(position === "bottom" ? 100 : -100);
-        Animated$1.parallel([
-            Animated$1.timing(scaleAnimation, {
+        Animated.parallel([
+            Animated.timing(scaleAnimation, {
                 toValue: 1,
                 duration: duration,
                 useNativeDriver: true,
             }),
-            Animated$1.timing(visibleAnimation, {
+            Animated.timing(visibleAnimation, {
                 toValue: 1,
                 duration: duration,
                 useNativeDriver: true,
             }),
-            Animated$1.timing(translateAnimation, {
+            Animated.timing(translateAnimation, {
                 toValue: 0,
                 duration: duration,
                 useNativeDriver: true,
@@ -6460,18 +6462,18 @@ var ViewVisibleAnimated = React__default.memo(React__default.forwardRef(function
     };
     var handleHide = function (_a) {
         var durationHide = _a.durationHide, callback = _a.callback, _b = _a.position, position = _b === void 0 ? "bottom" : _b;
-        Animated$1.parallel([
-            Animated$1.timing(scaleAnimation, {
+        Animated.parallel([
+            Animated.timing(scaleAnimation, {
                 toValue: scaleType === "in" ? 0 : 3,
                 duration: durationHide,
                 useNativeDriver: true,
             }),
-            Animated$1.timing(visibleAnimation, {
+            Animated.timing(visibleAnimation, {
                 toValue: 0,
                 duration: durationHide,
                 useNativeDriver: true,
             }),
-            Animated$1.timing(translateAnimation, {
+            Animated.timing(translateAnimation, {
                 toValue: position === "bottom" ? 300 : -300,
                 duration: durationHide,
                 useNativeDriver: true,
@@ -6481,7 +6483,7 @@ var ViewVisibleAnimated = React__default.memo(React__default.forwardRef(function
             callback === null || callback === void 0 ? void 0 : callback();
         });
     };
-    return (React__default.createElement(Animated$1.View, { style: [
+    return (React__default.createElement(Animated.View, { style: [
             style,
             {
                 opacity: visibleAnimation,