Skip to content

Commit 3b64db2

Browse files
Inbal-Tishethanshar
Inbal-Tish
authored and
ethanshar
committed
fix for borderRadius in card (wix#213)
* fix for borderRadius in card * another borderRadius * adding blur support to Card
1 parent d3dd09b commit 3b64db2

File tree

5 files changed

+183
-126
lines changed

5 files changed

+183
-126
lines changed

‎demo/src/assets/images/[email protected] renamed to ‎demo/src/assets/images/card-example.jpg

File renamed without changes.

‎demo/src/assets/images/[email protected] renamed to ‎demo/src/assets/images/empty-state.jpg

File renamed without changes.

‎demo/src/screens/componentScreens/CardsScreen.js

+138-115
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,51 @@
1-
import React, {Component} from 'react';
2-
import {ScrollView, StyleSheet} from 'react-native';
31
import _ from 'lodash';
4-
import {View, Assets, Constants, Card, Button, Colors, Typography, Text} from 'react-native-ui-lib'; //eslint-disable-line
2+
import React, {Component} from 'react';
3+
import {StyleSheet, ScrollView} from 'react-native';
4+
import {Colors, View, Card, Button, Text} from 'react-native-ui-lib'; //eslint-disable-line
55
import posts from '../../data/posts';
66

7+
78
const featureIcon = require('../../assets/icons/star.png');
89
const shareIcon = require('../../assets/icons/share.png');
910
const cardImage = require('../../assets/images/card-example.jpg');
1011
const cardImage2 = require('../../assets/images/empty-state.jpg');
1112

12-
export default class ButtonsScreen extends Component {
13+
export default class CardsScreen extends Component {
14+
1315
render() {
1416
return (
1517
<ScrollView contentContainerStyle={styles.container}>
16-
<ScrollView
17-
horizontal
18-
height={100}
19-
style={{marginBottom: 20, padding: 10}}
20-
showsHorizontalScrollIndicator={false}
21-
>
22-
{_.times(4, (i) => {
23-
return (
24-
<Card shadowType="white10" key={i} width={100} containerStyle={{marginRight: 20}}>
25-
<View padding-15>
26-
<Text text30 dark30>
27-
{i}
28-
</Text>
29-
</View>
30-
</Card>
31-
);
32-
})}
33-
</ScrollView>
18+
<View flex>
19+
<View style={{backgroundColor: 'red', width: 50, height: '100%', position: 'absolute', top: 0, left: 200, bottom: 0}}/>
20+
<ScrollView
21+
horizontal
22+
height={100}
23+
style={{marginBottom: 20, padding: 10}}
24+
showsHorizontalScrollIndicator={false}
25+
>
26+
{_.times(4, (i) => {
27+
return (
28+
<Card shadowType="white10" key={i} width={100} containerStyle={{marginRight: 20}}>
29+
<View padding-15>
30+
<Text text30 dark30>
31+
{i}
32+
</Text>
33+
</View>
34+
</Card>
35+
);
36+
})}
37+
</ScrollView>
3438

35-
<View marginV-20>
36-
<Card height={120} width={120}>
39+
<Card height={120} width={120} marginV-20>
3740
<Card.Image height={'100%'} imageSource={cardImage} />
3841
</Card>
39-
</View>
40-
41-
<View marginB-20>
42+
4243
<Card
44+
marginB-20
4345
height={150}
4446
shadowType="white10"
45-
style={{backgroundColor: Colors.dark60}}
47+
style={{backgroundColor: Colors.rgba(Colors.dark60, 0.75)}}
48+
// containerStyle={{backgroundColor: 'transparent'}}
4649
shadowColor={Colors.purple10}
4750
>
4851
<View flex padding-20>
@@ -51,103 +54,123 @@ export default class ButtonsScreen extends Component {
5154
</Text>
5255
</View>
5356
</Card>
54-
</View>
5557

56-
<Card row height={160} containerStyle={{marginBottom: 15}} onPress={() => {}}>
57-
<Card.Image width={115} imageSource={cardImage} />
58-
<Card.Section body>
59-
<Card.Section>
60-
<Text text70 dark10>
61-
You’re Invited!
62-
</Text>
63-
</Card.Section>
64-
<Card.Section>
65-
<Text text80 dark10>
66-
Join Old The Town Barbershop Official Store. Download the Wix app to...
58+
<Card
59+
marginB-20
60+
height={80}
61+
shadowType="white10"
62+
style={{backgroundColor: Colors.rgba(Colors.dark60, 0.5)}}
63+
// containerStyle={{backgroundColor: 'transparent'}}
64+
shadowColor={Colors.purple10}
65+
enableBlur
66+
onPress={() => {}}
67+
>
68+
<View flex padding-20>
69+
<Text text50 dark20>
70+
With Blue effect
6771
</Text>
68-
</Card.Section>
69-
<Card.Section footer>
70-
<Text text90 dark50>
71-
wix.to/A465c
72+
<Text text80 dark20>
73+
Must pass style backgroundColor as rgba
7274
</Text>
73-
</Card.Section>
74-
</Card.Section>
75-
</Card>
75+
</View>
76+
</Card>
7677

77-
<Card shadowType="white10" row height={160} containerStyle={{marginBottom: 15}} onPress={() => {}} br10>
78-
<Card.Section body>
79-
<Card.Section>
80-
<Text text70 dark10>
81-
You’re Invited!
82-
</Text>
83-
</Card.Section>
84-
<Card.Section>
85-
<Text text80 dark10>
86-
Join Old The Town Barbershop Official Store. Download the Wix app to...
87-
</Text>
88-
</Card.Section>
89-
<Card.Section footer>
90-
<Text text90 dark50>
91-
wix.to/A465c
92-
</Text>
78+
<Card row height={160} containerStyle={{marginBottom: 15}} onPress={() => {}} enableBlur>
79+
<Card.Image width={115} imageSource={cardImage} />
80+
<Card.Section body>
81+
<Card.Section>
82+
<Text text70 dark10>
83+
You’re Invited!
84+
</Text>
85+
</Card.Section>
86+
<Card.Section>
87+
<Text text80 dark10>
88+
Join Old The Town Barbershop Official Store. Download the Wix app to...
89+
</Text>
90+
</Card.Section>
91+
<Card.Section footer>
92+
<Text text90 dark50>
93+
wix.to/A465c
94+
</Text>
95+
</Card.Section>
9396
</Card.Section>
94-
</Card.Section>
95-
<Card.Image width={115} imageSource={cardImage} />
96-
</Card>
97+
</Card>
9798

98-
<Card containerStyle={{marginBottom: 15}} onPress={() => {}}>
99-
<Card.Section body>
100-
<Card.Section>
101-
<Text text70 dark10>
102-
You’re Invited!
103-
</Text>
99+
<Card shadowType="white10" row height={160} containerStyle={{marginBottom: 15}} onPress={() => {}} br10>
100+
<Card.Section body>
101+
<Card.Section>
102+
<Text text70 dark10>
103+
You’re Invited!
104+
</Text>
105+
</Card.Section>
106+
<Card.Section>
107+
<Text text80 dark10>
108+
Join Old The Town Barbershop Official Store. Download the Wix app to...
109+
</Text>
110+
</Card.Section>
111+
<Card.Section footer>
112+
<Text text90 dark50>
113+
wix.to/A465c
114+
</Text>
115+
</Card.Section>
104116
</Card.Section>
105-
<Card.Section footer>
106-
<Text text90 dark50>
107-
join now
108-
</Text>
117+
<Card.Image width={115} imageSource={cardImage} />
118+
</Card>
119+
120+
<Card containerStyle={{marginBottom: 15}} onPress={() => {}}>
121+
<Card.Section body>
122+
<Card.Section>
123+
<Text text70 dark10>
124+
You’re Invited!
125+
</Text>
126+
</Card.Section>
127+
<Card.Section footer>
128+
<Text text90 dark50>
129+
join now
130+
</Text>
131+
</Card.Section>
109132
</Card.Section>
110-
</Card.Section>
111-
<Card.Image height={120} imageSource={cardImage2} />
112-
</Card>
133+
<Card.Image height={120} imageSource={cardImage2} />
134+
</Card>
113135

114-
{_.map(posts, (post, i) => {
115-
const statusColor = post.status === 'Published' ? Colors.green30 : Colors.orange30;
116-
return (
117-
<Card key={i} containerStyle={{marginBottom: 15}} onPress={() => console.log('press on a card')}>
118-
<Card.Image height={160} imageSource={post.coverImage} />
119-
<Card.Section body>
120-
<Card.Section>
121-
<Text text40 color={Colors.dark10}>
122-
{post.title}
123-
</Text>
124-
</Card.Section>
125-
<Card.Section>
126-
<Card.Item>
127-
<Text text90 color={statusColor}>
128-
{post.status}
136+
{_.map(posts, (post, i) => {
137+
const statusColor = post.status === 'Published' ? Colors.green30 : Colors.orange30;
138+
return (
139+
<Card key={i} containerStyle={{marginBottom: 15}} onPress={() => console.log('press on a card')}>
140+
<Card.Image height={160} imageSource={post.coverImage} />
141+
<Card.Section body>
142+
<Card.Section>
143+
<Text text40 color={Colors.dark10}>
144+
{post.title}
129145
</Text>
130-
<Text text90> | {post.timestamp}</Text>
131-
</Card.Item>
132-
</Card.Section>
133-
<Card.Section>
134-
<Text text70 color={Colors.dark10}>
135-
{post.description}
136-
</Text>
137-
</Card.Section>
138-
<Card.Section footer>
139-
<Text text90 color={Colors.dark50}>
140-
{post.likes} Likes
141-
</Text>
142-
<Card.Item>
143-
<Button style={{marginRight: 10}} text90 link iconSource={featureIcon} label="Feature" />
144-
<Button text90 link iconSource={shareIcon} label="Share" />
145-
</Card.Item>
146+
</Card.Section>
147+
<Card.Section>
148+
<Card.Item>
149+
<Text text90 color={statusColor}>
150+
{post.status}
151+
</Text>
152+
<Text text90> | {post.timestamp}</Text>
153+
</Card.Item>
154+
</Card.Section>
155+
<Card.Section>
156+
<Text text70 color={Colors.dark10}>
157+
{post.description}
158+
</Text>
159+
</Card.Section>
160+
<Card.Section footer>
161+
<Text text90 color={Colors.dark50}>
162+
{post.likes} Likes
163+
</Text>
164+
<Card.Item>
165+
<Button style={{marginRight: 10}} text90 link iconSource={featureIcon} label="Feature" />
166+
<Button text90 link iconSource={shareIcon} label="Share" />
167+
</Card.Item>
168+
</Card.Section>
146169
</Card.Section>
147-
</Card.Section>
148-
</Card>
149-
);
150-
})}
170+
</Card>
171+
);
172+
})}
173+
</View>
151174
</ScrollView>
152175
);
153176
}
@@ -156,6 +179,6 @@ export default class ButtonsScreen extends Component {
156179
const styles = StyleSheet.create({
157180
container: {
158181
padding: 15,
159-
backgroundColor: Colors.white,
182+
backgroundColor: Colors.yellow80,
160183
},
161184
});

‎src/components/MultipleShadow/index.js

+11-3
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,10 @@ export default class MultipleShadow extends BaseComponent {
2727
* Custom shadow color to be applied on both top and bottom shadows
2828
*/
2929
shadowColor: PropTypes.string,
30+
/**
31+
* card border radius (will be passed to inner Card.Image component)
32+
*/
33+
borderRadius: PropTypes.number,
3034
};
3135

3236
static defaultProps = {
@@ -53,11 +57,15 @@ export default class MultipleShadow extends BaseComponent {
5357
}
5458

5559
render() {
56-
const {style, shadowColor, ...others} = this.props;
60+
const {style, shadowColor, borderRadius, ...others} = this.props;
5761
const {topShadow, bottomShadow} = this.getShadowStyles();
62+
5863
return (
59-
<View {...others} style={[this.styles.wrapper, {...topShadow}, shadowColor && {shadowColor}, style]}>
60-
<View {...others} style={[this.styles.wrapper, {...bottomShadow}, shadowColor && {shadowColor}, style]}>
64+
<View {...others} style={[this.styles.wrapper, {...topShadow}, shadowColor && {shadowColor}, style, {borderRadius}]}>
65+
<View
66+
{...others}
67+
style={[this.styles.wrapper, {...bottomShadow}, shadowColor && {shadowColor}, style, {borderRadius}]}
68+
>
6169
{this.props.children}
6270
</View>
6371
</View>

0 commit comments

Comments
 (0)