commit 6b266ca5b0318d068339769b7c013403aef5a85b
parent 1fbb96213120cca390fdc383157abb4b7e8be69a
Author: Konstantin Tarkus <hello@tarkus.me>
Date: Fri, 3 Apr 2015 09:51:39 +0300
Create a higher-order sample component `AppViewport`
See ./src/components/App/setViewpoert.js
Diffstat:
7 files changed, 89 insertions(+), 35 deletions(-)
diff --git a/package.json b/package.json
@@ -46,7 +46,7 @@
"gulp-load-plugins": "^0.9.0",
"gulp-minify-css": "^1.0.0",
"gulp-plumber": "^1.0.0",
- "gulp-rename": "^1.2.0",
+ "gulp-rename": "^1.2.2",
"gulp-render": "^0.2.2",
"gulp-replace": "^0.5.3",
"gulp-size": "^1.2.1",
diff --git a/src/components/App/App.js b/src/components/App/App.js
@@ -9,15 +9,24 @@
'use strict';
import './App.less';
-import React, { Component, PropTypes } from 'react';
+import React, { PropTypes } from 'react';
import invariant from 'react/lib/invariant';
import AppActions from '../../actions/AppActions';
import AppStore from '../../stores/AppStore';
import Navbar from '../Navbar';
import ContentPage from '../ContentPage';
import NotFoundPage from '../NotFoundPage';
+import setViewport from './setViewport';
-class App extends Component {
+class App {
+
+ static propTypes = {
+ path: PropTypes.string.isRequired,
+ viewport: PropTypes.object.isRequired,
+ onSetTitle: PropTypes.func.isRequired,
+ onSetMeta: PropTypes.func.isRequired,
+ onPageNotFound: PropTypes.func.isRequired
+ }
componentDidMount() {
window.addEventListener('popstate', this.handlePopState);
@@ -30,7 +39,8 @@ class App extends Component {
}
shouldComponentUpdate(nextProps) {
- return this.props.path !== nextProps.path;
+ return this.props.path !== nextProps.path ||
+ this.props.viewport !== nextProps.viewport;
}
render() {
@@ -65,6 +75,7 @@ class App extends Component {
<span>© Your Company</span>
<span><a href="/">Home</a></span>
<span><a href="/privacy">Privacy</a></span>
+ <span>{'Viewport: ' + this.props.viewport.width + 'x' + this.props.viewport.height}</span>
</p>
</div>
</div>
@@ -131,11 +142,4 @@ class App extends Component {
}
-App.propTypes = {
- path: PropTypes.string.isRequired,
- onSetTitle: PropTypes.func.isRequired,
- onSetMeta: PropTypes.func.isRequired,
- onPageNotFound: PropTypes.func.isRequired
-};
-
-export default App;
+export default setViewport(App);
diff --git a/src/components/App/setViewport.js b/src/components/App/setViewport.js
@@ -0,0 +1,50 @@
+/*
+ * React.js Starter Kit
+ * Copyright (c) 2014 Konstantin Tarkus (@koistya), KriaSoft LLC.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.txt file in the root directory of this source tree.
+ */
+
+'use strict';
+
+import React, { Component } from 'react';
+import { canUseDOM } from 'react/lib/ExecutionEnvironment';
+
+export default function setViewport(ComposedComponent) {
+ return class AppViewport extends Component {
+
+ constructor() {
+ super();
+
+ this.state = {
+ viewport: canUseDOM ?
+ {width: window.innerWidth, height: window.innerHeight} :
+ {width: 1366, height: 768} // Default size for server-side rendering
+ };
+
+ this.handleResize = () => {
+ let viewport = {width: window.innerWidth, height: window.innerHeight};
+ if (this.state.viewport.width !== viewport.width ||
+ this.state.viewport.height !== viewport.height) {
+ this.setState({viewport: viewport});
+ }
+ };
+ }
+
+ componentDidMount() {
+ window.addEventListener('resize', this.handleResize);
+ window.addEventListener('orientationchange', this.handleResize);
+ }
+
+ componentWillUnmount() {
+ window.removeEventListener('resize', this.handleResize);
+ window.removeEventListener('orientationchange', this.handleResize);
+ }
+
+ render() {
+ return <ComposedComponent {...this.props} viewport={this.state.viewport}/>;
+ }
+
+ };
+};
diff --git a/src/components/ContentPage/ContentPage.js b/src/components/ContentPage/ContentPage.js
@@ -9,9 +9,13 @@
'use strict';
import './ContentPage.less';
-import React, { Component, PropTypes } from 'react';
+import React, { PropTypes } from 'react';
-class ContentPage extends Component {
+class ContentPage {
+
+ static propTypes = {
+ body: PropTypes.string.isRequired
+ }
render() {
var { className, body, other } = this.props;
@@ -24,8 +28,4 @@ class ContentPage extends Component {
}
-ContentPage.propTypes = {
- body: PropTypes.string.isRequired
-};
-
export default ContentPage;
diff --git a/src/components/HomePage/HomePage.js b/src/components/HomePage/HomePage.js
@@ -9,9 +9,13 @@
'use strict';
import './HomePage.less';
-import React, { Component, PropTypes } from 'react';
+import React, { PropTypes } from 'react';
-class HomePage extends Component {
+class HomePage {
+
+ static propTypes = {
+ body: PropTypes.string.isRequired
+ }
render() {
return (
@@ -22,8 +26,4 @@ class HomePage extends Component {
}
-HomePage.propTypes = {
- body: PropTypes.string.isRequired
-};
-
export default HomePage;
diff --git a/src/components/TextBox/TextBox.js b/src/components/TextBox/TextBox.js
@@ -9,9 +9,17 @@
'use strict';
import './TextBox.less';
-import React, { Component, PropTypes } from 'react';
+import React, { PropTypes } from 'react';
-class TextBox extends Component {
+class TextBox {
+
+ static propTypes = {
+ maxLines: PropTypes.number
+ }
+
+ static defaultProps = {
+ maxLines: 1
+ }
render() {
return (
@@ -25,12 +33,4 @@ class TextBox extends Component {
}
-TextBox.propTypes = {
- maxLines: PropTypes.number
-};
-
-TextBox.defaultProps = {
- maxLines: 1
-};
-
export default TextBox;
diff --git a/webpack.config.js b/webpack.config.js
@@ -87,7 +87,7 @@ var config = {
{
test: /\.jsx?$/,
exclude: /node_modules/,
- loader: 'babel-loader?experimental'
+ loader: 'babel-loader?playground'
}
]
}
