From 05f1cd52732b1fc57e13ea41239fbc10299a0e01 Mon Sep 17 00:00:00 2001 From: Vitaly Takmazov Date: Mon, 10 Dec 2018 15:46:33 +0300 Subject: ReactDOM.createPortal --- vnext/src/App.js | 97 ++++++++++++++++++++---------------------- vnext/src/components/Header.js | 16 +++---- vnext/src/index.js | 27 ++---------- vnext/src/style/main.css | 5 ++- vnext/src/views/index.html | 2 +- 5 files changed, 61 insertions(+), 86 deletions(-) (limited to 'vnext/src') diff --git a/vnext/src/App.js b/vnext/src/App.js index 0764281a..e59fdb40 100644 --- a/vnext/src/App.js +++ b/vnext/src/App.js @@ -20,6 +20,8 @@ import cookies from 'react-cookies'; import { me } from './api'; +const app = document.getElementById('app'); + export default class App extends React.Component { constructor(props) { super(props); @@ -91,16 +93,18 @@ export default class App extends React.Component { toggleSidebar = () => { let width = this.sidebar.current.style.width; this.sidebar.current.style.width = width === '248px' ? '0' : '248px'; + let leftMargin = this.state.appMarginLeft === 'inherit' ? '250px' : 'inherit'; this.setState({ - appMarginLeft: this.state.appMarginLeft === 'inherit' ? '250px' : 'inherit' + appMarginLeft: leftMargin }); + app.style.marginLeft = leftMargin; } render() { const user = this.state.visitor; return ( <> -
+
@@ -138,56 +142,45 @@ export default class App extends React.Component {
-
-
- - } /> - } /> - - - } /> - - - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - -
- -
- +
+ + } /> + } /> + + + } /> + + + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + +
+ ); diff --git a/vnext/src/components/Header.js b/vnext/src/components/Header.js index 91fa02fd..282724b8 100644 --- a/vnext/src/components/Header.js +++ b/vnext/src/components/Header.js @@ -1,8 +1,10 @@ import React from 'react'; +import ReactDOM from 'react-dom'; import PropTypes from 'prop-types'; const elClassHidden = 'header--hidden'; -const elClassBackground = 'header--background'; + +const header = document.getElementById('header'); export default class Header extends React.Component { constructor(props) { @@ -12,21 +14,21 @@ export default class Header extends React.Component { this.wScrollCurrent = 0; this.wScrollBefore = 0; this.wScrollDiff = 0; - this.header = React.createRef(); } componentDidMount() { + header.removeChild(document.getElementById('header_wrapper')); window.addEventListener('scroll', () => (!window.requestAnimationFrame) ? this.throttle(250, this.updateHeader) : window.requestAnimationFrame(this.updateHeader), false); } throttle(delay, fn) { var last, deferTimer; - return function () { + return function() { var context = this, args = arguments, now = +new Date; if (last && now < last + delay) { clearTimeout(deferTimer); deferTimer = setTimeout( - function () { + function() { last = now; fn.apply(context, args); }, @@ -38,7 +40,6 @@ export default class Header extends React.Component { }; } updateHeader = () => { - const header = this.header.current; this.dHeight = document.body.offsetHeight; this.wHeight = window.innerHeight; this.wScrollCurrent = window.pageYOffset; @@ -47,17 +48,14 @@ export default class Header extends React.Component { if (this.wScrollCurrent <= 0) { // scrolled to the very top; element sticks to the top header.classList.remove(elClassHidden); - header.classList.remove(elClassBackground); } else if (this.wScrollDiff > 0 && header.classList.contains(elClassHidden)) { // scrolled up; element slides in header.classList.remove(elClassHidden); - header.classList.add(elClassBackground); } else if (this.wScrollDiff < 0) { // scrolled down if (this.wScrollCurrent + this.wHeight >= this.dHeight && header.classList.contains(elClassHidden)) { // scrolled to the very bottom; element slides in header.classList.remove(elClassHidden); - header.classList.add(elClassBackground); } else { // scrolled down; element slides out header.classList.add(elClassHidden); @@ -66,7 +64,7 @@ export default class Header extends React.Component { this.wScrollBefore = this.wScrollCurrent; } render() { - return (); + return ReactDOM.createPortal(this.props.children, header); } } diff --git a/vnext/src/index.js b/vnext/src/index.js index c2d2b6b7..482591c9 100644 --- a/vnext/src/index.js +++ b/vnext/src/index.js @@ -3,28 +3,9 @@ import ReactDOM from 'react-dom'; function LoadingView(props) { return ( - <> - -
-
-
-
-
- +
+
+
); } @@ -36,4 +17,4 @@ const JuickApp = () => ( ); -ReactDOM.render(, document.getElementById('app')); +ReactDOM.render(, document.getElementById('wrapper')); diff --git a/vnext/src/style/main.css b/vnext/src/style/main.css index 964890c2..67527c37 100644 --- a/vnext/src/style/main.css +++ b/vnext/src/style/main.css @@ -55,9 +55,12 @@ img, hr { grid-area: header; background: #fff; box-shadow: 0 0 3px rgba(0, 0, 0, 0.28); - transition: margin-left 0.4s; + transition: transform 0.4s; overflow-x: hidden; } +.header--hidden { + transform: translateY(-100%); +} #header_wrapper, .footer_container { display: flex; diff --git a/vnext/src/views/index.html b/vnext/src/views/index.html index 792424e2..3e0ddf6a 100644 --- a/vnext/src/views/index.html +++ b/vnext/src/views/index.html @@ -35,7 +35,7 @@ -- cgit v1.2.3