related-ui-components 2.8.3 → 2.8.4
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 +13 -9
- package/lib/module/app.js.map +1 -1
- package/lib/module/components/Card/Card.js.map +1 -1
- package/lib/module/components/Card/templates/SelaDealCard.js +9 -4
- package/lib/module/components/Card/templates/SelaDealCard.js.map +1 -1
- package/lib/module/components/LockOverlay/LockOverlay.js +59 -68
- package/lib/module/components/LockOverlay/LockOverlay.js.map +1 -1
- package/lib/typescript/src/app.d.ts.map +1 -1
- package/lib/typescript/src/components/Card/Card.d.ts.map +1 -1
- package/lib/typescript/src/components/Card/templates/SelaDealCard.d.ts +1 -0
- package/lib/typescript/src/components/Card/templates/SelaDealCard.d.ts.map +1 -1
- package/lib/typescript/src/components/LockOverlay/LockOverlay.d.ts +6 -3
- package/lib/typescript/src/components/LockOverlay/LockOverlay.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/app.tsx +5 -10
- package/src/components/Card/Card.tsx +21 -25
- package/src/components/Card/templates/SelaDealCard.tsx +5 -2
- package/src/components/LockOverlay/LockOverlay.tsx +78 -70
package/lib/module/app.js
CHANGED
|
@@ -4,11 +4,10 @@ import React, { useState } from "react";
|
|
|
4
4
|
import { SafeAreaView, StyleSheet, StatusBar } from "react-native";
|
|
5
5
|
import CarouselCardStack from "./components/CarouselCardStack/CarouselCardStack.js"; // Adjust path as needed
|
|
6
6
|
import { GestureHandlerRootView } from "react-native-gesture-handler";
|
|
7
|
-
import {
|
|
7
|
+
import { SelaDealCard } from "./components/index.js";
|
|
8
8
|
import { lightTheme, RelatedProvider, useTheme } from "./theme/index.js";
|
|
9
9
|
import { BottomSheetStackProvider } from "./contexts/index.js";
|
|
10
10
|
import { SafeAreaProvider } from "react-native-safe-area-context";
|
|
11
|
-
import { Ionicons } from "@expo/vector-icons";
|
|
12
11
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
13
12
|
const DUMMY_DATA = Array.from({
|
|
14
13
|
length: 10
|
|
@@ -49,13 +48,18 @@ const App = () => {
|
|
|
49
48
|
// onActiveIndexChange={(index) => {
|
|
50
49
|
// console.log("Active item index:", index);
|
|
51
50
|
// }}
|
|
52
|
-
}), /*#__PURE__*/_jsx(
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
51
|
+
}), /*#__PURE__*/_jsx(SelaDealCard, {
|
|
52
|
+
variant: "horizontal",
|
|
53
|
+
width: 300,
|
|
54
|
+
height: 300,
|
|
55
|
+
label: "discount",
|
|
56
|
+
description: "HELLO",
|
|
57
|
+
providerName: "Riva Club",
|
|
58
|
+
price: "100",
|
|
59
|
+
lockOverlay: true
|
|
60
|
+
// grayscaleIntensity={80}
|
|
61
|
+
,
|
|
62
|
+
backgroundImage: require("./assets/images/namshi-banner.png")
|
|
59
63
|
})]
|
|
60
64
|
})]
|
|
61
65
|
})
|
package/lib/module/app.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useState","SafeAreaView","StyleSheet","StatusBar","CarouselCardStack","GestureHandlerRootView","
|
|
1
|
+
{"version":3,"names":["React","useState","SafeAreaView","StyleSheet","StatusBar","CarouselCardStack","GestureHandlerRootView","SelaDealCard","lightTheme","RelatedProvider","useTheme","BottomSheetStackProvider","SafeAreaProvider","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","DUMMY_DATA","Array","from","length","_","i","id","image","title","App","theme","departureDate","setDepartureDate","undefined","returnDate","setReturnDate","progress","setProgress","handleAnimate","newProgress","Math","floor","random","children","style","flex","barStyle","styles","appContainer","data","variant","width","height","label","description","providerName","price","lockOverlay","backgroundImage","require","create","backgroundColor","justifyContent","alignItems"],"sourceRoot":"..\\..\\src","sources":["app.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","View","TouchableOpacity","StyleSheet","ImageBackground","useTheme","LinearGradient","jsx","_jsx","Card","children","style","onPress","disabled","elevation","testID","variant","backgroundColor","borderColor","borderRadius","backgroundImage","gradient","theme","getCardStyle","baseStyle","background","cardStyle","styles","card","opacity","renderCardContent","source","imageStyle","resizeMode","blurRadius","imageContentContainer","undefined","colors","start","end","activeOpacity","accessibilityRole","accessibilityLabel","create","flexDirection","display","width","height","flex","justifyContent","alignItems"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Card/Card.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SACEC,IAAI,EACJC,gBAAgB,EAChBC,UAAU,EAEVC,eAAe,QACV,cAAc;AAErB,SAASC,QAAQ,QAAQ,6BAA0B;AACnD,SAASC,cAAc,QAAQ,sBAAsB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEtD,MAAMC,IAAyB,GAAGA,CAAC;EACjCC,QAAQ;EACRC,KAAK;EACLC,OAAO;EACPC,QAAQ,GAAG,KAAK;EAChBC,SAAS,GAAG,CAAC;EACbC,MAAM;EACNC,OAAO;EACPC,eAAe;EACfC,WAAW;EACXC,YAAY,GAAG,CAAC;EAChBC,eAAe;EACfC;EACA;EACA;AACF,CAAC,KAAK;EACJ,MAAM;IAACC;EAAK,CAAC,GAAGjB,QAAQ,CAAC,CAAC;EAE1B,MAAMkB,YAAY,GAAGA,CAAA,KAAM;IACzB,MAAMC,SAAc,GAAG;MACrBP,eAAe,EAAEA,eAAe,IAAIK,KAAK,CAACG,UAAU;MACpDN;IACF,CAAC;IAED,OAAOK,SAAS;EAClB,CAAC;EAED,MAAME,SAAS,GAAG,CAChBC,MAAM,CAACC,IAAI,EACXL,YAAY,CAAC,CAAC,EACdV,QAAQ,IAAI;IAAEgB,OAAO,EAAE;EAAI,CAAC,EAC5BlB,KAAK,EACLS,eAAe,IAAI;IAAEH,eAAe,EAAE;EAAc,CAAC,CACtD;EAED,MAAMa,iBAAiB,GAAGA,CAAA,KAAM;IAC9B,IAAIV,eAAe,EAAE;MACnB,
|
|
1
|
+
{"version":3,"names":["React","View","TouchableOpacity","StyleSheet","ImageBackground","useTheme","LinearGradient","jsx","_jsx","Card","children","style","onPress","disabled","elevation","testID","variant","backgroundColor","borderColor","borderRadius","backgroundImage","gradient","theme","getCardStyle","baseStyle","background","cardStyle","styles","card","opacity","renderCardContent","source","imageStyle","resizeMode","blurRadius","imageContentContainer","undefined","colors","start","end","activeOpacity","accessibilityRole","accessibilityLabel","create","flexDirection","display","width","height","flex","justifyContent","alignItems"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Card/Card.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -31,7 +31,8 @@ const SelaDealCard = ({
|
|
|
31
31
|
darkOverlayEnabled = true,
|
|
32
32
|
darkOverlayColor = "rgba(0, 0, 0, 0.3)",
|
|
33
33
|
lockOverlay = false,
|
|
34
|
-
priceContainerBlur
|
|
34
|
+
priceContainerBlur,
|
|
35
|
+
grayscaleIntensity = 0
|
|
35
36
|
}) => {
|
|
36
37
|
const {
|
|
37
38
|
theme,
|
|
@@ -73,7 +74,10 @@ const SelaDealCard = ({
|
|
|
73
74
|
}, style],
|
|
74
75
|
backgroundImage: {
|
|
75
76
|
source: backgroundImage,
|
|
76
|
-
resizeMode: "cover"
|
|
77
|
+
resizeMode: "cover",
|
|
78
|
+
style: {
|
|
79
|
+
filter: `grayscale(${grayscaleIntensity}%)`
|
|
80
|
+
}
|
|
77
81
|
},
|
|
78
82
|
children: [darkOverlayEnabled && /*#__PURE__*/_jsx(View, {
|
|
79
83
|
style: [StyleSheet.absoluteFill, {
|
|
@@ -83,8 +87,9 @@ const SelaDealCard = ({
|
|
|
83
87
|
}]
|
|
84
88
|
}), /*#__PURE__*/_jsx(LockOverlay, {
|
|
85
89
|
visible: lockOverlay,
|
|
86
|
-
contentPosition: isRTL ? "top-left" : "top-right"
|
|
87
|
-
iconSize
|
|
90
|
+
contentPosition: isRTL ? "top-left" : "top-right"
|
|
91
|
+
// iconSize={24}
|
|
92
|
+
,
|
|
88
93
|
text: "",
|
|
89
94
|
overlayOpacity: 0.4
|
|
90
95
|
}), /*#__PURE__*/_jsxs(View, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useEffect","useState","View","StyleSheet","Image","Card","useTheme","LockOverlay","BlurView","ThemedText","Text","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","priceContainerBlur","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","descriptionTextStyle","descriptionBase","cardBase","source","resizeMode","children","absoluteFill","backgroundColor","visible","contentPosition","
|
|
1
|
+
{"version":3,"names":["React","useEffect","useState","View","StyleSheet","Image","Card","useTheme","LockOverlay","BlurView","ThemedText","Text","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","priceContainerBlur","grayscaleIntensity","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","descriptionTextStyle","descriptionBase","cardBase","source","resizeMode","filter","children","absoluteFill","backgroundColor","visible","contentPosition","text","overlayOpacity","overlayContainer","topSection","bottomContentHorizontal","textBlockHorizontal","bottomContentVertical","textBlockVertical","experimentalBlurMethod","intensity","tint","primary","create","overflow","position","flex","padding","justifyContent","flexDirection","paddingVertical","paddingHorizontal","background","fontWeight","fontSize","onBackground","marginBottom","secondary","helper","onPrimary","alignItems","marginRight","alignSelf"],"sourceRoot":"..\\..\\..\\..\\..\\src","sources":["components/Card/templates/SelaDealCard.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,11 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
import React from "react";
|
|
4
|
-
import { View, Text, StyleSheet, TouchableOpacity
|
|
5
|
-
|
|
6
|
-
// Import StyleProp for better type safety
|
|
7
|
-
} from "react-native";
|
|
8
|
-
import { Ionicons } from "@expo/vector-icons"; // Assuming you have this installed
|
|
4
|
+
import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
|
|
5
|
+
import { Ionicons } from "@expo/vector-icons";
|
|
9
6
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
10
7
|
const LockOverlay = ({
|
|
11
8
|
visible = true,
|
|
@@ -14,97 +11,91 @@ const LockOverlay = ({
|
|
|
14
11
|
iconStyle,
|
|
15
12
|
textStyle,
|
|
16
13
|
text = "Unlock",
|
|
17
|
-
|
|
18
|
-
iconName = "lock-closed",
|
|
19
|
-
iconSize = 50,
|
|
20
|
-
iconColor = "white",
|
|
14
|
+
icon,
|
|
21
15
|
overlayOpacity = 0.7,
|
|
22
16
|
contentPosition = "center",
|
|
23
17
|
contentPadding = 20,
|
|
24
|
-
|
|
18
|
+
grayscale = false,
|
|
25
19
|
...touchableProps
|
|
26
20
|
}) => {
|
|
27
21
|
if (!visible) return null;
|
|
28
|
-
const
|
|
29
|
-
backgroundColor: `rgba(0, 0, 0, ${overlayOpacity})`
|
|
30
|
-
}];
|
|
31
|
-
|
|
32
|
-
// Apply positioning styles to the main overlay container
|
|
22
|
+
const contentPositionStyle = {};
|
|
33
23
|
switch (contentPosition) {
|
|
34
24
|
case "top-center":
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
paddingTop: contentPadding
|
|
39
|
-
});
|
|
25
|
+
contentPositionStyle.justifyContent = "flex-start";
|
|
26
|
+
contentPositionStyle.alignItems = "center";
|
|
27
|
+
contentPositionStyle.paddingTop = contentPadding;
|
|
40
28
|
break;
|
|
41
29
|
case "top-left":
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
paddingLeft: contentPadding
|
|
47
|
-
});
|
|
30
|
+
contentPositionStyle.justifyContent = "flex-start";
|
|
31
|
+
contentPositionStyle.alignItems = "flex-start";
|
|
32
|
+
contentPositionStyle.paddingTop = contentPadding;
|
|
33
|
+
contentPositionStyle.paddingLeft = contentPadding;
|
|
48
34
|
break;
|
|
49
35
|
case "top-right":
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
paddingRight: contentPadding
|
|
55
|
-
});
|
|
36
|
+
contentPositionStyle.justifyContent = "flex-start";
|
|
37
|
+
contentPositionStyle.alignItems = "flex-end";
|
|
38
|
+
contentPositionStyle.paddingTop = contentPadding;
|
|
39
|
+
contentPositionStyle.paddingRight = contentPadding;
|
|
56
40
|
break;
|
|
57
41
|
case "center":
|
|
58
42
|
default:
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
alignItems: "center"
|
|
62
|
-
});
|
|
43
|
+
contentPositionStyle.justifyContent = "center";
|
|
44
|
+
contentPositionStyle.alignItems = "center";
|
|
63
45
|
break;
|
|
64
46
|
}
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
return /*#__PURE__*/_jsx(TouchableOpacity, {
|
|
68
|
-
style: overlayStyles,
|
|
47
|
+
return /*#__PURE__*/_jsxs(TouchableOpacity, {
|
|
48
|
+
style: [styles.wrapper, containerStyle],
|
|
69
49
|
activeOpacity: 0.8,
|
|
70
50
|
...touchableProps,
|
|
71
|
-
children: /*#__PURE__*/
|
|
72
|
-
style:
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
,
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
style: [styles.
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
51
|
+
children: [grayscale && /*#__PURE__*/_jsx(View, {
|
|
52
|
+
style: styles.grayscaleLayer
|
|
53
|
+
}), /*#__PURE__*/_jsx(View, {
|
|
54
|
+
style: [styles.darkTintLayer, {
|
|
55
|
+
backgroundColor: `rgba(0, 0, 0, ${overlayOpacity})`
|
|
56
|
+
}]
|
|
57
|
+
}), /*#__PURE__*/_jsx(View, {
|
|
58
|
+
style: [styles.contentContainer, contentPositionStyle],
|
|
59
|
+
children: /*#__PURE__*/_jsxs(View, {
|
|
60
|
+
style: [styles.content, contentContainerStyle],
|
|
61
|
+
children: [icon || /*#__PURE__*/_jsx(Ionicons, {
|
|
62
|
+
name: "lock-closed",
|
|
63
|
+
size: 30,
|
|
64
|
+
color: "white",
|
|
65
|
+
style: iconStyle
|
|
66
|
+
}), text && text.trim() !== "" && /*#__PURE__*/_jsx(Text, {
|
|
67
|
+
style: [styles.textBase, textStyle],
|
|
68
|
+
children: text
|
|
69
|
+
})]
|
|
70
|
+
})
|
|
71
|
+
})]
|
|
86
72
|
});
|
|
87
73
|
};
|
|
88
74
|
const styles = StyleSheet.create({
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
75
|
+
wrapper: {
|
|
76
|
+
...StyleSheet.absoluteFillObject,
|
|
77
|
+
zIndex: 999
|
|
78
|
+
},
|
|
79
|
+
grayscaleLayer: {
|
|
80
|
+
...StyleSheet.absoluteFillObject,
|
|
81
|
+
backgroundColor: "white",
|
|
82
|
+
opacity: 0.4 // Adjust this value to control the grayscale intensity
|
|
83
|
+
},
|
|
84
|
+
darkTintLayer: {
|
|
85
|
+
...StyleSheet.absoluteFillObject
|
|
86
|
+
},
|
|
87
|
+
contentContainer: {
|
|
88
|
+
...StyleSheet.absoluteFillObject
|
|
96
89
|
},
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
alignItems: "center" // Center text under the icon by default
|
|
90
|
+
content: {
|
|
91
|
+
alignItems: "center"
|
|
100
92
|
},
|
|
101
93
|
textBase: {
|
|
102
94
|
fontSize: 18,
|
|
103
|
-
// Adjusted default size slightly
|
|
104
95
|
fontWeight: "bold",
|
|
105
96
|
marginTop: 10,
|
|
106
|
-
|
|
107
|
-
|
|
97
|
+
textAlign: "center",
|
|
98
|
+
color: "white" // Default text color to white for better visibility
|
|
108
99
|
}
|
|
109
100
|
});
|
|
110
101
|
export default LockOverlay;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","View","Text","StyleSheet","TouchableOpacity","Ionicons","jsx","_jsx","jsxs","_jsxs","LockOverlay","visible","containerStyle","contentContainerStyle","iconStyle","textStyle","text","
|
|
1
|
+
{"version":3,"names":["React","View","Text","StyleSheet","TouchableOpacity","Ionicons","jsx","_jsx","jsxs","_jsxs","LockOverlay","visible","containerStyle","contentContainerStyle","iconStyle","textStyle","text","icon","overlayOpacity","contentPosition","contentPadding","grayscale","touchableProps","contentPositionStyle","justifyContent","alignItems","paddingTop","paddingLeft","paddingRight","style","styles","wrapper","activeOpacity","children","grayscaleLayer","darkTintLayer","backgroundColor","contentContainer","content","name","size","color","trim","textBase","create","absoluteFillObject","zIndex","opacity","fontSize","fontWeight","marginTop","textAlign"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/LockOverlay/LockOverlay.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../../../src/app.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AA+BnD,QAAA,MAAM,GAAG,
|
|
1
|
+
{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../../../src/app.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AA+BnD,QAAA,MAAM,GAAG,yBAyGR,CAAC;AAWF,eAAe,GAAG,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAIpC,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,
|
|
1
|
+
{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAIpC,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAiG7B,CAAC;AAyBF,eAAe,IAAI,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelaDealCard.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Card/templates/SelaDealCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAEL,SAAS,EACT,SAAS,EAET,SAAS,EACT,cAAc,EAGd,cAAc,EACf,MAAM,cAAc,CAAC;AAQtB,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,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,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;
|
|
1
|
+
{"version":3,"file":"SelaDealCard.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Card/templates/SelaDealCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAEL,SAAS,EACT,SAAS,EAET,SAAS,EACT,cAAc,EAGd,cAAc,EACf,MAAM,cAAc,CAAC;AAQtB,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,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,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;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAyL7C,CAAC;AAsEF,eAAe,YAAY,CAAC"}
|
|
@@ -7,12 +7,15 @@ interface LockOverlayProps extends TouchableOpacityProps {
|
|
|
7
7
|
iconStyle?: StyleProp<TextStyle>;
|
|
8
8
|
textStyle?: StyleProp<TextStyle>;
|
|
9
9
|
text?: string | null;
|
|
10
|
-
|
|
11
|
-
iconSize?: number;
|
|
12
|
-
iconColor?: string;
|
|
10
|
+
icon?: React.ReactNode;
|
|
13
11
|
overlayOpacity?: number;
|
|
14
12
|
contentPosition?: "center" | "top-center" | "top-left" | "top-right";
|
|
15
13
|
contentPadding?: number;
|
|
14
|
+
/**
|
|
15
|
+
* If true, adds a white layer to desaturate the background, creating a grayscale effect.
|
|
16
|
+
* @default false
|
|
17
|
+
*/
|
|
18
|
+
grayscale?: boolean;
|
|
16
19
|
}
|
|
17
20
|
declare const LockOverlay: React.FC<LockOverlayProps>;
|
|
18
21
|
export default LockOverlay;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LockOverlay.d.ts","sourceRoot":"","sources":["../../../../../src/components/LockOverlay/LockOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAIL,SAAS,EACT,SAAS,EAET,qBAAqB,EACrB,SAAS,EACV,MAAM,cAAc,CAAC;AAItB,UAAU,gBAAiB,SAAQ,qBAAqB;IACtD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,qBAAqB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7C,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,
|
|
1
|
+
{"version":3,"file":"LockOverlay.d.ts","sourceRoot":"","sources":["../../../../../src/components/LockOverlay/LockOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAIL,SAAS,EACT,SAAS,EAET,qBAAqB,EACrB,SAAS,EACV,MAAM,cAAc,CAAC;AAItB,UAAU,gBAAiB,SAAQ,qBAAqB;IACtD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,qBAAqB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7C,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,QAAQ,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,CAAC;IACrE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA8E3C,CAAC;AA8BF,eAAe,WAAW,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "related-ui-components",
|
|
3
|
-
"version": "2.8.
|
|
3
|
+
"version": "2.8.4",
|
|
4
4
|
"main": "./src/index.ts",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"start": "expo start",
|
|
@@ -31,7 +31,6 @@
|
|
|
31
31
|
"react-native-gesture-handler": "~2.24.0",
|
|
32
32
|
"react-native-picker-select": "^9.3.1",
|
|
33
33
|
"react-native-qrcode-svg": "^6.3.15",
|
|
34
|
-
"react-native-reanimated": "^3.18.0",
|
|
35
34
|
"react-native-safe-area-context": ">=5.0.0",
|
|
36
35
|
"react-native-svg": "15.11.2"
|
|
37
36
|
},
|
|
@@ -77,6 +76,7 @@
|
|
|
77
76
|
"lib/"
|
|
78
77
|
],
|
|
79
78
|
"dependencies": {
|
|
80
|
-
"@shopify/flash-list": "^1.8.3"
|
|
79
|
+
"@shopify/flash-list": "^1.8.3",
|
|
80
|
+
"react-native-reanimated": "^3.17.4"
|
|
81
81
|
}
|
|
82
82
|
}
|
package/src/app.tsx
CHANGED
|
@@ -64,7 +64,7 @@ const App = () => {
|
|
|
64
64
|
lineCap="round"
|
|
65
65
|
textFont={""}
|
|
66
66
|
/> */}
|
|
67
|
-
|
|
67
|
+
{/* <RedemptionOption text="hello" orientation="horizontal" icon={<Ionicons name="accessibility" size={24}></Ionicons>}></RedemptionOption> */}
|
|
68
68
|
{/* <DateRangePicker
|
|
69
69
|
onDatesChange={(t) => {
|
|
70
70
|
setDepartureDate(t.departure);
|
|
@@ -114,7 +114,7 @@ const App = () => {
|
|
|
114
114
|
inputContainerStyle={{ height: 55 }}
|
|
115
115
|
></PhoneInput> */}
|
|
116
116
|
|
|
117
|
-
|
|
117
|
+
<SelaDealCard
|
|
118
118
|
variant="horizontal"
|
|
119
119
|
width={300}
|
|
120
120
|
height={300}
|
|
@@ -122,16 +122,11 @@ const App = () => {
|
|
|
122
122
|
description="HELLO"
|
|
123
123
|
providerName="Riva Club"
|
|
124
124
|
price="100"
|
|
125
|
+
lockOverlay
|
|
126
|
+
// grayscaleIntensity={80}
|
|
125
127
|
backgroundImage={require("./assets/images/namshi-banner.png")}
|
|
126
128
|
></SelaDealCard>
|
|
127
|
-
|
|
128
|
-
textContainerStyle={{ flex: 1 }}
|
|
129
|
-
// containerStyle={{ flex: 1, alignItems: "center" }}
|
|
130
|
-
text="hola"
|
|
131
|
-
textStyle={{ fontSize: 20 }}
|
|
132
|
-
icon={<Ionicons name="accessibility"></Ionicons>}
|
|
133
|
-
orientation="horizontal"
|
|
134
|
-
></RedemptionOption> */}
|
|
129
|
+
|
|
135
130
|
</SafeAreaView>
|
|
136
131
|
</BottomSheetStackProvider>
|
|
137
132
|
</RelatedProvider>
|
|
@@ -48,27 +48,27 @@ const Card: React.FC<CardProps> = ({
|
|
|
48
48
|
const renderCardContent = () => {
|
|
49
49
|
if (backgroundImage) {
|
|
50
50
|
return (
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
>
|
|
58
|
-
<View
|
|
59
|
-
style={[
|
|
60
|
-
styles.imageContentContainer,
|
|
61
|
-
{
|
|
62
|
-
opacity:
|
|
63
|
-
backgroundImage.opacity !== undefined
|
|
64
|
-
? backgroundImage.opacity
|
|
65
|
-
: 1,
|
|
66
|
-
},
|
|
67
|
-
]}
|
|
51
|
+
<ImageBackground
|
|
52
|
+
source={backgroundImage.source}
|
|
53
|
+
style={[styles.backgroundImage, backgroundImage.style]}
|
|
54
|
+
imageStyle={[{ borderRadius }, backgroundImage.imageStyle]}
|
|
55
|
+
resizeMode={backgroundImage.resizeMode || "cover"}
|
|
56
|
+
blurRadius={backgroundImage.blurRadius}
|
|
68
57
|
>
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
58
|
+
<View
|
|
59
|
+
style={[
|
|
60
|
+
styles.imageContentContainer,
|
|
61
|
+
{
|
|
62
|
+
opacity:
|
|
63
|
+
backgroundImage.opacity !== undefined
|
|
64
|
+
? backgroundImage.opacity
|
|
65
|
+
: 1,
|
|
66
|
+
},
|
|
67
|
+
]}
|
|
68
|
+
>
|
|
69
|
+
{children}
|
|
70
|
+
</View>
|
|
71
|
+
</ImageBackground>
|
|
72
72
|
);
|
|
73
73
|
} else if (gradient) {
|
|
74
74
|
return (
|
|
@@ -76,11 +76,7 @@ const Card: React.FC<CardProps> = ({
|
|
|
76
76
|
colors={gradient.colors as any}
|
|
77
77
|
start={gradient.start}
|
|
78
78
|
end={gradient.end}
|
|
79
|
-
style={[
|
|
80
|
-
styles.gradient,
|
|
81
|
-
{ borderRadius },
|
|
82
|
-
gradient.style,
|
|
83
|
-
]}
|
|
79
|
+
style={[styles.gradient, { borderRadius }, gradient.style]}
|
|
84
80
|
>
|
|
85
81
|
{children}
|
|
86
82
|
</LinearGradient>
|
|
@@ -45,6 +45,7 @@ interface SelaDealCardProps {
|
|
|
45
45
|
darkOverlayEnabled?: boolean; // New prop
|
|
46
46
|
darkOverlayColor?: string; // New prop for custom overlay color
|
|
47
47
|
lockOverlay?: boolean;
|
|
48
|
+
grayscaleIntensity?: number;
|
|
48
49
|
}
|
|
49
50
|
|
|
50
51
|
const SelaDealCard: React.FC<SelaDealCardProps> = ({
|
|
@@ -70,6 +71,7 @@ const SelaDealCard: React.FC<SelaDealCardProps> = ({
|
|
|
70
71
|
darkOverlayColor = "rgba(0, 0, 0, 0.3)",
|
|
71
72
|
lockOverlay = false,
|
|
72
73
|
priceContainerBlur,
|
|
74
|
+
grayscaleIntensity = 0
|
|
73
75
|
}) => {
|
|
74
76
|
const { theme, isRTL: themeIsRTL } = useTheme();
|
|
75
77
|
const isRTL = propIsRTL !== undefined ? propIsRTL : themeIsRTL;
|
|
@@ -143,6 +145,7 @@ const SelaDealCard: React.FC<SelaDealCardProps> = ({
|
|
|
143
145
|
backgroundImage={{
|
|
144
146
|
source: backgroundImage,
|
|
145
147
|
resizeMode: "cover",
|
|
148
|
+
style:{filter: `grayscale(${grayscaleIntensity}%)`}
|
|
146
149
|
}}
|
|
147
150
|
>
|
|
148
151
|
{darkOverlayEnabled && (
|
|
@@ -158,7 +161,7 @@ const SelaDealCard: React.FC<SelaDealCardProps> = ({
|
|
|
158
161
|
<LockOverlay
|
|
159
162
|
visible={lockOverlay}
|
|
160
163
|
contentPosition={isRTL ? "top-left" : "top-right"}
|
|
161
|
-
iconSize={24}
|
|
164
|
+
// iconSize={24}
|
|
162
165
|
text={""}
|
|
163
166
|
overlayOpacity={0.4}
|
|
164
167
|
/>
|
|
@@ -244,7 +247,7 @@ const getStyles = (theme: ThemeType, isRTL: boolean) =>
|
|
|
244
247
|
justifyContent: "space-between",
|
|
245
248
|
},
|
|
246
249
|
topSection: {
|
|
247
|
-
flexDirection:"row"
|
|
250
|
+
flexDirection:"row",
|
|
248
251
|
},
|
|
249
252
|
labelContainerBase: {
|
|
250
253
|
paddingVertical: 6,
|
|
@@ -7,24 +7,27 @@ import {
|
|
|
7
7
|
TextStyle,
|
|
8
8
|
TouchableOpacity,
|
|
9
9
|
TouchableOpacityProps,
|
|
10
|
-
StyleProp,
|
|
10
|
+
StyleProp,
|
|
11
11
|
} from "react-native";
|
|
12
12
|
|
|
13
|
-
import { Ionicons } from "@expo/vector-icons";
|
|
13
|
+
import { Ionicons } from "@expo/vector-icons";
|
|
14
14
|
|
|
15
15
|
interface LockOverlayProps extends TouchableOpacityProps {
|
|
16
16
|
visible?: boolean;
|
|
17
|
-
containerStyle?: StyleProp<ViewStyle>;
|
|
18
|
-
contentContainerStyle?: StyleProp<ViewStyle>;
|
|
19
|
-
iconStyle?: StyleProp<TextStyle>;
|
|
17
|
+
containerStyle?: StyleProp<ViewStyle>;
|
|
18
|
+
contentContainerStyle?: StyleProp<ViewStyle>;
|
|
19
|
+
iconStyle?: StyleProp<TextStyle>;
|
|
20
20
|
textStyle?: StyleProp<TextStyle>;
|
|
21
|
-
text?: string | null;
|
|
22
|
-
|
|
23
|
-
iconSize?: number;
|
|
24
|
-
iconColor?: string;
|
|
21
|
+
text?: string | null;
|
|
22
|
+
icon?: React.ReactNode;
|
|
25
23
|
overlayOpacity?: number;
|
|
26
24
|
contentPosition?: "center" | "top-center" | "top-left" | "top-right";
|
|
27
|
-
contentPadding?: number;
|
|
25
|
+
contentPadding?: number;
|
|
26
|
+
/**
|
|
27
|
+
* If true, adds a white layer to desaturate the background, creating a grayscale effect.
|
|
28
|
+
* @default false
|
|
29
|
+
*/
|
|
30
|
+
grayscale?: boolean;
|
|
28
31
|
}
|
|
29
32
|
|
|
30
33
|
const LockOverlay: React.FC<LockOverlayProps> = ({
|
|
@@ -33,100 +36,105 @@ const LockOverlay: React.FC<LockOverlayProps> = ({
|
|
|
33
36
|
contentContainerStyle,
|
|
34
37
|
iconStyle,
|
|
35
38
|
textStyle,
|
|
36
|
-
text = "Unlock",
|
|
37
|
-
|
|
38
|
-
iconSize = 50,
|
|
39
|
-
iconColor = "white",
|
|
39
|
+
text = "Unlock",
|
|
40
|
+
icon,
|
|
40
41
|
overlayOpacity = 0.7,
|
|
41
42
|
contentPosition = "center",
|
|
42
|
-
contentPadding = 20,
|
|
43
|
+
contentPadding = 20,
|
|
44
|
+
grayscale = false,
|
|
43
45
|
...touchableProps
|
|
44
46
|
}) => {
|
|
45
47
|
if (!visible) return null;
|
|
46
48
|
|
|
47
|
-
const
|
|
48
|
-
styles.overlayBase,
|
|
49
|
-
{ backgroundColor: `rgba(0, 0, 0, ${overlayOpacity})` },
|
|
50
|
-
];
|
|
51
|
-
|
|
52
|
-
// Apply positioning styles to the main overlay container
|
|
49
|
+
const contentPositionStyle: StyleProp<ViewStyle> = {};
|
|
53
50
|
switch (contentPosition) {
|
|
54
51
|
case "top-center":
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
paddingTop: contentPadding,
|
|
59
|
-
});
|
|
52
|
+
contentPositionStyle.justifyContent = "flex-start";
|
|
53
|
+
contentPositionStyle.alignItems = "center";
|
|
54
|
+
contentPositionStyle.paddingTop = contentPadding;
|
|
60
55
|
break;
|
|
61
56
|
case "top-left":
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
paddingLeft: contentPadding,
|
|
67
|
-
});
|
|
57
|
+
contentPositionStyle.justifyContent = "flex-start";
|
|
58
|
+
contentPositionStyle.alignItems = "flex-start";
|
|
59
|
+
contentPositionStyle.paddingTop = contentPadding;
|
|
60
|
+
contentPositionStyle.paddingLeft = contentPadding;
|
|
68
61
|
break;
|
|
69
62
|
case "top-right":
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
paddingRight: contentPadding,
|
|
75
|
-
});
|
|
63
|
+
contentPositionStyle.justifyContent = "flex-start";
|
|
64
|
+
contentPositionStyle.alignItems = "flex-end";
|
|
65
|
+
contentPositionStyle.paddingTop = contentPadding;
|
|
66
|
+
contentPositionStyle.paddingRight = contentPadding;
|
|
76
67
|
break;
|
|
77
68
|
case "center":
|
|
78
69
|
default:
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
alignItems: "center",
|
|
82
|
-
});
|
|
70
|
+
contentPositionStyle.justifyContent = "center";
|
|
71
|
+
contentPositionStyle.alignItems = "center";
|
|
83
72
|
break;
|
|
84
73
|
}
|
|
85
74
|
|
|
86
|
-
overlayStyles.push(containerStyle); // Apply user-provided containerStyle last
|
|
87
|
-
|
|
88
75
|
return (
|
|
89
76
|
<TouchableOpacity
|
|
90
|
-
style={
|
|
77
|
+
style={[styles.wrapper, containerStyle]}
|
|
91
78
|
activeOpacity={0.8}
|
|
92
79
|
{...touchableProps}
|
|
93
80
|
>
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
81
|
+
{/* This layer desaturates the background image */}
|
|
82
|
+
{grayscale && <View style={styles.grayscaleLayer} />}
|
|
83
|
+
|
|
84
|
+
{/* This is the original dark tint layer */}
|
|
85
|
+
<View
|
|
86
|
+
style={[
|
|
87
|
+
styles.darkTintLayer,
|
|
88
|
+
{ backgroundColor: `rgba(0, 0, 0, ${overlayOpacity})` },
|
|
89
|
+
]}
|
|
90
|
+
/>
|
|
91
|
+
|
|
92
|
+
{/* This layer holds the actual content (icon and text) */}
|
|
93
|
+
<View style={[styles.contentContainer, contentPositionStyle]}>
|
|
94
|
+
<View style={[styles.content, contentContainerStyle]}>
|
|
95
|
+
{icon || (
|
|
96
|
+
<Ionicons
|
|
97
|
+
name={"lock-closed"}
|
|
98
|
+
size={30}
|
|
99
|
+
color={"white"}
|
|
100
|
+
style={iconStyle}
|
|
101
|
+
/>
|
|
102
|
+
)}
|
|
103
|
+
|
|
104
|
+
{text && text.trim() !== "" && (
|
|
105
|
+
<Text style={[styles.textBase, textStyle]}>{text}</Text>
|
|
106
|
+
)}
|
|
107
|
+
</View>
|
|
107
108
|
</View>
|
|
108
109
|
</TouchableOpacity>
|
|
109
110
|
);
|
|
110
111
|
};
|
|
111
112
|
|
|
112
113
|
const styles = StyleSheet.create({
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
114
|
+
wrapper: {
|
|
115
|
+
...StyleSheet.absoluteFillObject,
|
|
116
|
+
zIndex: 999,
|
|
117
|
+
},
|
|
118
|
+
grayscaleLayer: {
|
|
119
|
+
...StyleSheet.absoluteFillObject,
|
|
120
|
+
backgroundColor: "white",
|
|
121
|
+
opacity: 0.4, // Adjust this value to control the grayscale intensity
|
|
122
|
+
},
|
|
123
|
+
darkTintLayer: {
|
|
124
|
+
...StyleSheet.absoluteFillObject,
|
|
125
|
+
},
|
|
126
|
+
contentContainer: {
|
|
127
|
+
...StyleSheet.absoluteFillObject,
|
|
120
128
|
},
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
alignItems: "center", // Center text under the icon by default
|
|
129
|
+
content: {
|
|
130
|
+
alignItems: "center",
|
|
124
131
|
},
|
|
125
132
|
textBase: {
|
|
126
|
-
fontSize: 18,
|
|
133
|
+
fontSize: 18,
|
|
127
134
|
fontWeight: "bold",
|
|
128
|
-
marginTop: 10,
|
|
135
|
+
marginTop: 10,
|
|
129
136
|
textAlign: "center",
|
|
137
|
+
color: "white", // Default text color to white for better visibility
|
|
130
138
|
},
|
|
131
139
|
});
|
|
132
140
|
|