@momo-kits/foundation 0.80.8-beta.8 → 0.80.8-beta.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/Layout/Card.tsx +16 -3
- package/Layout/styles.ts +1 -0
- package/package.json +1 -1
package/Layout/Card.tsx
CHANGED
|
@@ -7,16 +7,23 @@ import Item from './Item';
|
|
|
7
7
|
import {Image} from '../Image';
|
|
8
8
|
import {ApplicationContext} from '../Application';
|
|
9
9
|
import styles from './styles';
|
|
10
|
-
import {Colors, Spacing} from '../Consts';
|
|
10
|
+
import {Colors, Radius, Shadow, Spacing} from '../Consts';
|
|
11
11
|
|
|
12
12
|
export interface CardProps extends ViewProps {
|
|
13
13
|
/**
|
|
14
14
|
* Optional. Background image for the card.
|
|
15
15
|
*/
|
|
16
16
|
backgroundImage?: string;
|
|
17
|
+
|
|
18
|
+
useShadow?: boolean;
|
|
17
19
|
}
|
|
18
20
|
|
|
19
|
-
const Card: React.FC<CardProps> = ({
|
|
21
|
+
const Card: React.FC<CardProps> = ({
|
|
22
|
+
children,
|
|
23
|
+
style,
|
|
24
|
+
backgroundImage,
|
|
25
|
+
useShadow = false,
|
|
26
|
+
}) => {
|
|
20
27
|
const {showGrid} = useContext(ApplicationContext);
|
|
21
28
|
const {numberOfColumns} = useGridSystem();
|
|
22
29
|
|
|
@@ -127,22 +134,28 @@ const Card: React.FC<CardProps> = ({children, style, backgroundImage}) => {
|
|
|
127
134
|
return element;
|
|
128
135
|
};
|
|
129
136
|
|
|
137
|
+
const {theme} = useContext(ApplicationContext);
|
|
130
138
|
return (
|
|
131
139
|
<GridContext.Provider value={gridContext}>
|
|
132
140
|
<View
|
|
133
141
|
accessibilityLabel={`Card`}
|
|
134
142
|
style={[
|
|
143
|
+
{
|
|
144
|
+
backgroundColor: theme.colors.background.surface,
|
|
145
|
+
borderRadius: Radius.M,
|
|
146
|
+
},
|
|
135
147
|
style,
|
|
136
148
|
styles.card,
|
|
137
149
|
{
|
|
138
150
|
width: widthSection,
|
|
139
151
|
marginHorizontal: gridContext.margin,
|
|
140
152
|
},
|
|
153
|
+
useShadow && Shadow.Light,
|
|
141
154
|
]}>
|
|
142
155
|
{!!backgroundImage && (
|
|
143
156
|
<Image
|
|
144
157
|
source={{uri: backgroundImage}}
|
|
145
|
-
style={
|
|
158
|
+
style={styles.imageBackground}
|
|
146
159
|
/>
|
|
147
160
|
)}
|
|
148
161
|
{renderView(validateChildren(children, [Item]))}
|
package/Layout/styles.ts
CHANGED