forked from acouzens/open5gs
udpate it
This commit is contained in:
parent
aab8dbd0c0
commit
3fd4494994
|
@ -1,6 +1,9 @@
|
||||||
import Package from '../package';
|
import Package from '../package';
|
||||||
|
import withWidth, { SMALL } from '../lib/with-width';
|
||||||
|
|
||||||
import { Component } from 'react';
|
import { Component } from 'react';
|
||||||
import Head from 'next/head';
|
import Head from 'next/head';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import oc from 'open-color';
|
import oc from 'open-color';
|
||||||
|
@ -38,7 +41,7 @@ const HelloWorld = styled.div`
|
||||||
class App extends Component {
|
class App extends Component {
|
||||||
state = {
|
state = {
|
||||||
sidebar: {
|
sidebar: {
|
||||||
toggled: false,
|
visible: this.props.width === SMALL ? false : true,
|
||||||
view: "PDN"
|
view: "PDN"
|
||||||
},
|
},
|
||||||
error: {
|
error: {
|
||||||
|
@ -47,12 +50,17 @@ class App extends Component {
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
static propTypes = {
|
||||||
|
session: PropTypes.string.isRequired,
|
||||||
|
width: PropTypes.number.isRequired
|
||||||
|
}
|
||||||
|
|
||||||
sidebarHandler = {
|
sidebarHandler = {
|
||||||
toggle: () => {
|
handleToggle: () => {
|
||||||
this.setState({
|
this.setState({
|
||||||
sidebar: {
|
sidebar: {
|
||||||
...this.state.sidebar,
|
...this.state.sidebar,
|
||||||
toggled: !this.state.sidebar.toggled
|
visible: !this.state.sidebar.visible
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
@ -60,7 +68,10 @@ class App extends Component {
|
||||||
this.setState({
|
this.setState({
|
||||||
sidebar: {
|
sidebar: {
|
||||||
...this.state.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>{title}</title>
|
<title>{title}</title>
|
||||||
</Head>
|
</Head>
|
||||||
|
|
||||||
<Header onMenuAction={sidebarHandler.toggle}/>
|
<Header onMenuAction={sidebarHandler.handleToggle}/>
|
||||||
<BodyContainer>
|
<BodyContainer>
|
||||||
<Sidebar
|
<Sidebar
|
||||||
toggled={sidebar.toggled}
|
visible={sidebar.visible}
|
||||||
selected={sidebar.view}
|
selected={sidebar.view}
|
||||||
onSelect={sidebarHandler.view}/>
|
onSelect={sidebarHandler.view}/>
|
||||||
<ContentContainer>
|
<ContentContainer>
|
||||||
|
@ -101,4 +112,4 @@ class App extends Component {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default App;
|
export default withWidth()(App);
|
||||||
|
|
|
@ -12,7 +12,7 @@ import Test3Icon from 'react-icons/lib/md/3d-rotation'
|
||||||
|
|
||||||
const Menu = styled.div`
|
const Menu = styled.div`
|
||||||
display: block;
|
display: block;
|
||||||
width: ${p => p.toggled ? '0' : p.width };
|
width: ${p => p.visible ? p.width : '0' };
|
||||||
transition: width .2s ease-in-out;
|
transition: width .2s ease-in-out;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding: 1rem 0;
|
padding: 1rem 0;
|
||||||
|
@ -21,8 +21,8 @@ const Menu = styled.div`
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 4rem;
|
top: 4rem;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: ${p => p.toggled ? '100%' : '0'};
|
width: ${p => p.visible ? '100%' : '0'};
|
||||||
height: ${p => p.toggled ? '100%' : '0'};
|
height: ${p => p.visible ? '100%' : '0'};
|
||||||
transition: height .2s ease-in-out;
|
transition: height .2s ease-in-out;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
`}
|
`}
|
||||||
|
@ -67,8 +67,8 @@ const Item = ({ children, selected, name, onSelect }) => (
|
||||||
</StyledItem>
|
</StyledItem>
|
||||||
)
|
)
|
||||||
|
|
||||||
const Sidebar = ({ toggled, width, selected, onSelect }) => (
|
const Sidebar = ({ visible, width, selected, onSelect }) => (
|
||||||
<Menu toggled={toggled} width={width}>
|
<Menu visible={visible} width={width}>
|
||||||
<Item name="PDN" selected={selected} onSelect={onSelect}>
|
<Item name="PDN" selected={selected} onSelect={onSelect}>
|
||||||
<Icon><PdnIcon/></Icon>
|
<Icon><PdnIcon/></Icon>
|
||||||
<Title>PDN</Title>
|
<Title>PDN</Title>
|
||||||
|
@ -93,14 +93,14 @@ const Sidebar = ({ toggled, width, selected, onSelect }) => (
|
||||||
)
|
)
|
||||||
|
|
||||||
Sidebar.propTypes = {
|
Sidebar.propTypes = {
|
||||||
toggled: PropTypes.bool,
|
visible: PropTypes.bool,
|
||||||
width: PropTypes.string,
|
width: PropTypes.string,
|
||||||
selected: PropTypes.string,
|
selected: PropTypes.string,
|
||||||
onSelect: PropTypes.func
|
onSelect: PropTypes.func
|
||||||
};
|
};
|
||||||
|
|
||||||
Sidebar.defaultProps = {
|
Sidebar.defaultProps = {
|
||||||
toggled: false,
|
visible: false,
|
||||||
width: "16rem",
|
width: "16rem",
|
||||||
selected: "PDN"
|
selected: "PDN"
|
||||||
};
|
};
|
||||||
|
|
|
@ -14,7 +14,7 @@ export const media = ({
|
||||||
`,
|
`,
|
||||||
|
|
||||||
mobile: (...args) => css`
|
mobile: (...args) => css`
|
||||||
@media (max-width: 600px) {
|
@media (max-width: 768px) {
|
||||||
${ css(...args) }
|
${ css(...args) }
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
@ -64,4 +64,4 @@ export const transitions = {
|
||||||
transform: scale(0.25,0.25);
|
transform: scale(0.25,0.25);
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 (
|
||||||
|
<EventListener target="window" onResize={this.handleResize}>
|
||||||
|
<MyComponent
|
||||||
|
width={width}
|
||||||
|
{...this.props}
|
||||||
|
/>
|
||||||
|
</EventListener>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
}
|
|
@ -23,6 +23,7 @@
|
||||||
"prop-types": "^15.5.10",
|
"prop-types": "^15.5.10",
|
||||||
"react": "^15.5.4",
|
"react": "^15.5.4",
|
||||||
"react-dom": "^15.5.4",
|
"react-dom": "^15.5.4",
|
||||||
|
"react-event-listener": "^0.4.5",
|
||||||
"react-icons": "^2.2.5",
|
"react-icons": "^2.2.5",
|
||||||
"react-onclickoutside": "^5.11.1",
|
"react-onclickoutside": "^5.11.1",
|
||||||
"react-transition-group": "^1.1.3",
|
"react-transition-group": "^1.1.3",
|
||||||
|
|
|
@ -1646,7 +1646,7 @@ extsprintf@1.0.2:
|
||||||
version "1.0.2"
|
version "1.0.2"
|
||||||
resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.0.2.tgz#e1080e0658e300b06294990cc70e1502235fd550"
|
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"
|
version "0.8.12"
|
||||||
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.12.tgz#10b5d92f76d45575fd63a217d4ea02bea2f8ed04"
|
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.12.tgz#10b5d92f76d45575fd63a217d4ea02bea2f8ed04"
|
||||||
dependencies:
|
dependencies:
|
||||||
|
@ -3048,6 +3048,15 @@ react-dom@^15.5.4:
|
||||||
object-assign "^4.1.0"
|
object-assign "^4.1.0"
|
||||||
prop-types "~15.5.7"
|
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:
|
react-hot-loader@3.0.0-beta.6:
|
||||||
version "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"
|
resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-3.0.0-beta.6.tgz#463fac0bfc8b63a8385258af20c91636abce75f4"
|
||||||
|
|
Loading…
Reference in New Issue