Skip to content

Commit e157dfd

Browse files
muratonermuratoner
committed
An ui border fixed in Avatar component.
Progressbar component now supported height property.
1 parent fdc6bf4 commit e157dfd

File tree

6 files changed

+89
-117
lines changed

6 files changed

+89
-117
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@muratoner/semantic-ui-react-native",
3-
"version": "1.0.18",
3+
"version": "1.0.20",
44
"description": "Semantic UI React Native - User Interface is the language of the mobile",
55
"main": "src/index.js",
66
"files": [

‎src/avatar/Avatar.js‎

Lines changed: 13 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -52,14 +52,11 @@ const Component = ({
5252
}
5353
}, [onPress]);
5454

55-
const ComputedBorder = useMemo(() => {
56-
let res = bordered ? Styles.border : {};
57-
return res;
58-
}, [bordered, raised]);
59-
60-
const ComputedRaised = useMemo(() => {
61-
let res = raised ? Styles.boxShadow : {};
62-
return res;
55+
const ComputedStyle = useMemo(() => {
56+
let style = {};
57+
bordered && (style = { ...style, ...Styles.border });
58+
raised && (style = { ...style, ...Styles.boxShadow });
59+
return style;
6360
}, [bordered, raised]);
6461

6562
const avatarTitleAutoColor = useMemo(() => {
@@ -108,8 +105,7 @@ const Component = ({
108105
withRandomColor ? UtilColor.stringToColour(title) : defaultBg,
109106
circular
110107
),
111-
ComputedBorder,
112-
ComputedRaised
108+
ComputedStyle
113109
]}
114110
>
115111
{avatarTitleContent}
@@ -122,20 +118,15 @@ const Component = ({
122118
withRandomColor,
123119
Wrapper,
124120
avatarTitleContent,
125-
ComputedBorder,
126-
ComputedRaised
121+
ComputedStyle
127122
]
128123
);
129124

130125
const avatarIcon = useMemo(() => {
131126
return (
132127
<Wrapper
133128
onPress={onPress}
134-
style={[
135-
styles.textContainer(size, defaultBg, circular),
136-
ComputedBorder,
137-
ComputedRaised
138-
]}
129+
style={[styles.textContainer(size, defaultBg, circular), ComputedStyle]}
139130
>
140131
<Icon
141132
minimumFontScale={0.01}
@@ -149,20 +140,18 @@ const Component = ({
149140
/>
150141
</Wrapper>
151142
);
152-
}, [size, icon, circular, Wrapper, ComputedBorder, ComputedRaised]);
143+
}, [size, icon, circular, Wrapper, ComputedStyle]);
153144

154145
const avatarImage = useMemo(
155146
() => (
156-
<Wrapper onPress={onPress} style={[ComputedRaised, containerStyle]}>
147+
<Wrapper onPress={onPress} style={[containerStyle]}>
157148
<ImageBackground
158149
source={source}
159150
style={StyleSheet.flatten([
151+
ComputedStyle,
160152
styles.image(size, circular),
161-
style,
162-
ComputedBorder
153+
style
163154
])}
164-
width={size}
165-
height={size}
166155
resizeMode="cover"
167156
onLoadEnd={() => {
168157
setAvatarLoaded(true);
@@ -183,8 +172,7 @@ const Component = ({
183172
title,
184173
Wrapper,
185174
avatarTitleContent,
186-
ComputedBorder,
187-
ComputedRaised,
175+
ComputedStyle,
188176
loading
189177
]
190178
);

‎src/avatar/__tests__/Avatar.js‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -118,8 +118,6 @@ describe('Avatar Component', () => {
118118
expect(imageBackground).toHaveLength(1);
119119
expect(image).toHaveLength(1);
120120
expect(text).toHaveLength(1);
121-
expect(imageStyles).toHaveProperty('width', 32);
122-
expect(imageStyles).toHaveProperty('height', 32);
123121
expect(image.get(0).props).toHaveProperty('resizeMode', 'cover');
124122
expect(text.get(0).props).toHaveProperty('children', ['M', 'S']);
125123

@@ -148,8 +146,6 @@ describe('Avatar Component', () => {
148146
expect(imageBackground).toHaveLength(1);
149147
expect(image).toHaveLength(1);
150148
expect(text).toHaveLength(1);
151-
expect(imageStyles).toHaveProperty('width', 32);
152-
expect(imageStyles).toHaveProperty('height', 32);
153149
expect(image.get(0).props).toHaveProperty('resizeMode', 'cover');
154150
expect(text.get(0).props).toHaveProperty('children', ['M', 'S']);
155151

@@ -185,22 +181,23 @@ describe('Avatar Component', () => {
185181
expect(toJson(component)).toMatchSnapshot();
186182
});
187183

188-
it('should render with rounded is false', () => {
184+
it('should render with circular is false', () => {
189185
const component = shallow(
190186
<Avatar
191187
source={{
192188
uri: 'https://i.pravatar.cc/50'
193189
}}
194-
rounded={false}
190+
circular={false}
195191
/>
196192
);
197193

198194
const imageBackground = component.find('ImageBackground');
199195

200196
expect(imageBackground).toHaveLength(1);
201-
expect(
202-
component.get(0).props.style.reduce((acc, cur) => Object.assign(acc, cur))
203-
).toHaveProperty('borderRadius', undefined);
197+
expect(imageBackground.get(0).props.style).toHaveProperty(
198+
'borderRadius',
199+
undefined
200+
);
204201

205202
expect(toJson(component)).toMatchSnapshot();
206203
});

‎src/avatar/__tests__/__snapshots__/Avatar.js.snap‎

Lines changed: 46 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,11 @@ exports[`Avatar Component should render with avatar image 1`] = `
44
<View
55
style={
66
Array [
7-
Object {},
87
undefined,
98
]
109
}
1110
>
1211
<ImageBackground
13-
height={32}
1412
onLoadEnd={[Function]}
1513
resizeMode="cover"
1614
source={
@@ -29,7 +27,6 @@ exports[`Avatar Component should render with avatar image 1`] = `
2927
"width": 32,
3028
}
3129
}
32-
width={32}
3330
/>
3431
</View>
3532
`;
@@ -38,13 +35,11 @@ exports[`Avatar Component should render with avatar image 2`] = `
3835
<View
3936
style={
4037
Array [
41-
Object {},
4238
undefined,
4339
]
4440
}
4541
>
4642
<ImageBackground
47-
height={32}
4843
onLoadEnd={[Function]}
4944
resizeMode="cover"
5045
source={
@@ -63,11 +58,56 @@ exports[`Avatar Component should render with avatar image 2`] = `
6358
"width": 32,
6459
}
6560
}
66-
width={32}
6761
/>
6862
</View>
6963
`;
7064

65+
exports[`Avatar Component should render with circular is false 1`] = `
66+
<View
67+
style={
68+
Array [
69+
undefined,
70+
]
71+
}
72+
>
73+
<ImageBackground
74+
onLoadEnd={[Function]}
75+
resizeMode="cover"
76+
source={
77+
Object {
78+
"uri": "https://i.pravatar.cc/50",
79+
}
80+
}
81+
style={
82+
Object {
83+
"alignItems": "center",
84+
"backgroundColor": "#BCBEC1",
85+
"borderRadius": undefined,
86+
"height": 32,
87+
"justifyContent": "center",
88+
"overflow": "hidden",
89+
"width": 32,
90+
}
91+
}
92+
>
93+
<ActivityIndicator
94+
animating={true}
95+
color="#fff"
96+
hidesWhenStopped={true}
97+
size="small"
98+
style={
99+
Object {
100+
"backgroundColor": "rgba(0,0,0,.5)",
101+
"height": "100%",
102+
"position": "absolute",
103+
"width": "100%",
104+
}
105+
}
106+
/>
107+
</ImageBackground>
108+
</View>
109+
`;
110+
71111
exports[`Avatar Component should render with icon 1`] = `
72112
<View
73113
style={
@@ -81,7 +121,6 @@ exports[`Avatar Component should render with icon 1`] = `
81121
"width": 32,
82122
},
83123
Object {},
84-
Object {},
85124
]
86125
}
87126
>
@@ -131,7 +170,6 @@ exports[`Avatar Component should render with onPress in Icon avatar 1`] = `
131170
"width": 32,
132171
},
133172
Object {},
134-
Object {},
135173
]
136174
}
137175
>
@@ -172,13 +210,11 @@ exports[`Avatar Component should render with onPress in image avatar 1`] = `
172210
}
173211
style={
174212
Array [
175-
Object {},
176213
undefined,
177214
]
178215
}
179216
>
180217
<ImageBackground
181-
height={32}
182218
onLoadEnd={[Function]}
183219
resizeMode="cover"
184220
source={
@@ -197,7 +233,6 @@ exports[`Avatar Component should render with onPress in image avatar 1`] = `
197233
"width": 32,
198234
}
199235
}
200-
width={32}
201236
>
202237
<ActivityIndicator
203238
animating={true}
@@ -243,7 +278,6 @@ exports[`Avatar Component should render with onPress in title avatar 1`] = `
243278
"width": 32,
244279
},
245280
Object {},
246-
Object {},
247281
]
248282
}
249283
>
@@ -280,7 +314,6 @@ exports[`Avatar Component should render with randomColor is false 1`] = `
280314
"width": 32,
281315
},
282316
Object {},
283-
Object {},
284317
]
285318
}
286319
>
@@ -304,55 +337,6 @@ exports[`Avatar Component should render with randomColor is false 1`] = `
304337
</View>
305338
`;
306339

307-
exports[`Avatar Component should render with rounded is false 1`] = `
308-
<View
309-
style={
310-
Array [
311-
Object {},
312-
undefined,
313-
]
314-
}
315-
>
316-
<ImageBackground
317-
height={32}
318-
onLoadEnd={[Function]}
319-
resizeMode="cover"
320-
source={
321-
Object {
322-
"uri": "https://i.pravatar.cc/50",
323-
}
324-
}
325-
style={
326-
Object {
327-
"alignItems": "center",
328-
"backgroundColor": "#BCBEC1",
329-
"borderRadius": 16,
330-
"height": 32,
331-
"justifyContent": "center",
332-
"overflow": "hidden",
333-
"width": 32,
334-
}
335-
}
336-
width={32}
337-
>
338-
<ActivityIndicator
339-
animating={true}
340-
color="#fff"
341-
hidesWhenStopped={true}
342-
size="small"
343-
style={
344-
Object {
345-
"backgroundColor": "rgba(0,0,0,.5)",
346-
"height": "100%",
347-
"position": "absolute",
348-
"width": "100%",
349-
}
350-
}
351-
/>
352-
</ImageBackground>
353-
</View>
354-
`;
355-
356340
exports[`Avatar Component should render with shortestTitle is false 1`] = `
357341
<View
358342
style={
@@ -366,7 +350,6 @@ exports[`Avatar Component should render with shortestTitle is false 1`] = `
366350
"width": 32,
367351
},
368352
Object {},
369-
Object {},
370353
]
371354
}
372355
>
@@ -402,7 +385,6 @@ exports[`Avatar Component should render with shortestTitle is false 2`] = `
402385
"width": 32,
403386
},
404387
Object {},
405-
Object {},
406388
]
407389
}
408390
>
@@ -438,7 +420,6 @@ exports[`Avatar Component should render with textAutoColorMode is auto-light 1`]
438420
"width": 32,
439421
},
440422
Object {},
441-
Object {},
442423
]
443424
}
444425
>
@@ -475,7 +456,6 @@ exports[`Avatar Component should render with title 1`] = `
475456
"width": 32,
476457
},
477458
Object {},
478-
Object {},
479459
]
480460
}
481461
>
@@ -512,7 +492,6 @@ exports[`Avatar Component should render with titleShowLimit is 2 1`] = `
512492
"width": 32,
513493
},
514494
Object {},
515-
Object {},
516495
]
517496
}
518497
>
@@ -549,7 +528,6 @@ exports[`Avatar Component should render without issues 1`] = `
549528
"width": 32,
550529
},
551530
Object {},
552-
Object {},
553531
]
554532
}
555533
>

0 commit comments

Comments
 (0)