fix(ui): container component interactions (#367)

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

@@ -20,8 +20,8 @@ import {
   Props as TextProps,
 } from '../text/text.component';
 import {
-  ButtonAlignment,
-  ButtonAlignments,
+  ButtonIconAlignment,
+  ButtonIconAlignments,
 } from './type';
 import { TextStyleProps } from '../common/props';
 
@@ -30,20 +30,20 @@ interface ButtonProps {
   icon?: (style: StyleType) => React.ReactElement<ImageProps>;
   status?: string;
   size?: string;
-  alignment?: string | ButtonAlignment;
+  iconAlignment?: string | ButtonIconAlignment;
   children?: React.ReactText;
 }
 
 const Text = styled<TextProps>(TextComponent);
 
 export type Props = ButtonProps & StyledComponentProps & TouchableOpacityProps;
 
-const ALIGNMENT_DEFAULT: ButtonAlignment = ButtonAlignments.LEFT;
+const ALIGNMENT_DEFAULT: ButtonIconAlignment = ButtonIconAlignments.LEFT;
 
 export class Button extends React.Component<Props> {
 
   static defaultProps: Partial<Props> = {
-    alignment: 'left',
+    iconAlignment: 'left',
   };
 
   private onPress = (event: GestureResponderEvent) => {
@@ -84,7 +84,9 @@ export class Button extends React.Component<Props> {
       ...containerParameters
     } = style;
 
-    const alignment: ButtonAlignment = ButtonAlignments.parse(this.props.alignment, ALIGNMENT_DEFAULT);
+    const { iconAlignment } = this.props;
+
+    const alignment: ButtonIconAlignment = ButtonIconAlignments.parse(iconAlignment, ALIGNMENT_DEFAULT);
 
     return {
       container: {
@@ -164,6 +166,9 @@ const styles = StyleSheet.create({
     justifyContent: 'space-evenly',
     alignItems: 'center',
   },
-  text: {},
+  text: {
+    flexGrow: 1,
+    textAlign: 'center',
+  },
   icon: {},
 });

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

@@ -3,9 +3,9 @@
 exports[`@button: matches snapshot * appearance * empty 1`] = `
 <TouchableOpacity
   activeOpacity={1}
-  alignment="left"
   appearance="filled"
   dispatch={[Function]}
+  iconAlignment="left"
   onPress={[Function]}
   onPressIn={[Function]}
   onPressOut={[Function]}
@@ -133,10 +133,10 @@ exports[`@button: matches snapshot * appearance * empty 1`] = `
 exports[`@button: matches snapshot * appearance * icon 1`] = `
 <TouchableOpacity
   activeOpacity={1}
-  alignment="left"
   appearance="filled"
   dispatch={[Function]}
   icon={[Function]}
+  iconAlignment="left"
   onPress={[Function]}
   onPressIn={[Function]}
   onPressOut={[Function]}
@@ -280,10 +280,10 @@ exports[`@button: matches snapshot * appearance * icon 1`] = `
 exports[`@button: matches snapshot * appearance * icon and text 1`] = `
 <TouchableOpacity
   activeOpacity={1}
-  alignment="left"
   appearance="filled"
   dispatch={[Function]}
   icon={[Function]}
+  iconAlignment="left"
   onPress={[Function]}
   onPressIn={[Function]}
   onPressOut={[Function]}
@@ -425,9 +425,11 @@ exports[`@button: matches snapshot * appearance * icon and text 1`] = `
     style={
       Object {
         "color": "#ffffff",
+        "flexGrow": 1,
         "fontSize": 14,
         "fontWeight": "800",
         "marginHorizontal": 10,
+        "textAlign": "center",
       }
     }
   >
@@ -439,9 +441,9 @@ exports[`@button: matches snapshot * appearance * icon and text 1`] = `
 exports[`@button: matches snapshot * appearance * text 1`] = `
 <TouchableOpacity
   activeOpacity={1}
-  alignment="left"
   appearance="filled"
   dispatch={[Function]}
+  iconAlignment="left"
   onPress={[Function]}
   onPressIn={[Function]}
   onPressOut={[Function]}
@@ -568,9 +570,11 @@ exports[`@button: matches snapshot * appearance * text 1`] = `
     style={
       Object {
         "color": "#ffffff",
+        "flexGrow": 1,
         "fontSize": 14,
         "fontWeight": "800",
         "marginHorizontal": 10,
+        "textAlign": "center",
       }
     }
   >
@@ -582,9 +586,9 @@ exports[`@button: matches snapshot * appearance * text 1`] = `
 exports[`@button: matches snapshot * interaction * stateless 1`] = `
 <TouchableOpacity
   activeOpacity={1}
-  alignment="left"
   appearance="filled"
   dispatch={[Function]}
+  iconAlignment="left"
   onPress={[Function]}
   onPressIn={[Function]}
   onPressOut={[Function]}

src/framework/ui/button/type.ts

@@ -1,49 +1,49 @@
-export interface ButtonAlignment {
+export interface ButtonIconAlignment {
   rawValue: string;
 
   flex(): FlexAlignment;
 }
 
 export type FlexAlignment = 'row' | 'row-reverse';
 
-export class ButtonAlignments {
-  static LEFT: ButtonAlignment = new class implements ButtonAlignment {
+export class ButtonIconAlignments {
+  static LEFT: ButtonIconAlignment = new class implements ButtonIconAlignment {
     rawValue: string = 'left';
 
     flex(): FlexAlignment {
       return 'row';
     }
   };
 
-  static RIGHT: ButtonAlignment = new class implements ButtonAlignment {
+  static RIGHT: ButtonIconAlignment = new class implements ButtonIconAlignment {
     rawValue: string = 'right';
 
     flex(): FlexAlignment {
       return 'row-reverse';
     }
   };
 
-  static parse(value: string | ButtonAlignment, fallback?: ButtonAlignment): ButtonAlignment | undefined {
-    if (ButtonAlignments.typeOf(value)) {
+  static parse(value: string | ButtonIconAlignment, fallback?: ButtonIconAlignment): ButtonIconAlignment | undefined {
+    if (ButtonIconAlignments.typeOf(value)) {
       return value;
     }
 
-    return ButtonAlignments.parseString(value, fallback);
+    return ButtonIconAlignments.parseString(value, fallback);
   }
 
-  private static parseString(rawValue: string, fallback?: ButtonAlignment): ButtonAlignment | undefined {
+  private static parseString(rawValue: string, fallback?: ButtonIconAlignment): ButtonIconAlignment | undefined {
     switch (rawValue) {
-      case ButtonAlignments.LEFT.rawValue:
-        return ButtonAlignments.LEFT;
-      case ButtonAlignments.RIGHT.rawValue:
-        return ButtonAlignments.RIGHT;
+      case ButtonIconAlignments.LEFT.rawValue:
+        return ButtonIconAlignments.LEFT;
+      case ButtonIconAlignments.RIGHT.rawValue:
+        return ButtonIconAlignments.RIGHT;
       default:
         return fallback;
     }
   }
 
-  private static typeOf(value: any): value is ButtonAlignment {
-    const { rawValue } = (<ButtonAlignment>value);
+  private static typeOf(value: any): value is ButtonIconAlignment {
+    const { rawValue } = (<ButtonIconAlignment>value);
 
     return rawValue !== undefined;
   }

src/framework/ui/index.ts

@@ -101,8 +101,8 @@ import {
   Props as ViewPagerProps,
 } from './viewPager/viewPager.component';
 import {
-  ButtonAlignment,
-  ButtonAlignments,
+  ButtonIconAlignment,
+  ButtonIconAlignments,
 } from './button/type';
 import {
   Placement as PopoverPlacement,
@@ -193,8 +193,8 @@ export {
 };
 
 export {
-  ButtonAlignment,
-  ButtonAlignments,
+  ButtonIconAlignment,
+  ButtonIconAlignments,
   PopoverPlacement,
   PopoverPlacements,
   TopNavigationAlignment,

src/framework/ui/input/input.component.tsx

@@ -189,19 +189,20 @@ export class Input extends React.Component<Props> {
 }
 
 const styles = StyleSheet.create({
-  container: {
-    flexGrow: 1,
-  },
+  container: {},
   inputContainer: {
     flexDirection: 'row',
     alignItems: 'center',
+    width: '100%',
   },
   captionContainer: {
     flexDirection: 'row',
     alignItems: 'center',
   },
   text: {
-    flex: 1,
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: 'auto',
   },
   icon: {},
   label: {},

src/framework/ui/input/input.spec.tsx.snap

@@ -2,11 +2,7 @@
 
 exports[`@input: matches snapshot * appearance * icon 1`] = `
 <View
-  style={
-    Object {
-      "flexGrow": 1,
-    }
-  }
+  style={Object {}}
 >
   <View
     style={
@@ -20,6 +16,7 @@ exports[`@input: matches snapshot * appearance * icon 1`] = `
         "minHeight": 48,
         "paddingHorizontal": 8,
         "paddingVertical": 14,
+        "width": "100%",
       }
     }
   >
@@ -34,7 +31,9 @@ exports[`@input: matches snapshot * appearance * icon 1`] = `
       style={
         Object {
           "color": "#8992A3",
-          "flex": 1,
+          "flexBasis": "auto",
+          "flexGrow": 1,
+          "flexShrink": 1,
           "fontSize": 15,
           "lineHeight": 20,
           "marginHorizontal": 8,
@@ -175,11 +174,7 @@ exports[`@input: matches snapshot * appearance * icon 1`] = `
 
 exports[`@input: matches snapshot * appearance * label + caption 1`] = `
 <View
-  style={
-    Object {
-      "flexGrow": 1,
-    }
-  }
+  style={Object {}}
 >
   <ForwardRef(WrappingElement)
     style={
@@ -206,6 +201,7 @@ exports[`@input: matches snapshot * appearance * label + caption 1`] = `
         "minHeight": 48,
         "paddingHorizontal": 8,
         "paddingVertical": 14,
+        "width": "100%",
       }
     }
   >
@@ -220,7 +216,9 @@ exports[`@input: matches snapshot * appearance * label + caption 1`] = `
       style={
         Object {
           "color": "#8992A3",
-          "flex": 1,
+          "flexBasis": "auto",
+          "flexGrow": 1,
+          "flexShrink": 1,
           "fontSize": 15,
           "lineHeight": 20,
           "marginHorizontal": 8,
@@ -374,11 +372,7 @@ exports[`@input: matches snapshot * appearance * label + caption 1`] = `
 
 exports[`@input: matches snapshot * interaction * stateless 1`] = `
 <View
-  style={
-    Object {
-      "flexGrow": 1,
-    }
-  }
+  style={Object {}}
 >
   <View
     style={
@@ -392,6 +386,7 @@ exports[`@input: matches snapshot * interaction * stateless 1`] = `
         "minHeight": 48,
         "paddingHorizontal": 8,
         "paddingVertical": 14,
+        "width": "100%",
       }
     }
   >
@@ -406,7 +401,9 @@ exports[`@input: matches snapshot * interaction * stateless 1`] = `
       style={
         Object {
           "color": "#8992A3",
-          "flex": 1,
+          "flexBasis": "auto",
+          "flexGrow": 1,
+          "flexShrink": 1,
           "fontSize": 15,
           "lineHeight": 20,
           "marginHorizontal": 8,