Skip to content

Commit b688ee8

Browse files
artyorshartyorsh
authored
refactor(framework): adopt to eva mappings
1 parent d88b048 commit b688ee8

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+1994
-1286
lines changed

‎src/framework/theme/component/application/application.spec.config.ts

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export const mapping: ThemeMappingType = {
55
Test: {
66
meta: {
77
scope: 'mobile',
8-
mapping: {
8+
parameters: {
99
size: {
1010
type: 'number',
1111
},
@@ -16,10 +16,10 @@ export const mapping: ThemeMappingType = {
1616
type: 'number',
1717
},
1818
borderColor: {
19-
type: 'color',
19+
type: 'string',
2020
},
2121
selectColor: {
22-
type: 'color',
22+
type: 'string',
2323
},
2424
},
2525
appearances: {
@@ -30,7 +30,7 @@ export const mapping: ThemeMappingType = {
3030
default: false,
3131
},
3232
},
33-
variants: {
33+
variantGroups: {
3434
status: {
3535
success: {
3636
default: false,
@@ -69,7 +69,7 @@ export const mapping: ThemeMappingType = {
6969
},
7070
},
7171
},
72-
appearance: {
72+
appearances: {
7373
default: {
7474
mapping: {
7575
borderWidth: 2,
@@ -94,7 +94,7 @@ export const mapping: ThemeMappingType = {
9494
},
9595
},
9696
},
97-
variant: {
97+
variantGroups: {
9898
status: {
9999
info: {
100100
state: {
@@ -157,12 +157,12 @@ export const mapping: ThemeMappingType = {
157157
Empty: {
158158
meta: {
159159
scope: 'mobile',
160-
mapping: {},
160+
parameters: {},
161161
appearances: {},
162-
variants: {},
162+
variantGroups: {},
163163
states: {},
164164
},
165-
appearance: {},
165+
appearances: {},
166166
},
167167
};
168168

‎src/framework/theme/component/style/style.spec.config.ts

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export const mapping: ThemeMappingType = {
55
Test: {
66
meta: {
77
scope: 'mobile',
8-
mapping: {
8+
parameters: {
99
size: {
1010
type: 'number',
1111
},
@@ -16,10 +16,10 @@ export const mapping: ThemeMappingType = {
1616
type: 'number',
1717
},
1818
borderColor: {
19-
type: 'color',
19+
type: 'string',
2020
},
2121
selectColor: {
22-
type: 'color',
22+
type: 'string',
2323
},
2424
},
2525
appearances: {
@@ -30,7 +30,7 @@ export const mapping: ThemeMappingType = {
3030
default: false,
3131
},
3232
},
33-
variants: {
33+
variantGroups: {
3434
status: {
3535
success: {
3636
default: false,
@@ -69,7 +69,7 @@ export const mapping: ThemeMappingType = {
6969
},
7070
},
7171
},
72-
appearance: {
72+
appearances: {
7373
default: {
7474
mapping: {
7575
borderWidth: 2,
@@ -94,7 +94,7 @@ export const mapping: ThemeMappingType = {
9494
},
9595
},
9696
},
97-
variant: {
97+
variantGroups: {
9898
status: {
9999
info: {
100100
state: {
@@ -157,12 +157,12 @@ export const mapping: ThemeMappingType = {
157157
Empty: {
158158
meta: {
159159
scope: 'mobile',
160-
mapping: {},
160+
parameters: {},
161161
appearances: {},
162-
variants: {},
162+
variantGroups: {},
163163
states: {},
164164
},
165-
appearance: {},
165+
appearances: {},
166166
},
167167
};
168168

‎src/framework/theme/service/style/style.spec.config.ts

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export const componentMapping: ThemeMappingType = {
2222
Test: {
2323
meta: {
2424
scope: 'mobile',
25-
mapping: {
25+
parameters: {
2626
size: {
2727
type: 'number',
2828
},
@@ -33,10 +33,10 @@ export const componentMapping: ThemeMappingType = {
3333
type: 'number',
3434
},
3535
borderColor: {
36-
type: 'color',
36+
type: 'string',
3737
},
3838
selectColor: {
39-
type: 'color',
39+
type: 'string',
4040
},
4141
},
4242
appearances: {
@@ -47,7 +47,7 @@ export const componentMapping: ThemeMappingType = {
4747
default: false,
4848
},
4949
},
50-
variants: {
50+
variantGroups: {
5151
status: {
5252
success: {
5353
default: false,
@@ -86,7 +86,7 @@ export const componentMapping: ThemeMappingType = {
8686
},
8787
},
8888
},
89-
appearance: {
89+
appearances: {
9090
default: {
9191
mapping: {
9292
borderWidth: 2,
@@ -111,7 +111,7 @@ export const componentMapping: ThemeMappingType = {
111111
},
112112
},
113113
},
114-
variant: {
114+
variantGroups: {
115115
status: {
116116
info: {
117117
state: {
@@ -174,12 +174,12 @@ export const componentMapping: ThemeMappingType = {
174174
Empty: {
175175
meta: {
176176
scope: 'mobile',
177-
mapping: {},
177+
parameters: {},
178178
appearances: {},
179-
variants: {},
179+
variantGroups: {},
180180
states: {},
181181
},
182-
appearance: {},
182+
appearances: {},
183183
},
184184
};
185185

‎src/framework/theme/service/style/styleConsumer.service.ts

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { createStyle } from 'eva/packages/processor/kitten';
22
import {
3-
ComponentMappingType,
3+
ControlMappingType,
44
ThemedStyleType,
55
ThemeMappingType,
66
ThemeStyleType,
@@ -22,7 +22,7 @@ export class StyleConsumerService {
2222
component: string,
2323
props: P): P {
2424

25-
const defaultProps = this.safe(mapping[component], (componentMapping: ComponentMappingType) => {
25+
const defaultProps = this.safe(mapping[component], (componentMapping: ControlMappingType) => {
2626
const appearance: string = this.getDefaultAppearance(componentMapping);
2727
const variants: { [key: string]: string } = this.getDefaultVariants(componentMapping);
2828
const states: { [key: string]: boolean } = this.getDefaultStates(componentMapping);
@@ -48,7 +48,7 @@ export class StyleConsumerService {
4848
props: P,
4949
interaction: Interaction[]): ThemedStyleType {
5050

51-
return this.safe(mapping[component], (componentMapping: ComponentMappingType): ThemedStyleType => {
51+
return this.safe(mapping[component], (componentMapping: ControlMappingType): ThemedStyleType => {
5252
const { appearance, variants, states } = this.getDerivedStyleMeta(componentMapping, props);
5353

5454
const generatedStyles: ThemedStyleType = this.safe(styles[component], (componentStyles) => {
@@ -70,7 +70,7 @@ export class StyleConsumerService {
7070
});
7171
}
7272

73-
private getDerivedStyleMeta<P extends StyledComponentProps>(mapping: ComponentMappingType,
73+
private getDerivedStyleMeta<P extends StyledComponentProps>(mapping: ControlMappingType,
7474
props: P): ComponentStyleMetaType {
7575

7676
const variantProps: Partial<P> = this.getDerivedVariants(mapping, props);
@@ -88,40 +88,40 @@ export class StyleConsumerService {
8888
};
8989
}
9090

91-
private getDefaultAppearance(mapping: ComponentMappingType): string {
91+
private getDefaultAppearance(mapping: ControlMappingType): string {
9292
return Object.keys(mapping.meta.appearances).find((appearance: string): boolean => {
9393
return mapping.meta.appearances[appearance].default === true;
9494
});
9595
}
9696

97-
private getDefaultVariants(mapping: ComponentMappingType): { [key: string]: any } {
98-
return this.transformObject(mapping.meta.variants, (variants, group: string): string | undefined => {
97+
private getDefaultVariants(mapping: ControlMappingType): { [key: string]: any } {
98+
return this.transformObject(mapping.meta.variantGroups, (variants, group: string): string | undefined => {
9999
return Object.keys(variants[group]).find((variant: string): boolean => {
100100

101101
return variants[group][variant].default === true;
102102
});
103103
});
104104
}
105105

106-
private getDefaultStates(mapping: ComponentMappingType): { [key: string]: any } {
106+
private getDefaultStates(mapping: ControlMappingType): { [key: string]: any } {
107107
return this.transformObject(mapping.meta.states, (states, state: string): boolean | undefined => {
108108
const isDefault: boolean = states[state].default === true;
109109

110110
return isDefault ? isDefault : undefined;
111111
});
112112
}
113113

114-
private getDerivedVariants<P extends StyledComponentProps>(mapping: ComponentMappingType,
114+
private getDerivedVariants<P extends StyledComponentProps>(mapping: ControlMappingType,
115115
props: P): Partial<P> {
116116

117117
return this.transformObject(props, (p: P, prop: string): string | undefined => {
118-
const isVariant: boolean = Object.keys(mapping.meta.variants).includes(prop);
118+
const isVariant: boolean = Object.keys(mapping.meta.variantGroups).includes(prop);
119119

120120
return isVariant ? p[prop] : undefined;
121121
});
122122
}
123123

124-
private getDerivedStates<P extends StyledComponentProps>(mapping: ComponentMappingType,
124+
private getDerivedStates<P extends StyledComponentProps>(mapping: ControlMappingType,
125125
props: P): Partial<P> {
126126

127127
return this.transformObject(props, (p: P, prop: string): boolean => {

‎src/framework/ui/avatar/avatar.spec.config.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export const mapping: ThemeMappingType = {
55
'Avatar': {
66
'meta': {
77
'scope': 'all',
8-
'mapping': {
8+
'parameters': {
99
'roundCoefficient': {
1010
'type': 'number',
1111
},
@@ -24,7 +24,7 @@ export const mapping: ThemeMappingType = {
2424
'default': true,
2525
},
2626
},
27-
'variants': {
27+
'variantGroups': {
2828
'shape': {
2929
'round': {
3030
'default': true,
@@ -50,12 +50,12 @@ export const mapping: ThemeMappingType = {
5050
},
5151
'states': {},
5252
},
53-
'appearance': {
53+
'appearances': {
5454
'default': {
5555
'mapping': {
5656
'margin': 16,
5757
},
58-
'variant': {
58+
'variantGroups': {
5959
'shape': {
6060
'round': {
6161
'roundCoefficient': 0.5,

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

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -64,16 +64,37 @@ export class Button extends React.Component<Props> {
6464
};
6565

6666
private getComponentStyle = (style: StyleType): StyleType => {
67-
const { text, icon, ...container } = style;
67+
const {
68+
textColor,
69+
textFontSize,
70+
textFontWeight,
71+
textMarginHorizontal,
72+
iconWidth,
73+
iconHeight,
74+
iconTintColor,
75+
iconMarginHorizontal,
76+
...containerParameters
77+
} = style;
78+
6879
const alignment: ButtonAlignment = ButtonAlignments.parse(this.props.alignment, ALIGNMENT_DEFAULT);
6980

7081
return {
7182
container: {
72-
...container,
83+
...containerParameters,
7384
flexDirection: alignment.flex(),
7485
},
75-
text: text,
76-
icon: icon,
86+
text: {
87+
color: textColor,
88+
fontSize: textFontSize,
89+
fontWeight: textFontWeight,
90+
marginHorizontal: textMarginHorizontal,
91+
},
92+
icon: {
93+
width: iconWidth,
94+
height: iconHeight,
95+
tintColor: iconTintColor,
96+
marginHorizontal: iconMarginHorizontal,
97+
},
7798
};
7899
};
79100

0 commit comments

Comments
 (0)