sapo-components-ui-rn 1.1.87 → 1.1.88

package/README.md

@@ -19,22 +19,21 @@ 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-svg": "*"
+  "react-native-screens": "*"
 }
 ```
 
 ## Sử dụng
 
 ```tsx
-import { Button, ToastProvider } from 'sapo-components-ui-rn';
+import { Button } from '@sapo/components-ui-rn';
 
-function App() {
+function MyComponent() {
   return (
-    <ToastProvider>
-      <Button title="My Button" onPress={() => {}} />
-    </ToastProvider>
+    <Button disabled textStyle={{...}}  title="My Button" onPress={()=> {}}/>
   );
 }
 ```

package/dist/assets/images/index.d.ts

@@ -1 +1 @@
-export declare const IMAGE_DEFAULT: any;
+export declare const getImageDefault: () => number;

package/dist/assets/images/index.ts

@@ -1 +1,9 @@
-export const IMAGE_DEFAULT = require('./image_default.png');
+/* eslint-disable @typescript-eslint/no-var-requires */
+let imageDefault: number | undefined;
+
+export const getImageDefault = (): number => {
+  if (imageDefault === undefined) {
+    imageDefault = require("./image_default.png");
+  }
+  return imageDefault;
+};

package/dist/components/Toast/ToastProvider.d.ts

@@ -14,7 +14,7 @@ interface ToastProviderProps {
     children: React.ReactNode;
     /**
      * Nếu ứng dụng đã có SafeAreaProvider, set wrapSafeArea = false
-     * @default false
+     * @default true
      */
     wrapSafeArea?: boolean;
 }

package/dist/core/theming.d.ts

@@ -7,7 +7,7 @@ export declare const ThemeProvider: ({ children }: {
     children: React.ReactNode;
 }) => React.JSX.Element;
 export declare function useTheme<T = AppTheme>(overrides?: $DeepPartial<T>): T;
-export declare const useInternalTheme: () => InternalTheme;
+export declare const useInternalTheme: () => AppTheme;
 export declare const withInternalTheme: <Props extends {
     theme: InternalTheme;
 }, C>(WrappedComponent: ComponentType<Props & {

package/dist/index.esm.js

@@ -1,7 +1,8 @@
-import { Platform, StyleSheet, Dimensions, 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 { 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 * as React$3 from 'react';
-import React__default, { forwardRef as forwardRef$1, memo, useRef, useEffect, useCallback, useState, useMemo, useImperativeHandle } from 'react';
+import React__default, { forwardRef as forwardRef$1, memo, useCallback, useState, useEffect, useMemo, useRef, 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';
@@ -223,7 +224,8 @@ var yellow = {
     YELLOW_STATUS: YELLOW_STATUS,
 };
 
-var getWindowDimensions = function () { return Dimensions.get("window"); };
+var DEVICE_HEIGHT = Dimensions.get("window").height;
+var DEVICE_WIDTH = Dimensions.get("window").width;
 var ref = {
     palette: {
         dark: {
@@ -602,12 +604,8 @@ var typescale = {
 };
 var ThemeColors = ref.palette;
 var CONSTANTS = {
-    get DEVICE_HEIGHT() {
-        return getWindowDimensions().height;
-    },
-    get DEVICE_WIDTH() {
-        return getWindowDimensions().width;
-    },
+    DEVICE_HEIGHT: DEVICE_HEIGHT,
+    DEVICE_WIDTH: DEVICE_WIDTH,
     HEADER_HEIGHT: 50,
     BUTTON_HEIGHT: 48,
     BUTTON_HEIGHT_SMALL: 36,
@@ -1259,9 +1257,21 @@ var createTheming = _createTheming.default;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _a = createTheming(LightTheme); _a.ThemeProvider; _a.withTheme; var useAppTheme = _a.useTheme;
+var _a = createTheming(LightTheme); _a.ThemeProvider; _a.withTheme; _a.useTheme;
 var useInternalTheme = function () {
-    return useAppTheme();
+    var colorScheme = useColorScheme();
+    var isDark = colorScheme === "dark";
+    var theme = getTheme(isDark);
+    return theme;
+};
+var defaultThemesByVersion = {
+    light: LightTheme,
+    dark: DarkTheme,
+};
+var getTheme = function (isDark) {
+    if (isDark === void 0) { isDark = false; }
+    var scheme = isDark ? "dark" : "light";
+    return defaultThemesByVersion[scheme];
 };
 
 var ViewCustom = forwardRef$1(function (_a, ref) {
@@ -1472,51 +1482,47 @@ 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 = useRef(new Animated.Value(value ? 1 : 0)).current;
-    useEffect(function () {
-        if (value !== undefined) {
-            animateProgress(progress, value ? 1 : 0);
-        }
-    }, [value, progress]);
+    var progress = useSharedValue(value ? 1 : 0);
     var handleSwitch = useCallback(function () {
         if (disabled)
             return;
         var newValue = !value;
-        animateProgress(progress, newValue ? 1 : 0);
+        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, progress]);
-    var translateX = progress.interpolate({
-        inputRange: [0, 1],
-        outputRange: [0, 20],
+    }, [disabled, value, onValueChange]);
+    var animatedStyle = useAnimatedStyle(function () {
+        return {
+            transform: [{ translateX: progress.value * 20 }],
+        };
     });
-    var backgroundColor = progress.interpolate({
-        inputRange: [0, 1],
-        outputRange: [
-            colors.toggleBackgroundDefault,
-            colors.toggleBackgroundActive,
-        ],
+    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]);
     var getSizeSwitch = useCallback(function () {
         switch (size) {
             case "small":
@@ -1551,12 +1557,8 @@ 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: backgroundColor }, getSizeSwitch()] },
-                React$3.createElement(Animated.View, { style: [
-                        styles$j.animated,
-                        { transform: [{ translateX: translateX }] },
-                        getSizeCircle(),
-                    ] })))));
+            React$3.createElement(Animated.View, { style: [styles$j.vSegment, backgroundColor, getSizeSwitch()] },
+                React$3.createElement(Animated.View, { style: [styles$j.animated, animatedStyle, getSizeCircle()] })))));
 });
 var styles$j = StyleSheet.create({
     vSegment: {
@@ -1567,6 +1569,11 @@ 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,
     },
 });
@@ -1928,7 +1935,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.View, { style: [
+    return (React__default.createElement(Animated$1.View, { style: [
             styles$i.container,
             style,
             {
@@ -1996,7 +2003,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.Text, __assign({ ref: ref }, rest, { style: [
+        return (React$3.createElement(Animated$1.Text, __assign({ ref: ref }, rest, { style: [
                 font,
                 styles$h.text,
                 { writingDirection: writingDirection, color: theme.colors.backgroundPrimary },
@@ -4593,7 +4600,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.View, { pointerEvents: "none", style: [
+        React__default.createElement(Animated$1.View, { pointerEvents: "none", style: [
                 StyleSheet.absoluteFill,
                 Platform.OS !== "web" && { width: width },
                 { opacity: opacity },
@@ -4677,6 +4684,8 @@ var Spacer = function (_a) {
     return (React__default.createElement(View, { backgroundColor: backgroundColor || "transparent", width: width, height: height, style: [style] }));
 };
 
+Dimensions.get("window").height;
+Dimensions.get("window").width;
 var BUTTON_HEIGHT = 48;
 var BUTTON_HEIGHT_SMALL = 40;
 var SPACE_4 = 4;
@@ -4853,8 +4862,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.Value(0),
-        new Animated.Value(1),
+        new Animated$1.Value(0),
+        new Animated$1.Value(1),
     ]).current;
     var placeholderOpacity = hasActiveOutline
         ? parentState.labeled
@@ -5923,8 +5932,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.Value(validInputValue ? 0 : 1)).current;
-    var error = React__default.useRef(new Animated.Value(errorProp ? 1 : 0)).current;
+    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 _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];
@@ -5964,7 +5973,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.timing(error, {
+            Animated$1.timing(error, {
                 toValue: 1,
                 duration: FOCUS_ANIMATION_DURATION * scale,
                 // To prevent this - https://github.com/callstack/react-native-paper/issues/941
@@ -5974,7 +5983,7 @@ var TextInput = forwardRef(function (_a, ref) {
         else {
             // hide error
             {
-                Animated.timing(error, {
+                Animated$1.timing(error, {
                     toValue: 0,
                     duration: BLUR_ANIMATION_DURATION * scale,
                     // To prevent this - https://github.com/callstack/react-native-paper/issues/941
@@ -6014,7 +6023,7 @@ var TextInput = forwardRef(function (_a, ref) {
         // https://github.com/callstack/react-native-paper/pull/1440
         if (value || focused) {
             // minimize label
-            Animated.timing(labeled, {
+            Animated$1.timing(labeled, {
                 toValue: 0,
                 duration: BLUR_ANIMATION_DURATION * scale,
                 // To prevent this - https://github.com/callstack/react-native-paper/issues/941
@@ -6023,7 +6032,7 @@ var TextInput = forwardRef(function (_a, ref) {
         }
         else {
             // restore label
-            Animated.timing(labeled, {
+            Animated$1.timing(labeled, {
                 toValue: 1,
                 duration: FOCUS_ANIMATION_DURATION * scale,
                 // To prevent this - https://github.com/callstack/react-native-paper/issues/941
@@ -6338,9 +6347,9 @@ var ViewVisibleAnimated = React__default.memo(React__default.forwardRef(function
         hide: hide,
         show: show,
     }); });
-    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 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 _o = useState(false), visible = _o[0], setVisible = _o[1];
     var TIME_OUT = null;
     useEffect(function () {
@@ -6371,18 +6380,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.parallel([
-            Animated.timing(scaleAnimation, {
+        Animated$1.parallel([
+            Animated$1.timing(scaleAnimation, {
                 toValue: 1,
                 duration: duration,
                 useNativeDriver: true,
             }),
-            Animated.timing(visibleAnimation, {
+            Animated$1.timing(visibleAnimation, {
                 toValue: 1,
                 duration: duration,
                 useNativeDriver: true,
             }),
-            Animated.timing(translateAnimation, {
+            Animated$1.timing(translateAnimation, {
                 toValue: 0,
                 duration: duration,
                 useNativeDriver: true,
@@ -6403,18 +6412,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.parallel([
-            Animated.timing(scaleAnimation, {
+        Animated$1.parallel([
+            Animated$1.timing(scaleAnimation, {
                 toValue: scaleType === "in" ? 0 : 3,
                 duration: durationHide,
                 useNativeDriver: true,
             }),
-            Animated.timing(visibleAnimation, {
+            Animated$1.timing(visibleAnimation, {
                 toValue: 0,
                 duration: durationHide,
                 useNativeDriver: true,
             }),
-            Animated.timing(translateAnimation, {
+            Animated$1.timing(translateAnimation, {
                 toValue: position === "bottom" ? 300 : -300,
                 duration: durationHide,
                 useNativeDriver: true,
@@ -6424,7 +6433,7 @@ var ViewVisibleAnimated = React__default.memo(React__default.forwardRef(function
             callback === null || callback === void 0 ? void 0 : callback();
         });
     };
-    return (React__default.createElement(Animated.View, { style: [
+    return (React__default.createElement(Animated$1.View, { style: [
             style,
             {
                 opacity: visibleAnimation,
@@ -6616,7 +6625,14 @@ var styles$9 = StyleSheet.create({
     },
 });
 
-var IMAGE_DEFAULT = require('./image_default.png');
+/* eslint-disable @typescript-eslint/no-var-requires */
+var imageDefault;
+var getImageDefault = function () {
+    if (imageDefault === undefined) {
+        imageDefault = require("./image_default.png");
+    }
+    return imageDefault;
+};
 
 var getSource = function (source) {
     var newSource = source;
@@ -6633,8 +6649,8 @@ var Image = function (props) {
     var image = getSource(disableDefaultImage
         ? source
         : hasError
-            ? IMAGE_DEFAULT
-            : source || IMAGE_DEFAULT);
+            ? getImageDefault()
+            : source || getImageDefault());
     var ImageComponent = children ? ImageBackground : Image$2;
     // const getUriImage = (uri: string) => {
     //   return uri !== null &&
@@ -7648,7 +7664,7 @@ var showToast = function (_a) {
 };
 
 var ToastProvider = forwardRef$1(function (_a, ref) {
-    var children = _a.children, _b = _a.wrapSafeArea, wrapSafeArea = _b === void 0 ? false : _b;
+    var children = _a.children, _b = _a.wrapSafeArea, wrapSafeArea = _b === void 0 ? true : _b;
     var toastComponentRef = React__default.useRef(null);
     // Expose the show method through the ref
     useImperativeHandle(ref, function () { return ({