From 55068fde7c3fccfd8017275be7ad4b0469a1cb30 Mon Sep 17 00:00:00 2001
From: Ken Anderson <kander425@gmail.com>
Date: Thu, 16 May 2019 15:10:42 -0700
Subject: [PATCH] Flyout updates (#2442)

* Adding more placement options for the Flyout component

* Simplifying placement enum usage

* simplifying placement enum usage..again

* Clariftying the flyout placement options and setting default to 'top'

* Converting placement string enum to string literal type.
---
 vnext/ReactUWP/Views/FlyoutViewManager.cpp    | 38 ++++++++++++++++++-
 .../Components/Flyout/FlyoutProps.ts          | 16 +++++++-
 vnext/src/RNTester/FlyoutExample.uwp.tsx      | 25 +++++++++---
 3 files changed, 71 insertions(+), 8 deletions(-)

diff --git a/vnext/ReactUWP/Views/FlyoutViewManager.cpp b/vnext/ReactUWP/Views/FlyoutViewManager.cpp
index 3f6b0b5249b..b599c3a0970 100644
--- a/vnext/ReactUWP/Views/FlyoutViewManager.cpp
+++ b/vnext/ReactUWP/Views/FlyoutViewManager.cpp
@@ -38,10 +38,46 @@ struct json_type_traits<winrt::FlyoutPlacementMode>
     {
       placement = winrt::FlyoutPlacementMode::Right;
     }
-    else
+    else if (json == "top-edge-aligned-left")
+    {
+      placement = winrt::FlyoutPlacementMode::TopEdgeAlignedLeft;
+    }
+    else if (json == "top-edge-aligned-right")
+    {
+      placement = winrt::FlyoutPlacementMode::TopEdgeAlignedRight;
+    }
+    else if (json == "bottom-edge-aligned-left")
+    {
+      placement = winrt::FlyoutPlacementMode::BottomEdgeAlignedLeft;
+    }
+    else if (json == "bottom-edge-aligned-right")
+    {
+      placement = winrt::FlyoutPlacementMode::BottomEdgeAlignedRight;
+    }
+    else if (json == "left-edge-aligned-top")
+    {
+      placement = winrt::FlyoutPlacementMode::LeftEdgeAlignedTop;
+    }
+    else if (json == "right-edge-aligned-top")
+    {
+      placement = winrt::FlyoutPlacementMode::RightEdgeAlignedTop;
+    }
+    else if (json == "left-bottom")
+    {
+      placement = winrt::FlyoutPlacementMode::LeftEdgeAlignedBottom;
+    }
+    else if (json == "right-edge-aligned-bottom")
+    {
+      placement = winrt::FlyoutPlacementMode::RightEdgeAlignedBottom;
+    }
+    else if (json == "full")
     {
       placement = winrt::FlyoutPlacementMode::Full;
     }
+    else
+    {
+    placement = winrt::FlyoutPlacementMode::Top;
+    }
 
     return placement;
   }
diff --git a/vnext/src/Libraries/Components/Flyout/FlyoutProps.ts b/vnext/src/Libraries/Components/Flyout/FlyoutProps.ts
index 1a2919c7ce4..58859b1b394 100644
--- a/vnext/src/Libraries/Components/Flyout/FlyoutProps.ts
+++ b/vnext/src/Libraries/Components/Flyout/FlyoutProps.ts
@@ -2,10 +2,24 @@
 // Licensed under the MIT License.
 import { ViewProps } from 'react-native';
 
+export type Placement = 'top'
+  | 'bottom'
+  | 'left'
+  | 'right'
+  | 'full'
+  | 'top-edge-aligned-left'
+  | 'top-edge-aligned-right'
+  | 'bottom-edge-aligned-left'
+  | 'bottom-edge-aligned-right'
+  | 'left-edge-aligned-top'
+  | 'right-edge-aligned-top'
+  | 'left-edge-aligned-bottom'
+  | 'right-edge-aligned-bottom';
+
 export interface IFlyoutProps extends ViewProps {
   isLightDismissEnabled?: boolean;
   isOpen?: boolean;
   onDismiss?: (isOpen: boolean) => void;
-  placement?: 'top' | 'bottom' | 'left' | 'right' | 'full';
+  placement?: Placement;
   target?: React.ReactNode;
 }
\ No newline at end of file
diff --git a/vnext/src/RNTester/FlyoutExample.uwp.tsx b/vnext/src/RNTester/FlyoutExample.uwp.tsx
index 097e3b46368..045d93d15a9 100644
--- a/vnext/src/RNTester/FlyoutExample.uwp.tsx
+++ b/vnext/src/RNTester/FlyoutExample.uwp.tsx
@@ -6,15 +6,32 @@
 import React = require('react');
 import { Button, Text, TextInput, View } from 'react-native';
 import { CheckBox, Flyout, Picker } from '../../src/index.uwp';
+import { Placement  } from '../../src/Libraries/Components/Flyout/FlyoutProps';
 
 interface IFlyoutExampleState {
   isFlyoutVisible: boolean;
   buttonTitle: string;
   isLightDismissEnabled: boolean;
   popupCheckBoxState: boolean;
-  placementOptions: 'top' | 'bottom' | 'left' | 'right' | 'full';
+  placementOptions: Placement;
 }
 
+let placementValues: string[] = [
+  'top',
+  'bottom',
+  'left',
+  'right',
+  'full',
+  'top-edge-aligned-left',
+  'top-edge-aligned-right',
+  'bottom-edge-aligned-left',
+  'bottom-edge-aligned-right',
+  'left-edge-aligned-top',
+  'right-edge-aligned-top',
+  'left-edge-aligned-bottom',
+  'right-edge-aligned-bottom'
+]
+
 class FlyoutExample extends React.Component<{}, IFlyoutExampleState> {
 
   // tslint:disable-next-line:no-any
@@ -41,11 +58,7 @@ class FlyoutExample extends React.Component<{}, IFlyoutExampleState> {
           <Picker
             style={ { width: 200, height: 35 } } selectedValue={ this.state.placementOptions }
             onValueChange={ value => this.setState({ placementOptions: value }) }>
-            <Picker.Item label='top' value='top' />
-            <Picker.Item label='bottom' value='bottom' />
-            <Picker.Item label='left' value='left' />
-            <Picker.Item label='right' value='right' />
-            <Picker.Item label='full' value='full' />
+            { placementValues.map(item => <Picker.Item key={item} label={item} value={item} /> ) }
           </Picker>
         </View>
         <View style={ { justifyContent: 'center', padding: 20, width: 200 } }>