From b4b264bb9e44b30c9f059afbf32ae05b39a007e5 Mon Sep 17 00:00:00 2001
From: Benjamin Reid <ben@simpleweb.co.uk>
Date: Thu, 16 Aug 2018 11:04:24 +0100
Subject: [PATCH] Fixes for layout components and lays out better structure

---
 .../templates/App/Components/Layout/index.js  | 104 ++++++++++--------
 .../templates/App/Components/Layout/styles.js |  32 +++++-
 2 files changed, 82 insertions(+), 54 deletions(-)

diff --git a/generators/base/templates/App/Components/Layout/index.js b/generators/base/templates/App/Components/Layout/index.js
index d193cbb..4fa0ee0 100644
--- a/generators/base/templates/App/Components/Layout/index.js
+++ b/generators/base/templates/App/Components/Layout/index.js
@@ -1,58 +1,66 @@
 // @flow
-import * as React from 'react';
-
-import { FullView, CenterView, ScrollView, PaddedView } from './styles';
+import * as React from "react";
+import {
+  View,
+  CenterVerticallyView,
+  FullView,
+  CenterView,
+  ScrollView,
+  PaddedView,
+} from "./styles";
 
 type Props = {
   children: React.Node,
   style?: any,
 };
 
-function Full(props: Props): React.Node {
-  const { children, style } = props;
-
-  return (
-    <FullView style={ style }>
-      {children}
-    </FullView>
-  );
-}
-
-function Center(props: Props): React.Node {
-  const { children, style } = props;
-
-  return (
-    <CenterView style={ style }>
-      {children}
-    </CenterView>
-  );
-}
-
-function Scroll(props: Props): React.Node {
-  const { children, style } = props;
-
-  return (
-    <ScrollView style={ style }>
-      {children}
-    </ScrollView>
-  );
-}
-
-function Padded(props: Props): React.Node {
-  const { children, style } = props;
-
-  return (
-    <PaddedView style={ style }>
-      {children}
-    </PaddedView>
-  );
-}
-
-const Layout: Object = {
-  Full,
-  Center,
-  Scroll,
-  Padded,
+type FullProps = Props & {
+  align?: "top" | "bottom",
+  header?: boolean,
+  footer?: boolean,
+};
+
+type ScrollProps = Props & {
+  header?: boolean,
+  footer?: boolean,
 };
 
+type CenterProps = Props & {};
+
+type CenterVerticallyProps = Props & {};
+
+type PaddedProps = Props & {};
+
+const Layout = ({ children, ...rest }: Props): React.Node => (
+  <View {...rest}>{children}</View>
+);
+
+Layout.Full = ({ children, ...rest }: FullProps): React.Node => (
+  <FullView {...rest}>{children}</FullView>
+);
+Layout.Full.displayName = "Layout.Full";
+
+Layout.Center = ({ children, ...rest }: CenterProps): React.Node => (
+  <CenterView {...rest}>{children}</CenterView>
+);
+Layout.Center.displayName = "Layout.Center";
+
+Layout.Scroll = ({ children, ...rest }: ScrollProps): React.Node => (
+  <ScrollView {...rest}>{children}</ScrollView>
+);
+Layout.Scroll.displayName = "Layout.Scroll";
+
+Layout.Padded = ({ children, ...rest }: PaddedProps): React.Node => (
+  <PaddedView {...rest}>{children}</PaddedView>
+);
+Layout.Padded.displayName = "Layout.Padded";
+
+Layout.CenterVertically = ({
+  children,
+  ...rest
+}: CenterVerticallyProps): React.Node => (
+  <CenterVerticallyView {...rest}>{children}</CenterVerticallyView>
+);
+Layout.CenterVertically.displayName = "Layout.CenterVertically";
+
 export default Layout;
diff --git a/generators/base/templates/App/Components/Layout/styles.js b/generators/base/templates/App/Components/Layout/styles.js
index bdf3f50..66535b3 100644
--- a/generators/base/templates/App/Components/Layout/styles.js
+++ b/generators/base/templates/App/Components/Layout/styles.js
@@ -1,11 +1,27 @@
 // @flow
-import styled from 'styled-components';
-import variables from '<%= name %>/App/Styles/Variables';
+import styled, { css } from "styled-components";
+import variables from "<%= name %>/App/Styles/Variables";
+
+const getAlign = (alignment: string): string => {
+  switch (alignment) {
+    case "bottom":
+      return "flex-end";
+    default:
+      return "flex-start";
+  }
+};
+
+export const View = styled.View``;
 
 export const FullView = styled.View`
   flex: 1;
-  margin-top: ${props => props.header ? variables.headerHeight : 0};
-  margin-bottom: ${props => props.footer ? variables.footerHeight : 0};
+  margin-top: ${props => (props.header ? variables.headerHeight : 0)};
+  margin-bottom: ${props => (props.footer ? variables.footerHeight : 0)};
+  ${props =>
+    props.align &&
+    css`
+      justify-content: ${getAlign(props.align)};
+    `};
 `;
 
 export const CenterView = styled.View`
@@ -14,9 +30,13 @@ export const CenterView = styled.View`
   align-items: center;
 `;
 
+export const CenterVerticallyView = FullView.extend`
+  justify-content: center;
+`;
+
 export const ScrollView = styled.ScrollView`
-  margin-top: ${props => props.header ? variables.headerHeight : 0};
-  margin-bottom: ${props => props.footer ? variables.footerHeight : 0};
+  margin-top: ${props => (props.header ? variables.headerHeight : 0)};
+  margin-bottom: ${props => (props.footer ? variables.footerHeight : 0)};
 `;
 
 export const PaddedView = styled.View`