Remove sui Responsive component (#3216)

* Remove sui Reponsive component

* Import ordering

* Use media queries as appropriate

packages/apps-electron/src/index.tsx

@@ -10,13 +10,14 @@ import '@polkadot/react-components/i18n';
 import React, { Suspense } from 'react';
 import ReactDOM from 'react-dom';
 import { HashRouter } from 'react-router-dom';
-
 import { ThemeProvider } from 'styled-components';
-import settings from '@polkadot/ui-settings';
-import Queue from '@polkadot/react-components/Status/Queue';
-import { BlockAuthors, Events } from '@polkadot/react-query';
 import { Api } from '@polkadot/react-api';
 import Apps from '@polkadot/apps/Apps';
+import WindowDimensions from '@polkadot/apps/WindowDimensions';
+import Queue from '@polkadot/react-components/Status/Queue';
+import { BlockAuthors, Events } from '@polkadot/react-query';
+import settings from '@polkadot/ui-settings';
+
 import { electronMainApi } from './api/global-exported-api';
 import { RemoteElectronStore } from './renderer/remote-electron-store';
 
@@ -41,7 +42,9 @@ ReactDOM.render(
           <BlockAuthors>
             <Events>
               <HashRouter>
-                <Apps />
+                <WindowDimensions>
+                  <Apps />
+                </WindowDimensions>
               </HashRouter>
             </Events>
           </BlockAuthors>

packages/apps/src/Apps.tsx

@@ -4,7 +4,7 @@
 
 import { BareProps as Props } from '@polkadot/react-components/types';
 
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import store from 'store';
 import styled from 'styled-components';
 import AccountSidebar from '@polkadot/app-accounts/Sidebar';
@@ -19,6 +19,7 @@ import { SideBarTransition, SIDEBAR_MENU_THRESHOLD } from './constants';
 import Content from './Content';
 import SideBar from './SideBar';
 import WarmUp from './WarmUp';
+import { WindowDimensionsCtx } from './WindowDimensions';
 
 interface SidebarState {
   isCollapsed: boolean;
@@ -34,6 +35,7 @@ function saveSidebar (sidebar: SidebarState): SidebarState {
 }
 
 function Apps ({ className = '' }: Props): React.ReactElement<Props> {
+  const windowDimensions = useContext(WindowDimensionsCtx);
   const { systemChain, systemName } = useApi();
   const [sidebar, setSidebar] = useState<SidebarState>({
     isCollapsed: false,
@@ -71,6 +73,10 @@ function Apps ({ className = '' }: Props): React.ReactElement<Props> {
     []
   );
 
+  useEffect((): void => {
+    _handleResize();
+  }, [_handleResize, windowDimensions]);
+
   const { isCollapsed, isMenu, isMenuOpen } = sidebar;
 
   return (

packages/apps/src/SideBar/index.tsx

@@ -6,7 +6,6 @@ import { Routes } from '@polkadot/apps-routing/types';
 
 import React, { useCallback, useMemo, useState } from 'react';
 import styled from 'styled-components';
-import Responsive from 'semantic-ui-react/dist/commonjs/addons/Responsive';
 import createRoutes from '@polkadot/apps-routing';
 import { Button, ChainImg, Icon, Menu, media } from '@polkadot/react-components';
 
@@ -53,10 +52,7 @@ function SideBar ({ className = '', collapse, handleResize, isCollapsed, isMenuO
   );
 
   return (
-    <Responsive
-      className={`apps--SideBar-Wrapper ${className} ${isCollapsed ? 'collapsed' : 'expanded'}`}
-      onUpdate={handleResize}
-    >
+    <div className={`apps--SideBar-Wrapper ${className} ${isCollapsed ? 'collapsed' : 'expanded'}`}>
       <ChainImg
         className={`toggleImg ${isMenuOpen ? 'closed' : 'open delayed'}`}
         onClick={toggleMenu}
@@ -128,26 +124,21 @@ function SideBar ({ className = '', collapse, handleResize, isCollapsed, isMenuO
             <Menu.Divider hidden />
             {!isCollapsed && <NodeInfo />}
           </div>
-          <Responsive
-            className={`apps--SideBar-collapse ${isCollapsed ? 'collapsed' : 'expanded'}`}
-            minWidth={SIDEBAR_MENU_THRESHOLD}
-          >
+          <div className={`apps--SideBar-collapse ${isCollapsed ? 'collapsed' : 'expanded'}`}>
             <Button
               icon={isCollapsed ? 'angle-double-right' : 'angle-double-left'}
               isBasic
               isCircular
               onClick={collapse}
             />
-          </Responsive>
+          </div>
         </Menu>
-        <Responsive minWidth={SIDEBAR_MENU_THRESHOLD}>
-          <div
-            className='apps--SideBar-toggle'
-            onClick={collapse}
-          />
-        </Responsive>
+        <div
+          className='apps--SideBar-toggle'
+          onClick={collapse}
+        />
       </div>
-    </Responsive>
+    </div>
   );
 }
 
@@ -286,4 +277,11 @@ export default React.memo(styled(SideBar)`
       top: -2.9rem !important;
     `}
   }
+
+  @media only screen and (max-width: ${SIDEBAR_MENU_THRESHOLD}px) {
+    .apps--SideBar-collapse,
+    .apps--Sidebar-toggle {
+      display: none;
+    }
+  }
 `);

packages/apps/src/WindowDimensions.tsx

@@ -0,0 +1,42 @@
+// Copyright 2017-2020 @polkadot/apps authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+// Adapted from https://hackernoon.com/simplifying-responsive-layouts-with-react-hooks-19db73893a7a
+
+import React, { useEffect, useState } from 'react';
+
+interface Dimensions {
+  windowHeight: number;
+  windowWidth: number;
+}
+
+interface Props {
+  children: React.ReactNode;
+}
+
+const WindowDimensionsCtx = React.createContext<Dimensions>({ windowHeight: window.innerHeight, windowWidth: window.innerWidth });
+
+function WindowDimensionsProvider ({ children }: Props): React.ReactElement<Props> {
+  const [dimensions, setDimensions] = useState({ windowHeight: window.innerHeight, windowWidth: window.innerWidth });
+
+  useEffect(() => {
+    const handleResize = () => setDimensions({ windowHeight: window.innerHeight, windowWidth: window.innerWidth });
+
+    window.addEventListener('resize', handleResize);
+
+    return (): void => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  return (
+    <WindowDimensionsCtx.Provider value={dimensions}>
+      {children}
+    </WindowDimensionsCtx.Provider>
+  );
+}
+
+export default React.memo(WindowDimensionsProvider);
+
+export { WindowDimensionsCtx };

packages/apps/src/index.tsx

@@ -18,6 +18,7 @@ import { BlockAuthors, Events } from '@polkadot/react-query';
 import settings from '@polkadot/ui-settings';
 
 import Apps from './Apps';
+import WindowDimensions from './WindowDimensions';
 
 const rootId = 'root';
 const rootElement = document.getElementById(rootId);
@@ -42,7 +43,9 @@ ReactDOM.render(
           <BlockAuthors>
             <Events>
               <HashRouter>
-                <Apps />
+                <WindowDimensions>
+                  <Apps />
+                </WindowDimensions>
               </HashRouter>
             </Events>
           </BlockAuthors>