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 cbf7b1d

Browse files
Notes screen and note details page implementation (#4)
* Create main panel for notes The application's main panel contains all the notes added by the user. They are displayed in the grid, with number of columns adapted to the width of the window. Note, that the Window size needs to be considered instead of Screen's. That is due to having the Page in RNW rendered as a root with certain and fixed dimensions. Currently only the testing data are given to the FlatList, so there's a possibility to test it by displaying any content. In further development that data should be taken from the database. * Create basic widget for single note on the main screen This commit introduces the initial widget containing single note presented on the main panel. This widget has the reponsibility to: * contain the summary of the note: ID, Title and shortened post message * act as the button to enter the full post screen * Fix: Widget size reset on main panel's reentry * Implement note full screen * Define explicit application entry page * Implement navigation native module This native module is responsible for handling the navigation between screens which are not connected through the NavigationView and it's Frame. This situation happens, when there's a need to navigate to separate screen, but at the same time get rid of navigation panel. This native module is called NoteWidgetClickHandler because it is designed explicitly for the NotesPage <-> NoteWidgetDetailsPage navigation both-ways. * Implement going back function for NoteWidgetClickHandler The native module should also provide the system with the ability to go back. This is now done by the GoToNotesScreen function, which navigates to the MainPage. NOTE: MainPage needs to be selected, as only this page contains the NavigationFrame and is able to display the navigation top pane. This is why there's a starting point implemented when MainPage is navigated to. * Add new page for Note details screen * Navigate back on 'Go back...' button press * Add the basic implementation to the NoteWidgetDetailsPanel * Suppress the navigation animation when going back to NotesPage
1 parent 58e7a46 commit cbf7b1d

15 files changed

+328
-9
lines changed

‎index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,6 @@ import {name as appName} from './app.json';
99
import NotesMainPanel from './src/NotesMainPanel';
1010
import UserAccountPanel from './src/UserAccountPanel';
1111
import ApplicationSettingsPanel from './src/ApplicationSettingsPanel';
12+
import NoteWidgetDetailsPanel from './src/NoteWidgetDetailsPanel';
1213

1314
AppRegistry.registerComponent(appName, () => App);

‎src/NoteWidgetDetailsPanel.js‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
/**
2+
* @format
3+
* @flow strict-local
4+
*/
5+
6+
import React from 'react';
7+
import {
8+
AppRegistry,
9+
Button,
10+
StyleSheet,
11+
Text,
12+
View,
13+
NativeModules,
14+
} from 'react-native';
15+
16+
17+
class NoteWidgetDetailsPanel extends React.Component {
18+
19+
goBack = () => {
20+
NativeModules.NoteWidgetClickHandler.goToNotesScreen();
21+
};
22+
23+
render() {
24+
return(
25+
<View style={styles.panel}>
26+
<View style={styles.panelContent}>
27+
<Text>Note details panel</Text>
28+
<Button onPress={this.goBack} title={"Go back..."}></Button>
29+
</View>
30+
</View>
31+
);
32+
}
33+
};
34+
35+
36+
const styles = StyleSheet.create({
37+
panel: {
38+
height: 75,
39+
borderColor: "black",
40+
borderWidth: 1,
41+
},
42+
panelContent: {
43+
flex: 1,
44+
flexDirection: "column",
45+
}
46+
});
47+
48+
49+
AppRegistry.registerComponent("NoteWidgetDetailsPanel", () => NoteWidgetDetailsPanel);
50+
51+
export default NoteWidgetDetailsPanel;

‎src/NotesMainPanel.js‎

Lines changed: 44 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,25 +6,66 @@
66
import React from 'react';
77
import {
88
AppRegistry,
9+
Dimensions,
10+
FlatList,
911
StyleSheet,
10-
Text,
1112
View,
1213
} from 'react-native';
14+
import NoteWidget from './Widgets/NoteWidget';
15+
16+
const window = Dimensions.get("window");
17+
const screen = Dimensions.get("screen");
18+
19+
const noteWidgetWidth = 300;
1320

1421

1522
class NotesMainPanel extends React.Component {
23+
constructor(props) {
24+
super(props);
25+
this.state = {
26+
notes: [{key: "1"}, {key: "2"}, {key: "3"}, {key: "4"}, {key: "5"}, {key: "6"}, {key: "7"}, {key: "8"}, {key: "9"}],
27+
dimensions: {window, screen},
28+
columns: this.calculateColumnWidth(window),
29+
}
30+
};
31+
32+
calculateColumnWidth = (window) => {
33+
return Math.floor(window.width / noteWidgetWidth);
34+
};
35+
36+
onChange = ({ window, screen }) => {
37+
this.setState({ dimensions: { window, screen }, columns: this.calculateColumnWidth(window) });
38+
};
39+
40+
componentDidMount() {
41+
Dimensions.addEventListener("change", this.onChange);
42+
};
43+
44+
componentWillUnmount() {
45+
Dimensions.removeEventListener("change", this.onChange);
46+
};
47+
48+
renderNote = notes => {
49+
return <NoteWidget width={noteWidgetWidth} ID={notes.item.key}/>
50+
};
1651

1752
render() {
1853
return(
19-
<View>
20-
<Text>NotesMainPanel</Text>
54+
<Viewstyle={styles.mainContainer}>
55+
<FlatListnumColumns={this.state.columns}key={this.state.columns}data={this.state.notes}renderItem={this.renderNote}/>
2156
</View>
2257
);
2358
}
2459
};
2560

2661

2762
const styles = StyleSheet.create({
63+
mainContainer: {
64+
flex: 1,
65+
flexDirection: "column",
66+
margin: 20,
67+
backgroundColor: "transparent",
68+
},
2869
});
2970

3071

‎src/Widgets/NoteWidget.js‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
/**
2+
* @format
3+
* @flow strict-local
4+
*/
5+
6+
import React from 'react';
7+
import {
8+
AppRegistry,
9+
StyleSheet,
10+
Text,
11+
TouchableHighlight,
12+
View,
13+
NativeModules,
14+
} from 'react-native';
15+
16+
17+
class NoteWidget extends React.Component {
18+
constructor(props) {
19+
super(props);
20+
this.state = {
21+
width: props.width,
22+
ID: Number(props.ID),
23+
}
24+
};
25+
26+
enterNote = () => {
27+
NativeModules.NoteWidgetClickHandler.openWidget(this.state.ID);
28+
};
29+
30+
render() {
31+
return(
32+
<TouchableHighlight onPress={this.enterNote} style={styles.noteWidget} underlayColor={'transparent'}>
33+
<View style={{width: this.state.width}}>
34+
35+
<View style={styles.noteHeader}>
36+
<Text>{this.state.ID}</Text>
37+
<View style={styles.noteTitle}>
38+
<Text style={{textAlign: "center"}}>Header</Text>
39+
</View>
40+
</View>
41+
42+
<View style={styles.noteSeparator}></View>
43+
44+
<View style={styles.noteMainContent}>
45+
<Text>
46+
This is the single widget
47+
{'\n'}With the text written here only for the presentation purpose.
48+
</Text>
49+
<Text>This note has the ID: {this.state.ID}</Text>
50+
</View>
51+
52+
</View>
53+
</TouchableHighlight>
54+
);
55+
}
56+
};
57+
58+
59+
const styles = StyleSheet.create({
60+
noteWidget: {
61+
borderColor: "grey",
62+
borderWidth: 1,
63+
margin: 20,
64+
backgroundColor: "whitesmoke",
65+
borderRadius: 10,
66+
shadowOffset: {x: 5, y: 50},
67+
shadowColor: "black",
68+
elevation: 10,
69+
opacity: 0.8
70+
},
71+
noteHeader: {
72+
flex: 1,
73+
flexDirection: "row",
74+
margin: 5,
75+
},
76+
noteTitle: {
77+
alignSelf: "center",
78+
alignContent: "center",
79+
alignItems: "center",
80+
textAlign: "center",
81+
marginHorizontal: 10,
82+
},
83+
noteSeparator: {
84+
borderColor: "black",
85+
borderWidth: 0.5,
86+
marginTop: 5,
87+
marginBottom: 10,
88+
alignSelf: "stretch"
89+
},
90+
noteMainContent: {
91+
margin: 10
92+
}
93+
});
94+
95+
96+
AppRegistry.registerComponent("NoteWidget", () => NoteWidget);
97+
98+
export default NoteWidget;

‎windows/ReactNativeNotes/App.cpp‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ void App::OnLaunched(activation::LaunchActivatedEventArgs const& e)
5353
super::OnLaunched(e);
5454

5555
Frame rootFrame = Window::Current().Content().as<Frame>();
56-
rootFrame.Navigate(xaml_typename<ReactNativeNotes::MainPage>(), box_value(e.Arguments()));
56+
rootFrame.Navigate(xaml_typename<ReactNativeNotes::NotesPage>(), box_value(e.Arguments()));
5757
}
5858

5959
/// <summary>

‎windows/ReactNativeNotes/MainPage.cpp‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ namespace winrt::ReactNativeNotes::implementation
1515
{
1616
InitializeComponent();
1717
auto app = Application::Current().as<App>();
18+
Navigate( L"NotesPage", false );
1819
}
1920

2021
void MainPage::TopNavigationPanel_ItemInvoked( Windows::UI::Xaml::Controls::NavigationView const& sender, Windows::UI::Xaml::Controls::NavigationViewItemInvokedEventArgs const& args )
@@ -34,16 +35,25 @@ namespace winrt::ReactNativeNotes::implementation
3435
{
3536
}
3637

37-
void MainPage::Navigate( winrt::hstring pageName ) noexcept
38+
void MainPage::Navigate( winrt::hstring pageName, constbool hasAnimation ) noexcept
3839
{
3940
auto pageToNavigateTo = Windows::UI::Xaml::Interop::TypeName
4041
{
4142
to_hstring( L"ReactNativeNotes." + pageName ),
4243
Windows::UI::Xaml::Interop::TypeKind::Custom
4344
};
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 );
45+
if( hasAnimation )
46+
{
47+
auto navigationAnimation = Windows::UI::Xaml::Media::Animation::SlideNavigationTransitionInfo();
48+
navigationAnimation.Effect( Windows::UI::Xaml::Media::Animation::SlideNavigationTransitionEffect::FromLeft );
49+
ApplicationContentFrame().Navigate( pageToNavigateTo, nullptr, navigationAnimation );
50+
}
51+
else
52+
{
53+
auto navigationAnimation = Windows::UI::Xaml::Media::Animation::SuppressNavigationTransitionInfo();
54+
ApplicationContentFrame().Navigate( pageToNavigateTo, nullptr, navigationAnimation );
55+
}
56+
4757
}
4858
}
4959

