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
akveo · Mar 7, 2019 · fb5e93d · fb5e93d
1 parent 47a4ed7
commit fb5e93d
Show file tree

Hide file tree

Showing 37 changed files with 550 additions and 370 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/framework/ui/button/button.component.tsx b/src/framework/ui/button/button.component.tsx
@@ -4,8 +4,6 @@ import {
   TouchableOpacityProps,
   GestureResponderEvent,
   StyleSheet,
-  ImageSourcePropType,
-  Image,
   ImageProps,
 } from 'react-native';
 import {
@@ -24,7 +22,7 @@ import {
 } from './type';
 
 interface ButtonProps {
-  icon?: ImageSourcePropType;
+  icon?: (style: StyleType) => React.ReactElement<ImageProps>;
   status?: string;
   size?: string;
   alignment?: string | ButtonAlignment;
@@ -79,51 +77,44 @@ export class Button extends React.Component<Props> {
     };
   };
 
-  private createTextElement = (style: StyleType): React.ReactElement<TextProps> => {
+  private renderTextElement = (style: StyleType): React.ReactElement<TextProps> => {
     const { children: text } = this.props;
 
     return (
       <Text
-        style={[style, strictStyles.text]}
+        style={[style, styles.text]}
         key={1}>
         {text}
       </Text>
     );
   };
 
-  private createImageElement = (style: StyleType): React.ReactElement<ImageProps> => {
-    const { icon: image } = this.props;
-
-    return (
-      <Image
-        key={0}
-        style={[style, strictStyles.icon]}
-        source={image}
-      />
-    );
+  private renderImageElement = (style: StyleType): React.ReactElement<ImageProps> | null => {
+    const { icon } = this.props;
+    return icon ? React.cloneElement(icon(style), { key: 2 }) : null;
   };
 
-  private createComponentChildren = (style: StyleType): React.ReactNode => {
+  private renderComponentChildren = (style: StyleType): React.ReactNode => {
     const { icon, children } = this.props;
 
     const hasIcon: boolean = icon !== undefined;
     const hasText: boolean = children !== undefined;
 
     return [
-      hasIcon ? this.createImageElement(style.icon) : undefined,
-      hasText ? this.createTextElement(style.text) : undefined,
+      hasIcon ? this.renderImageElement(style.icon) : undefined,
+      hasText ? this.renderTextElement(style.text) : undefined,
     ];
   };
 
   public render(): React.ReactElement<TouchableOpacityProps> {
     const { style, themedStyle, ...derivedProps } = this.props;
     const { container, ...componentStyles } = this.getComponentStyle(themedStyle);
-    const componentChildren: React.ReactNode = this.createComponentChildren(componentStyles);
+    const componentChildren: React.ReactNode = this.renderComponentChildren(componentStyles);
 
     return (
       <TouchableOpacity
         {...derivedProps}
-        style={[container, style, strictStyles.container]}
+        style={[container, style, styles.container]}
         activeOpacity={1.0}
         onPress={this.onPress}
         onPressIn={this.onPressIn}
@@ -134,7 +125,7 @@ export class Button extends React.Component<Props> {
   }
 }
 
-const strictStyles = StyleSheet.create({
+const styles = StyleSheet.create({
   container: {
     justifyContent: 'space-evenly',
     alignItems: 'center',

diff --git a/src/framework/ui/button/button.spec.tsx b/src/framework/ui/button/button.spec.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {
-  ImageSourcePropType,
+  Image,
   TouchableOpacity,
 } from 'react-native';
 import {
@@ -13,6 +13,7 @@ import {
   styled,
   StyleProvider,
   StyleProviderProps,
+  StyleType,
 } from '@kitten/theme';
 import {
   Button as ButtonComponent,
@@ -49,7 +50,11 @@ describe('@button: matches snapshot', () => {
 
   describe('* appearance', () => {
 
-    const icon: ImageSourcePropType = { uri: 'https://akveo.github.io/eva-icons/fill/png/128/star.png' };
+    const icon = (style: StyleType) => (
+      <Image
+        source={{ uri: 'https://akveo.github.io/eva-icons/fill/png/128/star.png' }}
+        style={style}/>
+    );
     const text: React.ReactText = 'BUTTON';
 
     it('* empty', () => {

diff --git a/src/framework/ui/button/button.spec.tsx.snap b/src/framework/ui/button/button.spec.tsx.snap
@@ -3,23 +3,23 @@
 exports[`@button: matches snapshot * appearance * empty 1`] = `
 <TouchableOpacity
   activeOpacity={1}
-  alignment="left"
-  appearance="filled"
+  appearance="default"
   dispatch={[Function]}
   onPress={[Function]}
   onPressIn={[Function]}
   onPressOut={[Function]}
+  size="medium"
+  status="primary"
   style={
     Array [
+      undefined,
       Object {
-        "backgroundColor": "#2196F3",
         "borderRadius": 6,
         "flexDirection": "row",
         "minHeight": 24,
         "minWidth": 24,
         "padding": 4,
       },
-      undefined,
       Object {
         "alignItems": "center",
         "justifyContent": "space-evenly",
@@ -45,28 +45,24 @@ exports[`@button: matches snapshot * appearance * empty 1`] = `
 exports[`@button: matches snapshot * appearance * icon 1`] = `
 <TouchableOpacity
   activeOpacity={1}
-  alignment="left"
-  appearance="filled"
+  appearance="default"
   dispatch={[Function]}
-  icon={
-    Object {
-      "uri": "https://akveo.github.io/eva-icons/fill/png/128/star.png",
-    }
-  }
+  icon={[Function]}
   onPress={[Function]}
   onPressIn={[Function]}
   onPressOut={[Function]}
+  size="medium"
+  status="primary"
   style={
     Array [
+      undefined,
       Object {
-        "backgroundColor": "#2196F3",
         "borderRadius": 6,
         "flexDirection": "row",
         "minHeight": 24,
         "minWidth": 24,
         "padding": 4,
       },
-      undefined,
       Object {
         "alignItems": "center",
         "justifyContent": "space-evenly",
@@ -94,6 +90,15 @@ exports[`@button: matches snapshot * appearance * icon 1`] = `
       }
     }
     style={
+      Array [
+        Object {
+          "height": 14,
+          "marginHorizontal": 4,
+          "tintColor": "#ffffff",
+          "width": 14,
+        },
+        Object {},
+      ]
       Array [
         Object {
           "height": 13,
@@ -103,6 +108,11 @@ exports[`@button: matches snapshot * appearance * icon 1`] = `
         },
         Object {},
       ]
+      Object {
+        "height": 14,
+        "tintColor": "#ffffff",
+        "width": 14,
+      }
     }
   />
 </TouchableOpacity>
@@ -111,28 +121,24 @@ exports[`@button: matches snapshot * appearance * icon 1`] = `
 exports[`@button: matches snapshot * appearance * icon and text 1`] = `
 <TouchableOpacity
   activeOpacity={1}
-  alignment="left"
-  appearance="filled"
+  appearance="default"
   dispatch={[Function]}
-  icon={
-    Object {
-      "uri": "https://akveo.github.io/eva-icons/fill/png/128/star.png",
-    }
-  }
+  icon={[Function]}
   onPress={[Function]}
   onPressIn={[Function]}
   onPressOut={[Function]}
+  size="medium"
+  status="primary"
   style={
     Array [
+      undefined,
       Object {
-        "backgroundColor": "#2196F3",
         "borderRadius": 6,
         "flexDirection": "row",
         "minHeight": 24,
         "minWidth": 24,
         "padding": 4,
       },
-      undefined,
       Object {
         "alignItems": "center",
         "justifyContent": "space-evenly",
@@ -160,6 +166,20 @@ exports[`@button: matches snapshot * appearance * icon and text 1`] = `
       }
     }
     style={
+      Object {
+        "height": 14,
+        "tintColor": "#ffffff",
+        "width": 14,
+      }
+      Array [
+        Object {
+          "height": 14,
+          "marginHorizontal": 4,
+          "tintColor": "#ffffff",
+          "width": 14,
+        },
+        Object {},
+      ]
       Array [
         Object {
           "height": 13,
@@ -192,23 +212,23 @@ exports[`@button: matches snapshot * appearance * icon and text 1`] = `
 exports[`@button: matches snapshot * appearance * text 1`] = `
 <TouchableOpacity
   activeOpacity={1}
-  alignment="left"
-  appearance="filled"
+  appearance="default"
   dispatch={[Function]}
   onPress={[Function]}
   onPressIn={[Function]}
   onPressOut={[Function]}
+  size="medium"
+  status="primary"
   style={
     Array [
+      undefined,
       Object {
-        "backgroundColor": "#2196F3",
         "borderRadius": 6,
         "flexDirection": "row",
         "minHeight": 24,
         "minWidth": 24,
         "padding": 4,
       },
-      undefined,
       Object {
         "alignItems": "center",
         "justifyContent": "space-evenly",
@@ -250,23 +270,23 @@ exports[`@button: matches snapshot * appearance * text 1`] = `
 exports[`@button: matches snapshot * interaction * stateless 1`] = `
 <TouchableOpacity
   activeOpacity={1}
-  alignment="left"
-  appearance="filled"
+  appearance="default"
   dispatch={[Function]}
   onPress={[Function]}
   onPressIn={[Function]}
   onPressOut={[Function]}
+  size="medium"
+  status="primary"
   style={
     Array [
+      undefined,
       Object {
-        "backgroundColor": "#2196F3",
         "borderRadius": 6,
         "flexDirection": "row",
         "minHeight": 24,
         "minWidth": 24,
         "padding": 4,
       },
-      undefined,
       Object {
         "alignItems": "center",
         "justifyContent": "space-evenly",

diff --git a/src/framework/ui/buttonGroup/buttonGroup.component.tsx b/src/framework/ui/buttonGroup/buttonGroup.component.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import {
-  Group,
   StyleSheet,
   View,
   ViewProps,
@@ -54,7 +53,7 @@ export class ButtonGroup extends React.Component<Props> {
     }
   };
 
-  private createComponentChild = (element: ButtonElement, index: number, style: StyleType): ButtonElement => {
+  private renderComponentChild = (element: ButtonElement, index: number, style: StyleType): ButtonElement => {
     const { appearance, size, children } = this.props;
     const { style: elementStyle, ...derivedProps } = element.props;
 
@@ -70,29 +69,31 @@ export class ButtonGroup extends React.Component<Props> {
     });
   };
 
-  private createComponentChildren = (source: ButtonElement | ButtonElement[], style: StyleType): ButtonElement[] => {
+  private renderComponentChildren = (source: ButtonElement | ButtonElement[],
+                                     style: StyleType): ButtonElement[] => {
+
     return React.Children.map(source, (element: ButtonElement, index: number): ButtonElement => {
-      return this.createComponentChild(element, index, style);
+      return this.renderComponentChild(element, index, style);
     });
   };
 
   public render(): React.ReactElement<ViewProps> {
     const { style, themedStyle, children, ...derivedProps } = this.props;
     const { container, button } = this.getComponentStyle(themedStyle);
 
-    const componentChildren: ButtonElement[] = this.createComponentChildren(children, button);
+    const componentChildren: ButtonElement[] = this.renderComponentChildren(children, button);
 
     return (
       <View
         {...derivedProps}
-        style={[container, style, strictStyles.container]}>
+        style={[container, style, styles.container]}>
         {componentChildren}
       </View>
     );
   }
 }
 
-const strictStyles = StyleSheet.create({
+const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
   },