From bf5f8a2449fa10f93ecc7386d9fff21738dd0466 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Tue, 6 Dec 2016 19:18:37 +0100 Subject: [PATCH] Fix #341 - Remove react-responsive in favour of simpler resize handler/window width --- .../components/components/lightbox.jsx | 8 ++- .../features/ui/components/tabs_bar.jsx | 5 +- .../components/features/ui/index.jsx | 57 +++++++++++++------ app/assets/stylesheets/components.scss | 10 ++++ package.json | 1 - yarn.lock | 22 ------- 6 files changed, 58 insertions(+), 45 deletions(-) diff --git a/app/assets/javascripts/components/components/lightbox.jsx b/app/assets/javascripts/components/components/lightbox.jsx index 29822ccb34..b5c2a69d83 100644 --- a/app/assets/javascripts/components/components/lightbox.jsx +++ b/app/assets/javascripts/components/components/lightbox.jsx @@ -41,15 +41,17 @@ const Lightbox = React.createClass({ mixins: [PureRenderMixin], componentDidMount () { - this._listener = window.addEventListener('keyup', e => { + this._listener = e => { if (e.key === 'Escape') { this.props.onCloseClicked(); } - }); + }; + + window.addEventListener('keyup', this._listener); }, componentWillUnmount () { - window.removeEventListener(this._listener); + window.removeEventListener('keyup', this._listener); }, render () { diff --git a/app/assets/javascripts/components/features/ui/components/tabs_bar.jsx b/app/assets/javascripts/components/features/ui/components/tabs_bar.jsx index 868ebe00a6..219979522b 100644 --- a/app/assets/javascripts/components/features/ui/components/tabs_bar.jsx +++ b/app/assets/javascripts/components/features/ui/components/tabs_bar.jsx @@ -5,8 +5,7 @@ const outerStyle = { background: '#373b4a', margin: '10px', flex: '0 0 auto', - marginBottom: '0', - display: 'flex' + marginBottom: '0' }; const tabStyle = { @@ -28,7 +27,7 @@ const tabActiveStyle = { const TabsBar = () => { return ( -
+
diff --git a/app/assets/javascripts/components/features/ui/index.jsx b/app/assets/javascripts/components/features/ui/index.jsx index 9b5469bbd7..39ef356764 100644 --- a/app/assets/javascripts/components/features/ui/index.jsx +++ b/app/assets/javascripts/components/features/ui/index.jsx @@ -5,36 +5,61 @@ import LoadingBarContainer from './containers/loading_bar_container'; import HomeTimeline from '../home_timeline'; import MentionsTimeline from '../mentions_timeline'; import Compose from '../compose'; -import MediaQuery from 'react-responsive'; import TabsBar from './components/tabs_bar'; import ModalContainer from './containers/modal_container'; import Notifications from '../notifications'; +import { debounce } from 'react-decoration'; const UI = React.createClass({ + getInitialState () { + return { + width: window.innerWidth + }; + }, + mixins: [PureRenderMixin], + @debounce(500) + handleResize () { + this.setState({ width: window.innerWidth }); + }, + + componentWillMount () { + window.addEventListener('resize', this.handleResize, { passive: true }); + }, + + componentWillUnmount () { + window.removeEventListener('resize', this.handleResize); + }, + render () { const layoutBreakpoint = 1024; + let mountedColumns; + + if (this.state.width <= layoutBreakpoint) { + mountedColumns = ( + + {this.props.children} + + ); + } else { + mountedColumns = ( + + + + + {this.props.children} + + ); + } + return (
- - - + - - {this.props.children} - - - - - - - - {this.props.children} - - + {mountedColumns} diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss index cc9f0eb3b5..b1249ff7ea 100644 --- a/app/assets/stylesheets/components.scss +++ b/app/assets/stylesheets/components.scss @@ -355,6 +355,16 @@ } } +.tabs-bar { + display: flex; +} + +@media screen and (min-width: 1025px) { + .tabs-bar { + display: none; + } +} + .react-autosuggest__container { position: relative; } diff --git a/package.json b/package.json index 3bd2eacd30..ab75c5be56 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,6 @@ "react-proxy": "^1.1.8", "react-redux": "^5.0.0-beta.3", "react-redux-loading-bar": "^2.4.1", - "react-responsive": "^1.1.5", "react-router": "^2.8.0", "react-router-scroll": "^0.3.2", "react-simple-dropdown": "^1.1.4", diff --git a/yarn.lock b/yarn.lock index 0a41f8b908..733ef7e92c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1585,10 +1585,6 @@ css-loader@0.25.0: postcss-modules-values "^1.1.0" source-list-map "^0.1.4" -css-mediaquery@^0.1.2: - version "0.1.2" - resolved "https://registry.yarnpkg.com/css-mediaquery/-/css-mediaquery-0.1.2.tgz#6a2c37344928618631c54bd33cedd301da18bea0" - css-select@~1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/css-select/-/css-select-1.2.0.tgz#2b3a110539c5355f1cd8d314623e870b121ec858" @@ -2414,10 +2410,6 @@ https-browserify@~0.0.0: version "0.0.1" resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.1.tgz#3f91365cabe60b77ed0ebba24b454e3e09d95a82" -hyphenate-style-name@^1.0.0: - version "1.0.1" - resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.1.tgz#bc49b9446e02b4570641afdd29c1ce7609d1b9cc" - iconv-lite@^0.4.13, iconv-lite@~0.4.13: version "0.4.13" resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.13.tgz#1f88aba4ab0b1508e8312acc39345f36e992e2f2" @@ -3011,12 +3003,6 @@ mantra-core@^1.6.1: react-komposer "^1.9.0" react-simple-di "^1.2.0" -matchmedia@^0.1.2: - version "0.1.2" - resolved "https://registry.yarnpkg.com/matchmedia/-/matchmedia-0.1.2.tgz#cfd47f2bf68fbc7f5ea1bd3a3cf1715ecba3c1bd" - dependencies: - css-mediaquery "^0.1.2" - math-expression-evaluator@^1.2.14: version "1.2.14" resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.14.tgz#39511771ed9602405fba9affff17eb4d2a3843ab" @@ -3977,14 +3963,6 @@ react-redux@^5.0.0-beta.3: lodash-es "^4.2.0" loose-envify "^1.1.0" -react-responsive: - version "1.1.5" - resolved "https://registry.yarnpkg.com/react-responsive/-/react-responsive-1.1.5.tgz#a7019a28817dcb601ef31d10d72f798a0d710a17" - dependencies: - hyphenate-style-name "^1.0.0" - matchmedia "^0.1.2" - object-assign "^4.0.1" - react-router-scroll: version "0.3.2" resolved "https://registry.yarnpkg.com/react-router-scroll/-/react-router-scroll-0.3.2.tgz#ba8b1d01b3681dc5a68d72865d35c10e84065e52"