Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 58e7a46

Browse files
Main layout of the application (#3)
* Make the App a main layout The main layout of the application is divided into sections, each containing crucial options and features. The main App class component should be responsible only for calling widgets provided by separate components' classes. * Divide application into Components The initial thought is to divide the application into three main panels, each providing separate functinalities: * UserAccountPanel - responsbile for handling user's login/logout actions, user's info displaying, user's account options * LeftOptionsPanel - panel containing options related to the notes: adding, removing, etc. * NotesMainPanel - responsible for displaying the main content of the app - Notes. Each note will be represented as a Touchable widget with UI elements. This commit adds the components only with the Placeholder text in them. * Create initial layout of panels Each panel has been provided with styles (width, height, most basic behavior) and it has been marked with the border to mark it's position in the application window. The Placeholder text has been replaced with the panel's name. * Rename LeftOptionsPanel to ApplicationSettingsPanel * Convert JS Components registration into function calls * Create pages for each of the Application component The architecture of the whole application system is based on the navigation between separate components implemented in the React Native. These components are to be rendered as the UWP's Page content, just like in the original RNW application. The difference is, that in this approach each RN Component will be rendered inside separate Page as it's own ReactNative Root View. This approach requires all Components to have the separate Page implemented, each containing XAML scheme, IDL implementation and it's code-behind implemented in native C++. * Wrap application in NavigationView The NavigationView is a native UWP control which is able to easily create navigation panel and provides developer with embedded event handlers. More can be found here: https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/navigationview Using this control each page given as a tag is converted into TypeName and directly invoked as a type to navigate to. * Move all components imports to the index * Add Slide animation when switching between pages
1 parent 3a49f7a commit 58e7a46

23 files changed

+439
-53
lines changed

‎App.js‎

Lines changed: 8 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,34 @@
11
/**
2-
* Sample React Native App
3-
* https://github.com/facebook/react-native
4-
*
52
* @format
63
* @flow strict-local
74
*/
85

96
import React from 'react';
107
import {
118
StyleSheet,
12-
ScrollView,
139
View,
14-
Text,
1510
} from 'react-native';
1611

17-
import {
18-
Header,
19-
LearnMoreLinks,
20-
Colors,
21-
} from 'react-native/Libraries/NewAppScreen';
22-
2312

2413
class App extends React.Component {
2514

2615
render() {
2716
return (
28-
<ScrollView style={styles.scrollView}>
29-
<Header/>
30-
<View style={styles.body}>
31-
<View>
32-
<Text style={styles.sectionTitle}>Learn More</Text>
33-
<Text style={styles.sectionDescription}>
34-
Read the docs to discover what to do next:
35-
</Text>
36-
</View>
37-
<LearnMoreLinks />
17+
<>
18+
<UserAccountPanel />
19+
<View style={styles.mainLayout}>
20+
<NotesMainPanel/>
3821
</View>
39-
</ScrollView>
22+
</>
4023
);
4124
}
4225
};
4326

4427
const styles = StyleSheet.create({
45-
scrollView: {
46-
backgroundColor: Colors.lighter,
47-
},
48-
body: {
49-
backgroundColor: Colors.lighter,
28+
mainLayout: {
29+
flex: 1,
30+
flexDirection: "row",
5031
},
51-
sectionTitle: {
52-
fontSize: 24,
53-
paddingHorizontal: 24,
54-
fontWeight: '600',
55-
color: Colors.black,
56-
},
57-
sectionDescription: {
58-
marginTop: 8,
59-
fontSize: 18,
60-
paddingHorizontal: 24,
61-
fontWeight: '400',
62-
color: Colors.dark,
63-
}
6432
});
6533

6634
export default App;

‎index.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,8 @@ import {AppRegistry} from 'react-native';
66
import App from './App';
77
import {name as appName} from './app.json';
88

9+
import NotesMainPanel from './src/NotesMainPanel';
10+
import UserAccountPanel from './src/UserAccountPanel';
11+
import ApplicationSettingsPanel from './src/ApplicationSettingsPanel';
12+
913
AppRegistry.registerComponent(appName, () => App);

‎src/ApplicationSettingsPanel.js‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
/**
2+
* @format
3+
* @flow strict-local
4+
*/
5+
import React from 'react';
6+
import {
7+
AppRegistry,
8+
StyleSheet,
9+
Text,
10+
TouchableHighlight,
11+
View,
12+
} from 'react-native';
13+
14+
15+
class ApplicationSettingsPanel extends React.Component {
16+
constructor(props) {
17+
super(props);
18+
this.state = {
19+
shouldExpand: true
20+
};
21+
}
22+
23+
OnResizeButtonPressed = () => {
24+
this.setState( (state) => ({ shouldExpand: state.shouldExpand ? false : true}));
25+
};
26+
27+
render() {
28+
return(
29+
<View style={this.state.shouldExpand ? styles.panel : styles.panelShrinked}>
30+
<TouchableHighlight onPress={this.OnResizeButtonPressed}>
31+
<View style={styles.panelModeButton}>
32+
<Text>Resize</Text>
33+
</View>
34+
</TouchableHighlight>
35+
<View style={styles.panelContent}>
36+
<Text>LeftOptionsPanel</Text>
37+
</View>
38+
</View>
39+
);
40+
}
41+
};
42+
43+
44+
const styles = StyleSheet.create({
45+
panelModeButton: {
46+
margin: 10,
47+
backgroundColor: "grey",
48+
},
49+
panelContent: {
50+
flex: 1,
51+
flexDirection: "column",
52+
},
53+
panel: {
54+
width: "20%",
55+
borderWidth: 1,
56+
borderColor: "black",
57+
},
58+
panelShrinked: {
59+
width: 50,
60+
borderWidth: 1,
61+
borderColor: "black",
62+
}
63+
});
64+
65+
66+
AppRegistry.registerComponent("ApplicationSettingsPanel", () => ApplicationSettingsPanel);
67+
68+
export default ApplicationSettingsPanel;

‎src/NotesMainPanel.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/**
2+
* @format
3+
* @flow strict-local
4+
*/
5+
6+
import React from 'react';
7+
import {
8+
AppRegistry,
9+
StyleSheet,
10+
Text,
11+
View,
12+
} from 'react-native';
13+
14+
15+
class NotesMainPanel extends React.Component {
16+
17+
render() {
18+
return(
19+
<View>
20+
<Text>NotesMainPanel</Text>
21+
</View>
22+
);
23+
}
24+
};
25+
26+
27+
const styles = StyleSheet.create({
28+
});
29+
30+
31+
AppRegistry.registerComponent("NotesMainPanel", () => NotesMainPanel);
32+
33+
export default NotesMainPanel;

‎src/UserAccountPanel.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
/**
2+
* @format
3+
* @flow strict-local
4+
*/
5+
6+
import React from 'react';
7+
import {
8+
AppRegistry,
9+
StyleSheet,
10+
Text,
11+
View,
12+
} from 'react-native';
13+
14+
15+
class UserAccountPanel extends React.Component {
16+
17+
render() {
18+
return(
19+
<View style={styles.panel}>
20+
<View style={styles.panelContent}>
21+
<Text>UserAccountPanel</Text>
22+
<Text>This panel will have all the features of User's account.</Text>
23+
<Text><br/>Further implementation will yet be done!</Text>
24+
</View>
25+
</View>
26+
);
27+
}
28+
};
29+
30+
31+
const styles = StyleSheet.create({
32+
panel: {
33+
height: 75,
34+
borderColor: "black",
35+
borderWidth: 1,
36+
},
37+
panelContent: {
38+
flex: 1,
39+
flexDirection: "column",
40+
}
41+
});
42+
43+
44+
AppRegistry.registerComponent("UserAccountPanel", () => UserAccountPanel);
45+
46+
export default UserAccountPanel;
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
#include "pch.h"
2+
#include "ApplicationSettingsPage.h"
3+
#include "ApplicationSettingsPage.g.cpp"
4+
5+
#include "App.h"
6+
7+
8+
namespace winrt::ReactNativeNotes::implementation
9+
{
10+
ApplicationSettingsPage::ApplicationSettingsPage()
11+
{
12+
InitializeComponent();
13+
auto app = Windows::UI::Xaml::Application::Current().as<App>();
14+
ReactRootView().ReactNativeHost( app->Host() );
15+
}
16+
}
Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
#pragma once
2+
3+
#include "ApplicationSettingsPage.g.h"
4+
5+
namespace winrt::ReactNativeNotes::implementation
6+
{
7+
class ApplicationSettingsPage : public ApplicationSettingsPageT<ApplicationSettingsPage>
8+
{
9+
public:
10+
ApplicationSettingsPage();
11+
};
12+
}
13+
14+
namespace winrt::ReactNativeNotes::factory_implementation
15+
{
16+
class ApplicationSettingsPage : public ApplicationSettingsPageT<ApplicationSettingsPage, implementation::ApplicationSettingsPage>
17+
{
18+
};
19+
}
Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
namespace ReactNativeNotes
2+
{
3+
[default_interface]
4+
runtimeclass ApplicationSettingsPage : Windows.UI.Xaml.Controls.Page
5+
{
6+
ApplicationSettingsPage();
7+
}
8+
}
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<Page
2+
x:Class="ReactNativeNotes.ApplicationSettingsPage"
3+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5+
xmlns:local="using:ReactNativeNotes"
6+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
7+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
8+
xmlns:react="using:Microsoft.ReactNative"
9+
Background="Transparent"
10+
mc:Ignorable="d">
11+
<react:ReactRootView
12+
x:Name="ReactRootView"
13+
ComponentName="ApplicationSettingsPanel"
14+
MinHeight="400"/>
15+
</Page>

‎windows/ReactNativeNotes/MainPage.cpp‎

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,37 @@ namespace winrt::ReactNativeNotes::implementation
1515
{
1616
InitializeComponent();
1717
auto app = Application::Current().as<App>();
18-
ReactRootView().ReactNativeHost(app->Host());
1918
}
20-
}
19+
20+
void MainPage::TopNavigationPanel_ItemInvoked( Windows::UI::Xaml::Controls::NavigationView const& sender, Windows::UI::Xaml::Controls::NavigationViewItemInvokedEventArgs const& args )
21+
{
22+
if( args.IsSettingsInvoked() == true )
23+
{
24+
Navigate( L"ApplicationSettingsPage" );
25+
}
26+
else if( args.InvokedItemContainer() != nullptr )
27+
{
28+
auto selectedPageTag = unbox_value_or<hstring>( args.InvokedItemContainer().Tag(), L"" );
29+
Navigate( selectedPageTag );
30+
}
31+
}
32+
33+
void MainPage::TopNavigationPanel_BackRequested( Windows::UI::Xaml::Controls::NavigationView const& sender, Windows::UI::Xaml::Controls::NavigationViewBackRequestedEventArgs const& args )
34+
{
35+
}
36+
37+
void MainPage::Navigate( winrt::hstring pageName ) noexcept
38+
{
39+
auto pageToNavigateTo = Windows::UI::Xaml::Interop::TypeName
40+
{
41+
to_hstring( L"ReactNativeNotes." + pageName ),
42+
Windows::UI::Xaml::Interop::TypeKind::Custom
43+
};
44+
auto navigationAnimation = Windows::UI::Xaml::Media::Animation::SlideNavigationTransitionInfo();
45+
navigationAnimation.Effect( Windows::UI::Xaml::Media::Animation::SlideNavigationTransitionEffect::FromLeft );
46+
ApplicationContentFrame().Navigate( pageToNavigateTo, nullptr, navigationAnimation );
47+
}
48+
}
49+
50+
51+

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /