fix(ui): top-navigation-bar fix (#392)

akveo · May 17, 2019 · 4410486 · 4410486
1 parent 735edd3
commit 4410486
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 130 deletions.
diff --git a/src/framework/ui/support/tests/mapping.json b/src/framework/ui/support/tests/mapping.json
@@ -1,5 +1,4 @@
 {
-  "$schema": "./node_modules/@eva/core/schema/schema.json",
   "version": 1.0,
   "components": {
     "Avatar": {
@@ -2688,15 +2687,6 @@
           },
           "subtitleColor": {
             "type": "string"
-          },
-          "actionWidth": {
-            "type": "number"
-          },
-          "actionHeight": {
-            "type": "number"
-          },
-          "actionMarginHorizontal": {
-            "type": "number"
           }
         },
         "appearances": {
@@ -2730,10 +2720,7 @@
             "subtitleFontSize": 11,
             "subtitleLineHeight": 16,
             "subtitleFontWeight": "400",
-            "subtitleColor": "color-basic-600",
-            "actionWidth": 24,
-            "actionHeight": 24,
-            "actionMarginHorizontal": 8
+            "subtitleColor": "color-basic-600"
           },
           "variantGroups": {
             "alignment": {
@@ -2763,7 +2750,7 @@
           "iconTintColor": {
             "type": "string"
           },
-          "marginHorizontal": {
+          "iconMarginHorizontal": {
             "type": "number"
           }
         },
@@ -2785,6 +2772,9 @@
         "default": {
           "mapping": {
             "iconTintColor": "font-primary-color",
+            "iconWidth": 24,
+            "iconHeight": 24,
+            "iconMarginHorizontal": 8,
             "state": {
               "active": {
                 "iconTintColor": "color-basic-900"

diff --git a/src/framework/ui/topNavigation/topNavigation.component.tsx b/src/framework/ui/topNavigation/topNavigation.component.tsx
@@ -19,10 +19,6 @@ import {
   StyleType,
 } from '@kitten/theme';
 import { TopNavigationActionProps } from './topNavigationAction.component';
-import {
-  TopNavigationAlignment,
-  TopNavigationAlignments,
-} from './type';
 import {
   Text,
   TextProps,
@@ -38,7 +34,7 @@ interface ComponentProps {
   titleStyle?: StyleProp<TextStyle>;
   subtitle?: string;
   subtitleStyle?: StyleProp<TextStyle>;
-  alignment?: string | TopNavigationAlignment;
+  alignment?: 'start' | 'center';
   leftControl?: ActionElement;
   rightControls?: ActionElementProp;
 }
@@ -55,8 +51,8 @@ export type TopNavigationProps = StyledComponentProps & ViewProps & ComponentPro
  *
  * @property {string} subtitle - Determines the subtitle of the component.
  *
- * @property {string | TopNavigationAlignment} alignment - Determines the appearance of the component.
- * Can be 'default' | 'titleCentered'. By default appearance is 'default'.
+ * @property {string} alignment - Determines the appearance of the component.
+ * Can be 'center' | 'start'. By default appearance is 'start'.
  *
  * @property {React.ReactElement<TopNavigationActionProps>} leftControl - Determines the left control
  * of the component.
@@ -135,12 +131,24 @@ export class TopNavigationComponent extends React.Component<TopNavigationProps>
 
   static styledComponentName: string = 'TopNavigation';
 
+  private getAlignmentDependentStyles = (): StyleType | null => {
+    const { alignment } = this.props;
+
+    if (alignment === 'center') {
+      return {
+        container: styles.containerCentered,
+        titleContainer: styles.titleContainerCentered,
+      };
+    } else {
+      return {
+        rightControlsContainer: styles.rightControlsContainerStart,
+      };
+    }
+  };
+
   private getComponentStyle = (source: StyleType): StyleType => {
     const {
       style,
-      alignment: alignmentValue,
-      leftControl,
-      rightControls,
       titleStyle,
       subtitleStyle,
     } = this.props;
@@ -156,27 +164,21 @@ export class TopNavigationComponent extends React.Component<TopNavigationProps>
       subtitleLineHeight,
       subtitleFontWeight,
       subtitleColor,
-      actionWidth,
-      actionHeight,
-      actionMarginHorizontal,
       ...containerStyle
     } = source;
 
-    const leftControlsCount: number = React.Children.count(leftControl);
-    const rightControlsCount: number = React.Children.count(rightControls);
-    const actionFrameWidth: number = actionWidth + actionMarginHorizontal;
-
-    const alignment: TopNavigationAlignment = TopNavigationAlignments.parse(alignmentValue);
+    const alignmentDependentStyles: StyleType = this.getAlignmentDependentStyles();
 
     return {
       container: {
         ...containerStyle,
         ...styles.container,
+        ...alignmentDependentStyles.container,
         ...StyleSheet.flatten(style),
       },
       titleContainer: {
         ...styles.titleContainer,
-        marginLeft: alignment.margin(leftControlsCount, rightControlsCount, actionFrameWidth),
+        ...alignmentDependentStyles.titleContainer,
       },
       title: {
         textAlign: titleTextAlign,
@@ -196,13 +198,11 @@ export class TopNavigationComponent extends React.Component<TopNavigationProps>
         ...styles.subtitle,
         ...StyleSheet.flatten(subtitleStyle),
       },
-      action: {
-        width: actionWidth,
-        height: actionHeight,
-        marginHorizontal: actionMarginHorizontal,
-      },
       leftControlContainer: styles.leftControlContainer,
-      rightControlsContainer: styles.rightControlsContainer,
+      rightControlsContainer: {
+        ...styles.rightControlsContainer,
+        ...alignmentDependentStyles.rightControlsContainer,
+      },
     };
   };
 
@@ -214,10 +214,10 @@ export class TopNavigationComponent extends React.Component<TopNavigationProps>
     );
   };
 
-  private renderActionElements(source: ActionElementProp, style: StyleProp<ViewStyle>): ActionElement[] {
-    return React.Children.map(source, (element: ActionElement): ActionElement => {
+  private renderActionElements(source: ActionElementProp): ActionElement[] {
+    return React.Children.map(source, (element: ActionElement, index: number): ActionElement => {
       return React.cloneElement(element, {
-        style: [style, element.props.style],
+        key: index,
       });
     });
   }
@@ -228,8 +228,8 @@ export class TopNavigationComponent extends React.Component<TopNavigationProps>
     return [
       isValidString(title) && this.renderTextElement(title, style.title),
       isValidString(subtitle) && this.renderTextElement(subtitle, style.subtitle),
-      leftControl && this.renderActionElements(leftControl, style.action),
-      rightControls && this.renderActionElements(rightControls, style.action),
+      leftControl && this.renderActionElements(leftControl),
+      rightControls && this.renderActionElements(rightControls),
     ];
   };
 
@@ -275,8 +275,14 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
   },
-  titleContainer: {
-    flex: 1,
+  containerCentered: {
+    justifyContent: 'space-between',
+  },
+  titleContainer: {},
+  titleContainerCentered: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center',
   },
   title: {},
   subtitle: {},
@@ -288,6 +294,10 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     zIndex: 1,
   },
+  rightControlsContainerStart: {
+    flex: 1,
+    justifyContent: 'flex-end',
+  },
 });
 
 export const TopNavigation = styled<TopNavigationProps>(TopNavigationComponent);
diff --git a/src/framework/ui/topNavigation/topNavigationAction.component.tsx b/src/framework/ui/topNavigation/topNavigationAction.component.tsx
@@ -55,16 +55,23 @@ class TopNavigationActionComponent extends React.Component<TopNavigationActionPr
   };
 
   private getComponentStyle = (source: StyleType): StyleType => {
-    const { iconTintColor, ...containerParameters } = source;
+    const {
+      iconTintColor,
+      iconWidth,
+      iconHeight,
+      iconMarginHorizontal,
+    } = source;
 
     return {
       container: {
-        ...containerParameters,
+        marginHorizontal: iconMarginHorizontal,
         ...styles.container,
         ...StyleSheet.flatten(this.props.style),
       },
       icon: {
         tintColor: iconTintColor,
+        width: iconWidth,
+        height: iconHeight,
         ...styles.icon,
       },
     };
@@ -95,9 +102,7 @@ class TopNavigationActionComponent extends React.Component<TopNavigationActionPr
 
 const styles = StyleSheet.create({
   container: {},
-  icon: {
-    flex: 1,
-  },
+  icon: {},
 });
 
 export const TopNavigationAction = styled<TopNavigationActionProps>(TopNavigationActionComponent);
diff --git a/src/framework/ui/topNavigation/type.ts b/src/framework/ui/topNavigation/type.ts
diff --git a/src/playground/app.json b/src/playground/app.json
@@ -12,6 +12,11 @@
     "orientation": "portrait",
     "packagerOpts": {
       "config": "./metro.config.js"
+    },
+    "androidStatusBarColor": "#3366FF",
+    "androidStatusBar": {
+      "barStyle": "light-content",
+      "backgroundColor": "#3366FF"
     }
   }
 }
diff --git a/src/playground/src/ui/screen/topNavigation.component.tsx b/src/playground/src/ui/screen/topNavigation.component.tsx
@@ -19,6 +19,7 @@ import {
 import {
   TopNavigation,
   TopNavigationAction,
+  TopNavigationActionProps,
 } from '@kitten/ui';
 
 type Props = & ThemedComponentProps & NavigationScreenProps;
@@ -29,30 +30,41 @@ const rightControlUri: string = 'https://akveo.github.io/eva-icons/fill/png/128/
 class TopNavigationScreen extends React.Component<Props> {
 
   static navigationOptions = {
-    header: (props: NavigationScreenProps) => (
-      <SafeAreaView style={styles.safeAreaView}>
-        <TopNavigation
-          title='Title'
-          subtitle='Secondary Text'
-          leftControl={
-            <TopNavigationAction
-              icon={(style: StyleType) => <Image source={{ uri: leftControlUri }} style={style}/>}
-              onPress={() => props.navigation.goBack(null)}
-            />
-          }
-          rightControls={[
-            <TopNavigationAction
-              icon={(style: StyleType) => <Image source={{ uri: rightControlUri }} style={style}/>}
-              onPress={() => Alert.alert('On first right action')}
-            />,
-            <TopNavigationAction
-              icon={(style: StyleType) => <Image source={{ uri: rightControlUri }} style={style}/>}
-              onPress={() => Alert.alert('On second right action')}
-            />,
-          ]}
-        />
-      </SafeAreaView>
-    ),
+    header: (props: NavigationScreenProps) => {
+      const renderLeftControl = (): React.ReactElement<TopNavigationActionProps> => {
+        return (
+          <TopNavigationAction
+            icon={(style: StyleType) => <Image source={{ uri: leftControlUri }} style={style}/>}
+            onPress={() => props.navigation.goBack(null)}
+          />
+        );
+      };
+
+      const renderRightControls = (): React.ReactElement<TopNavigationActionProps>[] => {
+        return ([
+          <TopNavigationAction
+            icon={(style: StyleType) => <Image source={{ uri: rightControlUri }} style={style}/>}
+            onPress={() => Alert.alert('On first right action')}
+          />,
+          <TopNavigationAction
+            icon={(style: StyleType) => <Image source={{ uri: rightControlUri }} style={style}/>}
+            onPress={() => Alert.alert('On second right action')}
+          />,
+        ]);
+      };
+
+      return (
+        <SafeAreaView style={styles.safeAreaView}>
+          <TopNavigation
+            title='Title'
+            alignment='center'
+            subtitle='Secondary Text'
+            leftControl={renderLeftControl()}
+            rightControls={renderRightControls()}
+          />
+        </SafeAreaView>
+      );
+    },
   };
 
   public render(): React.ReactNode {