@janiscommerce/ui-native 1.18.0 → 1.19.0

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

@@ -7,9 +7,9 @@ export interface UIModalProps extends NativeModalProps {
     modalContainerStyle?: ViewStyle;
     canClose?: boolean;
 }
-interface RefProps {
+export interface ModalMethods {
     open?: () => void;
     close?: () => void;
 }
-declare const Modal: React.ForwardRefExoticComponent<UIModalProps & React.RefAttributes<RefProps>>;
+declare const Modal: React.ForwardRefExoticComponent<UIModalProps & React.RefAttributes<ModalMethods>>;
 export default Modal;

package/dist/components/molecules/BaseDetail/components/BaseDetailModal/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ModalMethods } from '../../../../atoms/Modal';
+declare const BaseDetailModal: React.ForwardRefExoticComponent<{
+    componentType: "modal";
+} & import("../../../../atoms/Modal").UIModalProps & {
+    scrollProps?: import("react-native").ScrollViewProps | undefined;
+} & React.RefAttributes<ModalMethods>>;
+export default BaseDetailModal;

package/dist/components/molecules/BaseDetail/components/BaseDetailModal/index.js

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react';
+import Modal from '../../../../atoms/Modal';
+import { ScrollView } from 'react-native';
+const BaseDetailModal = forwardRef((props, ref) => {
+    const { children, scrollProps = {}, ...rest } = props;
+    return (<Modal ref={ref} {...rest}>
+			<ScrollView showsVerticalScrollIndicator={false} {...scrollProps}>
+				{children}
+			</ScrollView>
+		</Modal>);
+});
+export default BaseDetailModal;

package/dist/components/molecules/BaseDetail/components/BaseDetailSwipe/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare const BaseDetailSwipe: React.ForwardRefExoticComponent<{
+    componentType: "swipe";
+} & import("../../../../atoms/SwipeUp").SwipeUpProps & {
+    scrollProps?: import("@gorhom/bottom-sheet/lib/typescript/components/bottomSheetScrollable/types").BottomSheetScrollViewProps | undefined;
+} & React.RefAttributes<import("@gorhom/bottom-sheet/lib/typescript/types").BottomSheetMethods>>;
+export default BaseDetailSwipe;

package/dist/components/molecules/BaseDetail/components/BaseDetailSwipe/index.js

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react';
+import SwipeUp from '../../../../atoms/SwipeUp';
+import { SwipeUpScrollView } from '../../../../atoms/SwipeUp/childComponents';
+const BaseDetailSwipe = forwardRef((props, ref) => {
+    const { children, scrollProps = {}, ...rest } = props;
+    return (<SwipeUp ref={ref} {...rest}>
+			<SwipeUpScrollView showsVerticalScrollIndicator={false} {...scrollProps}>
+				{children}
+			</SwipeUpScrollView>
+		</SwipeUp>);
+});
+export default BaseDetailSwipe;

package/dist/components/molecules/BaseDetail/components/index.d.ts

@@ -0,0 +1,3 @@
+import BaseDetailModal from './BaseDetailModal';
+import BaseDetailSwipe from './BaseDetailSwipe';
+export { BaseDetailModal, BaseDetailSwipe };

package/dist/components/molecules/BaseDetail/components/index.js

@@ -0,0 +1,3 @@
+import BaseDetailModal from './BaseDetailModal';
+import BaseDetailSwipe from './BaseDetailSwipe';
+export { BaseDetailModal, BaseDetailSwipe };

