From 91ca416c9f2318483a1f21fef7d9824188dc8a9a Mon Sep 17 00:00:00 2001
From: Max Lynch <max@ionic.io>
Date: Tue, 22 Dec 2020 17:27:45 -0600
Subject: [PATCH] Icon component

---
 components/pages/Home.jsx  |  4 ++--
 components/ui/Button.jsx   |  2 +-
 components/ui/Icon.jsx     | 19 ++++++++++++++++++
 components/ui/Menu.jsx     | 20 +++++++++----------
 components/ui/Modal.jsx    |  9 ++++-----
 components/ui/Nav.jsx      |  2 +-
 components/ui/SafeArea.jsx |  8 ++++++++
 components/ui/Tab.jsx      | 25 +++++++++++++++++-------
 package-lock.json          |  6 ++++++
 package.json               |  1 +
 pages/index.js             | 30 +++++++++++++++++++++-------
 styles/global.css          | 40 ++++++++++++++++++++++++++++++++++++++
 12 files changed, 132 insertions(+), 34 deletions(-)
 create mode 100644 components/ui/Icon.jsx

diff --git a/components/pages/Home.jsx b/components/pages/Home.jsx
index f72ed92..ca7a626 100644
--- a/components/pages/Home.jsx
+++ b/components/pages/Home.jsx
@@ -21,8 +21,8 @@ const PostCard = ({ title, type, text, author, image }) => (
 const Home = ({ selected }) => {
   return (
     <Content visible={selected}>
-      {homeItems.map(i => (
-        <PostCard {...i} />
+      {homeItems.map((i, index) => (
+        <PostCard {...i} key={index} />
       ))}
     </Content>
   );
diff --git a/components/ui/Button.jsx b/components/ui/Button.jsx
index e538362..207b33a 100644
--- a/components/ui/Button.jsx
+++ b/components/ui/Button.jsx
@@ -3,7 +3,7 @@ import classNames from 'classnames';
 const Button = ({ children, className, ...props }) => (
   <button
     {...props}
-    class={classNames(
+    className={classNames(
       'inline-block text-xs font-medium leading-6 text-center uppercase transition rounded-lg ripple focus:outline-none',
       className
     )}
diff --git a/components/ui/Icon.jsx b/components/ui/Icon.jsx
new file mode 100644
index 0000000..bc1acc3
--- /dev/null
+++ b/components/ui/Icon.jsx
@@ -0,0 +1,19 @@
+import classNames from 'classnames';
+
+const Icon = ({ icon, ...props }) => {
+  const svg = icon.replace('data:image/svg+xml;utf8,', '');
+  return (
+    <div
+      {...props}
+      className={classNames('ui-icon', {
+        'ion-icon': true,
+        'ion-color': true,
+        [props.className]: true,
+      })}
+    >
+      <div className="icon-inner" dangerouslySetInnerHTML={{ __html: svg }} />
+    </div>
+  );
+};
+
+export default Icon;
diff --git a/components/ui/Menu.jsx b/components/ui/Menu.jsx
index 94bb6e2..f6963bb 100644
--- a/components/ui/Menu.jsx
+++ b/components/ui/Menu.jsx
@@ -11,17 +11,15 @@ const Menu = ({ open, onClose, children, className, ...props }) => {
   const [dragging, setDragging] = useState(false);
 
   useEffect(() => {
-    try {
-      if (open) {
-        Plugins.StatusBar.setStyle({
-          style: 'LIGHT',
-        });
-      } else {
-        Plugins.StatusBar.setStyle({
-          style: 'DARK',
-        });
-      }
-    } catch (e) {}
+    if (open) {
+      Plugins.StatusBar.setStyle({
+        style: 'LIGHT',
+      }).catch(() => {});
+    } else {
+      Plugins.StatusBar.setStyle({
+        style: 'DARK',
+      }).catch(() => {});
+    }
   }, [open]);
 
   useLayoutEffect(() => {
diff --git a/components/ui/Modal.jsx b/components/ui/Modal.jsx
index bf0e4c9..2fa20ec 100644
--- a/components/ui/Modal.jsx
+++ b/components/ui/Modal.jsx
@@ -4,18 +4,17 @@ import { useDrag } from 'react-use-gesture';
 import Store from '../../store';
 import { SafeAreaContext } from './SafeArea';
 
+// A Modal window that slides in from offscreen and can be closed
+// by dragging.
 const Modal = ({ open, onClose, children }) => {
   const ref = useRef();
   const [dragging, setDragging] = useState(false);
   const [rect, setRect] = useState(null);
   const [y, setY] = useState(100000);
 
-  const { top } = useContext(SafeAreaContext);
-
-  const safeAreaTop = top;
+  const { top: safeAreaTop } = useContext(SafeAreaContext);
 
   const _open = useCallback(() => {
-    console.log('Opening modal!', safeAreaTop);
     setY(safeAreaTop);
   }, [safeAreaTop]);
 
@@ -75,7 +74,7 @@ const Modal = ({ open, onClose, children }) => {
       ref={ref}
       {...bind()}
       className={classNames(
-        'fixed z-40 top-5 transform transform-gpu ranslate w-full h-full bg-white rounded-t-xl',
+        'fixed z-40 top-5 transform transform-gpu w-full h-full bg-white rounded-t-xl',
         {
           'ease-in-out duration-300 transition-transformation': !dragging,
         }
diff --git a/components/ui/Nav.jsx b/components/ui/Nav.jsx
index 3aa0e13..e43d155 100644
--- a/components/ui/Nav.jsx
+++ b/components/ui/Nav.jsx
@@ -9,7 +9,7 @@ const Nav = ({ page }) => {
   useEffect(() => {
     Plugins.StatusBar.setStyle({
       style: 'DARK',
-    });
+    }).catch(() => {});
   }, []);
 
   return (
diff --git a/components/ui/SafeArea.jsx b/components/ui/SafeArea.jsx
index 165b7e2..9373002 100644
--- a/components/ui/SafeArea.jsx
+++ b/components/ui/SafeArea.jsx
@@ -2,6 +2,14 @@ import { createContext, useEffect, useState } from 'react';
 
 export const SafeAreaContext = createContext({ top: 0, bottom: 0 });
 
+// This provider reads and stores the computed safe area
+// on devices with notches/etc. (iPhone X, for example)
+//
+// This is done by reading the CSS Properties --safe-area-top and --safe-area-bottom
+// and then storing them as state values.
+//
+// These values are useful for JS-driven interactions, such as a modal that
+// will drag in and out but needs to offset for the safe region.
 export const SafeAreaProvider = ({ children }) => {
   const [safeAreaTop, setSafeAreaTop] = useState(0);
   const [safeAreaBottom, setSafeAreaBottom] = useState(0);
diff --git a/components/ui/Tab.jsx b/components/ui/Tab.jsx
index cc601e8..b243a9c 100644
--- a/components/ui/Tab.jsx
+++ b/components/ui/Tab.jsx
@@ -1,13 +1,24 @@
 import classNames from 'classnames';
+import Icon from './Icon';
 
 const Tab = ({ title, icon, selected, selectedIcon, onClick }) => (
-  <a onClick={onClick} href="#" className={classNames('px-6 rounded-md text-sm text-center font-medium cursor-pointer', {
-    'text-gray-500': !selected,
-    'text-gray-800': selected
-  })}>
-    {icon && <ion-icon name={selected ? selectedIcon : icon } className="cursor-pointer" style={{ fontSize: '18px' }}/>}
+  <a
+    onClick={onClick}
+    href="#"
+    className={classNames('px-6 rounded-md text-sm text-center font-medium cursor-pointer', {
+      'text-gray-500': !selected,
+      'text-gray-800': selected,
+    })}
+  >
+    {icon && (
+      <Icon
+        icon={selected ? selectedIcon : icon}
+        className="cursor-pointer"
+        style={{ fontSize: '18px' }}
+      />
+    )}
     <label className="block cursor-pointer">{title}</label>
   </a>
-)
+);
 
-export default Tab;
\ No newline at end of file
+export default Tab;
diff --git a/package-lock.json b/package-lock.json
index 0314f1a..e98917f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2769,6 +2769,12 @@
         }
       }
     },
+    "ionicons": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-5.2.3.tgz",
+      "integrity": "sha512-87qtgBkieKVFagwYA9Cf91B3PCahQbEOMwMt8bSvlQSgflZ4eE5qI4MGj2ZlIyadeX0dgo+0CzZsy3ow0CsBAg==",
+      "dev": true
+    },
     "is-accessor-descriptor": {
       "version": "0.1.6",
       "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
diff --git a/package.json b/package.json
index ce7a190..421b1b1 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "tailwindcss": "^2.0.2"
   },
   "devDependencies": {
+    "ionicons": "^5.2.3",
     "prettier": "^2.2.1",
     "pullstate": "^1.20.5",
     "react-spring": "^8.0.27",
diff --git a/pages/index.js b/pages/index.js
index 5acd897..ef5bf4f 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { Virtuoso } from 'react-virtuoso';
+import { flash, flashOutline, cog, cogOutline, home, homeOutline } from 'ionicons/icons';
 
 import Store from '../store';
 
@@ -18,21 +19,22 @@ import { SafeAreaProvider } from '../components/ui/SafeArea';
 import Home from '../components/pages/Home';
 import Feed from '../components/pages/Feed';
 import Settings from '../components/pages/Settings';
+import { useDrag } from 'react-use-gesture';
 
 const pages = [
-  { id: 'home', title: 'Home', icon: 'home-outline', selectedIcon: 'home', component: Home },
+  { id: 'home', title: 'Home', icon: homeOutline, selectedIcon: home, component: Home },
   {
     id: 'feed',
     title: 'Feed',
-    icon: 'flash-outline',
-    selectedIcon: 'person',
+    icon: flashOutline,
+    selectedIcon: flash,
     component: Feed,
   },
   {
     id: 'settings',
     title: 'Settings',
-    icon: 'cog-outline',
-    selectedIcon: 'cog',
+    icon: cogOutline,
+    selectedIcon: cog,
     component: Settings,
   },
 ];
@@ -42,7 +44,7 @@ const CurrentPage = ({ page }) => {
     <div className="flex-1 z-0 overflow-hidden relative">
       {pages.map(p => {
         const Page = p.component;
-        return <Page selected={page.id === p.id} />;
+        return <Page selected={page.id === p.id} key={p.id} />;
       })}
     </div>
   );
@@ -133,10 +135,24 @@ export default function Index() {
     });
   };
 
+  const bind = useDrag(
+    ({ down, movement: [mx] }) => {
+      console.log('DRAGGING SIDE', mx);
+    },
+    {
+      axis: 'x',
+    }
+  );
+
   // This is an example app layout. We've got a hidden menu that will be toggled
   //
   return (
-    <App>
+    <App
+      {...bind()}
+      style={{
+        touchAction: 'pan-x',
+      }}
+    >
       <SafeAreaProvider>
         <Menu open={showMenu} onClose={closeMenu}>
           <MenuContent />
diff --git a/styles/global.css b/styles/global.css
index e757de5..fbe6f15 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -12,3 +12,43 @@ body {
   height: 100vh;
   width: 100vw;
 }
+
+/**
+ * Styles for the Icon UI component.
+ *
+ * TODO: Move these into a styled component or similar system if desired
+ */
+.ui-icon {
+  display: inline-block;
+
+  width: 1em;
+  height: 1em;
+
+  contain: strict;
+
+  fill: currentColor;
+
+  box-sizing: content-box !important;
+}
+
+.ui-icon .ionicon {
+  stroke: currentColor;
+}
+
+.ui-icon .ionicon-fill-none {
+  fill: none;
+}
+
+.ui-icon .ionicon-stroke-width {
+  stroke-width: 32px;
+  stroke-width: var(--ionicon-stroke-width, 32px);
+}
+
+.ui-icon .icon-inner,
+.ui-icon .ionicon,
+.ui-icon svg {
+  display: block;
+
+  height: 100%;
+  width: 100%;
+}