refactor(framework): adopt to eva mappings

akveo · Mar 18, 2019 · b688ee8 · b688ee8
1 parent d88b048
commit b688ee8
Show file tree

Hide file tree

Showing 47 changed files with 1,994 additions and 1,286 deletions.
diff --git a/src/framework/theme/component/application/application.spec.config.ts b/src/framework/theme/component/application/application.spec.config.ts
@@ -5,7 +5,7 @@ export const mapping: ThemeMappingType = {
   Test: {
     meta: {
       scope: 'mobile',
-      mapping: {
+      parameters: {
         size: {
           type: 'number',
         },
@@ -16,10 +16,10 @@ export const mapping: ThemeMappingType = {
           type: 'number',
         },
         borderColor: {
-          type: 'color',
+          type: 'string',
         },
         selectColor: {
-          type: 'color',
+          type: 'string',
         },
       },
       appearances: {
@@ -30,7 +30,7 @@ export const mapping: ThemeMappingType = {
           default: false,
         },
       },
-      variants: {
+      variantGroups: {
         status: {
           success: {
             default: false,
@@ -69,7 +69,7 @@ export const mapping: ThemeMappingType = {
         },
       },
     },
-    appearance: {
+    appearances: {
       default: {
         mapping: {
           borderWidth: 2,
@@ -94,7 +94,7 @@ export const mapping: ThemeMappingType = {
             },
           },
         },
-        variant: {
+        variantGroups: {
           status: {
             info: {
               state: {
@@ -157,12 +157,12 @@ export const mapping: ThemeMappingType = {
   Empty: {
     meta: {
       scope: 'mobile',
-      mapping: {},
+      parameters: {},
       appearances: {},
-      variants: {},
+      variantGroups: {},
       states: {},
     },
-    appearance: {},
+    appearances: {},
   },
 };
 

diff --git a/src/framework/theme/component/style/style.spec.config.ts b/src/framework/theme/component/style/style.spec.config.ts
@@ -5,7 +5,7 @@ export const mapping: ThemeMappingType = {
   Test: {
     meta: {
       scope: 'mobile',
-      mapping: {
+      parameters: {
         size: {
           type: 'number',
         },
@@ -16,10 +16,10 @@ export const mapping: ThemeMappingType = {
           type: 'number',
         },
         borderColor: {
-          type: 'color',
+          type: 'string',
         },
         selectColor: {
-          type: 'color',
+          type: 'string',
         },
       },
       appearances: {
@@ -30,7 +30,7 @@ export const mapping: ThemeMappingType = {
           default: false,
         },
       },
-      variants: {
+      variantGroups: {
         status: {
           success: {
             default: false,
@@ -69,7 +69,7 @@ export const mapping: ThemeMappingType = {
         },
       },
     },
-    appearance: {
+    appearances: {
       default: {
         mapping: {
           borderWidth: 2,
@@ -94,7 +94,7 @@ export const mapping: ThemeMappingType = {
             },
           },
         },
-        variant: {
+        variantGroups: {
           status: {
             info: {
               state: {
@@ -157,12 +157,12 @@ export const mapping: ThemeMappingType = {
   Empty: {
     meta: {
       scope: 'mobile',
-      mapping: {},
+      parameters: {},
       appearances: {},
-      variants: {},
+      variantGroups: {},
       states: {},
     },
-    appearance: {},
+    appearances: {},
   },
 };
 

diff --git a/src/framework/theme/service/style/style.spec.config.ts b/src/framework/theme/service/style/style.spec.config.ts
@@ -22,7 +22,7 @@ export const componentMapping: ThemeMappingType = {
   Test: {
     meta: {
       scope: 'mobile',
-      mapping: {
+      parameters: {
         size: {
           type: 'number',
         },
@@ -33,10 +33,10 @@ export const componentMapping: ThemeMappingType = {
           type: 'number',
         },
         borderColor: {
-          type: 'color',
+          type: 'string',
         },
         selectColor: {
-          type: 'color',
+          type: 'string',
         },
       },
       appearances: {
@@ -47,7 +47,7 @@ export const componentMapping: ThemeMappingType = {
           default: false,
         },
       },
-      variants: {
+      variantGroups: {
         status: {
           success: {
             default: false,
@@ -86,7 +86,7 @@ export const componentMapping: ThemeMappingType = {
         },
       },
     },
-    appearance: {
+    appearances: {
       default: {
         mapping: {
           borderWidth: 2,
@@ -111,7 +111,7 @@ export const componentMapping: ThemeMappingType = {
             },
           },
         },
-        variant: {
+        variantGroups: {
           status: {
             info: {
               state: {
@@ -174,12 +174,12 @@ export const componentMapping: ThemeMappingType = {
   Empty: {
     meta: {
       scope: 'mobile',
-      mapping: {},
+      parameters: {},
       appearances: {},
-      variants: {},
+      variantGroups: {},
       states: {},
     },
-    appearance: {},
+    appearances: {},
   },
 };
 

diff --git a/src/framework/theme/service/style/styleConsumer.service.ts b/src/framework/theme/service/style/styleConsumer.service.ts
@@ -1,6 +1,6 @@
 import { createStyle } from 'eva/packages/processor/kitten';
 import {
-  ComponentMappingType,
+  ControlMappingType,
   ThemedStyleType,
   ThemeMappingType,
   ThemeStyleType,
@@ -22,7 +22,7 @@ export class StyleConsumerService {
                                                           component: string,
                                                           props: P): P {
 
-    const defaultProps = this.safe(mapping[component], (componentMapping: ComponentMappingType) => {
+    const defaultProps = this.safe(mapping[component], (componentMapping: ControlMappingType) => {
       const appearance: string = this.getDefaultAppearance(componentMapping);
       const variants: { [key: string]: string } = this.getDefaultVariants(componentMapping);
       const states: { [key: string]: boolean } = this.getDefaultStates(componentMapping);
@@ -48,7 +48,7 @@ export class StyleConsumerService {
                                                                   props: P,
                                                                   interaction: Interaction[]): ThemedStyleType {
 
-    return this.safe(mapping[component], (componentMapping: ComponentMappingType): ThemedStyleType => {
+    return this.safe(mapping[component], (componentMapping: ControlMappingType): ThemedStyleType => {
       const { appearance, variants, states } = this.getDerivedStyleMeta(componentMapping, props);
 
       const generatedStyles: ThemedStyleType = this.safe(styles[component], (componentStyles) => {
@@ -70,7 +70,7 @@ export class StyleConsumerService {
     });
   }
 
-  private getDerivedStyleMeta<P extends StyledComponentProps>(mapping: ComponentMappingType,
+  private getDerivedStyleMeta<P extends StyledComponentProps>(mapping: ControlMappingType,
                                                               props: P): ComponentStyleMetaType {
 
     const variantProps: Partial<P> = this.getDerivedVariants(mapping, props);
@@ -88,40 +88,40 @@ export class StyleConsumerService {
     };
   }
 
-  private getDefaultAppearance(mapping: ComponentMappingType): string {
+  private getDefaultAppearance(mapping: ControlMappingType): string {
     return Object.keys(mapping.meta.appearances).find((appearance: string): boolean => {
       return mapping.meta.appearances[appearance].default === true;
     });
   }
 
-  private getDefaultVariants(mapping: ComponentMappingType): { [key: string]: any } {
-    return this.transformObject(mapping.meta.variants, (variants, group: string): string | undefined => {
+  private getDefaultVariants(mapping: ControlMappingType): { [key: string]: any } {
+    return this.transformObject(mapping.meta.variantGroups, (variants, group: string): string | undefined => {
       return Object.keys(variants[group]).find((variant: string): boolean => {
 
         return variants[group][variant].default === true;
       });
     });
   }
 
-  private getDefaultStates(mapping: ComponentMappingType): { [key: string]: any } {
+  private getDefaultStates(mapping: ControlMappingType): { [key: string]: any } {
     return this.transformObject(mapping.meta.states, (states, state: string): boolean | undefined => {
       const isDefault: boolean = states[state].default === true;
 
       return isDefault ? isDefault : undefined;
     });
   }
 
-  private getDerivedVariants<P extends StyledComponentProps>(mapping: ComponentMappingType,
+  private getDerivedVariants<P extends StyledComponentProps>(mapping: ControlMappingType,
                                                              props: P): Partial<P> {
 
     return this.transformObject(props, (p: P, prop: string): string | undefined => {
-      const isVariant: boolean = Object.keys(mapping.meta.variants).includes(prop);
+      const isVariant: boolean = Object.keys(mapping.meta.variantGroups).includes(prop);
 
       return isVariant ? p[prop] : undefined;
     });
   }
 
-  private getDerivedStates<P extends StyledComponentProps>(mapping: ComponentMappingType,
+  private getDerivedStates<P extends StyledComponentProps>(mapping: ControlMappingType,
                                                            props: P): Partial<P> {
 
     return this.transformObject(props, (p: P, prop: string): boolean => {

diff --git a/src/framework/ui/avatar/avatar.spec.config.ts b/src/framework/ui/avatar/avatar.spec.config.ts
@@ -5,7 +5,7 @@ export const mapping: ThemeMappingType = {
   'Avatar': {
     'meta': {
       'scope': 'all',
-      'mapping': {
+      'parameters': {
         'roundCoefficient': {
           'type': 'number',
         },
@@ -24,7 +24,7 @@ export const mapping: ThemeMappingType = {
           'default': true,
         },
       },
-      'variants': {
+      'variantGroups': {
         'shape': {
           'round': {
             'default': true,
@@ -50,12 +50,12 @@ export const mapping: ThemeMappingType = {
       },
       'states': {},
     },
-    'appearance': {
+    'appearances': {
       'default': {
         'mapping': {
           'margin': 16,
         },
-        'variant': {
+        'variantGroups': {
           'shape': {
             'round': {
               'roundCoefficient': 0.5,

diff --git a/src/framework/ui/button/button.component.tsx b/src/framework/ui/button/button.component.tsx
@@ -64,16 +64,37 @@ export class Button extends React.Component<Props> {
   };
 
   private getComponentStyle = (style: StyleType): StyleType => {
-    const { text, icon, ...container } = style;
+    const {
+      textColor,
+      textFontSize,
+      textFontWeight,
+      textMarginHorizontal,
+      iconWidth,
+      iconHeight,
+      iconTintColor,
+      iconMarginHorizontal,
+      ...containerParameters
+    } = style;
+
     const alignment: ButtonAlignment = ButtonAlignments.parse(this.props.alignment, ALIGNMENT_DEFAULT);
 
     return {
       container: {
-        ...container,
+        ...containerParameters,
         flexDirection: alignment.flex(),
       },
-      text: text,
-      icon: icon,
+      text: {
+        color: textColor,
+        fontSize: textFontSize,
+        fontWeight: textFontWeight,
+        marginHorizontal: textMarginHorizontal,
+      },
+      icon: {
+        width: iconWidth,
+        height: iconHeight,
+        tintColor: iconTintColor,
+        marginHorizontal: iconMarginHorizontal,
+      },
     };
   };