React rc2 updates (ionic-team#928)

* fix(react): wrap pages in IonPage (ionic-team#903) * chore(): react rc2 prep * chore(): updates for react rc2 release
ndrake · Sep 11, 2019 · dd09f7b · dd09f7b
1 parent 8c1abcc
commit dd09f7b
Show file tree

Hide file tree

Showing 13 changed files with 84 additions and 91 deletions.
diff --git a/react/base/package.json b/react/base/package.json
@@ -3,15 +3,15 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@ionic/react": "^4.8.0-rc.0",
-    "@ionic/react-router": "^4.8.0-rc.0",
+    "@ionic/react": "^4.9.0-rc.2",
+    "@ionic/react-router": "^4.9.0-rc.2",
     "@types/jest": "24.0.11",
     "@types/node": "11.11.3",
     "@types/react": "^16.9.1",
     "@types/react-dom": "^16.8.5",
     "@types/react-router": "^5.0.3",
     "@types/react-router-dom": "^4.3.1",
-    "ionicons": "^4.6.2",
+    "ionicons": "^4.6.3",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
     "react-router": "^5.0.1",

diff --git a/react/base/public/index.html b/react/base/public/index.html
@@ -12,12 +12,12 @@
     />
     <meta name="format-detection" content="telephone=no" />
     <meta name="msapplication-tap-highlight" content="no" />
-  
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+
+    <link rel="shortcut icon" type="image/png" href="%PUBLIC_URL%/assets/icon/favicon.png" />
 
     <!-- add to homescreen for ios -->
     <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-title" content="Ionic App" />  
+    <meta name="apple-mobile-web-app-title" content="Ionic App" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black" />
   </head>
 

diff --git a/react/official/blank/src/App.tsx b/react/official/blank/src/App.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Redirect, Route } from 'react-router-dom';
-import { IonApp, IonPage, IonRouterOutlet } from '@ionic/react';
+import { IonApp, IonRouterOutlet } from '@ionic/react';
 import { IonReactRouter } from '@ionic/react-router';
 import Home from './pages/Home';
 
@@ -23,15 +23,13 @@ import '@ionic/react/css/display.css';
 /* Theme variables */
 import './theme/variables.css';
 
-const App: React.FunctionComponent = () => (
+const App: React.FC = () => (
   <IonApp>
     <IonReactRouter>
-      <IonPage>
-        <IonRouterOutlet>
-          <Route path="/home" component={Home} exact={true} />
-          <Route exact path="/" render={() => <Redirect to="/home" />} />
-        </IonRouterOutlet>
-      </IonPage>
+      <IonRouterOutlet>
+        <Route path="/home" component={Home} exact={true} />
+        <Route exact path="/" render={() => <Redirect to="/home" />} />
+      </IonRouterOutlet>
     </IonReactRouter>
   </IonApp>
 );

diff --git a/react/official/blank/src/pages/Home.tsx b/react/official/blank/src/pages/Home.tsx
@@ -1,9 +1,9 @@
-import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 import React from 'react';
 
-const Home: React.FunctionComponent = () => {
+const Home: React.FC = () => {
   return (
-    <>
+    <IonPage>
       <IonHeader>
         <IonToolbar>
           <IonTitle>Ionic Blank</IonTitle>
@@ -19,8 +19,8 @@ const Home: React.FunctionComponent = () => {
           will be your guide.
         </p>
       </IonContent>
-    </>
+    </IonPage>
   );
 };
 
-export default Home;
+export default Home;
diff --git a/react/official/sidemenu/src/App.tsx b/react/official/sidemenu/src/App.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Redirect, Route } from 'react-router-dom';
-import { IonApp, IonPage, IonRouterOutlet, IonSplitPane } from '@ionic/react';
+import { IonApp, IonRouterOutlet, IonSplitPane } from '@ionic/react';
 import { IonReactRouter } from '@ionic/react-router';
 import { AppPage } from './declarations';
 
@@ -41,18 +41,16 @@ const appPages: AppPage[] = [
   }
 ];
 
-const App: React.FunctionComponent = () => (
+const App: React.FC = () => (
   <IonApp>
     <IonReactRouter>
       <IonSplitPane contentId="main">
         <Menu appPages={appPages} />
-        <IonPage id="main">
-          <IonRouterOutlet>
-            <Route path="/:tab(home)" component={Home} exact={true} />
-            <Route path="/:tab(home)/list" component={List} exact={true} />
-            <Route exact path="/" render={() => <Redirect to="/home" />} />
-          </IonRouterOutlet>
-        </IonPage>
+        <IonRouterOutlet id="main">
+          <Route path="/home" component={Home} exact={true} />
+          <Route path="/home/list" component={List} exact={true} />
+          <Route exact path="/" render={() => <Redirect to="/home" />} />
+        </IonRouterOutlet>
       </IonSplitPane>
     </IonReactRouter>
   </IonApp>

diff --git a/react/official/sidemenu/src/components/Menu.tsx b/react/official/sidemenu/src/components/Menu.tsx
@@ -19,7 +19,7 @@ interface MenuProps extends RouteComponentProps {
 }
 
 const Menu: React.FunctionComponent<MenuProps> = ({ appPages }) => (
-  <IonMenu contentId="main">
+  <IonMenu contentId="main" type="overlay">
     <IonHeader>
       <IonToolbar>
         <IonTitle>Menu</IonTitle>
@@ -30,7 +30,7 @@ const Menu: React.FunctionComponent<MenuProps> = ({ appPages }) => (
         {appPages.map((appPage, index) => {
           return (
             <IonMenuToggle key={index} autoHide={false}>
-              <IonItem href={appPage.url}>
+              <IonItem href={appPage.url} routerDirection="none">
                 <IonIcon slot="start" icon={appPage.icon} />
                 <IonLabel>{appPage.title}</IonLabel>
               </IonItem>

diff --git a/react/official/sidemenu/src/pages/Home.tsx b/react/official/sidemenu/src/pages/Home.tsx
@@ -13,16 +13,17 @@ import {
   IonList,
   IonListHeader,
   IonMenuButton,
+  IonPage,
   IonTitle,
   IonToolbar
   } from '@ionic/react';
 import { book, build, colorFill, grid } from 'ionicons/icons';
 import React from 'react';
 import './Home.css';
 
-const HomePage: React.FunctionComponent = () => {
+const HomePage: React.FC = () => {
   return (
-    <>
+    <IonPage>
       <IonHeader>
         <IonToolbar>
           <IonButtons slot="start">
@@ -68,7 +69,7 @@ const HomePage: React.FunctionComponent = () => {
           </IonItem>
         </IonList>
       </IonContent>
-    </>
+    </IonPage>
   );
 };
 

diff --git a/react/official/sidemenu/src/pages/List.tsx b/react/official/sidemenu/src/pages/List.tsx
@@ -1,10 +1,10 @@
-import { IonButtons, IonContent, IonHeader, IonIcon, IonItem, IonList, IonMenuButton, IonTitle, IonToolbar } from '@ionic/react';
+import { IonButtons, IonContent, IonHeader, IonIcon, IonItem, IonList, IonMenuButton, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 import { americanFootball, basketball, beer, bluetooth, boat, build, flask, football, paperPlane, wifi } from 'ionicons/icons';
 import React from 'react';
 
-const ListPage: React.FunctionComponent = () => {
+const ListPage: React.FC = () => {
   return (
-    <>
+    <IonPage>
       <IonHeader>
         <IonToolbar>
           <IonButtons slot="start">
@@ -17,7 +17,7 @@ const ListPage: React.FunctionComponent = () => {
       <IonContent>
         <ListItems />
       </IonContent>
-    </>
+    </IonPage>
   );
 };
 

diff --git a/react/official/tabs/src/App.tsx b/react/official/tabs/src/App.tsx
@@ -4,7 +4,6 @@ import {
   IonApp,
   IonIcon,
   IonLabel,
-  IonPage,
   IonRouterOutlet,
   IonTabBar,
   IonTabButton,
@@ -36,34 +35,32 @@ import '@ionic/react/css/display.css';
 /* Theme variables */
 import './theme/variables.css';
 
-const App: React.FunctionComponent = () => (
+const App: React.FC = () => (
   <IonApp>
     <IonReactRouter>
-      <IonPage id="main">
-        <IonTabs>
-          <IonRouterOutlet>
-            <Route path="/:tab(tab1)" component={Tab1} exact={true} />
-            <Route path="/:tab(tab2)" component={Tab2} exact={true} />
-            <Route path="/:tab(tab2)/details" component={Details} />
-            <Route path="/:tab(tab3)" component={Tab3} />
-            <Route exact path="/" render={() => <Redirect to="/tab1" />} />
-          </IonRouterOutlet>
-          <IonTabBar slot="bottom">
-            <IonTabButton tab="tab1" href="/tab1">
-              <IonIcon icon={flash} />
-              <IonLabel>Tab One</IonLabel>
-            </IonTabButton>
-            <IonTabButton tab="tab2" href="/tab2">
-              <IonIcon icon={apps} />
-              <IonLabel>Tab Two</IonLabel>
-            </IonTabButton>
-            <IonTabButton tab="tab3" href="/tab3">
-              <IonIcon icon={send} />
-              <IonLabel>Tab Three</IonLabel>
-            </IonTabButton>
-          </IonTabBar>
-        </IonTabs>
-      </IonPage>
+      <IonTabs>
+        <IonRouterOutlet>
+          <Route path="/:tab(tab1)" component={Tab1} exact={true} />
+          <Route path="/:tab(tab2)" component={Tab2} exact={true} />
+          <Route path="/:tab(tab2)/details" component={Details} />
+          <Route path="/:tab(tab3)" component={Tab3} />
+          <Route exact path="/" render={() => <Redirect to="/tab1" />} />
+        </IonRouterOutlet>
+        <IonTabBar slot="bottom">
+          <IonTabButton tab="tab1" href="/tab1">
+            <IonIcon icon={flash} />
+            <IonLabel>Tab One</IonLabel>
+          </IonTabButton>
+          <IonTabButton tab="tab2" href="/tab2">
+            <IonIcon icon={apps} />
+            <IonLabel>Tab Two</IonLabel>
+          </IonTabButton>
+          <IonTabButton tab="tab3" href="/tab3">
+            <IonIcon icon={send} />
+            <IonLabel>Tab Three</IonLabel>
+          </IonTabButton>
+        </IonTabBar>
+      </IonTabs>
     </IonReactRouter>
   </IonApp>
 );

diff --git a/react/official/tabs/src/pages/Details.tsx b/react/official/tabs/src/pages/Details.tsx
@@ -1,21 +1,21 @@
 import React from 'react';
-import { IonBackButton, IonButtons, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/react';
+import { IonBackButton, IonButtons, IonHeader, IonPage, IonToolbar, IonTitle, IonContent } from '@ionic/react';
 
-const Details: React.FunctionComponent = () => {
+const Details: React.FC = () => {
   return (
-    <>
-        <IonHeader>
-          <IonToolbar>
-            <IonButtons slot="start">
-              <IonBackButton defaultHref="/tab2" />
-            </IonButtons>
-            <IonTitle>Detail</IonTitle>
-          </IonToolbar>
-        </IonHeader>
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonBackButton defaultHref="/tab2" />
+          </IonButtons>
+          <IonTitle>Detail</IonTitle>
+        </IonToolbar>
+      </IonHeader>
       <IonContent>
         <p>Details</p>
       </IonContent>
-    </>
+    </IonPage>
   );
 };
 

diff --git a/react/official/tabs/src/pages/Tab1.tsx b/react/official/tabs/src/pages/Tab1.tsx
@@ -11,24 +11,25 @@ import {
   IonLabel,
   IonList,
   IonListHeader,
+  IonPage,
   IonTitle,
   IonToolbar
-  } from '@ionic/react';
+} from '@ionic/react';
 import { book, build, colorFill, grid } from 'ionicons/icons';
 import React from 'react';
 import './Tab1.css';
 
-const Tab1: React.FunctionComponent = () => {
+const Tab1: React.FC = () => {
   return (
-    <>
+    <IonPage>
       <IonHeader>
         <IonToolbar>
           <IonTitle>Tab One</IonTitle>
         </IonToolbar>
       </IonHeader>
       <IonContent>
         <IonCard className="welcome-card">
-          <img src="/assets/shapes.svg" alt=""/>
+          <img src="/assets/shapes.svg" alt="" />
           <IonCardHeader>
             <IonCardSubtitle>Get Started</IonCardSubtitle>
             <IonCardTitle>Welcome to Ionic</IonCardTitle>
@@ -63,7 +64,7 @@ const Tab1: React.FunctionComponent = () => {
           </IonItem>
         </IonList>
       </IonContent>
-    </>
+    </IonPage>
   );
 };
 

diff --git a/react/official/tabs/src/pages/Tab2.tsx b/react/official/tabs/src/pages/Tab2.tsx
@@ -1,11 +1,9 @@
 import React from 'react';
-import { RouteComponentProps } from 'react-router';
-import { IonContent, IonHeader, IonItem, IonLabel, IonList, IonTitle, IonToolbar } from '@ionic/react';
-
-const Tab2: React.FunctionComponent<RouteComponentProps> = ({ history }) => {
+import { IonContent, IonHeader, IonItem, IonLabel, IonList, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 
+const Tab2: React.FC = () => {
   return (
-    <>
+    <IonPage>
       <IonHeader>
         <IonToolbar>
           <IonTitle>Tab Two</IonTitle>
@@ -20,7 +18,7 @@ const Tab2: React.FunctionComponent<RouteComponentProps> = ({ history }) => {
           </IonItem>
         </IonList>
       </IonContent>
-    </>
+    </IonPage>
   );
 };
 

diff --git a/react/official/tabs/src/pages/Tab3.tsx b/react/official/tabs/src/pages/Tab3.tsx
@@ -1,16 +1,16 @@
 import React from 'react';
-import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/react';
+import { IonHeader, IonToolbar, IonPage, IonTitle, IonContent } from '@ionic/react';
 
-const Tab3Page: React.FunctionComponent = () => {
+const Tab3Page: React.FC = () => {
   return (
-    <>
+    <IonPage>
       <IonHeader>
         <IonToolbar>
           <IonTitle>Tab Three</IonTitle>
         </IonToolbar>
       </IonHeader>
       <IonContent />
-    </>
+    </IonPage>
   );
 };