ordering-ui-react-native 0.14.24 → 0.14.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/themes/instacart/src/components/BusinessProductsList/styles.tsx +1 -1
  3. package/themes/instacart/src/components/SingleProductCard/index.tsx +24 -19
  4. package/themes/instacart/src/components/SingleProductCard/styles.tsx +4 -6
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ordering-ui-react-native",
3
- "version": "0.14.24",
3
+ "version": "0.14.25",
4
4
  "description": "Reusable components made in react native",
5
5
  "main": "src/index.tsx",
6
6
  "author": "ordering.inc",
package/themes/instacart/src/components/BusinessProductsList/styles.tsx CHANGED
@@ -15,5 +15,5 @@ export const WrapperNotFound = styled.View`
15
15
  export const ProductsWrapper = styled.View`
16
16
  flex-direction: row;
17
17
  flex-wrap: wrap;
18
- align-items: flex-start;
18
+ margin-bottom: 20px;
19
19
  `
package/themes/instacart/src/components/SingleProductCard/index.tsx CHANGED
@@ -6,7 +6,7 @@ import {
6
6
  CardInfo,
7
7
  SoldOut
8
8
  } from './styles'
9
- import { StyleSheet, TouchableOpacity, Dimensions } from 'react-native'
9
+ import { StyleSheet, TouchableOpacity, Dimensions, View } from 'react-native'
10
10
  import { OText, OIcon } from '../shared'
11
11
  import { useTheme } from 'styled-components/native'
12
12
 
@@ -23,11 +23,7 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
23
23
 
24
24
  const styles = StyleSheet.create({
25
25
  container: {
26
- width: (windowWidth - 80) / 2,
27
- height: (windowWidth - 80) / 2 + 40
28
- },
29
- textStyle: {
30
- flex: 1,
26
+ width: (windowWidth - 80) / 2
31
27
  },
32
28
  soldOutTextStyle : {
33
29
  textTransform: 'capitalize',
@@ -35,9 +31,14 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
35
31
  fontSize: 12,
36
32
  lineHeight: 18
37
33
  },
38
- productStyle: {
34
+ imageWrapper: {
39
35
  width: (windowWidth - 160) / 2,
40
36
  height: (windowWidth - 160) / 2,
37
+ position: 'relative'
38
+ },
39
+ productStyle: {
40
+ width: '100%',
41
+ height: '100%',
41
42
  borderRadius: 3,
42
43
  marginTop: 5
43
44
  },
@@ -74,26 +75,30 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
74
75
  onPress={() => onProductClick?.(product)}
75
76
  activeOpacity={0.8}
76
77
  >
77
- <OIcon
78
- url={optimizeImage(product?.images, 'h_200,c_limit')}
79
- src={!product?.images && theme.images.dummies.product}
80
- style={{...styles.productStyle, opacity: (isSoldOut || maxProductQuantity <= 0) ? 0.4 : 1}}
81
- />
78
+ <View
79
+ style={styles.imageWrapper}
80
+ >
81
+ <OIcon
82
+ url={optimizeImage(product?.images, 'h_200,c_limit')}
83
+ src={!product?.images && theme.images.dummies.product}
84
+ style={{...styles.productStyle, opacity: (isSoldOut || maxProductQuantity <= 0) ? 0.4 : 1}}
85
+ />
86
+ {(isSoldOut || maxProductQuantity <= 0) && (
87
+ <SoldOut>
88
+ <OText size={10} style={styles.soldOutTextStyle}>{t('SOLD_OUT', 'SOLD OUT')}</OText>
89
+ </SoldOut>
90
+ )}
91
+ </View>
82
92
  <CardInfo>
83
93
  <OText color={theme.colors.textPrimary} style={{...theme.labels.normal, marginTop: 9}}>{parsePrice(product?.price)}</OText>
84
- <OText numberOfLines={1} ellipsizeMode='tail' style={{...styles.textStyle, ...theme.labels.small}}>{product?.name}</OText>
85
- <OText color={theme.colors.textSecondary} size={9} numberOfLines={2} ellipsizeMode='tail' style={{...styles.textStyle, ...theme.labels.small}}>{product?.description}</OText>
94
+ <OText numberOfLines={1} ellipsizeMode='tail' style={{...theme.labels.small}}>{product?.name}</OText>
95
+ <OText color={theme.colors.textSecondary} size={9} numberOfLines={2} ellipsizeMode='tail' style={{...theme.labels.small}}>{product?.description}</OText>
86
96
  </CardInfo>
87
97
 
88
98
  <TouchableOpacity style={styles.addBtn} onPress={() => onProductClick?.(product)} activeOpacity={0.7}>
89
99
  <OIcon src={theme.images.general.plus_circle} />
90
100
  </TouchableOpacity>
91
101
 
92
- {(isSoldOut || maxProductQuantity <= 0) && (
93
- <SoldOut>
94
- <OText size={10} style={styles.soldOutTextStyle}>{t('SOLD_OUT', 'SOLD OUT')}</OText>
95
- </SoldOut>
96
- )}
97
102
  </CardContainer>
98
103
  )
99
104
  }
package/themes/instacart/src/components/SingleProductCard/styles.tsx CHANGED
@@ -1,12 +1,9 @@
1
1
  import styled from 'styled-components/native'
2
2
 
3
3
  export const CardContainer = styled.TouchableOpacity`
4
- /* flex-grow: 1; */
5
- align-items: flex-start;
4
+ flex-direction: column;
6
5
  padding: 10px;
7
6
  position: relative;
8
- /* margin-end: 10px; */
9
- border-radius: 3px;
10
7
  `
11
8
  export const CardInfo = styled.View`
12
9
  flex: 1;
@@ -16,6 +13,7 @@ export const SoldOut = styled.View`
16
13
  position: absolute;
17
14
  background: ${(props: any) => props.theme.colors.black} 0% 0% no-repeat padding-box;
18
15
  padding: 3px 9px;
19
- top: 91px;
20
- left: 10px;
16
+ left: 0px;
17
+ bottom: -5px;
18
+ border-radius: 3px;
21
19
  `