package/dist/components/molecules/BaseDetail/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { BaseModalProps, BaseSwipeUpProps } from './types';
+import { ModalMethods } from '../../atoms/Modal';
+import { BottomSheetMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
+type BaseDetailProps = BaseModalProps | BaseSwipeUpProps;
+export type BaseDetailMethods = ModalMethods & BottomSheetMethods;
+declare const BaseDetail: React.ForwardRefExoticComponent<BaseDetailProps & React.RefAttributes<BaseDetailMethods>>;
+export default BaseDetail;

package/dist/components/molecules/BaseDetail/index.js

@@ -0,0 +1,9 @@
+import React, { forwardRef } from 'react';
+import { BaseDetailModal, BaseDetailSwipe } from './components';
+const BaseDetail = forwardRef((props, ref) => {
+    if (props.componentType === 'swipe') {
+        return <BaseDetailSwipe {...props} ref={ref} enablePanDownToClose index={-1}/>;
+    }
+    return <BaseDetailModal {...props} fullScreen componentType="modal" ref={ref}/>;
+});
+export default BaseDetail;

package/dist/components/molecules/BaseDetail/types/index.d.ts

@@ -0,0 +1,15 @@
+import { BottomSheetScrollViewProps } from '@gorhom/bottom-sheet/lib/typescript/components/bottomSheetScrollable/types';
+import { UIModalProps } from '../../../atoms/Modal';
+import { SwipeUpProps } from '../../../atoms/SwipeUp';
+import { ScrollViewProps } from 'react-native';
+export type ComponentType = 'modal' | 'swipe';
+export type BaseModalProps = {
+    componentType: 'modal';
+} & UIModalProps & {
+    scrollProps?: ScrollViewProps;
+};
+export type BaseSwipeUpProps = {
+    componentType: 'swipe';
+} & SwipeUpProps & {
+    scrollProps?: BottomSheetScrollViewProps;
+};

package/dist/components/molecules/BaseDetail/types/index.js

@@ -0,0 +1 @@
+export {};

package/dist/components/organisms/ProductDetail/components/ProductInfo/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface ProductProps {
+    brand?: string;
+    productName?: string;
+    refId?: string;
+    image?: string;
+}
+declare const ProductInfo: ({ brand, productName, refId, image }: ProductProps) => React.JSX.Element;
+export default ProductInfo;

package/dist/components/organisms/ProductDetail/components/ProductInfo/index.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import Image from '../../../../atoms/Image';
+import Typography from '../../../../atoms/Typography';
+import { View, StyleSheet } from 'react-native';
+import { horizontalScale, moderateScale, verticalScale } from '../../../../../scale';
+import { palette } from '../../../../../theme/palette';
+const styles = StyleSheet.create({
+    Wrapper: {
+        flex: 1,
+        alignItems: 'center',
+        paddingBottom: verticalScale(12),
+        marginHorizontal: horizontalScale(24),
+    },
+    productImage: {
+        height: moderateScale(312),
+        width: moderateScale(312),
+        marginTop: verticalScale(16),
+    },
+    productInfo: {
+        height: 'auto',
+        width: moderateScale(312),
+        marginTop: verticalScale(24),
+    },
+    productName: {
+        marginTop: verticalScale(16),
+    },
+    referenceId: {
+        marginTop: verticalScale(16),
+    },
+});
+const ProductInfo = ({ brand, productName, refId, image }) => {
+    return (<View style={styles.Wrapper}>
+			{!!image && <Image source={{ uri: String(image) }} style={styles.productImage}/>}
+			<View style={styles.productInfo}>
+				{!!brand && (<Typography color={palette.primary.main} type="overline" size="large">
+						{String(brand)}
+					</Typography>)}
+				{!!productName && (<Typography color={palette.black.main} type="heading" size="medium" style={styles.productName}>
+						{String(productName)}
+					</Typography>)}
+				{!!refId && (<Typography color={palette.black.main} type="heading" size="small" style={styles.referenceId}>{`# ${String(refId)}`}</Typography>)}
+			</View>
+		</View>);
+};
+export default ProductInfo;

package/dist/components/organisms/ProductDetail/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { BaseModalProps, BaseSwipeUpProps } from '../../molecules/BaseDetail/types';
+import { ProductProps } from './components/ProductInfo';
+import { ModalMethods } from '../../atoms/Modal';
+import { BottomSheetMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
+type ProductDetailProps = (ProductProps & BaseModalProps) | (ProductProps & BaseSwipeUpProps);
+type BaseDetailMethods = ModalMethods & BottomSheetMethods;
+declare const ProductDetail: React.ForwardRefExoticComponent<ProductDetailProps & React.RefAttributes<BaseDetailMethods>>;
+export default ProductDetail;

package/dist/components/organisms/ProductDetail/index.js

@@ -0,0 +1,10 @@
+import React, { forwardRef } from 'react';
+import BaseDetail from '../../molecules/BaseDetail';
+import ProductInfo from './components/ProductInfo';
+const ProductDetail = forwardRef((props, ref) => {
+    const { brand, productName, refId, image, ...rest } = props;
+    return (<BaseDetail ref={ref} {...rest}>
+			<ProductInfo image={image} refId={refId} productName={productName} brand={brand}/>
+		</BaseDetail>);
+});
+export default ProductDetail;

package/dist/index.d.ts

@@ -26,10 +26,12 @@ import SwipeList from './components/molecules/SwipeList';
 import ItemSelectionButton from './components/molecules/ItemSelectionButton';
 import MainCardList from './components/molecules/MainCardList';
 import Input from './components/molecules/Input';
+import BaseDetail from './components/molecules/BaseDetail';
 import LoadingFullScreen from './components/organisms/LoadingFullScreen';
 import FullScreenMessage from './components/organisms/FullScreenMessage';
 import SwipeItemSelectionList from './components/organisms/SwipeItemSelectionList';
 import ErrorBoundary from './components/organisms/ErrorBoundary';
+import ProductDetail from './components/organisms/ProductDetail';
 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, Modal, };
+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, BaseDetail, ProductDetail, };

package/dist/index.js

@@ -28,12 +28,14 @@ import SwipeList from './components/molecules/SwipeList';
 import ItemSelectionButton from './components/molecules/ItemSelectionButton';
 import MainCardList from './components/molecules/MainCardList';
 import Input from './components/molecules/Input';
+import BaseDetail from './components/molecules/BaseDetail';
 // Organisms
 import LoadingFullScreen from './components/organisms/LoadingFullScreen';
 import FullScreenMessage from './components/organisms/FullScreenMessage';
 import SwipeItemSelectionList from './components/organisms/SwipeItemSelectionList';
 import ErrorBoundary from './components/organisms/ErrorBoundary';
+import ProductDetail from './components/organisms/ProductDetail';
 // 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, Modal, };
+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, BaseDetail, ProductDetail, };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@janiscommerce/ui-native",
-	"version": "1.18.0",
+	"version": "1.19.0",
 	"description": "components library for Janis app",
 	"main": "dist/index.js",
 	"typings": "dist/index.d.ts",