Notes screen and note details page implementation

index.js

@@ -9,5 +9,6 @@ import {name as appName} from './app.json';
 import NotesMainPanel from './src/NotesMainPanel';
 import UserAccountPanel from './src/UserAccountPanel';
 import ApplicationSettingsPanel from './src/ApplicationSettingsPanel';
+import NoteWidgetDetailsPanel from './src/NoteWidgetDetailsPanel';
 
 AppRegistry.registerComponent(appName, () => App);

src/NoteWidgetDetailsPanel.js

@@ -0,0 +1,51 @@
+/**
+ * @format
+ * @flow strict-local
+ */
+
+import React from 'react';
+import {
+  AppRegistry,
+  Button,
+  StyleSheet,
+  Text,
+  View,
+  NativeModules,
+} from 'react-native';
+
+
+class NoteWidgetDetailsPanel extends React.Component {
+
+  goBack = () => {
+    NativeModules.NoteWidgetClickHandler.goToNotesScreen();
+  };
+
+  render() {
+    return(
+      <View style={styles.panel}>
+        <View style={styles.panelContent}>
+          <Text>Note details panel</Text>
+          <Button onPress={this.goBack} title={"Go back..."}></Button>
+        </View>
+      </View>
+    );
+  }
+};
+
+
+const styles = StyleSheet.create({
+  panel: {
+    height: 75,
+    borderColor: "black",
+    borderWidth: 1,
+  },
+  panelContent: {
+    flex: 1,
+    flexDirection: "column",
+  }
+});
+
+
+AppRegistry.registerComponent("NoteWidgetDetailsPanel", () => NoteWidgetDetailsPanel);
+
+export default NoteWidgetDetailsPanel;

src/NotesMainPanel.js

@@ -6,25 +6,66 @@
 import React from 'react';
 import {
   AppRegistry,
+  Dimensions,
+  FlatList,
   StyleSheet,
-  Text,
   View,
 } from 'react-native';
+import NoteWidget from './Widgets/NoteWidget';
+
+const window = Dimensions.get("window");
+const screen = Dimensions.get("screen");
+
+const noteWidgetWidth = 300;
 
 
 class NotesMainPanel extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      notes: [{key: "1"}, {key: "2"}, {key: "3"}, {key: "4"}, {key: "5"}, {key: "6"}, {key: "7"}, {key: "8"}, {key: "9"}],
+      dimensions: {window, screen},
+      columns: this.calculateColumnWidth(window),
+    }
+  };
+
+  calculateColumnWidth = (window) => {
+    return Math.floor(window.width / noteWidgetWidth);
+  };
+
+  onChange = ({ window, screen }) => {
+    this.setState({ dimensions: { window, screen }, columns: this.calculateColumnWidth(window) });
+  };
+
+  componentDidMount() {
+    Dimensions.addEventListener("change", this.onChange);
+  };
+
+  componentWillUnmount() {
+    Dimensions.removeEventListener("change", this.onChange);
+  };
+
+  renderNote = notes => {
+    return <NoteWidget width={noteWidgetWidth} ID={notes.item.key}/>
+  };
 
   render() {
     return(
-      <View>
-        <Text>NotesMainPanel</Text>
+      <View style={styles.mainContainer}>
+        <FlatList numColumns={this.state.columns} key={this.state.columns} data={this.state.notes} renderItem={this.renderNote}/>
       </View>
     );
   }
 };
 
 
 const styles = StyleSheet.create({
+  mainContainer: {
+    flex: 1,
+    flexDirection: "column",
+    margin: 20,
+    backgroundColor: "transparent",
+  },
 });
 
 

src/Widgets/NoteWidget.js

