Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Flyout updates #2442

Merged
merged 6 commits into from
May 16, 2019
Merged

Flyout updates #2442

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3191eda
Adding more placement options for the Flyout component
May 9, 2019
d129451
Simplifying placement enum usage
May 9, 2019
d6299d6
simplifying placement enum usage..again
May 9, 2019
d50ab9f
Clariftying the flyout placement options and setting default to 'top'
May 9, 2019
33320a6
Converting placement string enum to string literal type.
May 10, 2019
b4ac589
Merge remote-tracking branch 'upstream/master' into flyout-updates
May 14, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 37 additions & 1 deletion vnext/ReactUWP/Views/FlyoutViewManager.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
16 changes: 15 additions & 1 deletion vnext/src/Libraries/Components/Flyout/FlyoutProps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
25 changes: 19 additions & 6 deletions vnext/src/RNTester/FlyoutExample.uwp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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 } }>
Expand Down