related-ui-components 2.0.7 → 2.0.9
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.
- package/lib/module/app.js +11 -8
- package/lib/module/app.js.map +1 -1
- package/lib/module/components/Card/templates/SelaDealCard.js +48 -78
- package/lib/module/components/Card/templates/SelaDealCard.js.map +1 -1
- package/lib/typescript/src/components/Card/templates/SelaDealCard.d.ts +2 -2
- package/lib/typescript/src/components/Card/templates/SelaDealCard.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/app.tsx +6 -6
- package/src/components/Card/templates/SelaDealCard.tsx +96 -131
package/lib/module/app.js
CHANGED
|
@@ -13,12 +13,16 @@ const MyScreen = () => {
|
|
|
13
13
|
padding: 50
|
|
14
14
|
},
|
|
15
15
|
children: /*#__PURE__*/_jsx(SelaDealCard, {
|
|
16
|
-
variant: "
|
|
17
|
-
isRTL
|
|
18
|
-
|
|
16
|
+
variant: "vertical"
|
|
17
|
+
// isRTL
|
|
18
|
+
,
|
|
19
|
+
backgroundImage: {
|
|
20
|
+
uri: "https://picsum.photos/seed/lounge/600/700"
|
|
21
|
+
} // Your image for the horizontal card
|
|
22
|
+
,
|
|
23
|
+
label: "Offer"
|
|
24
|
+
// lockOverlay
|
|
19
25
|
,
|
|
20
|
-
label: "Offer",
|
|
21
|
-
lockOverlay: true,
|
|
22
26
|
providerName: "Altanfeethi",
|
|
23
27
|
providerNameStyle: {
|
|
24
28
|
color: 'yellow'
|
|
@@ -30,9 +34,8 @@ const MyScreen = () => {
|
|
|
30
34
|
},
|
|
31
35
|
price: "20,000 pts",
|
|
32
36
|
onPress: () => console.log("Horizontal Sela Card Pressed"),
|
|
33
|
-
width:
|
|
34
|
-
|
|
35
|
-
height: 180 // Example height
|
|
37
|
+
width: 177 // Example width
|
|
38
|
+
// height={180} // Example height
|
|
36
39
|
})
|
|
37
40
|
})
|
|
38
41
|
})
|
package/lib/module/app.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","SafeAreaView","SelaDealCard","RelatedProvider","jsx","_jsx","Fragment","_Fragment","MyScreen","children","style","padding","variant","
|
|
1
|
+
{"version":3,"names":["React","SafeAreaView","SelaDealCard","RelatedProvider","jsx","_jsx","Fragment","_Fragment","MyScreen","children","style","padding","variant","backgroundImage","uri","label","providerName","providerNameStyle","color","description","descriptionStyle","price","onPress","console","log","width"],"sourceRoot":"..\\..\\src","sources":["app.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAoB,OAAO;AACvC,SAASC,YAAY,QAAc,cAAc;AACjD,SAASC,YAAY,QAAQ,uBAAc;AAC3C,SAASC,eAAe,QAAQ,kBAAS;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,QAAA,IAAAC,SAAA;AAE1C,MAAMC,QAAQ,GAAGA,CAAA,KAAM;EACrB,oBACEH,IAAA,CAAAE,SAAA;IAAAE,QAAA,eACEJ,IAAA,CAACF,eAAe;MAAAM,QAAA,eACdJ,IAAA,CAACJ,YAAY;QAACS,KAAK,EAAE;UAAEC,OAAO,EAAE;QAAG,CAAE;QAAAF,QAAA,eACnCJ,IAAA,CAACH,YAAY;UACXU,OAAO,EAAC;UACR;UAAA;UACAC,eAAe,EAAE;YAACC,GAAG,EAAE;UAA2C,CAAE,CAAC;UAAA;UACrEC,KAAK,EAAC;UACN;UAAA;UACAC,YAAY,EAAC,aAAa;UAC1BC,iBAAiB,EAAE;YAAEC,KAAK,EAAE;UAAS,CAAE,CAAC;UAAA;UACxCC,WAAW,EAAC,mBAAmB;UAC/BC,gBAAgB,EAAE;YAAEF,KAAK,EAAE;UAAQ,CAAE;UACrCG,KAAK,EAAC,YAAY;UAClBC,OAAO,EAAEA,CAAA,KAAMC,OAAO,CAACC,GAAG,CAAC,8BAA8B,CAAE;UAC3DC,KAAK,EAAE,GAAI,CAAC;UACZ;QAAA,CACD;MAAC,CACU;IAAC,CACA;EAAC,CAClB,CAAC;AAEP,CAAC;AAED,eAAejB,QAAQ","ignoreList":[]}
|
|
@@ -1,79 +1,58 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
// src/components/SelaDealCard/SelaDealCard.tsx
|
|
4
|
-
import React, {
|
|
5
|
-
import { View, Text, StyleSheet, Image
|
|
6
|
-
//
|
|
7
|
-
} from "
|
|
8
|
-
|
|
9
|
-
import { useTheme } from "../../../theme/ThemeContext.js";
|
|
4
|
+
import React, { useEffect, useState } from "react";
|
|
5
|
+
import { View, Text, StyleSheet, Image } from "react-native";
|
|
6
|
+
import Card from "../Card.js"; // Adjust path to your Card component
|
|
7
|
+
import { useTheme } from "../../../theme/ThemeContext.js"; // Adjust path
|
|
8
|
+
|
|
10
9
|
import { LockOverlay } from "../../LockOverlay/index.js";
|
|
11
10
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
12
|
-
const SelaDealCard =
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
} = props;
|
|
11
|
+
const SelaDealCard = ({
|
|
12
|
+
variant,
|
|
13
|
+
backgroundImage,
|
|
14
|
+
label,
|
|
15
|
+
labelStyle,
|
|
16
|
+
labelContainerStyle,
|
|
17
|
+
providerName,
|
|
18
|
+
providerNameStyle,
|
|
19
|
+
description,
|
|
20
|
+
descriptionStyle,
|
|
21
|
+
price,
|
|
22
|
+
priceStyle,
|
|
23
|
+
priceContainerStyle,
|
|
24
|
+
onPress,
|
|
25
|
+
style,
|
|
26
|
+
width = "100%",
|
|
27
|
+
height,
|
|
28
|
+
isRTL: propIsRTL,
|
|
29
|
+
borderRadius = 12,
|
|
30
|
+
// Default based on images
|
|
31
|
+
darkOverlayEnabled = true,
|
|
32
|
+
darkOverlayColor = "rgba(0, 0, 0, 0.3)",
|
|
33
|
+
lockOverlay = false
|
|
34
|
+
}) => {
|
|
37
35
|
const {
|
|
38
36
|
theme,
|
|
39
37
|
isRTL: themeIsRTL
|
|
40
38
|
} = useTheme();
|
|
41
39
|
const isRTL = propIsRTL !== undefined ? propIsRTL : themeIsRTL;
|
|
42
|
-
const
|
|
43
|
-
const [dynamicHeight, setDynamicHeight] = useState(
|
|
40
|
+
const styles = getStyles(theme, isRTL);
|
|
41
|
+
const [dynamicHeight, setDynamicHeight] = useState();
|
|
44
42
|
useEffect(() => {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
// You might want a default height or aspect ratio here.
|
|
56
|
-
setDynamicHeight(200); // Example fallback height
|
|
57
|
-
}
|
|
58
|
-
} else if (props.height !== undefined) {
|
|
59
|
-
// If an explicit height is provided, ensure dynamicHeight is not used.
|
|
43
|
+
if (height === undefined && typeof width == "number" && width && backgroundImage && backgroundImage.uri) {
|
|
44
|
+
Image.getSize(backgroundImage.uri, (imgWidth, imgHeight) => {
|
|
45
|
+
if (imgWidth > 0 && imgHeight > 0) {
|
|
46
|
+
const aspectRatio = imgHeight / imgWidth;
|
|
47
|
+
setDynamicHeight(width * aspectRatio);
|
|
48
|
+
} else {
|
|
49
|
+
setDynamicHeight(200);
|
|
50
|
+
}
|
|
51
|
+
});
|
|
52
|
+
} else if (height !== undefined) {
|
|
60
53
|
setDynamicHeight(undefined);
|
|
61
54
|
}
|
|
62
|
-
}, [
|
|
63
|
-
const handleLayout = event => {
|
|
64
|
-
const newWidth = event.nativeEvent.layout.width;
|
|
65
|
-
if (newWidth > 0 && newWidth !== actualCardWidth) {
|
|
66
|
-
setActualCardWidth(newWidth);
|
|
67
|
-
}
|
|
68
|
-
};
|
|
69
|
-
|
|
70
|
-
// Use explicit props.height if provided, otherwise use the calculated dynamicHeight.
|
|
71
|
-
// Provide a minimum height for initial render or if dynamicHeight is still undefined.
|
|
72
|
-
const finalHeight = props.height !== undefined ? props.height : dynamicHeight !== undefined ? dynamicHeight : 150; // Minimum height before calculation or as fallback
|
|
73
|
-
|
|
74
|
-
const styles = getStyles(theme, isRTL);
|
|
75
|
-
|
|
76
|
-
// ... (rest of your style definitions: finalLabelContainerStyle, etc. remain the same)
|
|
55
|
+
}, [backgroundImage, height, width]);
|
|
77
56
|
const finalLabelContainerStyle = [styles.labelContainerBase, labelContainerStyle];
|
|
78
57
|
const finalLabelStyle = [styles.labelTextBase, labelStyle];
|
|
79
58
|
const finalPriceContainerStyle = [styles.priceContainerBase, variant === "horizontal" ? styles.priceContainerHorizontal : styles.priceContainerVertical, priceContainerStyle];
|
|
@@ -87,27 +66,22 @@ const SelaDealCard = props => {
|
|
|
87
66
|
textAlign: isRTL ? "right" : "left"
|
|
88
67
|
}, descriptionStyle];
|
|
89
68
|
return /*#__PURE__*/_jsxs(Card, {
|
|
90
|
-
onPress: onPress
|
|
91
|
-
// onLayout={handleLayout} // Pass onLayout to Card to get its width
|
|
92
|
-
,
|
|
69
|
+
onPress: onPress,
|
|
93
70
|
style: [styles.cardBase, {
|
|
94
71
|
borderRadius,
|
|
95
72
|
width,
|
|
96
|
-
height:
|
|
97
|
-
},
|
|
98
|
-
// Use the calculated finalHeight
|
|
99
|
-
style],
|
|
73
|
+
height: dynamicHeight || height
|
|
74
|
+
}, style],
|
|
100
75
|
backgroundImage: {
|
|
101
76
|
source: backgroundImage,
|
|
102
|
-
resizeMode: "cover"
|
|
77
|
+
resizeMode: "cover"
|
|
103
78
|
},
|
|
104
79
|
children: [darkOverlayEnabled && /*#__PURE__*/_jsx(View, {
|
|
105
80
|
style: [StyleSheet.absoluteFill, {
|
|
106
81
|
backgroundColor: darkOverlayColor
|
|
107
82
|
}, {
|
|
108
83
|
borderRadius: borderRadius
|
|
109
|
-
}
|
|
110
|
-
]
|
|
84
|
+
}]
|
|
111
85
|
}), /*#__PURE__*/_jsx(LockOverlay, {
|
|
112
86
|
visible: lockOverlay,
|
|
113
87
|
contentPosition: variant == "horizontal" ? isRTL ? "top-left" : "top-right" : isRTL ? "top-right" : "top-left",
|
|
@@ -167,15 +141,12 @@ const SelaDealCard = props => {
|
|
|
167
141
|
})]
|
|
168
142
|
});
|
|
169
143
|
};
|
|
170
|
-
|
|
171
|
-
// getStyles function remains the same
|
|
172
144
|
const getStyles = (theme, isRTL) => StyleSheet.create({
|
|
173
145
|
cardBase: {
|
|
174
146
|
overflow: "hidden",
|
|
175
147
|
position: "relative"
|
|
176
148
|
},
|
|
177
149
|
overlayContainer: {
|
|
178
|
-
// This will now fill the calculated height of the card
|
|
179
150
|
flex: 1,
|
|
180
151
|
padding: 16,
|
|
181
152
|
justifyContent: "space-between"
|
|
@@ -218,8 +189,7 @@ const getStyles = (theme, isRTL) => StyleSheet.create({
|
|
|
218
189
|
},
|
|
219
190
|
textBlockHorizontal: {
|
|
220
191
|
flex: 1,
|
|
221
|
-
marginRight:
|
|
222
|
-
marginLeft: isRTL ? 10 : 0
|
|
192
|
+
marginRight: 10
|
|
223
193
|
},
|
|
224
194
|
priceContainerHorizontal: {},
|
|
225
195
|
bottomContentVertical: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","
|
|
1
|
+
{"version":3,"names":["React","useEffect","useState","View","Text","StyleSheet","Image","Card","useTheme","LockOverlay","jsx","_jsx","jsxs","_jsxs","SelaDealCard","variant","backgroundImage","label","labelStyle","labelContainerStyle","providerName","providerNameStyle","description","descriptionStyle","price","priceStyle","priceContainerStyle","onPress","style","width","height","isRTL","propIsRTL","borderRadius","darkOverlayEnabled","darkOverlayColor","lockOverlay","theme","themeIsRTL","undefined","styles","getStyles","dynamicHeight","setDynamicHeight","uri","getSize","imgWidth","imgHeight","aspectRatio","finalLabelContainerStyle","labelContainerBase","finalLabelStyle","labelTextBase","finalPriceContainerStyle","priceContainerBase","priceContainerHorizontal","priceContainerVertical","finalPriceStyle","priceTextBase","providerTextStyle","providerNameBase","color","onSurface","textAlign","descriptionTextStyle","descriptionBase","cardBase","source","resizeMode","children","absoluteFill","backgroundColor","visible","contentPosition","iconSize","text","overlayOpacity","overlayContainer","topSection","alignItems","bottomContentHorizontal","textBlockHorizontal","bottomContentVertical","textBlockVertical","create","overflow","position","flex","padding","justifyContent","paddingVertical","paddingHorizontal","background","fontWeight","fontSize","onBackground","marginBottom","secondary","helper","primary","onPrimary","flexDirection","marginRight","alignSelf"],"sourceRoot":"..\\..\\..\\..\\..\\src","sources":["components/Card/templates/SelaDealCard.tsx"],"mappings":";;AAAA;AACA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAClD,SAIEC,IAAI,EACJC,IAAI,EAGJC,UAAU,EACVC,KAAK,QAEA,cAAc;AACrB,OAAOC,IAAI,MAAM,YAAS,CAAC,CAAC;AAC5B,SAASC,QAAQ,QAAQ,gCAA6B,CAAC,CAAC;;AAExD,SAASC,WAAW,QAAQ,4BAAmB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AA+BhD,MAAMC,YAAyC,GAAGA,CAAC;EACjDC,OAAO;EACPC,eAAe;EACfC,KAAK;EACLC,UAAU;EACVC,mBAAmB;EACnBC,YAAY;EACZC,iBAAiB;EACjBC,WAAW;EACXC,gBAAgB;EAChBC,KAAK;EACLC,UAAU;EACVC,mBAAmB;EACnBC,OAAO;EACPC,KAAK;EACLC,KAAK,GAAG,MAAM;EACdC,MAAM;EACNC,KAAK,EAAEC,SAAS;EAChBC,YAAY,GAAG,EAAE;EAAE;EACnBC,kBAAkB,GAAG,IAAI;EACzBC,gBAAgB,GAAG,oBAAoB;EACvCC,WAAW,GAAG;AAChB,CAAC,KAAK;EACJ,MAAM;IAAEC,KAAK;IAAEN,KAAK,EAAEO;EAAW,CAAC,GAAG9B,QAAQ,CAAC,CAAC;EAC/C,MAAMuB,KAAK,GAAGC,SAAS,KAAKO,SAAS,GAAGP,SAAS,GAAGM,UAAU;EAE9D,MAAME,MAAM,GAAGC,SAAS,CAACJ,KAAK,EAAEN,KAAK,CAAC;EAEtC,MAAM,CAACW,aAAa,EAAEC,gBAAgB,CAAC,GAAGzC,QAAQ,CAAS,CAAC;EAE5DD,SAAS,CAAC,MAAM;IACd,IACE6B,MAAM,KAAKS,SAAS,IACpB,OAAOV,KAAK,IAAI,QAAQ,IACxBA,KAAK,IACLb,eAAe,IACfA,eAAe,CAAC4B,GAAG,EACnB;MACAtC,KAAK,CAACuC,OAAO,CAAC7B,eAAe,CAAC4B,GAAG,EAAE,CAACE,QAAQ,EAAEC,SAAS,KAAK;QAC1D,IAAID,QAAQ,GAAG,CAAC,IAAIC,SAAS,GAAG,CAAC,EAAE;UACjC,MAAMC,WAAW,GAAGD,SAAS,GAAGD,QAAQ;UACxCH,gBAAgB,CAACd,KAAK,GAAGmB,WAAW,CAAC;QACvC,CAAC,MAAM;UACLL,gBAAgB,CAAC,GAAG,CAAC;QACvB;MACF,CAAC,CAAC;IACJ,CAAC,MAAM,IAAIb,MAAM,KAAKS,SAAS,EAAE;MAC/BI,gBAAgB,CAACJ,SAAS,CAAC;IAC7B;EACF,CAAC,EAAE,CAACvB,eAAe,EAAEc,MAAM,EAAED,KAAK,CAAC,CAAC;EAEpC,MAAMoB,wBAA8C,GAAG,CACrDT,MAAM,CAACU,kBAAkB,EACzB/B,mBAAmB,CACpB;EACD,MAAMgC,eAAqC,GAAG,CAC5CX,MAAM,CAACY,aAAa,EACpBlC,UAAU,CACX;EAED,MAAMmC,wBAA8C,GAAG,CACrDb,MAAM,CAACc,kBAAkB,EACzBvC,OAAO,KAAK,YAAY,GACpByB,MAAM,CAACe,wBAAwB,GAC/Bf,MAAM,CAACgB,sBAAsB,EACjC9B,mBAAmB,CACpB;EACD,MAAM+B,eAAqC,GAAG,CAC5CjB,MAAM,CAACkB,aAAa,EACpBjC,UAAU,CACX;EAED,MAAMkC,iBAAuC,GAAG,CAC9CnB,MAAM,CAACoB,gBAAgB,EACvB;IAAEC,KAAK,EAAExB,KAAK,CAACyB,SAAS;IAAEC,SAAS,EAAEhC,KAAK,GAAG,OAAO,GAAG;EAAO,CAAC,EAC/DV,iBAAiB,CAClB;EAED,MAAM2C,oBAA0C,GAAG,CACjDxB,MAAM,CAACyB,eAAe,EACtB;IAAEJ,KAAK,EAAExB,KAAK,CAACyB,SAAS;IAAEC,SAAS,EAAEhC,KAAK,GAAG,OAAO,GAAG;EAAO,CAAC,EAC/DR,gBAAgB,CACjB;EAED,oBACEV,KAAA,CAACN,IAAI;IACHoB,OAAO,EAAEA,OAAQ;IACjBC,KAAK,EAAE,CAACY,MAAM,CAAC0B,QAAQ,EAAE;MAAEjC,YAAY;MAAEJ,KAAK;MAAEC,MAAM,EAAEY,aAAa,IAAIZ;IAAO,CAAC,EAAEF,KAAK,CAAE;IAC1FZ,eAAe,EAAE;MACfmD,MAAM,EAAEnD,eAAe;MACvBoD,UAAU,EAAE;IACd,CAAE;IAAAC,QAAA,GAEDnC,kBAAkB,iBACjBvB,IAAA,CAACR,IAAI;MACHyB,KAAK,EAAE,CACLvB,UAAU,CAACiE,YAAY,EACvB;QAAEC,eAAe,EAAEpC;MAAiB,CAAC,EACrC;QAAEF,YAAY,EAAEA;MAAa,CAAC;IAC9B,CACH,CACF,eAEDtB,IAAA,CAACF,WAAW;MACV+D,OAAO,EAAEpC,WAAY;MACrBqC,eAAe,EACb1D,OAAO,IAAI,YAAY,GACnBgB,KAAK,GACH,UAAU,GACV,WAAW,GACbA,KAAK,GACL,WAAW,GACX,UACL;MACD2C,QAAQ,EAAE,EAAG;MACbC,IAAI,EAAE,EAAG;MACTC,cAAc,EAAE;IAAI,CACrB,CAAC,eAEF/D,KAAA,CAACV,IAAI;MAACyB,KAAK,EAAEY,MAAM,CAACqC,gBAAiB;MAAAR,QAAA,gBACnC1D,IAAA,CAACR,IAAI;QACHyB,KAAK,EAAE,CACLY,MAAM,CAACsC,UAAU,EACjB;UACEC,UAAU,EACRhE,OAAO,KAAK,YAAY,GACpBgB,KAAK,GACH,UAAU,GACV,YAAY,GACdA,KAAK,GACL,YAAY,GACZ;QACR,CAAC,CACD;QAAAsC,QAAA,EAEDpD,KAAK,iBACJN,IAAA,CAACR,IAAI;UAACyB,KAAK,EAAEqB,wBAAyB;UAAAoB,QAAA,eACpC1D,IAAA,CAACP,IAAI;YAACwB,KAAK,EAAEuB,eAAgB;YAAAkB,QAAA,EAAEpD;UAAK,CAAO;QAAC,CACxC;MACP,CACG,CAAC,EAENF,OAAO,KAAK,YAAY,gBACvBF,KAAA,CAACV,IAAI;QAACyB,KAAK,EAAEY,MAAM,CAACwC,uBAAwB;QAAAX,QAAA,gBAC1CxD,KAAA,CAACV,IAAI;UAACyB,KAAK,EAAEY,MAAM,CAACyC,mBAAoB;UAAAZ,QAAA,GACrCjD,YAAY,iBACXT,IAAA,CAACP,IAAI;YAACwB,KAAK,EAAE+B,iBAAkB;YAAAU,QAAA,EAAEjD;UAAY,CAAO,CACrD,EACAE,WAAW,iBACVX,IAAA,CAACP,IAAI;YAACwB,KAAK,EAAEoC,oBAAqB;YAAAK,QAAA,EAAE/C;UAAW,CAAO,CACvD;QAAA,CACG,CAAC,EACNE,KAAK,iBACJb,IAAA,CAACR,IAAI;UAACyB,KAAK,EAAEyB,wBAAyB;UAAAgB,QAAA,eACpC1D,IAAA,CAACP,IAAI;YAACwB,KAAK,EAAE6B,eAAgB;YAAAY,QAAA,EAAE7C;UAAK,CAAO;QAAC,CACxC,CACP;MAAA,CACG,CAAC,gBAEPX,KAAA,CAACV,IAAI;QAACyB,KAAK,EAAEY,MAAM,CAAC0C,qBAAsB;QAAAb,QAAA,gBACxCxD,KAAA,CAACV,IAAI;UAACyB,KAAK,EAAEY,MAAM,CAAC2C,iBAAkB;UAAAd,QAAA,GACnCjD,YAAY,iBACXT,IAAA,CAACP,IAAI;YAACwB,KAAK,EAAE+B,iBAAkB;YAAAU,QAAA,EAAEjD;UAAY,CAAO,CACrD,EACAE,WAAW,iBACVX,IAAA,CAACP,IAAI;YAACwB,KAAK,EAAEoC,oBAAqB;YAAAK,QAAA,EAAE/C;UAAW,CAAO,CACvD;QAAA,CACG,CAAC,EACNE,KAAK,iBACJb,IAAA,CAACR,IAAI;UAACyB,KAAK,EAAEyB,wBAAyB;UAAAgB,QAAA,eACpC1D,IAAA,CAACP,IAAI;YAACwB,KAAK,EAAE6B,eAAgB;YAAAY,QAAA,EAAE7C;UAAK,CAAO;QAAC,CACxC,CACP;MAAA,CACG,CACP;IAAA,CACG,CAAC;EAAA,CACH,CAAC;AAEX,CAAC;AAED,MAAMiB,SAAS,GAAGA,CAACJ,KAAgB,EAAEN,KAAc,KACjD1B,UAAU,CAAC+E,MAAM,CAAC;EAChBlB,QAAQ,EAAE;IACRmB,QAAQ,EAAE,QAAQ;IAClBC,QAAQ,EAAE;EACZ,CAAC;EACDT,gBAAgB,EAAE;IAChBU,IAAI,EAAE,CAAC;IACPC,OAAO,EAAE,EAAE;IACXC,cAAc,EAAE;EAClB,CAAC;EACDX,UAAU,EAAE,CAAC,CAAC;EACd5B,kBAAkB,EAAE;IAClBwC,eAAe,EAAE,CAAC;IAClBC,iBAAiB,EAAE,EAAE;IACrB1D,YAAY,EAAE,CAAC;IACfsC,eAAe,EAAElC,KAAK,CAACuD;EACzB,CAAC;EACDxC,aAAa,EAAE;IACbyC,UAAU,EAAE,KAAK;IACjBC,QAAQ,EAAE,EAAE;IACZjC,KAAK,EAAExB,KAAK,CAAC0D;EACf,CAAC;EACDnC,gBAAgB,EAAE;IAChBkC,QAAQ,EAAE,EAAE;IACZE,YAAY,EAAE,CAAC;IACfnC,KAAK,EAAExB,KAAK,CAAC4D;EACf,CAAC;EACDhC,eAAe,EAAE;IACf6B,QAAQ,EAAE,EAAE;IACZjC,KAAK,EAAExB,KAAK,CAAC6D;EACf,CAAC;EACD5C,kBAAkB,EAAE;IAClBoC,eAAe,EAAE,CAAC;IAClBC,iBAAiB,EAAE,EAAE;IACrB1D,YAAY,EAAE,EAAE;IAChBsC,eAAe,EAAElC,KAAK,CAAC8D;EACzB,CAAC;EACDzC,aAAa,EAAE;IACboC,QAAQ,EAAE,EAAE;IACZjC,KAAK,EAAExB,KAAK,CAAC+D;EACf,CAAC;EACDpB,uBAAuB,EAAE;IACvBqB,aAAa,EAAEtE,KAAK,GAAG,aAAa,GAAG,KAAK;IAC5C0D,cAAc,EAAE,eAAe;IAC/BV,UAAU,EAAE;EACd,CAAC;EACDE,mBAAmB,EAAE;IACnBM,IAAI,EAAE,CAAC;IACPe,WAAW,EAAE;EACf,CAAC;EACD/C,wBAAwB,EAAE,CAAC,CAAC;EAC5B2B,qBAAqB,EAAE;IACrBmB,aAAa,EAAE;EACjB,CAAC;EACDlB,iBAAiB,EAAE;IACjBa,YAAY,EAAE;EAChB,CAAC;EACDxC,sBAAsB,EAAE;IACtB+C,SAAS,EAAE,SAAS;IACpBxB,UAAU,EAAE;EACd;AACF,CAAC,CAAC;AAEJ,eAAejE,YAAY","ignoreList":[]}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import {
|
|
2
|
+
import { StyleProp, ViewStyle, TextStyle, DimensionValue, ImageURISource } from "react-native";
|
|
3
3
|
interface SelaDealCardProps {
|
|
4
4
|
variant: "horizontal" | "vertical";
|
|
5
|
-
backgroundImage:
|
|
5
|
+
backgroundImage: ImageURISource;
|
|
6
6
|
label?: string;
|
|
7
7
|
labelStyle?: StyleProp<TextStyle>;
|
|
8
8
|
labelContainerStyle?: StyleProp<ViewStyle>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelaDealCard.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Card/templates/SelaDealCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,
|
|
1
|
+
{"version":3,"file":"SelaDealCard.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Card/templates/SelaDealCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAEL,SAAS,EACT,SAAS,EAGT,SAAS,EACT,cAAc,EAGd,cAAc,EACf,MAAM,cAAc,CAAC;AAMtB,UAAU,iBAAiB;IACzB,OAAO,EAAE,YAAY,GAAG,UAAU,CAAC;IACnC,eAAe,EAAE,cAAc,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,mBAAmB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,mBAAmB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC3C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAkL7C,CAAC;AAkEF,eAAe,YAAY,CAAC"}
|
package/package.json
CHANGED
package/src/app.tsx
CHANGED
|
@@ -9,19 +9,19 @@ const MyScreen = () => {
|
|
|
9
9
|
<RelatedProvider>
|
|
10
10
|
<SafeAreaView style={{ padding: 50 }}>
|
|
11
11
|
<SelaDealCard
|
|
12
|
-
variant="
|
|
13
|
-
isRTL
|
|
14
|
-
backgroundImage={
|
|
12
|
+
variant="vertical"
|
|
13
|
+
// isRTL
|
|
14
|
+
backgroundImage={{uri: "https://picsum.photos/seed/lounge/600/700"}} // Your image for the horizontal card
|
|
15
15
|
label="Offer"
|
|
16
|
-
lockOverlay
|
|
16
|
+
// lockOverlay
|
|
17
17
|
providerName="Altanfeethi"
|
|
18
18
|
providerNameStyle={{ color: 'yellow' }} // Specific style for provider name
|
|
19
19
|
description="1 Year Membership"
|
|
20
20
|
descriptionStyle={{ color: 'white' }}
|
|
21
21
|
price="20,000 pts"
|
|
22
22
|
onPress={() => console.log("Horizontal Sela Card Pressed")}
|
|
23
|
-
width={
|
|
24
|
-
height={180} // Example height
|
|
23
|
+
width={177} // Example width
|
|
24
|
+
// height={180} // Example height
|
|
25
25
|
/>
|
|
26
26
|
</SafeAreaView>
|
|
27
27
|
</RelatedProvider>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// src/components/SelaDealCard/SelaDealCard.tsx
|
|
2
|
-
import React, {
|
|
2
|
+
import React, { useEffect, useState } from "react";
|
|
3
3
|
import {
|
|
4
4
|
ImageSourcePropType,
|
|
5
5
|
StyleProp,
|
|
@@ -9,17 +9,17 @@ import {
|
|
|
9
9
|
TextStyle,
|
|
10
10
|
DimensionValue,
|
|
11
11
|
StyleSheet,
|
|
12
|
-
Image,
|
|
13
|
-
|
|
12
|
+
Image,
|
|
13
|
+
ImageURISource,
|
|
14
14
|
} from "react-native";
|
|
15
|
-
import Card from "../Card";
|
|
16
|
-
import { useTheme } from "../../../theme/ThemeContext";
|
|
15
|
+
import Card from "../Card"; // Adjust path to your Card component
|
|
16
|
+
import { useTheme } from "../../../theme/ThemeContext"; // Adjust path
|
|
17
17
|
import { ThemeType } from "../../../theme";
|
|
18
18
|
import { LockOverlay } from "../../LockOverlay";
|
|
19
19
|
|
|
20
20
|
interface SelaDealCardProps {
|
|
21
21
|
variant: "horizontal" | "vertical";
|
|
22
|
-
backgroundImage:
|
|
22
|
+
backgroundImage: ImageURISource;
|
|
23
23
|
label?: string;
|
|
24
24
|
labelStyle?: StyleProp<TextStyle>;
|
|
25
25
|
labelContainerStyle?: StyleProp<ViewStyle>;
|
|
@@ -31,100 +31,72 @@ interface SelaDealCardProps {
|
|
|
31
31
|
priceStyle?: StyleProp<TextStyle>;
|
|
32
32
|
priceContainerStyle?: StyleProp<ViewStyle>;
|
|
33
33
|
onPress?: () => void;
|
|
34
|
-
style?: StyleProp<ViewStyle>;
|
|
34
|
+
style?: StyleProp<ViewStyle>; // Overall card style
|
|
35
35
|
width?: DimensionValue;
|
|
36
|
-
height?: DimensionValue;
|
|
36
|
+
height?: DimensionValue;
|
|
37
37
|
isRTL?: boolean;
|
|
38
38
|
borderRadius?: number;
|
|
39
|
-
contentColor?: string;
|
|
39
|
+
contentColor?: string; // For text like providerName, description on the image
|
|
40
40
|
labelBackgroundColor?: string;
|
|
41
41
|
labelTextColor?: string;
|
|
42
42
|
priceBackgroundColor?: string;
|
|
43
43
|
priceTextColor?: string;
|
|
44
|
-
darkOverlayEnabled?: boolean;
|
|
45
|
-
darkOverlayColor?: string;
|
|
44
|
+
darkOverlayEnabled?: boolean; // New prop
|
|
45
|
+
darkOverlayColor?: string; // New prop for custom overlay color
|
|
46
46
|
lockOverlay?: boolean;
|
|
47
47
|
}
|
|
48
48
|
|
|
49
|
-
const SelaDealCard: React.FC<SelaDealCardProps> = (
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
} = props;
|
|
73
|
-
|
|
49
|
+
const SelaDealCard: React.FC<SelaDealCardProps> = ({
|
|
50
|
+
variant,
|
|
51
|
+
backgroundImage,
|
|
52
|
+
label,
|
|
53
|
+
labelStyle,
|
|
54
|
+
labelContainerStyle,
|
|
55
|
+
providerName,
|
|
56
|
+
providerNameStyle,
|
|
57
|
+
description,
|
|
58
|
+
descriptionStyle,
|
|
59
|
+
price,
|
|
60
|
+
priceStyle,
|
|
61
|
+
priceContainerStyle,
|
|
62
|
+
onPress,
|
|
63
|
+
style,
|
|
64
|
+
width = "100%",
|
|
65
|
+
height,
|
|
66
|
+
isRTL: propIsRTL,
|
|
67
|
+
borderRadius = 12, // Default based on images
|
|
68
|
+
darkOverlayEnabled = true,
|
|
69
|
+
darkOverlayColor = "rgba(0, 0, 0, 0.3)",
|
|
70
|
+
lockOverlay = false,
|
|
71
|
+
}) => {
|
|
74
72
|
const { theme, isRTL: themeIsRTL } = useTheme();
|
|
75
73
|
const isRTL = propIsRTL !== undefined ? propIsRTL : themeIsRTL;
|
|
76
74
|
|
|
77
|
-
const
|
|
78
|
-
|
|
79
|
-
);
|
|
80
|
-
const [dynamicHeight, setDynamicHeight] = useState<
|
|
81
|
-
DimensionValue | undefined
|
|
82
|
-
>(undefined);
|
|
75
|
+
const styles = getStyles(theme, isRTL);
|
|
76
|
+
|
|
77
|
+
const [dynamicHeight, setDynamicHeight] = useState<number>();
|
|
83
78
|
|
|
84
79
|
useEffect(() => {
|
|
85
|
-
// Calculate dynamic height if no explicit height is provided via props,
|
|
86
|
-
// and we have the actual card width and a valid background image.
|
|
87
80
|
if (
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
backgroundImage
|
|
81
|
+
height === undefined &&
|
|
82
|
+
typeof width == "number" &&
|
|
83
|
+
width &&
|
|
84
|
+
backgroundImage &&
|
|
85
|
+
backgroundImage.uri
|
|
92
86
|
) {
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
}
|
|
103
|
-
} else if (props.height !== undefined) {
|
|
104
|
-
// If an explicit height is provided, ensure dynamicHeight is not used.
|
|
87
|
+
Image.getSize(backgroundImage.uri, (imgWidth, imgHeight) => {
|
|
88
|
+
if (imgWidth > 0 && imgHeight > 0) {
|
|
89
|
+
const aspectRatio = imgHeight / imgWidth;
|
|
90
|
+
setDynamicHeight(width * aspectRatio);
|
|
91
|
+
} else {
|
|
92
|
+
setDynamicHeight(200);
|
|
93
|
+
}
|
|
94
|
+
});
|
|
95
|
+
} else if (height !== undefined) {
|
|
105
96
|
setDynamicHeight(undefined);
|
|
106
97
|
}
|
|
107
|
-
}, [
|
|
108
|
-
|
|
109
|
-
const handleLayout = (event: LayoutChangeEvent) => {
|
|
110
|
-
const newWidth = event.nativeEvent.layout.width;
|
|
111
|
-
if (newWidth > 0 && newWidth !== actualCardWidth) {
|
|
112
|
-
setActualCardWidth(newWidth);
|
|
113
|
-
}
|
|
114
|
-
};
|
|
115
|
-
|
|
116
|
-
// Use explicit props.height if provided, otherwise use the calculated dynamicHeight.
|
|
117
|
-
// Provide a minimum height for initial render or if dynamicHeight is still undefined.
|
|
118
|
-
const finalHeight =
|
|
119
|
-
props.height !== undefined
|
|
120
|
-
? props.height
|
|
121
|
-
: dynamicHeight !== undefined
|
|
122
|
-
? dynamicHeight
|
|
123
|
-
: 150; // Minimum height before calculation or as fallback
|
|
124
|
-
|
|
125
|
-
const styles = getStyles(theme, isRTL);
|
|
98
|
+
}, [backgroundImage, height, width]);
|
|
126
99
|
|
|
127
|
-
// ... (rest of your style definitions: finalLabelContainerStyle, etc. remain the same)
|
|
128
100
|
const finalLabelContainerStyle: StyleProp<ViewStyle> = [
|
|
129
101
|
styles.labelContainerBase,
|
|
130
102
|
labelContainerStyle,
|
|
@@ -161,15 +133,10 @@ const SelaDealCard: React.FC<SelaDealCardProps> = (props) => {
|
|
|
161
133
|
return (
|
|
162
134
|
<Card
|
|
163
135
|
onPress={onPress}
|
|
164
|
-
|
|
165
|
-
style={[
|
|
166
|
-
styles.cardBase,
|
|
167
|
-
{ borderRadius, width, height: finalHeight }, // Use the calculated finalHeight
|
|
168
|
-
style,
|
|
169
|
-
]}
|
|
136
|
+
style={[styles.cardBase, { borderRadius, width, height: dynamicHeight || height }, style]}
|
|
170
137
|
backgroundImage={{
|
|
171
138
|
source: backgroundImage,
|
|
172
|
-
resizeMode: "cover",
|
|
139
|
+
resizeMode: "cover",
|
|
173
140
|
}}
|
|
174
141
|
>
|
|
175
142
|
{darkOverlayEnabled && (
|
|
@@ -177,10 +144,11 @@ const SelaDealCard: React.FC<SelaDealCardProps> = (props) => {
|
|
|
177
144
|
style={[
|
|
178
145
|
StyleSheet.absoluteFill,
|
|
179
146
|
{ backgroundColor: darkOverlayColor },
|
|
180
|
-
{ borderRadius: borderRadius },
|
|
147
|
+
{ borderRadius: borderRadius },
|
|
181
148
|
]}
|
|
182
149
|
/>
|
|
183
150
|
)}
|
|
151
|
+
|
|
184
152
|
<LockOverlay
|
|
185
153
|
visible={lockOverlay}
|
|
186
154
|
contentPosition={
|
|
@@ -196,7 +164,7 @@ const SelaDealCard: React.FC<SelaDealCardProps> = (props) => {
|
|
|
196
164
|
text={""}
|
|
197
165
|
overlayOpacity={0.4}
|
|
198
166
|
/>
|
|
199
|
-
|
|
167
|
+
|
|
200
168
|
<View style={styles.overlayContainer}>
|
|
201
169
|
<View
|
|
202
170
|
style={[
|
|
@@ -258,71 +226,68 @@ const SelaDealCard: React.FC<SelaDealCardProps> = (props) => {
|
|
|
258
226
|
);
|
|
259
227
|
};
|
|
260
228
|
|
|
261
|
-
|
|
262
|
-
|
|
229
|
+
const getStyles = (theme: ThemeType, isRTL: boolean) =>
|
|
230
|
+
StyleSheet.create({
|
|
263
231
|
cardBase: {
|
|
264
|
-
|
|
265
|
-
|
|
232
|
+
overflow: "hidden",
|
|
233
|
+
position: "relative",
|
|
266
234
|
},
|
|
267
|
-
overlayContainer: {
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
},
|
|
272
|
-
topSection: {
|
|
235
|
+
overlayContainer: {
|
|
236
|
+
flex: 1,
|
|
237
|
+
padding: 16,
|
|
238
|
+
justifyContent: "space-between",
|
|
273
239
|
},
|
|
240
|
+
topSection: {},
|
|
274
241
|
labelContainerBase: {
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
242
|
+
paddingVertical: 6,
|
|
243
|
+
paddingHorizontal: 12,
|
|
244
|
+
borderRadius: 8,
|
|
245
|
+
backgroundColor: theme.background,
|
|
279
246
|
},
|
|
280
247
|
labelTextBase: {
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
248
|
+
fontWeight: "600",
|
|
249
|
+
fontSize: 13,
|
|
250
|
+
color: theme.onBackground,
|
|
284
251
|
},
|
|
285
252
|
providerNameBase: {
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
253
|
+
fontSize: 20,
|
|
254
|
+
marginBottom: 2,
|
|
255
|
+
color: theme.secondary,
|
|
289
256
|
},
|
|
290
257
|
descriptionBase: {
|
|
291
|
-
|
|
292
|
-
|
|
258
|
+
fontSize: 14,
|
|
259
|
+
color: theme.helper,
|
|
293
260
|
},
|
|
294
261
|
priceContainerBase: {
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
262
|
+
paddingVertical: 8,
|
|
263
|
+
paddingHorizontal: 16,
|
|
264
|
+
borderRadius: 10,
|
|
265
|
+
backgroundColor: theme.primary,
|
|
299
266
|
},
|
|
300
267
|
priceTextBase: {
|
|
301
|
-
|
|
302
|
-
|
|
268
|
+
fontSize: 16,
|
|
269
|
+
color: theme.onPrimary,
|
|
303
270
|
},
|
|
304
271
|
bottomContentHorizontal: {
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
272
|
+
flexDirection: isRTL ? "row-reverse" : "row",
|
|
273
|
+
justifyContent: "space-between",
|
|
274
|
+
alignItems: "flex-end",
|
|
308
275
|
},
|
|
309
276
|
textBlockHorizontal: {
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
marginLeft: isRTL ? 10 : 0,
|
|
313
|
-
},
|
|
314
|
-
priceContainerHorizontal: {
|
|
277
|
+
flex: 1,
|
|
278
|
+
marginRight: 10,
|
|
315
279
|
},
|
|
280
|
+
priceContainerHorizontal: {},
|
|
316
281
|
bottomContentVertical: {
|
|
317
|
-
|
|
282
|
+
flexDirection: "column",
|
|
318
283
|
},
|
|
319
284
|
textBlockVertical: {
|
|
320
|
-
|
|
285
|
+
marginBottom: 12,
|
|
321
286
|
},
|
|
322
287
|
priceContainerVertical: {
|
|
323
|
-
|
|
324
|
-
|
|
288
|
+
alignSelf: "stretch",
|
|
289
|
+
alignItems: "center",
|
|
325
290
|
},
|
|
326
|
-
});
|
|
291
|
+
});
|
|
327
292
|
|
|
328
|
-
export default SelaDealCard;
|
|
293
|
+
export default SelaDealCard;
|