Fix #341 - Remove react-responsive in favour of simpler resize handler/window width

This commit is contained in:
Eugen Rochko 2016-12-06 19:18:37 +01:00
parent 2ef9f36cf2
commit bf5f8a2449
6 changed files with 58 additions and 45 deletions

View file

@ -41,15 +41,17 @@ const Lightbox = React.createClass({
mixins: [PureRenderMixin], mixins: [PureRenderMixin],
componentDidMount () { componentDidMount () {
this._listener = window.addEventListener('keyup', e => { this._listener = e => {
if (e.key === 'Escape') { if (e.key === 'Escape') {
this.props.onCloseClicked(); this.props.onCloseClicked();
} }
}); };
window.addEventListener('keyup', this._listener);
}, },
componentWillUnmount () { componentWillUnmount () {
window.removeEventListener(this._listener); window.removeEventListener('keyup', this._listener);
}, },
render () { render () {

View file

@ -5,8 +5,7 @@ const outerStyle = {
background: '#373b4a', background: '#373b4a',
margin: '10px', margin: '10px',
flex: '0 0 auto', flex: '0 0 auto',
marginBottom: '0', marginBottom: '0'
display: 'flex'
}; };
const tabStyle = { const tabStyle = {
@ -28,7 +27,7 @@ const tabActiveStyle = {
const TabsBar = () => { const TabsBar = () => {
return ( return (
<div style={outerStyle}> <div className='tabs-bar' style={outerStyle}>
<Link style={tabStyle} activeStyle={tabActiveStyle} to='/statuses/new'><i className='fa fa-fw fa-pencil' /> <FormattedMessage id='tabs_bar.compose' defaultMessage='Compose' /></Link> <Link style={tabStyle} activeStyle={tabActiveStyle} to='/statuses/new'><i className='fa fa-fw fa-pencil' /> <FormattedMessage id='tabs_bar.compose' defaultMessage='Compose' /></Link>
<Link style={tabStyle} activeStyle={tabActiveStyle} to='/timelines/home'><i className='fa fa-fw fa-home' /> <FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></Link> <Link style={tabStyle} activeStyle={tabActiveStyle} to='/timelines/home'><i className='fa fa-fw fa-home' /> <FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></Link>
<Link style={tabStyle} activeStyle={tabActiveStyle} to='/notifications'><i className='fa fa-fw fa-bell' /> <FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' /></Link> <Link style={tabStyle} activeStyle={tabActiveStyle} to='/notifications'><i className='fa fa-fw fa-bell' /> <FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' /></Link>

View file

@ -5,36 +5,61 @@ import LoadingBarContainer from './containers/loading_bar_container';
import HomeTimeline from '../home_timeline'; import HomeTimeline from '../home_timeline';
import MentionsTimeline from '../mentions_timeline'; import MentionsTimeline from '../mentions_timeline';
import Compose from '../compose'; import Compose from '../compose';
import MediaQuery from 'react-responsive';
import TabsBar from './components/tabs_bar'; import TabsBar from './components/tabs_bar';
import ModalContainer from './containers/modal_container'; import ModalContainer from './containers/modal_container';
import Notifications from '../notifications'; import Notifications from '../notifications';
import { debounce } from 'react-decoration';
const UI = React.createClass({ const UI = React.createClass({
getInitialState () {
return {
width: window.innerWidth
};
},
mixins: [PureRenderMixin], 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 () { render () {
const layoutBreakpoint = 1024; const layoutBreakpoint = 1024;
return ( let mountedColumns;
<div style={{ flex: '0 0 auto', display: 'flex', flexDirection: 'column', width: '100%', height: '100%', background: '#1a1c23' }}>
<MediaQuery maxWidth={layoutBreakpoint}>
<TabsBar />
</MediaQuery>
<MediaQuery maxWidth={layoutBreakpoint} component={ColumnsArea}> if (this.state.width <= layoutBreakpoint) {
mountedColumns = (
<ColumnsArea>
{this.props.children} {this.props.children}
</MediaQuery> </ColumnsArea>
);
<MediaQuery minWidth={layoutBreakpoint + 1}> } else {
mountedColumns = (
<ColumnsArea> <ColumnsArea>
<Compose /> <Compose />
<HomeTimeline trackScroll={false} /> <HomeTimeline trackScroll={false} />
<Notifications trackScroll={false} /> <Notifications trackScroll={false} />
{this.props.children} {this.props.children}
</ColumnsArea> </ColumnsArea>
</MediaQuery> );
}
return (
<div style={{ flex: '0 0 auto', display: 'flex', flexDirection: 'column', width: '100%', height: '100%', background: '#1a1c23' }}>
<TabsBar />
{mountedColumns}
<NotificationsContainer /> <NotificationsContainer />
<LoadingBarContainer style={{ backgroundColor: '#2b90d9', left: '0', top: '0' }} /> <LoadingBarContainer style={{ backgroundColor: '#2b90d9', left: '0', top: '0' }} />

View file

@ -355,6 +355,16 @@
} }
} }
.tabs-bar {
display: flex;
}
@media screen and (min-width: 1025px) {
.tabs-bar {
display: none;
}
}
.react-autosuggest__container { .react-autosuggest__container {
position: relative; position: relative;
} }

View file

@ -39,7 +39,6 @@
"react-proxy": "^1.1.8", "react-proxy": "^1.1.8",
"react-redux": "^5.0.0-beta.3", "react-redux": "^5.0.0-beta.3",
"react-redux-loading-bar": "^2.4.1", "react-redux-loading-bar": "^2.4.1",
"react-responsive": "^1.1.5",
"react-router": "^2.8.0", "react-router": "^2.8.0",
"react-router-scroll": "^0.3.2", "react-router-scroll": "^0.3.2",
"react-simple-dropdown": "^1.1.4", "react-simple-dropdown": "^1.1.4",

View file

@ -1585,10 +1585,6 @@ css-loader@0.25.0:
postcss-modules-values "^1.1.0" postcss-modules-values "^1.1.0"
source-list-map "^0.1.4" 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: css-select@~1.2.0:
version "1.2.0" version "1.2.0"
resolved "https://registry.yarnpkg.com/css-select/-/css-select-1.2.0.tgz#2b3a110539c5355f1cd8d314623e870b121ec858" 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" version "0.0.1"
resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.1.tgz#3f91365cabe60b77ed0ebba24b454e3e09d95a82" 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: iconv-lite@^0.4.13, iconv-lite@~0.4.13:
version "0.4.13" version "0.4.13"
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.13.tgz#1f88aba4ab0b1508e8312acc39345f36e992e2f2" 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-komposer "^1.9.0"
react-simple-di "^1.2.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: math-expression-evaluator@^1.2.14:
version "1.2.14" version "1.2.14"
resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.14.tgz#39511771ed9602405fba9affff17eb4d2a3843ab" 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" lodash-es "^4.2.0"
loose-envify "^1.1.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: react-router-scroll:
version "0.3.2" version "0.3.2"
resolved "https://registry.yarnpkg.com/react-router-scroll/-/react-router-scroll-0.3.2.tgz#ba8b1d01b3681dc5a68d72865d35c10e84065e52" resolved "https://registry.yarnpkg.com/react-router-scroll/-/react-router-scroll-0.3.2.tgz#ba8b1d01b3681dc5a68d72865d35c10e84065e52"