From 29b8258c36f336b6ee5637da1452dbbccb871d33 Mon Sep 17 00:00:00 2001
From: Vasil Chimev <Vasil.Chimev@gmail.com>
Date: Thu, 23 Aug 2018 15:23:59 +0300
Subject: [PATCH] feat: apply insets to flexbox row layout

---
 e2e/safe-area/app/app.css                      |  4 ++++
 .../action-bar/flexboxlayout-row-page.xml      | 10 ++++++++++
 .../app/flexboxlayout/flexboxlayout-page.ts    |  8 ++++++++
 .../app/flexboxlayout/flexboxlayout-page.xml   | 18 ++++++++++++++++++
 .../fragments/flexboxlayout-row-fragment.xml   | 11 +++++++++++
 .../no-action-bar/flexboxlayout-row-page.xml   |  7 +++++++
 .../flexbox-layout/flexbox-layout.ios.ts       | 14 +++++++++++---
 7 files changed, 69 insertions(+), 3 deletions(-)
 create mode 100644 e2e/safe-area/app/flexboxlayout/action-bar/flexboxlayout-row-page.xml
 create mode 100644 e2e/safe-area/app/flexboxlayout/flexboxlayout-page.ts
 create mode 100644 e2e/safe-area/app/flexboxlayout/flexboxlayout-page.xml
 create mode 100644 e2e/safe-area/app/flexboxlayout/fragments/flexboxlayout-row-fragment.xml
 create mode 100644 e2e/safe-area/app/flexboxlayout/no-action-bar/flexboxlayout-row-page.xml

diff --git a/e2e/safe-area/app/app.css b/e2e/safe-area/app/app.css
index bbd77bf65..d69bd436c 100644
--- a/e2e/safe-area/app/app.css
+++ b/e2e/safe-area/app/app.css
@@ -25,6 +25,10 @@ Page {
     background-color: HoneyDew;
 }
 
+.flex {
+    background-color: Indigo;
+}
+
 .grid {
     background-color: LightBlue;
 }
diff --git a/e2e/safe-area/app/flexboxlayout/action-bar/flexboxlayout-row-page.xml b/e2e/safe-area/app/flexboxlayout/action-bar/flexboxlayout-row-page.xml
new file mode 100644
index 000000000..9db779866
--- /dev/null
+++ b/e2e/safe-area/app/flexboxlayout/action-bar/flexboxlayout-row-page.xml
@@ -0,0 +1,10 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd"
+    xmlns:fragments="flexboxlayout/fragments">
+
+    <ActionBar>
+        <Label text="Action Bar"></Label>
+    </ActionBar>
+
+    <fragments:flexboxlayout-row-fragment></fragments:flexboxlayout-row-fragment>
+
+</Page>
diff --git a/e2e/safe-area/app/flexboxlayout/flexboxlayout-page.ts b/e2e/safe-area/app/flexboxlayout/flexboxlayout-page.ts
new file mode 100644
index 000000000..f7c751c11
--- /dev/null
+++ b/e2e/safe-area/app/flexboxlayout/flexboxlayout-page.ts
@@ -0,0 +1,8 @@
+import { View, EventData } from "tns-core-modules/ui/core/view";
+
+export function onNavigate(args: EventData) {
+    const view = args.object as View;
+    const route = view["route"];
+
+    view.page.frame.navigate(route);
+}
diff --git a/e2e/safe-area/app/flexboxlayout/flexboxlayout-page.xml b/e2e/safe-area/app/flexboxlayout/flexboxlayout-page.xml
new file mode 100644
index 000000000..836f5867e
--- /dev/null
+++ b/e2e/safe-area/app/flexboxlayout/flexboxlayout-page.xml
@@ -0,0 +1,18 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd">
+
+    <ActionBar>
+        <Label text="FlexboxLayout Examples"></Label>
+    </ActionBar>
+
+    <StackLayout horizontalAlignment="center">
+        <StackLayout>
+            <Label text="Pages w/ ActionBar"></Label>
+            <Button text="Flexbox Row" tap="onNavigate" route="flexboxlayout/action-bar/flexboxlayout-row-page"></Button>
+        </StackLayout>
+        <StackLayout>
+            <Label text="Pages w/o ActionBar"></Label>
+            <Button text="Flexbox Row" tap="onNavigate" route="flexboxlayout/no-action-bar/flexboxlayout-row-page"></Button>
+        </StackLayout>
+    </StackLayout>
+
+</Page>
diff --git a/e2e/safe-area/app/flexboxlayout/fragments/flexboxlayout-row-fragment.xml b/e2e/safe-area/app/flexboxlayout/fragments/flexboxlayout-row-fragment.xml
new file mode 100644
index 000000000..1fc2a40bc
--- /dev/null
+++ b/e2e/safe-area/app/flexboxlayout/fragments/flexboxlayout-row-fragment.xml
@@ -0,0 +1,11 @@
+<FlexboxLayout flexDirection="row" class="flex">
+    <StackLayout backgroundColor="red">
+        <Label backgroundColor="#965251" text="Item"></Label>
+    </StackLayout>
+    <StackLayout flexGrow="1" class="stack">
+        <Label flexGrow="1" backgroundColor="#d2b29b" text="Flex-Grow 1"></Label>
+    </StackLayout>
+    <StackLayout backgroundColor="blue">
+        <Label backgroundColor="#F69256" text="Item"></Label>
+    </StackLayout>
+</FlexboxLayout>
diff --git a/e2e/safe-area/app/flexboxlayout/no-action-bar/flexboxlayout-row-page.xml b/e2e/safe-area/app/flexboxlayout/no-action-bar/flexboxlayout-row-page.xml
new file mode 100644
index 000000000..f64b1506d
--- /dev/null
+++ b/e2e/safe-area/app/flexboxlayout/no-action-bar/flexboxlayout-row-page.xml
@@ -0,0 +1,7 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd"
+    xmlns:fragments="flexboxlayout/fragments"
+    actionBarHidden="true">
+
+    <fragments:flexboxlayout-row-fragment></fragments:flexboxlayout-row-fragment>
+
+</Page>
diff --git a/tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout.ios.ts b/tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout.ios.ts
index d376de88a..ee611fde7 100644
--- a/tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout.ios.ts
+++ b/tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout.ios.ts
@@ -943,6 +943,12 @@ export class FlexboxLayout extends FlexboxLayoutBase {
     }
 
     public onLayout(left: number, top: number, right: number, bottom: number) {
+        const insets = this.getSafeAreaInsets();
+        left += insets.left;
+        top += insets.top;
+        right -= insets.right;
+        bottom -= insets.bottom;
+
         let isRtl;
         switch (this.flexDirection) {
             case FlexDirection.ROW:
@@ -973,8 +979,9 @@ export class FlexboxLayout extends FlexboxLayoutBase {
     }
 
     private _layoutHorizontal(isRtl: boolean, left: number, top: number, right: number, bottom: number) {
-        let paddingLeft = this.effectivePaddingLeft;
-        let paddingRight = this.effectivePaddingRight;
+        // include insets
+        let paddingLeft = this.effectivePaddingLeft + left;
+        let paddingRight = this.effectivePaddingRight + right;
 
         let childLeft;
         let currentViewIndex = 0;
@@ -982,8 +989,9 @@ export class FlexboxLayout extends FlexboxLayoutBase {
         let height = bottom - top;
         let width = right - left;
 
+        // include insets
         let childBottom = height - this.effectivePaddingBottom;
-        let childTop = this.effectivePaddingTop;
+        let childTop = this.effectivePaddingTop + top;
 
         let childRight;
         this._flexLines.forEach((flexLine, i) => {