feat(framework): enhancements

akveo · Apr 4, 2019 · fb8ae55 · fb8ae55
1 parent 3b807ac
commit fb8ae55
Show file tree

Hide file tree

Showing 7 changed files with 100 additions and 154 deletions.
diff --git a/src/framework/ui/button/button.spec.tsx.snap b/src/framework/ui/button/button.spec.tsx.snap
@@ -12,21 +12,16 @@ exports[`@button: matches snapshot * appearance * empty 1`] = `
   size="medium"
   status="primary"
   style={
-    Array [
-      Object {
-        "backgroundColor": "#2196F3",
-        "borderRadius": 6,
-        "flexDirection": "row",
-        "minHeight": 24,
-        "minWidth": 24,
-        "padding": 4,
-      },
-      undefined,
-      Object {
-        "alignItems": "center",
-        "justifyContent": "space-evenly",
-      },
-    ]
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#2196F3",
+      "borderRadius": 6,
+      "flexDirection": "row",
+      "justifyContent": "space-evenly",
+      "minHeight": 24,
+      "minWidth": 24,
+      "padding": 4,
+    }
   }
   theme={
     Object {
@@ -62,21 +57,16 @@ exports[`@button: matches snapshot * appearance * icon 1`] = `
   size="medium"
   status="primary"
   style={
-    Array [
-      Object {
-        "backgroundColor": "#2196F3",
-        "borderRadius": 6,
-        "flexDirection": "row",
-        "minHeight": 24,
-        "minWidth": 24,
-        "padding": 4,
-      },
-      undefined,
-      Object {
-        "alignItems": "center",
-        "justifyContent": "space-evenly",
-      },
-    ]
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#2196F3",
+      "borderRadius": 6,
+      "flexDirection": "row",
+      "justifyContent": "space-evenly",
+      "minHeight": 24,
+      "minWidth": 24,
+      "padding": 4,
+    }
   }
   theme={
     Object {
@@ -128,21 +118,16 @@ exports[`@button: matches snapshot * appearance * icon and text 1`] = `
   size="medium"
   status="primary"
   style={
-    Array [
-      Object {
-        "backgroundColor": "#2196F3",
-        "borderRadius": 6,
-        "flexDirection": "row",
-        "minHeight": 24,
-        "minWidth": 24,
-        "padding": 4,
-      },
-      undefined,
-      Object {
-        "alignItems": "center",
-        "justifyContent": "space-evenly",
-      },
-    ]
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#2196F3",
+      "borderRadius": 6,
+      "flexDirection": "row",
+      "justifyContent": "space-evenly",
+      "minHeight": 24,
+      "minWidth": 24,
+      "padding": 4,
+    }
   }
   theme={
     Object {
@@ -208,21 +193,16 @@ exports[`@button: matches snapshot * appearance * text 1`] = `
   size="medium"
   status="primary"
   style={
-    Array [
-      Object {
-        "backgroundColor": "#2196F3",
-        "borderRadius": 6,
-        "flexDirection": "row",
-        "minHeight": 24,
-        "minWidth": 24,
-        "padding": 4,
-      },
-      undefined,
-      Object {
-        "alignItems": "center",
-        "justifyContent": "space-evenly",
-      },
-    ]
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#2196F3",
+      "borderRadius": 6,
+      "flexDirection": "row",
+      "justifyContent": "space-evenly",
+      "minHeight": 24,
+      "minWidth": 24,
+      "padding": 4,
+    }
   }
   theme={
     Object {
@@ -273,21 +253,16 @@ exports[`@button: matches snapshot * interaction * stateless 1`] = `
   size="medium"
   status="primary"
   style={
-    Array [
-      Object {
-        "backgroundColor": "#2196F3",
-        "borderRadius": 6,
-        "flexDirection": "row",
-        "minHeight": 24,
-        "minWidth": 24,
-        "padding": 4,
-      },
-      undefined,
-      Object {
-        "alignItems": "center",
-        "justifyContent": "space-evenly",
-      },
-    ]
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#2196F3",
+      "borderRadius": 6,
+      "flexDirection": "row",
+      "justifyContent": "space-evenly",
+      "minHeight": 24,
+      "minWidth": 24,
+      "padding": 4,
+    }
   }
   theme={
     Object {

diff --git a/src/framework/ui/input/input.spec.tsx.snap b/src/framework/ui/input/input.spec.tsx.snap
@@ -3,22 +3,16 @@
 exports[`@input: matches snapshot * appearance * icon 1`] = `
 <View
   style={
-    Array [
-      Object {
-        "backgroundColor": "#f7f8fa",
-        "borderColor": "transparent",
-        "borderRadius": 6,
-        "borderWidth": 2,
-        "minHeight": 48,
-        "paddingHorizontal": 6,
-        "paddingVertical": 12,
-      },
-      Object {},
-      Object {
-        "flex": 1,
-        "flexDirection": "row",
-      },
-    ]
+    Object {
+      "backgroundColor": "#f7f8fa",
+      "borderColor": "transparent",
+      "borderRadius": 6,
+      "borderWidth": 2,
+      "flexDirection": "row",
+      "minHeight": 48,
+      "paddingHorizontal": 6,
+      "paddingVertical": 12,
+    }
   }
 >
   <TextInput
@@ -31,24 +25,11 @@ exports[`@input: matches snapshot * appearance * icon 1`] = `
     onFocus={[Function]}
     status="primary"
     style={
-      Array [
-        Object {
-          "color": "#a6aebd",
-          "marginHorizontal": 6,
-        },
-        Object {
-          "color": undefined,
-          "fontFamily": undefined,
-          "fontSize": undefined,
-          "fontStyle": undefined,
-          "fontWeight": undefined,
-          "letterSpacing": undefined,
-          "textAlign": undefined,
-        },
-        Object {
-          "flex": 1,
-        },
-      ]
+      Object {
+        "color": "#a6aebd",
+        "flex": 1,
+        "marginHorizontal": 6,
+      }
     }
     theme={
       Object {
@@ -91,22 +72,16 @@ exports[`@input: matches snapshot * appearance * icon 1`] = `
 exports[`@input: matches snapshot * interaction * stateless 1`] = `
 <View
   style={
-    Array [
-      Object {
-        "backgroundColor": "#f7f8fa",
-        "borderColor": "transparent",
-        "borderRadius": 6,
-        "borderWidth": 2,
-        "minHeight": 48,
-        "paddingHorizontal": 6,
-        "paddingVertical": 12,
-      },
-      Object {},
-      Object {
-        "flex": 1,
-        "flexDirection": "row",
-      },
-    ]
+    Object {
+      "backgroundColor": "#f7f8fa",
+      "borderColor": "transparent",
+      "borderRadius": 6,
+      "borderWidth": 2,
+      "flexDirection": "row",
+      "minHeight": 48,
+      "paddingHorizontal": 6,
+      "paddingVertical": 12,
+    }
   }
 >
   <TextInput
@@ -118,24 +93,11 @@ exports[`@input: matches snapshot * interaction * stateless 1`] = `
     onFocus={[Function]}
     status="primary"
     style={
-      Array [
-        Object {
-          "color": "#a6aebd",
-          "marginHorizontal": 6,
-        },
-        Object {
-          "color": undefined,
-          "fontFamily": undefined,
-          "fontSize": undefined,
-          "fontStyle": undefined,
-          "fontWeight": undefined,
-          "letterSpacing": undefined,
-          "textAlign": undefined,
-        },
-        Object {
-          "flex": 1,
-        },
-      ]
+      Object {
+        "color": "#a6aebd",
+        "flex": 1,
+        "marginHorizontal": 6,
+      }
     }
     theme={
       Object {

diff --git a/src/framework/ui/list/list.spec.tsx b/src/framework/ui/list/list.spec.tsx
@@ -191,7 +191,7 @@ describe('@list-item: component checks', () => {
   it('* emits onPress with correct args', async () => {
     const pressIndex: number = 0;
 
-    const onPress = jest.fn((event: GestureResponderEvent, index: number) => {
+    const onPress = jest.fn((index: number) => {
       expect(index).toEqual(pressIndex);
     });
 

diff --git a/src/framework/ui/list/list.spec.tsx.snap b/src/framework/ui/list/list.spec.tsx.snap
@@ -331,7 +331,11 @@ exports[`@list-item: template matches snapshot * with accessory 1`] = `
     }
     style={
       Array [
-        0,
+        Object {
+          "height": 48,
+          "marginHorizontal": 6,
+          "width": 48,
+        },
         Object {
           "height": 48,
           "marginHorizontal": 6,
@@ -408,7 +412,12 @@ exports[`@list-item: template matches snapshot * with icon 1`] = `
           "tintColor": "#A6AEBD",
           "width": 48,
         },
-        0,
+        Object {
+          "height": 48,
+          "marginHorizontal": 6,
+          "tintColor": "#A6AEBD",
+          "width": 48,
+        },
         Object {},
       ]
     }

diff --git a/src/framework/ui/overflowMenu/overflowMenu.component.tsx b/src/framework/ui/overflowMenu/overflowMenu.component.tsx
@@ -26,7 +26,7 @@ interface OverflowMenuProps {
   children: React.ReactElement<any>;
   items: OverflowMenuItemType[];
   size?: string;
-  onSelect?: (event: GestureResponderEvent, index: number) => void;
+  onSelect?: (index: number, event: GestureResponderEvent) => void;
 }
 
 const Popover = styled<PopoverProps>(PopoverComponent);
@@ -49,9 +49,9 @@ export class OverflowMenu extends React.Component<Props> {
   };
 
 
-  private onSelect = (event: GestureResponderEvent, index: number): void => {
+  private onSelect = (index: number, event: GestureResponderEvent): void => {
     if (this.props.onSelect) {
-      this.props.onSelect(event, index);
+      this.props.onSelect(index, event);
     }
   };
 

diff --git a/src/framework/ui/overflowMenu/overflowMenuItem.component.tsx b/src/framework/ui/overflowMenu/overflowMenuItem.component.tsx
@@ -38,29 +38,29 @@ export class OverflowMenuItem extends React.Component<Props> {
 
   private onPress = (event: GestureResponderEvent) => {
     if (this.props.onPress) {
-      this.props.onPress(event, this.props.index);
+      this.props.onPress(this.props.index, event);
     }
   };
 
   private onPressIn = (event: GestureResponderEvent) => {
     this.props.dispatch([Interaction.ACTIVE]);
 
     if (this.props.onPressIn) {
-      this.props.onPressIn(event, this.props.index);
+      this.props.onPressIn(this.props.index, event);
     }
   };
 
   private onPressOut = (event: GestureResponderEvent) => {
     this.props.dispatch([]);
 
     if (this.props.onPressOut) {
-      this.props.onPressOut(event, this.props.index);
+      this.props.onPressOut(this.props.index, event);
     }
   };
 
   private onLongPress = (event: GestureResponderEvent) => {
     if (this.props.onLongPress) {
-      this.props.onLongPress(event, this.props.index);
+      this.props.onLongPress(this.props.index, event);
     }
   };
 

diff --git a/src/playground/src/app.component.tsx b/src/playground/src/app.component.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { default as mapping } from '@eva/eva';
-import { default as theme } from '@eva/theme-eva';
+import { theme } from '@eva/theme-eva';
 import { ApplicationProvider } from '@kitten/theme';
 import { withNavigation } from './navigation';
 import * as Screens from './ui/screen';