@janiscommerce/ui-native 1.5.0 → 1.6.0

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

@@ -0,0 +1,21 @@
+import { FC, ReactElement } from 'react';
+export declare enum animationTypes {
+    Slide = "slide",
+    Fade = "fade",
+    None = "none"
+}
+interface Props {
+    backgroundColor?: string;
+    isVisible?: boolean;
+    title?: string;
+    subtitle?: string;
+    iconName?: string;
+    textsColor?: string;
+    iconColor?: string;
+    animationType?: animationTypes;
+    duration?: number;
+    onEndDuration?: () => void;
+    children?: ReactElement | null;
+}
+declare const FullScreenMessage: FC<Props>;
+export default FullScreenMessage;

package/dist/components/FullScreenMessage/index.js

@@ -0,0 +1,66 @@
+import React, { useEffect } from 'react';
+import { Modal, StyleSheet, View } from 'react-native';
+import { moderateScale, scaledForDevice } from '../../scale';
+import { base, primary } from '../../theme/palette';
+import Icon from '../Icon';
+import Text from '../Text';
+export var animationTypes;
+(function (animationTypes) {
+    animationTypes["Slide"] = "slide";
+    animationTypes["Fade"] = "fade";
+    animationTypes["None"] = "none";
+})(animationTypes || (animationTypes = {}));
+const FullScreenMessage = ({ backgroundColor = primary.main, title = '', isVisible = false, subtitle = '', iconName = '', textsColor = base.white, iconColor = base.white, animationType = animationTypes.Slide, duration = 3000, onEndDuration = () => { }, children = null, ...props }) => {
+    const validTitle = !!title && typeof title === 'string';
+    const validSubtitle = !!subtitle && typeof subtitle === 'string';
+    const validIconName = !!iconName && typeof iconName === 'string';
+    const validPaddingHorizontal = scaledForDevice(50, moderateScale);
+    const validMarginBottomTitle = scaledForDevice(30, moderateScale);
+    const validMarginBottomSubtitle = scaledForDevice(50, moderateScale);
+    const validFontTitle = scaledForDevice(32, moderateScale);
+    const validFontSubtitle = scaledForDevice(16, moderateScale);
+    const validLineHeightTitle = scaledForDevice(40, moderateScale);
+    const styles = StyleSheet.create({
+        container: {
+            justifyContent: 'center',
+            alignItems: 'center',
+            width: '100%',
+            height: '100%',
+            backgroundColor: backgroundColor,
+        },
+        title: {
+            fontWeight: 'bold',
+            textAlign: 'center',
+            color: textsColor,
+            paddingHorizontal: validPaddingHorizontal,
+            marginBottom: validMarginBottomTitle,
+            fontSize: validFontTitle,
+            lineHeight: validLineHeightTitle,
+        },
+        subtitle: {
+            textAlign: 'center',
+            color: textsColor,
+            paddingHorizontal: validPaddingHorizontal,
+            marginBottom: validMarginBottomSubtitle,
+            fontSize: validFontSubtitle,
+        },
+    });
+    useEffect(() => {
+        if (isVisible) {
+            setTimeout(() => {
+                onEndDuration();
+            }, duration);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isVisible]);
+    return (<Modal visible={isVisible} animationType={animationType} transparent {...props}>
+			<View style={styles.container}>
+				{children ?? (<>
+						{validTitle && <Text style={styles.title}>{title}</Text>}
+						{validSubtitle && <Text style={styles.subtitle}>{subtitle}</Text>}
+						{validIconName && <Icon color={iconColor} size={130} name={iconName}/>}
+					</>)}
+			</View>
+		</Modal>);
+};
+export default FullScreenMessage;

package/dist/index.d.ts

@@ -17,6 +17,7 @@ import Carousel from './components/Carousel';
 import ProgressBar from './components/ProgressBar';
 import List from './components/List';
 import BaseButton from './components/BaseButton';
+import FullScreenMessage from './components/FullScreenMessage';
 import LayoutWithBottomButtons from './components/LayoutWithBottomButtons';
 import * as getScale from './scale';
-export { Text, Avatar, CheckBox, Icon, Image, Loading, Svg, StatusChip, Input, palette, LoadingFullScreen, RadioButton, Select, SwipeUp, SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, Carousel, ProgressBar, List, BaseButton, getScale, LayoutWithBottomButtons, };
+export { Text, Avatar, CheckBox, Icon, Image, Loading, Svg, StatusChip, Input, palette, LoadingFullScreen, RadioButton, Select, SwipeUp, SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, Carousel, ProgressBar, List, BaseButton, getScale, LayoutWithBottomButtons, FullScreenMessage, };

package/dist/index.js

@@ -17,6 +17,7 @@ import Carousel from './components/Carousel';
 import ProgressBar from './components/ProgressBar';
 import List from './components/List';
 import BaseButton from './components/BaseButton';
+import FullScreenMessage from './components/FullScreenMessage';
 import LayoutWithBottomButtons from './components/LayoutWithBottomButtons';
 import * as getScale from './scale';
-export { Text, Avatar, CheckBox, Icon, Image, Loading, Svg, StatusChip, Input, palette, LoadingFullScreen, RadioButton, Select, SwipeUp, SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, Carousel, ProgressBar, List, BaseButton, getScale, LayoutWithBottomButtons, };
+export { Text, Avatar, CheckBox, Icon, Image, Loading, Svg, StatusChip, Input, palette, LoadingFullScreen, RadioButton, Select, SwipeUp, SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, Carousel, ProgressBar, List, BaseButton, getScale, LayoutWithBottomButtons, FullScreenMessage, };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@janiscommerce/ui-native",
-	"version": "1.5.0",
+	"version": "1.6.0",
 	"description": "components library for Janis app",
 	"main": "dist/index.js",
 	"typings": "dist/index.d.ts",
@@ -43,9 +43,9 @@
 	},
 	"homepage": "https://github.com/janis-commerce/ui-native#readme",
 	"peerDependencies": {
-		"react": ">=17.0.2 <=18.2.0",
-		"react-native": ">=0.67.5 <=0.71.7",
-		"react-native-gesture-handler": ">=2.9.0 <=2.13.4",
+		"react": ">=17.0.2",
+		"react-native": ">=0.67.5",
+		"react-native-gesture-handler": ">=2.9.0",
 		"react-native-reanimated": "2.17.0"
 	},
 	"devDependencies": {