related-ui-components 2.0.7 → 2.0.8

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 (6) hide show
  1. package/lib/module/components/Card/Card.js +83 -68
  2. package/lib/module/components/Card/Card.js.map +1 -1
  3. package/lib/typescript/src/components/Card/Card.d.ts +5 -1
  4. package/lib/typescript/src/components/Card/Card.d.ts.map +1 -1
  5. package/package.json +1 -1
  6. package/src/components/Card/Card.tsx +83 -86
package/lib/module/components/Card/Card.js CHANGED
@@ -1,111 +1,126 @@
1
1
  "use strict";
2
2
 
3
+ // src/components/Card/Card.tsx
3
4
  import React from "react";
4
- import { View, TouchableOpacity, StyleSheet, ImageBackground } from "react-native";
5
+ import { View, TouchableOpacity, StyleSheet, ImageBackground
6
+ // Import LayoutChangeEvent
7
+ } from "react-native";
8
+ // Assuming types.ts defines CardProps
5
9
  import { useTheme } from "../../theme/ThemeContext.js";
6
10
  import { LinearGradient } from "expo-linear-gradient";
7
- import { jsx as _jsx } from "react/jsx-runtime";
11
+
12
+ // Extend CardProps to include onLayout
13
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
8
14
  const Card = ({
9
15
  children,
10
16
  style,
11
17
  onPress,
18
+ onLayout,
19
+ // Destructure onLayout
12
20
  disabled = false,
13
- elevation = 1,
21
+ // elevation, // Not used in your current styles
14
22
  testID,
15
- variant,
23
+ // variant, // Not used
16
24
  backgroundColor,
17
- borderColor,
25
+ // borderColor, // Not used
18
26
  borderRadius = 8,
19
27
  backgroundImage,
20
28
  gradient
21
- // margin,
22
- // padding,
23
29
  }) => {
24
30
  const {
25
31
  theme
26
32
  } = useTheme();
27
- const getCardStyle = () => {
28
- const baseStyle = {
29
- backgroundColor: backgroundColor || theme.background,
30
- borderRadius
31
- };
32
- return baseStyle;
33
- };
34
- const cardStyle = [styles.card, getCardStyle(), disabled && {
35
- opacity: 0.6
36
- }, style, backgroundImage && {
37
- backgroundColor: "transparent"
38
- }];
33
+ const cardRootStyle = [styles.card, {
34
+ borderRadius
35
+ },
36
+ // If there's a background image, card background should be transparent
37
+ // so the image is visible. Otherwise, use provided backgroundColor or theme.
38
+ {
39
+ backgroundColor: backgroundImage ? "transparent" : backgroundColor || theme.background
40
+ }, disabled && styles.disabled, style // This will include the width and calculated height from SelaDealCard
41
+ ];
39
42
  const renderCardContent = () => {
40
- if (backgroundImage) {
41
- return /*#__PURE__*/_jsx(ImageBackground, {
43
+ // The children (SelaDealCard's overlayContainer) are rendered on top of
44
+ // the ImageBackground or Gradient.
45
+ return children;
46
+ };
47
+ if (onPress) {
48
+ return /*#__PURE__*/_jsxs(TouchableOpacity, {
49
+ style: cardRootStyle,
50
+ onPress: onPress,
51
+ onLayout: onLayout // Apply onLayout here
52
+ ,
53
+ disabled: disabled,
54
+ testID: testID,
55
+ activeOpacity: 0.9,
56
+ accessibilityRole: "button",
57
+ children: [backgroundImage && /*#__PURE__*/_jsx(ImageBackground, {
42
58
  source: backgroundImage.source,
43
- style: [styles.backgroundImage, backgroundImage.style],
59
+ style: [StyleSheet.absoluteFillObject, backgroundImage.style] // Fills parent
60
+ ,
44
61
  imageStyle: [{
45
62
  borderRadius
46
63
  }, backgroundImage.imageStyle],
47
64
  resizeMode: backgroundImage.resizeMode || "cover",
48
- blurRadius: backgroundImage.blurRadius,
49
- children: /*#__PURE__*/_jsx(View, {
50
- style: [styles.imageContentContainer, {
51
- opacity: backgroundImage.opacity !== undefined ? backgroundImage.opacity : 1
52
- }],
53
- children: children
54
- })
55
- });
56
- } else if (gradient) {
57
- return /*#__PURE__*/_jsx(LinearGradient, {
65
+ blurRadius: backgroundImage.blurRadius
66
+ }), gradient && !backgroundImage &&
67
+ /*#__PURE__*/
68
+ // Render gradient if no image and gradient exists
69
+ _jsx(LinearGradient, {
58
70
  colors: gradient.colors,
59
71
  start: gradient.start,
60
72
  end: gradient.end,
61
- style: [styles.gradient, {
73
+ style: [StyleSheet.absoluteFillObject,
74
+ // Gradient also fills
75
+ {
62
76
  borderRadius
63
- }, gradient.style],
64
- children: children
65
- });
66
- } else {
67
- return children;
68
- }
69
- };
70
- if (onPress) {
71
- return /*#__PURE__*/_jsx(TouchableOpacity, {
72
- style: cardStyle,
73
- onPress: onPress,
74
- disabled: disabled,
75
- testID: testID,
76
- activeOpacity: 0.9,
77
- accessibilityRole: "button",
78
- accessibilityLabel: "Card",
79
- children: renderCardContent()
77
+ }, gradient.style]
78
+ }), /*#__PURE__*/_jsx(View, {
79
+ style: styles.contentWrapper,
80
+ children: renderCardContent()
81
+ })]
80
82
  });
81
83
  }
82
- return /*#__PURE__*/_jsx(View, {
83
- style: cardStyle,
84
+ return /*#__PURE__*/_jsxs(View, {
85
+ style: cardRootStyle,
84
86
  testID: testID,
85
- children: renderCardContent()
87
+ onLayout: onLayout,
88
+ children: [backgroundImage && /*#__PURE__*/_jsx(ImageBackground, {
89
+ source: backgroundImage.source,
90
+ style: [StyleSheet.absoluteFillObject, backgroundImage.style],
91
+ imageStyle: [{
92
+ borderRadius
93
+ }, backgroundImage.imageStyle],
94
+ resizeMode: backgroundImage.resizeMode || "cover",
95
+ blurRadius: backgroundImage.blurRadius
96
+ }), gradient && !backgroundImage && /*#__PURE__*/_jsx(LinearGradient, {
97
+ colors: gradient.colors,
98
+ start: gradient.start,
99
+ end: gradient.end,
100
+ style: [StyleSheet.absoluteFillObject, {
101
+ borderRadius
102
+ }, gradient.style]
103
+ }), /*#__PURE__*/_jsx(View, {
104
+ style: styles.contentWrapper,
105
+ children: renderCardContent()
106
+ })]
86
107
  });
87
108
  };
88
109
  const styles = StyleSheet.create({
89
110
  card: {
90
- borderRadius: 8,
91
- flexDirection: "column",
92
- display: "flex"
93
- },
94
- backgroundImage: {
95
- width: "100%",
96
- height: "100%"
111
+ overflow: "hidden",
112
+ // Important for absoluteFillObject with borderRadius
113
+ position: "relative" // For absolute positioning context
97
114
  },
98
- imageContentContainer: {
99
- flex: 1,
100
- backgroundColor: "transparent"
115
+ disabled: {
116
+ opacity: 0.6
101
117
  },
102
- gradient: {
118
+ contentWrapper: {
119
+ // Ensures content is layered above background/gradient
103
120
  flex: 1,
104
- width: "100%",
105
- height: "100%",
106
- justifyContent: "flex-start",
107
- alignItems: "flex-start"
121
+ backgroundColor: "transparent" // Content wrapper itself is transparent
108
122
  }
123
+ // No specific styles for backgroundImage or gradient here as they use absoluteFillObject
109
124
  });
110
125
  export default Card;
111
126
  //# sourceMappingURL=Card.js.map
package/lib/module/components/Card/Card.js.map CHANGED
@@ -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":"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","ignoreList":[]}
1
+ {"version":3,"names":["React","View","TouchableOpacity","StyleSheet","ImageBackground","useTheme","LinearGradient","jsx","_jsx","jsxs","_jsxs","Card","children","style","onPress","onLayout","disabled","testID","backgroundColor","borderRadius","backgroundImage","gradient","theme","cardRootStyle","styles","card","background","renderCardContent","activeOpacity","accessibilityRole","source","absoluteFillObject","imageStyle","resizeMode","blurRadius","colors","start","end","contentWrapper","create","overflow","position","opacity","flex"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Card/Card.tsx"],"mappings":"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","ignoreList":[]}
package/lib/typescript/src/components/Card/Card.d.ts CHANGED
@@ -1,5 +1,9 @@
1
1
  import React from "react";
2
- import { CardProps } from "./types";
2
+ import { LayoutChangeEvent } from "react-native";
3
+ import { CardProps as OriginalCardProps } from "./types";
4
+ interface CardProps extends OriginalCardProps {
5
+ onLayout?: (event: LayoutChangeEvent) => void;
6
+ }
3
7
  declare const Card: React.FC<CardProps>;
4
8
  export default Card;
5
9
  //# sourceMappingURL=Card.d.ts.map
package/lib/typescript/src/components/Card/Card.d.ts.map CHANGED
@@ -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,CAqG7B,CAAC;AAyBF,eAAe,IAAI,CAAC"}
1
+ {"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAKL,iBAAiB,EAClB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,SAAS,IAAI,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAKzD,UAAU,SAAU,SAAQ,iBAAiB;IAC3C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAC/C;AAED,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAoG7B,CAAC;AAiBF,eAAe,IAAI,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "related-ui-components",
3
- "version": "2.0.7",
3
+ "version": "2.0.8",
4
4
  "main": "./src/index.ts",
5
5
  "scripts": {
6
6
  "start": "expo start",
package/src/components/Card/Card.tsx CHANGED
@@ -1,139 +1,136 @@
1
+ // src/components/Card/Card.tsx
1
2
  import React from "react";
2
3
  import {
3
4
  View,
4
5
  TouchableOpacity,
5
6
  StyleSheet,
6
- Platform,
7
7
  ImageBackground,
8
+ LayoutChangeEvent, // Import LayoutChangeEvent
8
9
  } from "react-native";
9
- import { CardProps } from "./types";
10
+ import { CardProps as OriginalCardProps } from "./types"; // Assuming types.ts defines CardProps
10
11
  import { useTheme } from "../../theme/ThemeContext";
11
12
  import { LinearGradient } from "expo-linear-gradient";
12
13
 
14
+ // Extend CardProps to include onLayout
15
+ interface CardProps extends OriginalCardProps {
16
+ onLayout?: (event: LayoutChangeEvent) => void;
17
+ }
18
+
13
19
  const Card: React.FC<CardProps> = ({
14
20
  children,
15
21
  style,
16
22
  onPress,
23
+ onLayout, // Destructure onLayout
17
24
  disabled = false,
18
- elevation = 1,
25
+ // elevation, // Not used in your current styles
19
26
  testID,
20
- variant,
27
+ // variant, // Not used
21
28
  backgroundColor,
22
- borderColor,
29
+ // borderColor, // Not used
23
30
  borderRadius = 8,
24
31
  backgroundImage,
25
- gradient
26
- // margin,
27
- // padding,
32
+ gradient,
28
33
  }) => {
29
- const {theme} = useTheme();
30
-
31
- const getCardStyle = () => {
32
- const baseStyle: any = {
33
- backgroundColor: backgroundColor || theme.background,
34
- borderRadius,
35
- };
34
+ const { theme } = useTheme();
36
35
 
37
- return baseStyle;
38
- };
39
-
40
- const cardStyle = [
36
+ const cardRootStyle = [
41
37
  styles.card,
42
- getCardStyle(),
43
- disabled && { opacity: 0.6 },
44
- style,
45
- backgroundImage && { backgroundColor: "transparent" },
38
+ { borderRadius },
39
+ // If there's a background image, card background should be transparent
40
+ // so the image is visible. Otherwise, use provided backgroundColor or theme.
41
+ {
42
+ backgroundColor: backgroundImage
43
+ ? "transparent"
44
+ : backgroundColor || theme.background,
45
+ },
46
+ disabled && styles.disabled,
47
+ style, // This will include the width and calculated height from SelaDealCard
46
48
  ];
47
49
 
48
50
  const renderCardContent = () => {
49
- if (backgroundImage) {
50
- return (
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}
57
- >
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
- );
73
- } else if (gradient) {
74
- return (
75
- <LinearGradient
76
- colors={gradient.colors as any}
77
- start={gradient.start}
78
- end={gradient.end}
79
- style={[
80
- styles.gradient,
81
- { borderRadius },
82
- gradient.style,
83
- ]}
84
- >
85
- {children}
86
- </LinearGradient>
87
- );
88
- } else {
89
- return children;
90
- }
51
+ // The children (SelaDealCard's overlayContainer) are rendered on top of
52
+ // the ImageBackground or Gradient.
53
+ return children;
91
54
  };
92
55
 
93
56
  if (onPress) {
94
57
  return (
95
58
  <TouchableOpacity
96
- style={cardStyle}
59
+ style={cardRootStyle}
97
60
  onPress={onPress}
61
+ onLayout={onLayout} // Apply onLayout here
98
62
  disabled={disabled}
99
63
  testID={testID}
100
64
  activeOpacity={0.9}
101
65
  accessibilityRole="button"
102
- accessibilityLabel={"Card"}
103
66
  >
104
- {renderCardContent()}
67
+ {backgroundImage && (
68
+ <ImageBackground
69
+ source={backgroundImage.source}
70
+ style={[StyleSheet.absoluteFillObject, backgroundImage.style]} // Fills parent
71
+ imageStyle={[{ borderRadius }, backgroundImage.imageStyle]}
72
+ resizeMode={backgroundImage.resizeMode || "cover"}
73
+ blurRadius={backgroundImage.blurRadius}
74
+ />
75
+ )}
76
+ {gradient && !backgroundImage && ( // Render gradient if no image and gradient exists
77
+ <LinearGradient
78
+ colors={gradient.colors as any}
79
+ start={gradient.start}
80
+ end={gradient.end}
81
+ style={[
82
+ StyleSheet.absoluteFillObject, // Gradient also fills
83
+ { borderRadius },
84
+ gradient.style,
85
+ ]}
86
+ />
87
+ )}
88
+ <View style={styles.contentWrapper}>{renderCardContent()}</View>
105
89
  </TouchableOpacity>
106
90
  );
107
91
  }
108
92
 
109
93
  return (
110
- <View style={cardStyle} testID={testID}>
111
- {renderCardContent()}
94
+ <View style={cardRootStyle} testID={testID} onLayout={onLayout}>
95
+ {backgroundImage && (
96
+ <ImageBackground
97
+ source={backgroundImage.source}
98
+ style={[StyleSheet.absoluteFillObject, backgroundImage.style]}
99
+ imageStyle={[{ borderRadius }, backgroundImage.imageStyle]}
100
+ resizeMode={backgroundImage.resizeMode || "cover"}
101
+ blurRadius={backgroundImage.blurRadius}
102
+ />
103
+ )}
104
+ {gradient && !backgroundImage && (
105
+ <LinearGradient
106
+ colors={gradient.colors as any}
107
+ start={gradient.start}
108
+ end={gradient.end}
109
+ style={[
110
+ StyleSheet.absoluteFillObject,
111
+ { borderRadius },
112
+ gradient.style,
113
+ ]}
114
+ />
115
+ )}
116
+ <View style={styles.contentWrapper}>{renderCardContent()}</View>
112
117
  </View>
113
118
  );
114
119
  };
115
120
 
116
121
  const styles = StyleSheet.create({
117
122
  card: {
118
- borderRadius: 8,
119
- flexDirection: "column",
120
- display: "flex",
123
+ overflow: "hidden", // Important for absoluteFillObject with borderRadius
124
+ position: "relative", // For absolute positioning context
121
125
  },
122
- backgroundImage: {
123
- width: "100%",
124
- height: "100%",
125
- },
126
- imageContentContainer: {
127
- flex: 1,
128
- backgroundColor: "transparent",
126
+ disabled: {
127
+ opacity: 0.6,
129
128
  },
130
- gradient: {
129
+ contentWrapper: { // Ensures content is layered above background/gradient
131
130
  flex: 1,
132
- width: "100%",
133
- height: "100%",
134
- justifyContent: "flex-start",
135
- alignItems: "flex-start",
131
+ backgroundColor: "transparent", // Content wrapper itself is transparent
136
132
  },
133
+ // No specific styles for backgroundImage or gradient here as they use absoluteFillObject
137
134
  });
138
135
 
139
- export default Card;
136
+ export default Card;