fix(docz-theme-default): prevent sidebar toggle on desktop

doczjs · Sep 4, 2018 · 7a3b97d · 7a3b97d
1 parent 38325e5
commit 7a3b97d
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 1 deletion.
diff --git a/packages/docz-theme-default/package.json b/packages/docz-theme-default/package.json
@@ -43,6 +43,7 @@
     "react-live": "^1.11.0",
     "react-perfect-scrollbar": "^1.2.0",
     "react-powerplug": "^1.0.0-rc.1",
+    "react-sizes": "^1.0.4",
     "webfontloader": "^1.6.28"
   },
   "peerDependencies": {

diff --git a/packages/docz-theme-default/src/components/shared/Sidebar/index.tsx b/packages/docz-theme-default/src/components/shared/Sidebar/index.tsx
@@ -2,6 +2,7 @@ import * as React from 'react'
 import { SFC } from 'react'
 import { Docs, Entry, DocsRenderProps } from 'docz'
 import { Toggle, State } from 'react-powerplug'
+import withSizes from 'react-sizes'
 import styled from 'react-emotion'
 import match from 'match-sorter'
 
@@ -137,7 +138,11 @@ const Composed: SFC<ComposedProps> = ({ children }) => (
   </Docs>
 )
 
-export const Sidebar = () => (
+interface SidebarProps {
+  isDesktop: boolean
+}
+
+const SidebarBase: SFC<SidebarProps> = ({ isDesktop }) => (
   <Composed>
     {({ menus, docs: initialDocs, toggle, on, state, setState }) => {
       const docs = state.docs || initialDocs
@@ -161,6 +166,7 @@ export const Sidebar = () => (
       }
 
       const handleSidebarToggle = () => {
+        if (isDesktop) return
         toggle && toggle()
       }
 
@@ -208,3 +214,9 @@ export const Sidebar = () => (
     }}
   </Composed>
 )
+
+const mapSizesToProps = ({ width }: { width: number }) => ({
+  isDesktop: width >= breakpoints.desktop,
+})
+
+export const Sidebar = withSizes(mapSizesToProps)(SidebarBase)
diff --git a/packages/docz-theme-default/src/types.d.ts b/packages/docz-theme-default/src/types.d.ts
@@ -27,6 +27,7 @@ declare module 'react-feather/dist/icons/minimize'
 declare module 'react-feather/dist/icons/refresh-cw'
 declare module 'react-lightweight-tooltip'
 declare module 'react-powerplug'
+declare module 'react-sizes'
 declare module 're-resizable'
 declare module 'webfontloader'
 

diff --git a/packages/docz-theme-default/webpack.config.js b/packages/docz-theme-default/webpack.config.js
@@ -36,6 +36,7 @@ const externalList = [
   'react-feather/dist/icons/maximize',
   'react-feather/dist/icons/minimize',
   'react-feather/dist/icons/refresh-cw',
+  'react-sizes',
 ]
 
 const deps = Object.keys(pkg.dependencies)

diff --git a/yarn.lock b/yarn.lock
@@ -12116,6 +12116,13 @@ react-router@^4.3.1:
     prop-types "^15.6.1"
     warning "^4.0.1"
 
+react-sizes@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/react-sizes/-/react-sizes-1.0.4.tgz#7f09beddf972afe6f8662a0ffe446baac35f6bc5"
+  dependencies:
+    lodash.throttle "^4.1.1"
+    prop-types "^15.6.0"
+
 react-timer-mixin@^0.13.2, react-timer-mixin@^0.13.3:
   version "0.13.4"
   resolved "https://registry.yarnpkg.com/react-timer-mixin/-/react-timer-mixin-0.13.4.tgz#75a00c3c94c13abe29b43d63b4c65a88fc8264d3"