From 3fd4494994e384db679ef3a722556fb598884af0 Mon Sep 17 00:00:00 2001 From: Sukchan Lee Date: Sun, 4 Jun 2017 10:25:30 +0900 Subject: [PATCH] udpate it --- webui/components/App.js | 25 +++++++---- webui/components/Sidebar.js | 14 +++---- webui/lib/style-utils.js | 4 +- webui/lib/with-width.js | 83 +++++++++++++++++++++++++++++++++++++ webui/package.json | 1 + webui/yarn.lock | 11 ++++- 6 files changed, 121 insertions(+), 17 deletions(-) create mode 100644 webui/lib/with-width.js diff --git a/webui/components/App.js b/webui/components/App.js index 4f14df72e..e43c2bc03 100644 --- a/webui/components/App.js +++ b/webui/components/App.js @@ -1,6 +1,9 @@ import Package from '../package'; +import withWidth, { SMALL } from '../lib/with-width'; + import { Component } from 'react'; import Head from 'next/head'; +import PropTypes from 'prop-types'; import styled from 'styled-components'; import oc from 'open-color'; @@ -38,7 +41,7 @@ const HelloWorld = styled.div` class App extends Component { state = { sidebar: { - toggled: false, + visible: this.props.width === SMALL ? false : true, view: "PDN" }, error: { @@ -47,12 +50,17 @@ class App extends Component { }, }; + static propTypes = { + session: PropTypes.string.isRequired, + width: PropTypes.number.isRequired + } + sidebarHandler = { - toggle: () => { + handleToggle: () => { this.setState({ sidebar: { ...this.state.sidebar, - toggled: !this.state.sidebar.toggled + visible: !this.state.sidebar.visible } }) }, @@ -60,7 +68,10 @@ class App extends Component { this.setState({ sidebar: { ...this.state.sidebar, - view: view, + visible: this.props.width === SMALL ? + !this.state.sidebar.visible : + this.state.sidebar.visible, + view: view } }) } @@ -84,10 +95,10 @@ class App extends Component { {title} -
+
@@ -101,4 +112,4 @@ class App extends Component { } } -export default App; +export default withWidth()(App); diff --git a/webui/components/Sidebar.js b/webui/components/Sidebar.js index dc4bfa5d5..0bc79fcfb 100644 --- a/webui/components/Sidebar.js +++ b/webui/components/Sidebar.js @@ -12,7 +12,7 @@ import Test3Icon from 'react-icons/lib/md/3d-rotation' const Menu = styled.div` display: block; - width: ${p => p.toggled ? '0' : p.width }; + width: ${p => p.visible ? p.width : '0' }; transition: width .2s ease-in-out; overflow: hidden; padding: 1rem 0; @@ -21,8 +21,8 @@ const Menu = styled.div` position: absolute; top: 4rem; left: 0; - width: ${p => p.toggled ? '100%' : '0'}; - height: ${p => p.toggled ? '100%' : '0'}; + width: ${p => p.visible ? '100%' : '0'}; + height: ${p => p.visible ? '100%' : '0'}; transition: height .2s ease-in-out; z-index: 1; `} @@ -67,8 +67,8 @@ const Item = ({ children, selected, name, onSelect }) => ( ) -const Sidebar = ({ toggled, width, selected, onSelect }) => ( - +const Sidebar = ({ visible, width, selected, onSelect }) => ( + PDN @@ -93,14 +93,14 @@ const Sidebar = ({ toggled, width, selected, onSelect }) => ( ) Sidebar.propTypes = { - toggled: PropTypes.bool, + visible: PropTypes.bool, width: PropTypes.string, selected: PropTypes.string, onSelect: PropTypes.func }; Sidebar.defaultProps = { - toggled: false, + visible: false, width: "16rem", selected: "PDN" }; diff --git a/webui/lib/style-utils.js b/webui/lib/style-utils.js index c54f15b2f..3ff53e73c 100644 --- a/webui/lib/style-utils.js +++ b/webui/lib/style-utils.js @@ -14,7 +14,7 @@ export const media = ({ `, mobile: (...args) => css` - @media (max-width: 600px) { + @media (max-width: 768px) { ${ css(...args) } } ` @@ -64,4 +64,4 @@ export const transitions = { transform: scale(0.25,0.25); } ` -} \ No newline at end of file +} diff --git a/webui/lib/with-width.js b/webui/lib/with-width.js new file mode 100644 index 000000000..e4faf11b2 --- /dev/null +++ b/webui/lib/with-width.js @@ -0,0 +1,83 @@ +import React, {Component} from 'react'; +import EventListener from 'react-event-listener'; + +export const SMALL = 1; +export const MEDIUM = 2; +export const LARGE = 3; + +export default function withWidth(options = {}) { + const { + largeWidth = 992, + mediumWidth = 768, + resizeInterval = 166, // Corresponds to 10 frames at 60 Hz. + } = options; + + return (MyComponent) => { + return class WithWidth extends Component { + state = { + width: null, + }; + + componentDidMount() { + this.updateWidth(); + } + + componentWillUnmount() { + clearTimeout(this.deferTimer); + } + + handleResize = () => { + clearTimeout(this.deferTimer); + this.deferTimer = setTimeout(() => { + this.updateWidth(); + }, resizeInterval); + }; + + updateWidth() { + const innerWidth = window.innerWidth; + let width; + + if (innerWidth >= largeWidth) { + width = LARGE; + } else if (innerWidth >= mediumWidth) { + width = MEDIUM; + } else { // innerWidth < 768 + width = SMALL; + } + + if (width !== this.state.width) { + this.setState({ + width: width, + }); + } + } + + render() { + const width = this.state.width; + + /** + * When rendering the component on the server, + * we have no idea about the screen width. + * In order to prevent blinks and help the reconciliation + * we are not rendering the component. + * + * A better alternative would be to send client hints. + * But the browser support of this API is low: + * http://caniuse.com/#search=client%20hint + */ + if (width === null) { + return null; + } + + return ( + + + + ); + } + }; + }; +} diff --git a/webui/package.json b/webui/package.json index e194f8ceb..4a03791f8 100644 --- a/webui/package.json +++ b/webui/package.json @@ -23,6 +23,7 @@ "prop-types": "^15.5.10", "react": "^15.5.4", "react-dom": "^15.5.4", + "react-event-listener": "^0.4.5", "react-icons": "^2.2.5", "react-onclickoutside": "^5.11.1", "react-transition-group": "^1.1.3", diff --git a/webui/yarn.lock b/webui/yarn.lock index f43543e48..fe7fbc8b9 100644 --- a/webui/yarn.lock +++ b/webui/yarn.lock @@ -1646,7 +1646,7 @@ extsprintf@1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.0.2.tgz#e1080e0658e300b06294990cc70e1502235fd550" -fbjs@^0.8.5, fbjs@^0.8.9: +fbjs@^0.8.4, fbjs@^0.8.5, fbjs@^0.8.9: version "0.8.12" resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.12.tgz#10b5d92f76d45575fd63a217d4ea02bea2f8ed04" dependencies: @@ -3048,6 +3048,15 @@ react-dom@^15.5.4: object-assign "^4.1.0" prop-types "~15.5.7" +react-event-listener@^0.4.5: + version "0.4.5" + resolved "https://registry.yarnpkg.com/react-event-listener/-/react-event-listener-0.4.5.tgz#e3e895a0970cf14ee8f890113af68197abf3d0b1" + dependencies: + babel-runtime "^6.20.0" + fbjs "^0.8.4" + prop-types "^15.5.4" + warning "^3.0.0" + react-hot-loader@3.0.0-beta.6: version "3.0.0-beta.6" resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-3.0.0-beta.6.tgz#463fac0bfc8b63a8385258af20c91636abce75f4"