@janiscommerce/ui-native 1.7.0 → 1.8.0

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

@@ -0,0 +1,17 @@
+import { FC, ReactNode } from 'react';
+import { ViewStyle } from 'react-native';
+import { BaseToastProps as Props } from 'react-native-toast-message';
+export declare enum Types {
+    Success = "success",
+    Notice = "notice",
+    Warning = "warning",
+    Error = "error",
+    Action = "action"
+}
+export interface BaseToastProps extends Props {
+    type?: Types;
+    children: ReactNode;
+    style?: {} | ViewStyle;
+}
+declare const BaseToast: FC<BaseToastProps>;
+export default BaseToast;

package/dist/components/BaseToast/index.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { black, palette } from '../../theme/palette';
+import { parseType } from './utils';
+export var Types;
+(function (Types) {
+    Types["Success"] = "success";
+    Types["Notice"] = "notice";
+    Types["Warning"] = "warning";
+    Types["Error"] = "error";
+    Types["Action"] = "action";
+})(Types || (Types = {}));
+const defaultType = Types.Notice;
+const BaseToast = ({ children, style, type = defaultType, ...props }) => {
+    if (!children) {
+        return null;
+    }
+    const selectedType = parseType[type];
+    const backgroundColor = palette[selectedType]?.main || palette[defaultType]?.main;
+    const styles = StyleSheet.create({
+        container: {
+            backgroundColor,
+            elevation: 5,
+            shadowColor: black.shadow,
+        },
+    });
+    return (<View style={[styles.container, style]} {...props}>
+			{children}
+		</View>);
+};
+export default BaseToast;

package/dist/components/BaseToast/utils/index.d.ts

@@ -0,0 +1,7 @@
+export declare const parseType: {
+    notice: string;
+    action: string;
+    success: string;
+    warning: string;
+    error: string;
+};

package/dist/components/BaseToast/utils/index.js

@@ -0,0 +1,7 @@
+export const parseType = {
+    notice: 'primary',
+    action: 'black',
+    success: 'success',
+    warning: 'alert',
+    error: 'error',
+};

package/dist/components/FullScreenMessage/index.js

@@ -17,9 +17,10 @@ const FullScreenMessage = ({ backgroundColor = primary.main, title = '', isVisib
     const validPaddingHorizontal = scaledForDevice(50, moderateScale);
     const validMarginBottomTitle = scaledForDevice(30, moderateScale);
     const validMarginBottomSubtitle = scaledForDevice(50, moderateScale);
-    const validFontTitle = scaledForDevice(32, moderateScale);
+    const validFontTitle = scaledForDevice(34, moderateScale);
     const validFontSubtitle = scaledForDevice(16, moderateScale);
     const validLineHeightTitle = scaledForDevice(40, moderateScale);
+    const validLineHeightSubtitle = scaledForDevice(20, moderateScale);
     const styles = StyleSheet.create({
         container: {
             justifyContent: 'center',
@@ -29,7 +30,7 @@ const FullScreenMessage = ({ backgroundColor = primary.main, title = '', isVisib
             backgroundColor: backgroundColor,
         },
         title: {
-            fontWeight: 'bold',
+            fontFamily: 'Roboto-Medium',
             textAlign: 'center',
             color: textsColor,
             paddingHorizontal: validPaddingHorizontal,
@@ -38,11 +39,13 @@ const FullScreenMessage = ({ backgroundColor = primary.main, title = '', isVisib
             lineHeight: validLineHeightTitle,
         },
         subtitle: {
+            fontFamily: 'Roboto-Regular',
             textAlign: 'center',
             color: textsColor,
             paddingHorizontal: validPaddingHorizontal,
             marginBottom: validMarginBottomSubtitle,
             fontSize: validFontSubtitle,
+            lineHeight: validLineHeightSubtitle,
         },
     });
     useEffect(() => {

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

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+import { TextStyle } from 'react-native';
+import { BaseToastProps } from '../BaseToast';
+export interface ToastProps extends BaseToastProps {
+    props?: {
+        showIcon?: boolean;
+        customIcon?: string;
+        showCloseIcon?: boolean;
+        actionTitle?: string;
+        onCloseCb?: () => void;
+        actionCb?: () => void;
+        iconStyle?: TextStyle;
+    };
+}
+declare const Toast: FC<ToastProps>;
+export default Toast;

package/dist/components/Toast/index.js

@@ -0,0 +1,86 @@
+import React from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import { StyleSheet } from 'react-native';
+import { moderateScale, scaledForDevice } from '../../scale';
+import { defaultIcon } from './utils';
+import { base, black } from '../../theme/palette';
+import BaseToast from '../BaseToast';
+import Text from '../Text';
+import Icon from '../Icon';
+const Toast = ({ type, text1, text2, style, props }) => {
+    const validType = type && typeof type === 'string';
+    const validTitle = text1 && typeof text1 === 'string';
+    const validMessage = text2 && typeof text2 === 'string';
+    if (!validType || !validMessage) {
+        return null;
+    }
+    const { showIcon = false, customIcon = null, showCloseIcon = false, actionTitle = null, onCloseCb = () => { }, actionCb = () => { }, iconStyle = {}, } = props || {};
+    const validColor = type === 'warning' ? black.main : base.white;
+    const defaultIconName = defaultIcon[type] || defaultIcon.notice;
+    const selectedIconName = customIcon || defaultIconName;
+    const horizontalAlign = validTitle ? 'flex-start' : 'center';
+    const styles = StyleSheet.create({
+        container: {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: horizontalAlign,
+            width: '95%',
+            borderRadius: scaledForDevice(4, moderateScale),
+            paddingHorizontal: scaledForDevice(16, moderateScale),
+            paddingVertical: scaledForDevice(16, moderateScale),
+        },
+        textWrapper: {
+            flex: 1,
+        },
+        title: {
+            fontFamily: 'Roboto-Bold',
+            fontSize: scaledForDevice(18, moderateScale),
+            lineHeight: scaledForDevice(22, moderateScale),
+            marginBottom: scaledForDevice(10, moderateScale),
+            color: validColor,
+        },
+        message: {
+            fontFamily: 'Roboto-Regular',
+            fontSize: scaledForDevice(14, moderateScale),
+            lineHeight: scaledForDevice(20, moderateScale),
+            color: validColor,
+        },
+        icon: {
+            paddingRight: scaledForDevice(10, moderateScale),
+        },
+        feedbackWrapper: {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+        },
+        closeIcon: {
+            paddingLeft: scaledForDevice(10, moderateScale),
+        },
+        actionTitle: {
+            marginRight: scaledForDevice(5, moderateScale),
+            marginLeft: scaledForDevice(10, moderateScale),
+            fontFamily: 'Roboto-Medium',
+            fontSize: scaledForDevice(14, moderateScale),
+            lineHeight: scaledForDevice(16, moderateScale),
+            color: validColor,
+        },
+    });
+    return (<BaseToast type={type} style={[styles.container, style]}>
+			{showIcon && (<Icon name={selectedIconName} color={validColor} size={24} style={{ ...styles.icon, ...iconStyle }}/>)}
+
+			<View style={styles.textWrapper}>
+				{validTitle && <Text style={styles.title}>{text1}</Text>}
+				{validMessage && <Text style={styles.message}>{text2}</Text>}
+			</View>
+
+			<View style={styles.feedbackWrapper}>
+				{actionTitle && (<TouchableOpacity onPress={actionCb} activeOpacity={0.6}>
+						<Text style={styles.actionTitle}>{actionTitle}</Text>
+					</TouchableOpacity>)}
+				{showCloseIcon && (<TouchableOpacity onPress={onCloseCb} activeOpacity={0.6}>
+						<Icon name="cross_light" color={validColor} size={24} style={styles.closeIcon}/>
+					</TouchableOpacity>)}
+			</View>
+		</BaseToast>);
+};
+export default Toast;

package/dist/components/Toast/utils/index.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ToastProps } from '../';
+export declare const configToast: {
+    success: (props: ToastProps) => React.JSX.Element;
+    notice: (props: ToastProps) => React.JSX.Element;
+    warning: (props: ToastProps) => React.JSX.Element;
+    error: (props: ToastProps) => React.JSX.Element;
+    action: (props: ToastProps) => React.JSX.Element;
+};
+export declare const defaultIcon: {
+    success: string;
+    notice: string;
+    warning: string;
+    error: string;
+    action: string;
+};

package/dist/components/Toast/utils/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import Toast from '..';
+export const configToast = {
+    success: (props) => <Toast {...props}/>,
+    notice: (props) => <Toast {...props}/>,
+    warning: (props) => <Toast {...props}/>,
+    error: (props) => <Toast {...props}/>,
+    action: (props) => <Toast {...props}/>,
+};
+export const defaultIcon = {
+    success: 'check_circle_bold',
+    notice: 'info_circle_bold',
+    warning: 'exclamation_triangle_bold',
+    error: 'cross_big_circle_bold',
+    action: 'info_circle_bold',
+};

package/dist/index.d.ts

@@ -20,5 +20,7 @@ import BaseButton from './components/BaseButton';
 import Button from './components/Button/index';
 import FullScreenMessage from './components/FullScreenMessage';
 import LayoutWithBottomButtons from './components/LayoutWithBottomButtons';
+import Toast from 'react-native-toast-message';
+import { configToast } from './components/Toast/utils';
 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, Button, getScale, LayoutWithBottomButtons, FullScreenMessage, };
+export { Text, Avatar, CheckBox, Icon, Image, Loading, Svg, StatusChip, Input, palette, LoadingFullScreen, RadioButton, Select, SwipeUp, SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, Carousel, ProgressBar, List, BaseButton, Button, getScale, LayoutWithBottomButtons, FullScreenMessage, Toast, configToast, };

package/dist/index.js

@@ -20,5 +20,7 @@ import BaseButton from './components/BaseButton';
 import Button from './components/Button/index';
 import FullScreenMessage from './components/FullScreenMessage';
 import LayoutWithBottomButtons from './components/LayoutWithBottomButtons';
+import Toast from 'react-native-toast-message';
+import { configToast } from './components/Toast/utils';
 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, Button, getScale, LayoutWithBottomButtons, FullScreenMessage, };
+export { Text, Avatar, CheckBox, Icon, Image, Loading, Svg, StatusChip, Input, palette, LoadingFullScreen, RadioButton, Select, SwipeUp, SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, Carousel, ProgressBar, List, BaseButton, Button, getScale, LayoutWithBottomButtons, FullScreenMessage, Toast, configToast, };

package/dist/theme/palette.js

@@ -6,6 +6,7 @@ const primary = {
 const black = {
     main: '#2F2F2F',
     dark: '#050505',
+    shadow: '#00000096',
     semiTransparent: '#0000001a',
 };
 const white = {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@janiscommerce/ui-native",
-	"version": "1.7.0",
+	"version": "1.8.0",
 	"description": "components library for Janis app",
 	"main": "dist/index.js",
 	"typings": "dist/index.d.ts",
@@ -46,6 +46,7 @@
 		"react": ">=17.0.2",
 		"react-native": ">=0.67.5",
 		"react-native-gesture-handler": ">=2.9.0",
+		"react-native-toast-message": ">=1.6.0",
 		"react-native-reanimated": "2.17.0"
 	},
 	"devDependencies": {
@@ -126,6 +127,7 @@
 		"react-native-safe-area-context": "^4.6.4",
 		"react-native-svg": "12.1.1",
 		"react-native-vector-icons": "^9.2.0",
+		"react-native-toast-message": ">=1.6.0",
 		"react-native-web": "^0.15.0"
 	}
 }