@@ -0,0 +1,98 @@
+/**
+ * @format
+ * @flow strict-local
+ */
+
+import React from 'react';
+import {
+  AppRegistry,
+  StyleSheet,
+  Text,
+  TouchableHighlight,
+  View,
+  NativeModules,
+} from 'react-native';
+
+
+class NoteWidget extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      width: props.width,
+      ID: Number(props.ID),
+    }
+  };
+
+  enterNote = () => {
+    NativeModules.NoteWidgetClickHandler.openWidget(this.state.ID);
+  };
+
+  render() {
+    return(
+      <TouchableHighlight onPress={this.enterNote} style={styles.noteWidget} underlayColor={'transparent'}>
+        <View style={{width: this.state.width}}>
+
+          <View style={styles.noteHeader}>
+            <Text>{this.state.ID}</Text>
+            <View style={styles.noteTitle}>
+              <Text style={{textAlign: "center"}}>Header</Text>
+            </View>
+          </View>
+
+          <View style={styles.noteSeparator}></View>
+
+          <View style={styles.noteMainContent}>
+            <Text>
+              This is the single widget
+              {'\n'}With the text written here only for the presentation purpose.
+            </Text>
+            <Text>This note has the ID: {this.state.ID}</Text>
+          </View>
+
+        </View>
+      </TouchableHighlight>
+    );
+  }
+};
+
+
+const styles = StyleSheet.create({
+  noteWidget: {
+    borderColor: "grey",
+    borderWidth: 1,
+    margin: 20,
+    backgroundColor: "whitesmoke",
+    borderRadius: 10,
+    shadowOffset: {x: 5, y: 50},
+    shadowColor: "black",
+    elevation: 10,
+    opacity: 0.8
+  },
+  noteHeader: {
+    flex: 1,
+    flexDirection: "row",
+    margin: 5,
+  },
+  noteTitle: {
+    alignSelf: "center",
+    alignContent: "center",
+    alignItems: "center",
+    textAlign: "center",
+    marginHorizontal: 10,
+  },
+  noteSeparator: {
+    borderColor: "black",
+    borderWidth: 0.5,
+    marginTop: 5,
+    marginBottom: 10,
+    alignSelf: "stretch"
+  },
+  noteMainContent: {
+    margin: 10
+  }
+});
+
+
+AppRegistry.registerComponent("NoteWidget", () => NoteWidget);
+
+export default NoteWidget;

windows/ReactNativeNotes/App.cpp

@@ -53,7 +53,7 @@ void App::OnLaunched(activation::LaunchActivatedEventArgs const& e)
     super::OnLaunched(e);
 
     Frame rootFrame = Window::Current().Content().as<Frame>();
-    rootFrame.Navigate(xaml_typename<ReactNativeNotes::MainPage>(), box_value(e.Arguments()));
+    rootFrame.Navigate(xaml_typename<ReactNativeNotes::NotesPage>(), box_value(e.Arguments()));
 }
 
 /// <summary>

windows/ReactNativeNotes/MainPage.cpp

@@ -15,6 +15,7 @@ namespace winrt::ReactNativeNotes::implementation
     {
         InitializeComponent();
         auto app = Application::Current().as<App>();
+        Navigate( L"NotesPage", false );
     }
 
     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
     {
     }
 
-    void MainPage::Navigate( winrt::hstring pageName ) noexcept
+    void MainPage::Navigate( winrt::hstring pageName, const bool hasAnimation ) noexcept
     {
         auto pageToNavigateTo = Windows::UI::Xaml::Interop::TypeName
         {
             to_hstring( L"ReactNativeNotes." + pageName ),
             Windows::UI::Xaml::Interop::TypeKind::Custom
         };
-        auto navigationAnimation = Windows::UI::Xaml::Media::Animation::SlideNavigationTransitionInfo();
-        navigationAnimation.Effect( Windows::UI::Xaml::Media::Animation::SlideNavigationTransitionEffect::FromLeft );
-        ApplicationContentFrame().Navigate( pageToNavigateTo, nullptr, navigationAnimation );
+        if( hasAnimation )
+        {
+            auto navigationAnimation = Windows::UI::Xaml::Media::Animation::SlideNavigationTransitionInfo();
+            navigationAnimation.Effect( Windows::UI::Xaml::Media::Animation::SlideNavigationTransitionEffect::FromLeft );
+            ApplicationContentFrame().Navigate( pageToNavigateTo, nullptr, navigationAnimation );
+        }
+        else
+        {
+            auto navigationAnimation = Windows::UI::Xaml::Media::Animation::SuppressNavigationTransitionInfo();
+            ApplicationContentFrame().Navigate( pageToNavigateTo, nullptr, navigationAnimation );
+        }
+
     }
 } 
 

windows/ReactNativeNotes/MainPage.h