‎windows/ReactNativeNotes/MainPage.h‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ namespace winrt::ReactNativeNotes::implementation
1414
void TopNavigationPanel_BackRequested( Windows::UI::Xaml::Controls::NavigationView const& sender, Windows::UI::Xaml::Controls::NavigationViewBackRequestedEventArgs const& args );
1515

1616
private:
17-
void Navigate( winrt::hstring pageName ) noexcept;
17+
void Navigate( winrt::hstring pageName, constbool hasAnimation = true ) noexcept;
1818
};
1919
}
2020

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
#pragma once
2+
3+
#include "pch.h"
4+
#include "NativeModules.h"
5+
6+
7+
namespace ReactNativeNotes
8+
{
9+
REACT_MODULE( NoteWidgetClickHandler );
10+
struct NoteWidgetClickHandler
11+
{
12+
REACT_CONSTANT( ID, L"ID" );
13+
const unsigned int ID;
14+
15+
REACT_METHOD( OpenWidget, L"openWidget" );
16+
void OpenWidget( const unsigned int ID ) noexcept
17+
{
18+
NavigateViaMainFrame( L"ReactNativeNotes.NoteWidgetDetailsPage" );
19+
}
20+
21+
REACT_METHOD( GoToNotesScreen, L"goToNotesScreen" );
22+
void GoToNotesScreen() noexcept
23+
{
24+
NavigateViaMainFrame( L"ReactNativeNotes.MainPage" );
25+
}
26+
27+
28+
private:
29+
void NavigateViaMainFrame( const winrt::hstring pageName )
30+
{
31+
auto pageToNavigateTo = winrt::Windows::UI::Xaml::Interop::TypeName
32+
{
33+
pageName,
34+
winrt::Windows::UI::Xaml::Interop::TypeKind::Custom
35+
};
36+
auto navigationAnimation = winrt::Windows::UI::Xaml::Media::Animation::DrillInNavigationTransitionInfo();
37+
auto& rootFrame = winrt::Windows::UI::Xaml::Window::Current().Content().as<winrt::Windows::UI::Xaml::Controls::Frame>();
38+
rootFrame.Navigate( pageToNavigateTo, nullptr, navigationAnimation );
39+
}
40+
};
41+
}
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
#include "pch.h"
2+
#include "NoteWidgetDetailsPage.h"
3+
#include "NoteWidgetDetailsPage.g.cpp"
4+
5+
#include "App.h"
6+
7+
8+
namespace winrt::ReactNativeNotes::implementation
9+
{
10+
NoteWidgetDetailsPage::NoteWidgetDetailsPage()
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 "NoteWidgetDetailsPage.g.h"
4+
5+
namespace winrt::ReactNativeNotes::implementation
6+
{
7+
class NoteWidgetDetailsPage : public NoteWidgetDetailsPageT<NoteWidgetDetailsPage>
8+
{
9+
public:
10+
NoteWidgetDetailsPage();
11+
};
12+
}
13+
14+
namespace winrt::ReactNativeNotes::factory_implementation
15+
{
16+
class NoteWidgetDetailsPage : public NoteWidgetDetailsPageT<NoteWidgetDetailsPage, implementation::NoteWidgetDetailsPage>
17+
{
18+
};
19+
}

0 commit comments

Comments
(0)

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