From d3911b4e1cb40da238603668967be24efbe958d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marcelo=20Forment=C3=A3o?= Date: Sun, 24 Jun 2018 23:06:08 -0300 Subject: [PATCH] feat(docz-theme-default): include breakpoints reactive on sidebar --- packages/docz-theme-default/package.json | 1 + .../src/components/shared/Sidebar/Menu.tsx | 4 +- .../src/components/shared/Sidebar/index.tsx | 132 ++++++++++-------- .../src/components/ui/Table.tsx | 26 ++-- packages/docz-theme-default/src/config.ts | 3 +- packages/docz-theme-default/src/index.tsx | 45 +++--- packages/docz-theme-default/src/types.d.ts | 1 + yarn.lock | 41 +++++- 8 files changed, 161 insertions(+), 92 deletions(-) diff --git a/packages/docz-theme-default/package.json b/packages/docz-theme-default/package.json index b93462452..eab095d2e 100644 --- a/packages/docz-theme-default/package.json +++ b/packages/docz-theme-default/package.json @@ -28,6 +28,7 @@ "prismjs": "^1.14.0", "prop-types": "15.6.1", "react": "^16.4.0", + "react-breakpoints": "^3.0.0", "react-dom": "^16.4.0", "react-emotion": "^9.2.1", "react-feather": "^1.1.0", diff --git a/packages/docz-theme-default/src/components/shared/Sidebar/Menu.tsx b/packages/docz-theme-default/src/components/shared/Sidebar/Menu.tsx index c1bd9da3c..6cf144275 100644 --- a/packages/docz-theme-default/src/components/shared/Sidebar/Menu.tsx +++ b/packages/docz-theme-default/src/components/shared/Sidebar/Menu.tsx @@ -55,7 +55,9 @@ export const Menu: SFC = ({ menu, docs, sidebarToggle }) => (
{docs.map(doc => (
- {doc.name} + + {doc.name} +
))}
diff --git a/packages/docz-theme-default/src/components/shared/Sidebar/index.tsx b/packages/docz-theme-default/src/components/shared/Sidebar/index.tsx index 5f38541ea..0cf999644 100644 --- a/packages/docz-theme-default/src/components/shared/Sidebar/index.tsx +++ b/packages/docz-theme-default/src/components/shared/Sidebar/index.tsx @@ -2,12 +2,14 @@ import React from 'react' import { Docs, Link, Entry, ThemeConfig } from 'docz' import styled from 'react-emotion' import { Toggle } from 'react-powerplug' +import { Media } from 'react-breakpoints' import { Menu } from './Menu' import logo from '../../../images/docz.svg' interface Wrapper { opened: boolean + desktop: boolean } interface IconProps { @@ -22,7 +24,7 @@ interface ToggleBackgroundProps { opened: boolean } -const wrapperToggle = (p: Wrapper) => (p.opened ? '-90%' : '0') +const wrapperToggle = (p: Wrapper) => (p.opened && !p.desktop ? '-90%' : '0') const IconFirst = (p: IconProps) => (p.opened ? '0px' : '12px') const IconMiddle = (p: IconProps) => (p.opened ? '1' : '0') const IconLast = (p: IconProps) => (p.opened ? '0px' : '-4px') @@ -183,64 +185,84 @@ const Icon = styled('div')` ` export const Sidebar = () => ( - - {({ on, toggle }: any) => { - const handleSidebarToggle = (ev: React.SyntheticEvent) => { - toggle() - } + + {({ currentBreakpoint }: any) => { return ( - - {({ docs, menus }) => { - const docsWithoutMenu = docs.filter((doc: Entry) => !doc.menu) - const fromMenu = (menu: string) => - docs.filter(doc => doc.menu === menu) - + + {({ on, toggle }: any) => { + const isDesktop = currentBreakpoint === 'desktop' ? true : false + const handleSidebarToggle = (ev: React.SyntheticEvent) => { + if (isDesktop) return + toggle() + } return ( - - - - - - - - - - - {({ title, logo }) => - logo ? ( - - ) : ( - {title} - ) - } - - - {docsWithoutMenu.map(doc => ( - - {doc.name} - - ))} - {menus.map(menu => ( - - ))} - - - - - + + {({ docs, menus }) => { + const docsWithoutMenu = docs.filter((doc: Entry) => !doc.menu) + const fromMenu = (menu: string) => + docs.filter(doc => doc.menu === menu) + + return ( + + + + + + + + + + + {({ title, logo }) => + logo ? ( + + ) : ( + {title} + ) + } + + + {docsWithoutMenu.map(doc => ( + + {doc.name} + + ))} + {menus.map(menu => ( + + ))} + + + + + + ) + }} + ) }} - + ) }} - + ) diff --git a/packages/docz-theme-default/src/components/ui/Table.tsx b/packages/docz-theme-default/src/components/ui/Table.tsx index 9c9caf6b3..51bdc88eb 100644 --- a/packages/docz-theme-default/src/components/ui/Table.tsx +++ b/packages/docz-theme-default/src/components/ui/Table.tsx @@ -1,11 +1,11 @@ import styled from 'react-emotion' export const Table = styled('table')` -${p => - p.theme.mq({ - overflowY: ['hidden', 'hidden', 'hidden', 'initial'], - display: ['block', 'block', 'block', 'table'] - })}; + ${p => + p.theme.mq({ + overflowY: ['hidden', 'hidden', 'hidden', 'initial'], + display: ['block', 'block', 'block', 'table'], + })}; width: 100%; padding: 0; margin-bottom: 50px; @@ -31,26 +31,26 @@ ${p => & :nth-child(1) { ${p => p.theme.mq({ - width: ['20%', '20%', '20%', 'auto'] - })}; + width: ['20%', '20%', '20%', 'auto'], + })}; } & :nth-child(2) { ${p => p.theme.mq({ - width: ['10%', '10%', '10%', 'auto'] - })}; + width: ['10%', '10%', '10%', 'auto'], + })}; } & :nth-child(3) { ${p => p.theme.mq({ - width: ['10%', '10%', '10%', 'auto'] - })}; + width: ['10%', '10%', '10%', 'auto'], + })}; } & :nth-child(4) { ${p => p.theme.mq({ - width: ['20%', '20%', '20%', 'auto'] - })}; + width: ['20%', '20%', '20%', 'auto'], + })}; } } diff --git a/packages/docz-theme-default/src/config.ts b/packages/docz-theme-default/src/config.ts index 90c0c766c..7c7cb1f73 100644 --- a/packages/docz-theme-default/src/config.ts +++ b/packages/docz-theme-default/src/config.ts @@ -1,11 +1,12 @@ import { styles } from './styles' import * as colors from './styles/colors' import { prismTheme } from './styles/prism-theme' -import { mq } from './styles/responsive' +import { mq, breakpoints } from './styles/responsive' export const config = { colors, styles, prismTheme, mq, + breakpoints, } diff --git a/packages/docz-theme-default/src/index.tsx b/packages/docz-theme-default/src/index.tsx index d46745f1f..313f10b59 100644 --- a/packages/docz-theme-default/src/index.tsx +++ b/packages/docz-theme-default/src/index.tsx @@ -1,6 +1,7 @@ import * as React from 'react' import { theme, DocPreview, ThemeConfig } from 'docz' import { ThemeProvider } from 'emotion-theming' +import ReactBreakpoints from 'react-breakpoints' import { config } from './config' import { Sidebar, Main } from './components/shared' @@ -10,27 +11,29 @@ const Theme = () => ( {config => ( -
- - -
+ +
+ + +
+ )} diff --git a/packages/docz-theme-default/src/types.d.ts b/packages/docz-theme-default/src/types.d.ts index d84060a3d..a33537753 100644 --- a/packages/docz-theme-default/src/types.d.ts +++ b/packages/docz-theme-default/src/types.d.ts @@ -3,6 +3,7 @@ declare module 'react-powerplug' declare module 'react-lightweight-tooltip' declare module 'react-feather/dist/icons/chevron-down' declare module 'react-spinners' +declare module 'react-breakpoints' declare module '*.svg' { const content: any diff --git a/yarn.lock b/yarn.lock index 8b3b20031..58c7f1ccc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3341,6 +3341,13 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4: safe-buffer "^5.0.1" sha.js "^2.4.8" +create-react-context@0.2.1: + version "0.2.1" + resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.1.tgz#425a3d96f4b7690c2fbf20aed5aeae2e2007a959" + dependencies: + fbjs "^0.8.0" + gud "^1.0.0" + cross-env@^5.1.6: version "5.1.6" resolved "https://registry.npmjs.org/cross-env/-/cross-env-5.1.6.tgz#0dc05caf945b24e4b9e3b12871fe0e858d08b38d" @@ -4246,6 +4253,18 @@ faye-websocket@~0.11.0: dependencies: websocket-driver ">=0.5.1" +fbjs@^0.8.0: + version "0.8.17" + resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd" + dependencies: + core-js "^1.0.0" + isomorphic-fetch "^2.1.1" + loose-envify "^1.0.0" + object-assign "^4.1.0" + promise "^7.1.1" + setimmediate "^1.0.5" + ua-parser-js "^0.7.18" + fbjs@^0.8.1, fbjs@^0.8.16: version "0.8.16" resolved "https://registry.npmjs.org/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db" @@ -4800,6 +4819,10 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.1.9: version "4.1.11" resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658" +gud@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0" + gzip-size@3.0.0: version "3.0.0" resolved "https://registry.npmjs.org/gzip-size/-/gzip-size-3.0.0.tgz#546188e9bdc337f673772f81660464b389dce520" @@ -4971,7 +4994,7 @@ hoek@2.x.x: version "2.16.3" resolved "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed" -hoist-non-react-statics@^2.3.1, hoist-non-react-statics@^2.5.0: +hoist-non-react-statics@2.5.0, hoist-non-react-statics@^2.3.1, hoist-non-react-statics@^2.5.0: version "2.5.0" resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.0.tgz#d2ca2dfc19c5a91c5a6615ce8e564ef0347e2a40" @@ -5961,6 +5984,10 @@ lodash.assign@^4.0.3, lodash.assign@^4.0.6: version "4.2.0" resolved "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz#0d99f3ccd7a6d261d19bdaeb9245005d285808e7" +lodash.debounce@4.0.8: + version "4.0.8" + resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af" + lodash.deburr@^4.1.0: version "4.1.0" resolved "https://registry.npmjs.org/lodash.deburr/-/lodash.deburr-4.1.0.tgz#ddb1bbb3ef07458c0177ba07de14422cb033ff9b" @@ -7355,6 +7382,14 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.1.7: minimist "^1.2.0" strip-json-comments "~2.0.1" +react-breakpoints@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/react-breakpoints/-/react-breakpoints-3.0.0.tgz#b57d18dc7ad73a7c00c1949e689360af9cac6759" + dependencies: + create-react-context "0.2.1" + hoist-non-react-statics "2.5.0" + lodash.debounce "4.0.8" + react-dev-utils@^5.0.1: version "5.0.1" resolved "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-5.0.1.tgz#1f396e161fe44b595db1b186a40067289bf06613" @@ -9019,6 +9054,10 @@ typescript@2.9.1, typescript@^2.9.1: version "2.9.1" resolved "https://registry.npmjs.org/typescript/-/typescript-2.9.1.tgz#fdb19d2c67a15d11995fd15640e373e09ab09961" +ua-parser-js@^0.7.18: + version "0.7.18" + resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.18.tgz#a7bfd92f56edfb117083b69e31d2aa8882d4b1ed" + ua-parser-js@^0.7.9: version "0.7.17" resolved "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac"