@janiscommerce/ui-native 1.17.0 → 1.18.0

package/dist/components/atoms/Icon/index.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-interface Props {
+export interface Props {
     name: string;
     color?: string;
     size?: number;

package/dist/components/atoms/Image/index.d.ts

@@ -1,7 +1,10 @@
 import React from 'react';
-import { ImageProps as ImageRNProps, ImageSourcePropType } from 'react-native';
-interface ImageProps extends ImageRNProps {
-    source: ImageSourcePropType;
+import { Props as NativeIconProps } from '../Icon';
+import { ViewStyle } from 'react-native';
+import { FastImageProps } from 'react-native-fast-image';
+interface ImageProps extends FastImageProps {
+    iconProps?: NativeIconProps;
+    iconBackgroundStyle?: ViewStyle;
 }
-declare const Image: ({ source, ...props }: ImageProps) => React.JSX.Element | null;
+declare const Image: ({ source, iconProps, iconBackgroundStyle, onError, ...props }: ImageProps) => React.JSX.Element;
 export default Image;

package/dist/components/atoms/Image/index.js

@@ -1,13 +1,30 @@
-import React from 'react';
-import { Image as ImageComp } from 'react-native';
-const Image = ({ source, ...props }) => {
-    if (!source || typeof source !== 'object' || !Object.keys(source).length) {
-        return null;
+import React, { useState } from 'react';
+import Icon from '../Icon';
+import { palette } from '../../../theme/palette';
+import { View, StyleSheet } from 'react-native';
+import FastImage from 'react-native-fast-image';
+const Image = ({ source, iconProps, iconBackgroundStyle = {}, onError, ...props }) => {
+    const [showPlaceholderImage, setShowPlaceholderImage] = useState(false);
+    const styles = StyleSheet.create({
+        iconBackground: {
+            backgroundColor: palette.white.light,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+    });
+    const placeholderStyle = [styles.iconBackground, iconBackgroundStyle, props.style].filter(Boolean);
+    const handleError = () => {
+        if (onError) {
+            onError();
+        }
+        setShowPlaceholderImage(true);
+    };
+    if (showPlaceholderImage || !source) {
+        return (<View style={placeholderStyle}>
+				<Icon name="exclamation_circle" color={palette.white.dark} size={36} {...iconProps}/>
+			</View>);
     }
-    const sourceKeys = Object.keys(source);
-    if (!sourceKeys.includes('uri')) {
-        return null;
-    }
-    return <ImageComp source={source} {...props}/>;
+    return <FastImage onError={handleError} source={source} {...props}/>;
 };
 export default Image;

package/dist/components/atoms/Modal/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ModalProps as NativeModalProps, ViewStyle } from 'react-native';
+export interface UIModalProps extends NativeModalProps {
+    oncloseCallback?: () => void;
+    showCloseButton?: boolean;
+    fullScreen?: boolean;
+    modalContainerStyle?: ViewStyle;
+    canClose?: boolean;
+}
+interface RefProps {
+    open?: () => void;
+    close?: () => void;
+}
+declare const Modal: React.ForwardRefExoticComponent<UIModalProps & React.RefAttributes<RefProps>>;
+export default Modal;

package/dist/components/atoms/Modal/index.js

@@ -0,0 +1,84 @@
+import Icon from '../Icon';
+import React, { useState, forwardRef, useImperativeHandle } from 'react';
+import { Modal as NativeModal, Pressable, StyleSheet, View, } from 'react-native';
+import { horizontalScale } from '../../../scale';
+import { verticalScale, moderateScale } from '../../../scale';
+import { palette } from '../../../theme/palette';
+const styles = StyleSheet.create({
+    Overlay: {
+        flex: 1,
+        backgroundColor: 'rgba(0,0,0,0.6)',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    ModalWrapper: {
+        backgroundColor: palette.base.white,
+        alignItems: 'center',
+        justifyContent: 'center',
+        elevation: 12,
+        minWidth: horizontalScale(50),
+        width: horizontalScale(280),
+        marginHorizontal: horizontalScale(20),
+        borderRadius: verticalScale(18),
+        zIndex: 1,
+    },
+    Shadow: {
+        shadowOffset: {
+            width: 0,
+            height: 2,
+        },
+        shadowOpacity: 0.25,
+    },
+    FullScreen: {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        backgroundColor: palette.base.white,
+        zIndex: 2,
+    },
+    HeaderWrapper: {
+        flexDirection: 'row',
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+        zIndex: 3,
+        minHeight: verticalScale(52),
+        backgroundColor: palette.base.white,
+    },
+    CloseButton: {
+        position: 'absolute',
+        top: moderateScale(12),
+        right: moderateScale(12),
+    },
+});
+const Modal = forwardRef(({ children = null, oncloseCallback = undefined, showCloseButton = false, canClose = true, animationType = 'fade', transparent = true, fullScreen = false, modalContainerStyle = {}, ...props }, ref) => {
+    const [isVisible, setIsVisible] = useState(false);
+    const renderCloseButton = fullScreen && showCloseButton;
+    const handleClose = () => {
+        if (oncloseCallback) {
+            oncloseCallback();
+        }
+        setIsVisible(false);
+    };
+    useImperativeHandle(ref, () => ({
+        open: () => setIsVisible(true),
+        close: () => setIsVisible(false),
+    }));
+    return (<NativeModal visible={isVisible} transparent={transparent} animationType={animationType} {...props} {...(canClose && {
+        onRequestClose: handleClose,
+    })}>
+				<View style={styles.Overlay}>
+					{!fullScreen && (<Pressable style={StyleSheet.absoluteFill} disabled={!canClose} onPress={handleClose}/>)}
+					<View style={fullScreen
+            ? styles.FullScreen
+            : [styles.ModalWrapper, styles.Shadow, modalContainerStyle]}>
+						{renderCloseButton && canClose && (<Pressable onPress={handleClose} style={styles.HeaderWrapper} accessibilityLabel="Close modal" accessibilityRole="button">
+								<Icon name="cross_light" size={24} color={palette.black.main} style={styles.CloseButton}/>
+							</Pressable>)}
+						{children}
+					</View>
+				</View>
+			</NativeModal>);
+});
+export default Modal;

package/dist/index.d.ts

@@ -13,6 +13,7 @@ import Text from './components/atoms/Text';
 import BaseInput from './components/atoms/BaseInput';
 import Typography from './components/atoms/Typography';
 import Collapsible from './components/atoms/Collapsible';
+import Modal from './components/atoms/Modal';
 import Avatar from './components/molecules/Avatar';
 import Button from './components/molecules/Button';
 import Carousel from './components/molecules/Carousel';
@@ -31,4 +32,4 @@ import SwipeItemSelectionList from './components/organisms/SwipeItemSelectionLis
 import ErrorBoundary from './components/organisms/ErrorBoundary';
 import { palette } from './theme/palette';
 import * as getScale from './scale';
-export { Text, Avatar, CheckBox, Icon, Image, Input, Loading, Svg, StatusChip, palette, LoadingFullScreen, RadioButton, Select, SwipeUp, SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, Carousel, ProgressBar, List, BaseButton, Button, getScale, LayoutWithBottomButtons, FullScreenMessage, Toast, configToast, SwipeList, ItemSelectionButton, SwipeItemSelectionList, MainCardList, BaseInput, Typography, Collapsible, ErrorBoundary, };
+export { Text, Avatar, CheckBox, Icon, Image, Input, Loading, Svg, StatusChip, palette, LoadingFullScreen, RadioButton, Select, SwipeUp, SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, Carousel, ProgressBar, List, BaseButton, Button, getScale, LayoutWithBottomButtons, FullScreenMessage, Toast, configToast, SwipeList, ItemSelectionButton, SwipeItemSelectionList, MainCardList, BaseInput, Typography, Collapsible, ErrorBoundary, Modal, };

package/dist/index.js

@@ -14,6 +14,7 @@ import Text from './components/atoms/Text';
 import BaseInput from './components/atoms/BaseInput';
 import Typography from './components/atoms/Typography';
 import Collapsible from './components/atoms/Collapsible';
+import Modal from './components/atoms/Modal';
 // Molecules
 import Avatar from './components/molecules/Avatar';
 import Button from './components/molecules/Button';
@@ -35,4 +36,4 @@ import ErrorBoundary from './components/organisms/ErrorBoundary';
 // Misc
 import { palette } from './theme/palette';
 import * as getScale from './scale';
-export { Text, Avatar, CheckBox, Icon, Image, Input, Loading, Svg, StatusChip, palette, LoadingFullScreen, RadioButton, Select, SwipeUp, SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, Carousel, ProgressBar, List, BaseButton, Button, getScale, LayoutWithBottomButtons, FullScreenMessage, Toast, configToast, SwipeList, ItemSelectionButton, SwipeItemSelectionList, MainCardList, BaseInput, Typography, Collapsible, ErrorBoundary, };
+export { Text, Avatar, CheckBox, Icon, Image, Input, Loading, Svg, StatusChip, palette, LoadingFullScreen, RadioButton, Select, SwipeUp, SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, Carousel, ProgressBar, List, BaseButton, Button, getScale, LayoutWithBottomButtons, FullScreenMessage, Toast, configToast, SwipeList, ItemSelectionButton, SwipeItemSelectionList, MainCardList, BaseInput, Typography, Collapsible, ErrorBoundary, Modal, };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@janiscommerce/ui-native",
-	"version": "1.17.0",
+	"version": "1.18.0",
 	"description": "components library for Janis app",
 	"main": "dist/index.js",
 	"typings": "dist/index.d.ts",
@@ -47,6 +47,7 @@
 		"react": ">=17.0.2",
 		"react-native": ">=0.67.5",
 		"react-native-gesture-handler": ">=2.9.0",
+		"react-native-fast-image": "^8.5.11",
 		"react-native-reanimated": "2.17.0",
 		"react-native-toast-message": ">=1.6.0"
 	},
@@ -96,6 +97,7 @@
 		"react": "17.0.2",
 		"react-dom": "^17.0.2",
 		"react-native": "0.67.5",
+		"react-native-fast-image": "^8.5.11",
 		"react-native-svg-transformer": "^1.0.0",
 		"react-test-renderer": "17.0.2",
 		"setup-env": "^2.0.0",