forked from microsoft/react-native-windows
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(ControlWindows): Adds control component for tab stops
ControlWindows is a UserControl with a single child Canvas. It has props to enable tab stop, tab index, keyboard navigation mode, and keyUp/Down events. Fixes microsoft#886
- Loading branch information
Showing
13 changed files
with
787 additions
and
69 deletions.
There are no files selected for viewing
12 changes: 12 additions & 0 deletions
12
Libraries/Components/ControlWindows/ControlWindows.android.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| /** | ||
| * Copyright (c) Microsoft Corporation and contributors. All rights reserved. | ||
| * All rights reserved. | ||
| * | ||
| * This source code is licensed under the MIT-style license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| * | ||
| * @providesModule ControlWindows | ||
| */ | ||
| 'use strict'; | ||
|
|
||
| module.exports = require('UnimplementedView'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| /** | ||
| * Copyright (c) Microsoft Corporation and contributors. All rights reserved. | ||
| * All rights reserved. | ||
| * | ||
| * This source code is licensed under the MIT-style license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| * | ||
| * @providesModule ControlWindows | ||
| */ | ||
| 'use strict'; | ||
|
|
||
| module.exports = require('UnimplementedView'); |
101 changes: 101 additions & 0 deletions
101
Libraries/Components/ControlWindows/ControlWindows.windows.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,101 @@ | ||
| /** | ||
| * Copyright (c) Microsoft Corporation and contributors. All rights reserved. | ||
| * All rights reserved. | ||
| * | ||
| * This source code is licensed under the MIT-style license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| * | ||
| * @providesModule ControlWindows | ||
| */ | ||
| 'use strict'; | ||
|
|
||
| var PropTypes = require('prop-types'); | ||
| var React = require('React'); | ||
| var ViewPropTypes = require('ViewPropTypes'); | ||
| var requireNativeComponent = require('requireNativeComponent'); | ||
|
|
||
| class ControlWindows extends React.Component { | ||
|
|
||
| static propTypes = { | ||
| ...ViewPropTypes, | ||
|
|
||
| /** | ||
| * Controls whether the view is a tab stop. Useful for buttons and other | ||
| * controls that can be focused. | ||
| * | ||
| * @platform windows | ||
| */ | ||
| isTabStop: PropTypes.bool, | ||
|
|
||
| /** | ||
| * Sets the tab index for the view. | ||
| * | ||
| * @platform windows | ||
| */ | ||
| tabIndex: PropTypes.number, | ||
|
|
||
| /** | ||
| * Sets the keyboard navigation mode for the view. | ||
| * | ||
| * @platform windows | ||
| */ | ||
| tabNavigation: PropTypes.oneOf([ | ||
| 'local', | ||
| 'cycle', | ||
| 'once' | ||
| ]), | ||
|
|
||
| /** | ||
| * Called when the view receives focus. | ||
| * | ||
| * @platform windows | ||
| */ | ||
| onFocus: PropTypes.func, | ||
|
|
||
| /** | ||
| * Called when the view focus is lost. | ||
| * | ||
| * @platform windows | ||
| */ | ||
| onBlur: PropTypes.func, | ||
|
|
||
| /** | ||
| * Set of keys that should be handled on key down by this component. | ||
| * | ||
| * @platform windows | ||
| */ | ||
| handledKeyDownKeys: PropTypes.arrayOf(PropTypes.number), | ||
|
|
||
| /** | ||
| * Set of keys that should be handled on key up by this component. | ||
| * | ||
| * @platform windows | ||
| */ | ||
| handledKeyUpKeys: PropTypes.arrayOf(PropTypes.number), | ||
|
|
||
| /** | ||
| * Called when key down while component has focus. | ||
| * | ||
| * @platform windows | ||
| */ | ||
| onKeyDown: PropTypes.func, | ||
|
|
||
| /** | ||
| * Called when key up while component has focus. | ||
| * | ||
| * @platform windows | ||
| */ | ||
| onKeyUp: PropTypes.func, | ||
| }; | ||
|
|
||
| render() { | ||
| return <WindowsControl {...this.props}/>; | ||
| } | ||
| } | ||
|
|
||
| var WindowsControl = requireNativeComponent( | ||
| 'WindowsControl', | ||
| ControlWindows | ||
| ); | ||
|
|
||
| module.exports = ControlWindows; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
35 changes: 35 additions & 0 deletions
35
ReactWindows/ReactNative.Shared/Views/Control/KeyHelpers.cs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| using System; | ||
| using System.Collections.Generic; | ||
| using System.Linq; | ||
| #if WINDOWS_UWP | ||
| using Windows.System; | ||
| #else | ||
| using System.Windows.Input; | ||
| #endif | ||
|
|
||
| namespace ReactNative.Views.Control | ||
| { | ||
| #if WINDOWS_UWP | ||
| using Key = VirtualKey; | ||
| #endif | ||
|
|
||
| static class KeyHelpers | ||
| { | ||
| public static int GetKeyCode(this Key key) | ||
| { | ||
| return (int)key; | ||
| } | ||
|
|
||
| public static IReadOnlyDictionary<string, int> GetKeyConstants() | ||
| { | ||
| return Enum.GetValues(typeof(Key)) | ||
| .OfType<Key>() | ||
| .Distinct() // Distinct() required* | ||
| .ToDictionary( | ||
| key => key.ToString(), | ||
| key => GetKeyCode(key)); | ||
| // *The following keys are duplicated in Enum.GetValues(Type): | ||
| // `Hangul`, `Kanji` | ||
| } | ||
| } | ||
| } |
59 changes: 59 additions & 0 deletions
59
ReactWindows/ReactNative.Shared/Views/Control/ReactControl.cs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| #if WINDOWS_UWP | ||
| using Windows.UI.Xaml; | ||
| using Windows.UI.Xaml.Controls; | ||
| #else | ||
| using System.Windows; | ||
| using System.Windows.Controls; | ||
| #endif | ||
|
|
||
| namespace ReactNative.Views.Control | ||
| { | ||
| /// <summary> | ||
| /// A native control with a single Canvas child. | ||
| /// </summary> | ||
| public class ReactControl : UserControl | ||
| { | ||
| private readonly Canvas _canvas; | ||
|
|
||
| /// <summary> | ||
| /// Instantiates the <see cref="ReactControl"/>. | ||
| /// </summary> | ||
| public ReactControl() | ||
| { | ||
| Content = _canvas = new Canvas | ||
| { | ||
| HorizontalAlignment = HorizontalAlignment.Stretch, | ||
| VerticalAlignment = VerticalAlignment.Stretch, | ||
| }; | ||
| } | ||
|
|
||
| /// <summary> | ||
| /// The view children. | ||
| /// </summary> | ||
| public UIElementCollection Children | ||
| { | ||
| get | ||
| { | ||
| return _canvas.Children; | ||
| } | ||
| } | ||
|
|
||
| /// <summary> | ||
| /// Keys that should be handled during <see cref="UIElement.KeyDownEvent"/>. | ||
| /// </summary> | ||
| public int[] HandledKeyDownKeys | ||
| { | ||
| get; | ||
| set; | ||
| } | ||
|
|
||
| /// <summary> | ||
| /// Keys that should be handled during <see cref="UIElement.KeyUpEvent"/>. | ||
| /// </summary> | ||
| public int[] HandledKeyUpKeys | ||
| { | ||
| get; | ||
| set; | ||
| } | ||
| } | ||
| } |
Oops, something went wrong.