Skip to content

Commit fb5e93d

Browse files
32penkin32penkin
authored
refactor(ui): icons integration (#292)
* refactor(ui): tab image integrate * refactor(ui): app-bar-action image integrate * refactor(ui): tab-navigator-action image integrate * refactor(ui): button icon property refactor * test * refactor(ui): icons integration refactor * refactor(ui): code style refactor
1 parent 47a4ed7 commit fb5e93d

37 files changed

+550
-370
lines changed

‎package-lock.json

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/framework/ui/button/button.component.tsx

Lines changed: 12 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,6 @@ import {
44
TouchableOpacityProps,
55
GestureResponderEvent,
66
StyleSheet,
7-
ImageSourcePropType,
8-
Image,
97
ImageProps,
108
} from 'react-native';
119
import {
@@ -24,7 +22,7 @@ import {
2422
} from './type';
2523

2624
interface ButtonProps {
27-
icon?: ImageSourcePropType;
25+
icon?: (style: StyleType) => React.ReactElement<ImageProps>;
2826
status?: string;
2927
size?: string;
3028
alignment?: string | ButtonAlignment;
@@ -79,51 +77,44 @@ export class Button extends React.Component<Props> {
7977
};
8078
};
8179

82-
private createTextElement = (style: StyleType): React.ReactElement<TextProps> => {
80+
private renderTextElement = (style: StyleType): React.ReactElement<TextProps> => {
8381
const { children: text } = this.props;
8482

8583
return (
8684
<Text
87-
style={[style, strictStyles.text]}
85+
style={[style, styles.text]}
8886
key={1}>
8987
{text}
9088
</Text>
9189
);
9290
};
9391

94-
private createImageElement = (style: StyleType): React.ReactElement<ImageProps> => {
95-
const { icon: image } = this.props;
96-
97-
return (
98-
<Image
99-
key={0}
100-
style={[style, strictStyles.icon]}
101-
source={image}
102-
/>
103-
);
92+
private renderImageElement = (style: StyleType): React.ReactElement<ImageProps> | null => {
93+
const { icon } = this.props;
94+
return icon ? React.cloneElement(icon(style), { key: 2 }) : null;
10495
};
10596

106-
private createComponentChildren = (style: StyleType): React.ReactNode => {
97+
private renderComponentChildren = (style: StyleType): React.ReactNode => {
10798
const { icon, children } = this.props;
10899

109100
const hasIcon: boolean = icon !== undefined;
110101
const hasText: boolean = children !== undefined;
111102

112103
return [
113-
hasIcon ? this.createImageElement(style.icon) : undefined,
114-
hasText ? this.createTextElement(style.text) : undefined,
104+
hasIcon ? this.renderImageElement(style.icon) : undefined,
105+
hasText ? this.renderTextElement(style.text) : undefined,
115106
];
116107
};
117108

118109
public render(): React.ReactElement<TouchableOpacityProps> {
119110
const { style, themedStyle, ...derivedProps } = this.props;
120111
const { container, ...componentStyles } = this.getComponentStyle(themedStyle);
121-
const componentChildren: React.ReactNode = this.createComponentChildren(componentStyles);
112+
const componentChildren: React.ReactNode = this.renderComponentChildren(componentStyles);
122113

123114
return (
124115
<TouchableOpacity
125116
{...derivedProps}
126-
style={[container, style, strictStyles.container]}
117+
style={[container, style, styles.container]}
127118
activeOpacity={1.0}
128119
onPress={this.onPress}
129120
onPressIn={this.onPressIn}
@@ -134,7 +125,7 @@ export class Button extends React.Component<Props> {
134125
}
135126
}
136127

137-
const strictStyles = StyleSheet.create({
128+
const styles = StyleSheet.create({
138129
container: {
139130
justifyContent: 'space-evenly',
140131
alignItems: 'center',

‎src/framework/ui/button/button.spec.tsx

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import {
3-
ImageSourcePropType,
3+
Image,
44
TouchableOpacity,
55
} from 'react-native';
66
import {
@@ -13,6 +13,7 @@ import {
1313
styled,
1414
StyleProvider,
1515
StyleProviderProps,
16+
StyleType,
1617
} from '@kitten/theme';
1718
import {
1819
Button as ButtonComponent,
@@ -49,7 +50,11 @@ describe('@button: matches snapshot', () => {
4950

5051
describe('* appearance', () => {
5152

52-
const icon: ImageSourcePropType = { uri: 'https://akveo.github.io/eva-icons/fill/png/128/star.png' };
53+
const icon = (style: StyleType) => (
54+
<Image
55+
source={{ uri: 'https://akveo.github.io/eva-icons/fill/png/128/star.png' }}
56+
style={style}/>
57+
);
5358
const text: React.ReactText = 'BUTTON';
5459

5560
it('* empty', () => {

‎src/framework/ui/button/button.spec.tsx.snap

Lines changed: 50 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,23 @@
33
exports[`@button: matches snapshot * appearance * empty 1`] = `
44
<TouchableOpacity
55
activeOpacity={1}
6-
alignment="left"
7-
appearance="filled"
6+
appearance="default"
87
dispatch={[Function]}
98
onPress={[Function]}
109
onPressIn={[Function]}
1110
onPressOut={[Function]}
11+
size="medium"
12+
status="primary"
1213
style={
1314
Array [
15+
undefined,
1416
Object {
15-
"backgroundColor": "#2196F3",
1617
"borderRadius": 6,
1718
"flexDirection": "row",
1819
"minHeight": 24,
1920
"minWidth": 24,
2021
"padding": 4,
2122
},
22-
undefined,
2323
Object {
2424
"alignItems": "center",
2525
"justifyContent": "space-evenly",
@@ -45,28 +45,24 @@ exports[`@button: matches snapshot * appearance * empty 1`] = `
4545
exports[`@button: matches snapshot * appearance * icon 1`] = `
4646
<TouchableOpacity
4747
activeOpacity={1}
48-
alignment="left"
49-
appearance="filled"
48+
appearance="default"
5049
dispatch={[Function]}
51-
icon={
52-
Object {
53-
"uri": "https://akveo.github.io/eva-icons/fill/png/128/star.png",
54-
}
55-
}
50+
icon={[Function]}
5651
onPress={[Function]}
5752
onPressIn={[Function]}
5853
onPressOut={[Function]}
54+
size="medium"
55+
status="primary"
5956
style={
6057
Array [
58+
undefined,
6159
Object {
62-
"backgroundColor": "#2196F3",
6360
"borderRadius": 6,
6461
"flexDirection": "row",
6562
"minHeight": 24,
6663
"minWidth": 24,
6764
"padding": 4,
6865
},
69-
undefined,
7066
Object {
7167
"alignItems": "center",
7268
"justifyContent": "space-evenly",
@@ -94,6 +90,15 @@ exports[`@button: matches snapshot * appearance * icon 1`] = `
9490
}
9591
}
9692
style={
93+
Array [
94+
Object {
95+
"height": 14,
96+
"marginHorizontal": 4,
97+
"tintColor": "#ffffff",
98+
"width": 14,
99+
},
100+
Object {},
101+
]
97102
Array [
98103
Object {
99104
"height": 13,
@@ -103,6 +108,11 @@ exports[`@button: matches snapshot * appearance * icon 1`] = `
103108
},
104109
Object {},
105110
]
111+
Object {
112+
"height": 14,
113+
"tintColor": "#ffffff",
114+
"width": 14,
115+
}
106116
}
107117
/>
108118
</TouchableOpacity>
@@ -111,28 +121,24 @@ exports[`@button: matches snapshot * appearance * icon 1`] = `
111121
exports[`@button: matches snapshot * appearance * icon and text 1`] = `
112122
<TouchableOpacity
113123
activeOpacity={1}
114-
alignment="left"
115-
appearance="filled"
124+
appearance="default"
116125
dispatch={[Function]}
117-
icon={
118-
Object {
119-
"uri": "https://akveo.github.io/eva-icons/fill/png/128/star.png",
120-
}
121-
}
126+
icon={[Function]}
122127
onPress={[Function]}
123128
onPressIn={[Function]}
124129
onPressOut={[Function]}
130+
size="medium"
131+
status="primary"
125132
style={
126133
Array [
134+
undefined,
127135
Object {
128-
"backgroundColor": "#2196F3",
129136
"borderRadius": 6,
130137
"flexDirection": "row",
131138
"minHeight": 24,
132139
"minWidth": 24,
133140
"padding": 4,
134141
},
135-
undefined,
136142
Object {
137143
"alignItems": "center",
138144
"justifyContent": "space-evenly",
@@ -160,6 +166,20 @@ exports[`@button: matches snapshot * appearance * icon and text 1`] = `
160166
}
161167
}
162168
style={
169+
Object {
170+
"height": 14,
171+
"tintColor": "#ffffff",
172+
"width": 14,
173+
}
174+
Array [
175+
Object {
176+
"height": 14,
177+
"marginHorizontal": 4,
178+
"tintColor": "#ffffff",
179+
"width": 14,
180+
},
181+
Object {},
182+
]
163183
Array [
164184
Object {
165185
"height": 13,
@@ -192,23 +212,23 @@ exports[`@button: matches snapshot * appearance * icon and text 1`] = `
192212
exports[`@button: matches snapshot * appearance * text 1`] = `
193213
<TouchableOpacity
194214
activeOpacity={1}
195-
alignment="left"
196-
appearance="filled"
215+
appearance="default"
197216
dispatch={[Function]}
198217
onPress={[Function]}
199218
onPressIn={[Function]}
200219
onPressOut={[Function]}
220+
size="medium"
221+
status="primary"
201222
style={
202223
Array [
224+
undefined,
203225
Object {
204-
"backgroundColor": "#2196F3",
205226
"borderRadius": 6,
206227
"flexDirection": "row",
207228
"minHeight": 24,
208229
"minWidth": 24,
209230
"padding": 4,
210231
},
211-
undefined,
212232
Object {
213233
"alignItems": "center",
214234
"justifyContent": "space-evenly",
@@ -250,23 +270,23 @@ exports[`@button: matches snapshot * appearance * text 1`] = `
250270
exports[`@button: matches snapshot * interaction * stateless 1`] = `
251271
<TouchableOpacity
252272
activeOpacity={1}
253-
alignment="left"
254-
appearance="filled"
273+
appearance="default"
255274
dispatch={[Function]}
256275
onPress={[Function]}
257276
onPressIn={[Function]}
258277
onPressOut={[Function]}
278+
size="medium"
279+
status="primary"
259280
style={
260281
Array [
282+
undefined,
261283
Object {
262-
"backgroundColor": "#2196F3",
263284
"borderRadius": 6,
264285
"flexDirection": "row",
265286
"minHeight": 24,
266287
"minWidth": 24,
267288
"padding": 4,
268289
},
269-
undefined,
270290
Object {
271291
"alignItems": "center",
272292
"justifyContent": "space-evenly",

‎src/framework/ui/buttonGroup/buttonGroup.component.tsx

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from 'react';
22
import {
3-
Group,
43
StyleSheet,
54
View,
65
ViewProps,
@@ -54,7 +53,7 @@ export class ButtonGroup extends React.Component<Props> {
5453
}
5554
};
5655

57-
private createComponentChild = (element: ButtonElement, index: number, style: StyleType): ButtonElement => {
56+
private renderComponentChild = (element: ButtonElement, index: number, style: StyleType): ButtonElement => {
5857
const { appearance, size, children } = this.props;
5958
const { style: elementStyle, ...derivedProps } = element.props;
6059

@@ -70,29 +69,31 @@ export class ButtonGroup extends React.Component<Props> {
7069
});
7170
};
7271

73-
private createComponentChildren = (source: ButtonElement | ButtonElement[], style: StyleType): ButtonElement[] => {
72+
private renderComponentChildren = (source: ButtonElement | ButtonElement[],
73+
style: StyleType): ButtonElement[] => {
74+
7475
return React.Children.map(source, (element: ButtonElement, index: number): ButtonElement => {
75-
return this.createComponentChild(element, index, style);
76+
return this.renderComponentChild(element, index, style);
7677
});
7778
};
7879

7980
public render(): React.ReactElement<ViewProps> {
8081
const { style, themedStyle, children, ...derivedProps } = this.props;
8182
const { container, button } = this.getComponentStyle(themedStyle);
8283

83-
const componentChildren: ButtonElement[] = this.createComponentChildren(children, button);
84+
const componentChildren: ButtonElement[] = this.renderComponentChildren(children, button);
8485

8586
return (
8687
<View
8788
{...derivedProps}
88-
style={[container, style, strictStyles.container]}>
89+
style={[container, style, styles.container]}>
8990
{componentChildren}
9091
</View>
9192
);
9293
}
9394
}
9495

95-
const strictStyles = StyleSheet.create({
96+
const styles = StyleSheet.create({
9697
container: {
9798
flexDirection: 'row',
9899
},

0 commit comments

Comments
 (0)