sapo-components-ui-rn 1.1.86 → 1.1.87

package/README.md

@@ -28,11 +28,13 @@ Thư viện này yêu cầu các peer dependencies sau:
 ## Sử dụng
 
 ```tsx
-import { Button } from '@sapo/components-ui-rn';
+import { Button, ToastProvider } from 'sapo-components-ui-rn';
 
-function MyComponent() {
+function App() {
   return (
-    <Button disabled textStyle={{...}}  title="My Button" onPress={()=> {}}/>
+    <ToastProvider>
+      <Button title="My Button" onPress={() => {}} />
+    </ToastProvider>
   );
 }
 ```

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 true
+     * @default false
      */
     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: () => AppTheme;
+export declare const useInternalTheme: () => InternalTheme;
 export declare const withInternalTheme: <Props extends {
     theme: InternalTheme;
 }, C>(WrappedComponent: ComponentType<Props & {

package/dist/index.d.ts

@@ -2,7 +2,6 @@ export { ThemeColors } from "./styles/themes/tokens";
 export { CONSTANTS } from "./styles/themes/tokens";
 export { ThemeColors as ThemeColorsProps } from "./types";
 export { default as containerStyles } from "./theme/container-styles";
-export { useTheme, ThemeProvider, DefaultTheme, adaptNavigationTheme, } from "./core/theming";
 export * from "./styles/themes";
 export { default as Switch } from "./components/Switch/Switch";
 export { default as TextInput } from "./components/TextInput/TextInput";

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-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 { 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 * as React$3 from 'react';
 import React__default, { forwardRef as forwardRef$1, memo, useRef, useEffect, useCallback, useState, useMemo, useImperativeHandle } from 'react';
 import require$$1 from 'deepmerge';
@@ -223,8 +223,7 @@ var yellow = {
     YELLOW_STATUS: YELLOW_STATUS,
 };
 
-var DEVICE_HEIGHT = Dimensions.get("window").height;
-var DEVICE_WIDTH = Dimensions.get("window").width;
+var getWindowDimensions = function () { return Dimensions.get("window"); };
 var ref = {
     palette: {
         dark: {
@@ -603,8 +602,12 @@ var typescale = {
 };
 var ThemeColors = ref.palette;
 var CONSTANTS = {
-    DEVICE_HEIGHT: DEVICE_HEIGHT,
-    DEVICE_WIDTH: DEVICE_WIDTH,
+    get DEVICE_HEIGHT() {
+        return getWindowDimensions().height;
+    },
+    get DEVICE_WIDTH() {
+        return getWindowDimensions().width;
+    },
     HEADER_HEIGHT: 50,
     BUTTON_HEIGHT: 48,
     BUTTON_HEIGHT_SMALL: 36,
@@ -722,6 +725,48 @@ var containerStyles = StyleSheet.create({
     },
 });
 
+function configureV3Fonts(config) {
+    if (!config) {
+        return typescale;
+    }
+    var isFlatConfig = Object.keys(config).every(function (key) { return typeof config[key] !== "object"; });
+    if (isFlatConfig) {
+        return Object.fromEntries(Object.entries(typescale).map(function (_a) {
+            var variantName = _a[0], variantProperties = _a[1];
+            return [
+                variantName,
+                __assign(__assign({}, variantProperties), config),
+            ];
+        }));
+    }
+    return Object.assign.apply(Object, __spreadArray([{},
+        typescale], Object.entries(config).map(function (_a) {
+        var _b;
+        var variantName = _a[0], variantProperties = _a[1];
+        return (_b = {},
+            _b[variantName] = __assign(__assign({}, typescale[variantName]), variantProperties),
+            _b);
+    }), false));
+}
+// eslint-disable-next-line no-redeclare
+function configureFonts(params) {
+    var config = (params || {}).config;
+    return configureV3Fonts(config);
+}
+
+var LightTheme = {
+    dark: false,
+    roundness: 8,
+    version: 3,
+    colors: ThemeColors.light.colors,
+    fonts: configureFonts(),
+    animation: {
+        scale: 1.0,
+    },
+};
+
+var DarkTheme = __assign(__assign({}, LightTheme), { dark: true, mode: "adaptive", version: 3, colors: ThemeColors.light.colors });
+
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 var createTheming$2 = {};
@@ -1214,112 +1259,10 @@ var createTheming = _createTheming.default;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function configureV3Fonts(config) {
-    if (!config) {
-        return typescale;
-    }
-    var isFlatConfig = Object.keys(config).every(function (key) { return typeof config[key] !== "object"; });
-    if (isFlatConfig) {
-        return Object.fromEntries(Object.entries(typescale).map(function (_a) {
-            var variantName = _a[0], variantProperties = _a[1];
-            return [
-                variantName,
-                __assign(__assign({}, variantProperties), config),
-            ];
-        }));
-    }
-    return Object.assign.apply(Object, __spreadArray([{},
-        typescale], Object.entries(config).map(function (_a) {
-        var _b;
-        var variantName = _a[0], variantProperties = _a[1];
-        return (_b = {},
-            _b[variantName] = __assign(__assign({}, typescale[variantName]), variantProperties),
-            _b);
-    }), false));
-}
-// eslint-disable-next-line no-redeclare
-function configureFonts(params) {
-    var config = (params || {}).config;
-    return configureV3Fonts(config);
-}
-
-var LightTheme = {
-    dark: false,
-    roundness: 8,
-    version: 3,
-    colors: ThemeColors.light.colors,
-    fonts: configureFonts(),
-    animation: {
-        scale: 1.0,
-    },
-};
-
-var DarkTheme = __assign(__assign({}, LightTheme), { dark: true, mode: "adaptive", version: 3, colors: ThemeColors.light.colors });
-
-var DefaultTheme = LightTheme;
-var _a = createTheming(LightTheme), BaseThemeProvider = _a.ThemeProvider; _a.withTheme; var useAppTheme = _a.useTheme;
-var ThemeProvider = function (_a) {
-    var children = _a.children;
-    var colorScheme = useColorScheme();
-    var isDark = colorScheme === "dark";
-    var theme = isDark ? DarkTheme : LightTheme;
-    return React__default.createElement(BaseThemeProvider, { theme: theme }, children);
-};
-function useTheme(overrides) {
-    return useAppTheme(overrides);
-}
+var _a = createTheming(LightTheme); _a.ThemeProvider; _a.withTheme; var useAppTheme = _a.useTheme;
 var useInternalTheme = function () {
-    var colorScheme = useColorScheme();
-    var isDark = colorScheme === "dark";
-    var theme = getTheme(isDark);
-    return theme;
-};
-var defaultThemesByVersion = {
-    light: LightTheme,
-    dark: DarkTheme,
+    return useAppTheme();
 };
-var getTheme = function (isDark) {
-    if (isDark === void 0) { isDark = false; }
-    var scheme = isDark ? "dark" : "light";
-    return defaultThemesByVersion[scheme];
-};
-// eslint-disable-next-line no-redeclare
-function adaptNavigationTheme(themes) {
-    var reactNavigationLight = themes.reactNavigationLight, reactNavigationDark = themes.reactNavigationDark, materialLight = themes.materialLight, materialDark = themes.materialDark;
-    var getAdaptedTheme = function (navigationTheme, AppTheme) {
-        return __assign(__assign({}, navigationTheme), { colors: __assign(__assign({}, navigationTheme.colors), { primary: AppTheme.colors.surfaceBrandDefault, background: AppTheme.colors.backgroundPrimary, card: AppTheme.colors.card, text: AppTheme.colors.backgroundPrimary, border: AppTheme.colors.borderPrimaryDefault, notification: AppTheme.colors.surfaceErrorDefault }) });
-    };
-    var AppThemes = {
-        light: materialLight || LightTheme,
-        dark: materialDark || DarkTheme,
-    };
-    if (reactNavigationLight && reactNavigationDark) {
-        var modes = ["light", "dark"];
-        var NavigationThemes_1 = {
-            light: reactNavigationLight,
-            dark: reactNavigationDark,
-        };
-        var _a = modes.reduce(function (prev, curr) {
-            var _a;
-            return __assign(__assign({}, prev), (_a = {}, _a[curr] = getAdaptedTheme(NavigationThemes_1[curr], AppThemes[curr]), _a));
-        }, {
-            light: reactNavigationLight,
-            dark: reactNavigationDark,
-        }), adaptedLight = _a.light, adaptedDark = _a.dark;
-        return {
-            LightTheme: adaptedLight,
-            DarkTheme: adaptedDark,
-        };
-    }
-    if (reactNavigationDark) {
-        return {
-            DarkTheme: getAdaptedTheme(reactNavigationDark, AppThemes.dark),
-        };
-    }
-    return {
-        LightTheme: getAdaptedTheme(reactNavigationLight, AppThemes.light),
-    };
-}
 
 var ViewCustom = forwardRef$1(function (_a, ref) {
     var row = _a.row, full = _a.full, justifyCenter = _a.justifyCenter, justifyBetween = _a.justifyBetween, alignCenter = _a.alignCenter, center = _a.center, color = _a.color, backgroundColor = _a.backgroundColor, width = _a.width, height = _a.height, padding = _a.padding, paddingHorizontal = _a.paddingHorizontal, paddingVertical = _a.paddingVertical, marginHorizontal = _a.marginHorizontal, marginVertical = _a.marginVertical, paddingLeft = _a.paddingLeft, paddingRight = _a.paddingRight, paddingTop = _a.paddingTop, alignEnd = _a.alignEnd, wrap = _a.wrap, borderBottomWidth = _a.borderBottomWidth, borderBottomColor = _a.borderBottomColor, borderRadius = _a.borderRadius, borderWidth = _a.borderWidth, borderColor = _a.borderColor, style = _a.style, onPress = _a.onPress, _b = _a.activeOpacity, activeOpacity = _b === void 0 ? 0.8 : _b, children = _a.children, disabled = _a.disabled, paddingBottom = _a.paddingBottom, marginTop = _a.marginTop, marginBottom = _a.marginBottom, marginLeft = _a.marginLeft, marginRight = _a.marginRight, margin = _a.margin, borderTopWidth = _a.borderTopWidth, borderTopColor = _a.borderTopColor, borderLeftWidth = _a.borderLeftWidth, borderLeftColor = _a.borderLeftColor, borderRightWidth = _a.borderRightWidth, borderRightColor = _a.borderRightColor, pointerEvents = _a.pointerEvents, gap = _a.gap, 
@@ -4734,8 +4677,6 @@ 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;
@@ -7707,7 +7648,7 @@ var showToast = function (_a) {
 };
 
 var ToastProvider = forwardRef$1(function (_a, ref) {
-    var children = _a.children, _b = _a.wrapSafeArea, wrapSafeArea = _b === void 0 ? true : _b;
+    var children = _a.children, _b = _a.wrapSafeArea, wrapSafeArea = _b === void 0 ? false : _b;
     var toastComponentRef = React__default.useRef(null);
     // Expose the show method through the ref
     useImperativeHandle(ref, function () { return ({
@@ -7738,5 +7679,5 @@ var ToastProvider = forwardRef$1(function (_a, ref) {
         renderToast()));
 });
 
-export { Avatar, Badge, index$3 as Button, CONSTANTS, Checkbox, ChipBar, CountingDot, DarkTheme, DefaultTheme, index$2 as FloatingButton, Image$1 as Image, LightTheme, index as NumberKeyboard, RadioButton, SearchInput, index$1 as SelectionField, Spacer, Switch, Tag, Text$1 as Text, TextInput, ThemeColors, ThemeProvider, Toast, ToastProvider, View, adaptNavigationTheme, containerStyles, showToast, toastRef, useTheme };
+export { Avatar, Badge, index$3 as Button, CONSTANTS, Checkbox, ChipBar, CountingDot, DarkTheme, index$2 as FloatingButton, Image$1 as Image, LightTheme, index as NumberKeyboard, RadioButton, SearchInput, index$1 as SelectionField, Spacer, Switch, Tag, Text$1 as Text, TextInput, ThemeColors, Toast, ToastProvider, View, containerStyles, showToast, toastRef };
 //# sourceMappingURL=index.esm.js.map