@@ -14,7 +14,7 @@ namespace winrt::ReactNativeNotes::implementation
         void TopNavigationPanel_BackRequested( Windows::UI::Xaml::Controls::NavigationView const& sender, Windows::UI::Xaml::Controls::NavigationViewBackRequestedEventArgs const& args );
 
     private:
-        void Navigate( winrt::hstring pageName ) noexcept;
+        void Navigate( winrt::hstring pageName, const bool hasAnimation = true ) noexcept;
     };
 }
 

windows/ReactNativeNotes/NativeModules/NoteWidgetClickHandler.hpp

@@ -0,0 +1,41 @@
+#pragma once
+
+#include "pch.h"
+#include "NativeModules.h"
+
+
+namespace ReactNativeNotes
+{
+    REACT_MODULE( NoteWidgetClickHandler );
+    struct NoteWidgetClickHandler
+    {
+        REACT_CONSTANT( ID, L"ID" );
+        const unsigned int ID;
+
+        REACT_METHOD( OpenWidget, L"openWidget" );
+        void OpenWidget( const unsigned int ID ) noexcept
+        {
+            NavigateViaMainFrame( L"ReactNativeNotes.NoteWidgetDetailsPage" );
+        }
+
+        REACT_METHOD( GoToNotesScreen, L"goToNotesScreen" );
+        void GoToNotesScreen() noexcept
+        {
+            NavigateViaMainFrame( L"ReactNativeNotes.MainPage" );
+        }
+
+
+    private:
+        void NavigateViaMainFrame( const winrt::hstring pageName )
+        {
+            auto pageToNavigateTo = winrt::Windows::UI::Xaml::Interop::TypeName
+            {
+                pageName,
+                winrt::Windows::UI::Xaml::Interop::TypeKind::Custom
+            };
+            auto navigationAnimation = winrt::Windows::UI::Xaml::Media::Animation::DrillInNavigationTransitionInfo();
+            auto& rootFrame = winrt::Windows::UI::Xaml::Window::Current().Content().as<winrt::Windows::UI::Xaml::Controls::Frame>();
+            rootFrame.Navigate( pageToNavigateTo, nullptr, navigationAnimation );
+        }
+    };
+}

windows/ReactNativeNotes/NoteWidgetDetailsPage.cpp

@@ -0,0 +1,16 @@
+#include "pch.h"
+#include "NoteWidgetDetailsPage.h"
+#include "NoteWidgetDetailsPage.g.cpp"
+
+#include "App.h"
+
+
+namespace winrt::ReactNativeNotes::implementation
+{
+    NoteWidgetDetailsPage::NoteWidgetDetailsPage()
+    {
+        InitializeComponent();
+        auto app = Windows::UI::Xaml::Application::Current().as<App>();
+        ReactRootView().ReactNativeHost( app->Host() );
+    }
+}

windows/ReactNativeNotes/NoteWidgetDetailsPage.h

@@ -0,0 +1,19 @@
+#pragma once
+
+#include "NoteWidgetDetailsPage.g.h"
+
+namespace winrt::ReactNativeNotes::implementation
+{
+    class NoteWidgetDetailsPage : public NoteWidgetDetailsPageT<NoteWidgetDetailsPage>
+    {
+    public:
+        NoteWidgetDetailsPage();
+    };
+}
+
+namespace winrt::ReactNativeNotes::factory_implementation
+{
+    class NoteWidgetDetailsPage : public NoteWidgetDetailsPageT<NoteWidgetDetailsPage, implementation::NoteWidgetDetailsPage>
+    {
+    };
+}

windows/ReactNativeNotes/NoteWidgetDetailsPage.idl

@@ -0,0 +1,8 @@
+namespace ReactNativeNotes
+{
+    [default_interface]
+    runtimeclass NoteWidgetDetailsPage : Windows.UI.Xaml.Controls.Page
+    {
+        NoteWidgetDetailsPage();
+    }
+}

windows/ReactNativeNotes/NoteWidgetDetailsPage.xaml

@@ -0,0 +1,14 @@
+<Page
+    x:Class="ReactNativeNotes.NoteWidgetDetailsPage"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:ReactNativeNotes"
+    xmlns:react="using:Microsoft.ReactNative"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d">
+    <react:ReactRootView
+        x:Name="ReactRootView"
+        ComponentName="NoteWidgetDetailsPanel"
+        MinHeight="400"/>
+</Page>