Commit b634884e authored by Neosoulink's avatar Neosoulink
Browse files

feat: create ProductHistoryItem component

parent 82e03c09

packages/shop-mobile-expo/src/components/Common/ProductHistoryItem.tsx

0 → 100644
+111 −0
Original line number Diff line number Diff line 
import React from 'react';

import { StyleSheet, Image, View } from 'react-native';

import { Text } from 'react-native-paper';



// COMPONENTS

import { PaperText, TouchableCard } from '.';



// STYLES

import {

	GLOBAL_STYLE as GS,

	CONSTANT_SIZE as CS,

	CONSTANT_COLOR as CC,

} from '../../assets/ts/styles';



export interface Props {

	image: string;

	title: string;

	description?: string;

	amount?: number;

	onPress: () => any;

}



const ProductHistoryItem: React.FC<Props> = ({

	image,

	title,

	description,

	amount = 0,

	onPress,

}) => {

	// DATA

	const PRODUCT_HEIGHT = CS.SPACE_XLG * 2;



	// STYLES

	const STYLES = StyleSheet.create({

		productCard: {

			...GS.noShadow,

			borderWidth: 0,

			overflow: 'hidden',

		},

		productCardContent: {

			...GS.px0,

		},

		productContentContainer: { ...GS.w100, ...GS.pr2, ...GS.inlineItems },

		productContentImageContainer: {

			overflow: 'hidden',

			borderTopEndRadius: CS.SPACE_SM,

			borderBottomEndRadius: CS.SPACE_SM,

		},

		productContentImage: {

			height: PRODUCT_HEIGHT,

			width: PRODUCT_HEIGHT,

		},

		productContent: {

			...GS.pl4,

			flex: 1,

		},

		productContentTitle: {

			...GS.txtPrimary,

			fontSize: CS.FONT_SIZE_MD + 1,

		},

		productContentDescription: {

			fontSize: CS.FONT_SIZE_MD,

			color: CC.gray,

		},

		productAmount: {

			...GS.centered,

			width: CS.FONT_SIZE_XLG * 2.5,

		},

		productAmountText: {

			...GS.txtPrimaryLight,

			...GS.FF_NunitoSemiBold,

		},

	});



	return (

		<TouchableCard

			onPress={onPress}

			height={PRODUCT_HEIGHT}

			cardStyle={STYLES.productCard}

			cardStyleContent={STYLES.productCardContent}

			rippleColor={CC.primary + '33'}>

			<View style={STYLES.productContentContainer}>

				<View style={STYLES.productContentImageContainer}>

					<Image

						resizeMode='cover'

						source={{

							uri: image,

						}}

						style={STYLES.productContentImage}

					/>

				</View>

				<View style={STYLES.productContent}>

					<Text style={STYLES.productContentTitle}>{title}</Text>

					{!!description && (

						<PaperText style={STYLES.productContentDescription}>

							{description}

						</PaperText>

					)}

				</View>



				<View style={STYLES.productAmount}>

					<PaperText style={STYLES.productAmountText}>

						${amount}

					</PaperText>

				</View>

			</View>

		</TouchableCard>

	);

};



export default ProductHistoryItem;

packages/shop-mobile-expo/src/components/Common/index.ts

+3 −0
Original line number Diff line number Diff line
@@ -6,6 +6,7 @@ import Icon_ from './Icon'; 
import OrderHistoryItem_ from './OrderHistoryItem';

import PaperText_ from './PaperText';

import ProductItem_ from './ProductItem';

import ProductHistoryItem_ from './ProductHistoryItem';

import TouchableCard_ from './TouchableCard';



// TODO: add type for components constant
@@ -17,6 +18,7 @@ export const Icon = Icon_; 
export const OrderHistoryItem = OrderHistoryItem_;

export const PaperText = PaperText_;

export const ProductItem = ProductItem_;

export const ProductHistoryItem = ProductHistoryItem_;

export const TouchableCard = TouchableCard_;



const components = {
@@ -27,6 +29,7 @@ const components = { 
	OrderHistoryItem,

	PaperText,

	ProductItem,

	ProductHistoryItem,

	TouchableCard,

};