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.
microsoft · May 16, 2019 · 55068fd · 55068fd
1 parent 0d2f2cc
commit 55068fd
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 8 deletions.
diff --git 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
@@ -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;
 }
diff --git 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 } }>