ff-stream-web

commit 7ba3c9b96e4fb30d813f9650ca663171edb7e0c6
parent 0cb05a46b272ac300032f464377d8c9b1e9e11eb
Author: Konstantin Tarkus <hello@tarkus.me>
Date:   Tue,  2 Jun 2015 10:33:41 +0300

Update react-style-guide.md

Diffstat:
M
docs/react-style-guide.md
 | 
29
+++++++++++++++--------------
M
src/decorators/withViewport.js
 | 
4
----

2 files changed, 15 insertions(+), 18 deletions(-)
diff --git a/docs/react-style-guide.md b/docs/react-style-guide.md
@@ -137,12 +137,12 @@ Put custom methods and properties at the bottom of the file, after the render() 
 ##### Higher-order React component example:
 
 ```js
-// setViewport.js
+// withViewport.js
 import React, { Component } from 'react';
 import { canUseDOM } from 'react/lib/ExecutionEnvironment';
 
-function setViewport(ComposedComponent) {
-  return class Viewport extends Component {
+function withViewport(ComposedComponent) {
+  return class WithViewport extends Component {
 
     constructor() {
       super();
@@ -152,14 +152,7 @@ function setViewport(ComposedComponent) {
           {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});
-        }
-      };
+      this.handleResize = this.handleResize.bind(this);
     }
 
     componentDidMount() {
@@ -176,18 +169,26 @@ function setViewport(ComposedComponent) {
       return <ComposedComponent {...this.props} viewport={this.state.viewport}/>;
     }
 
+    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});
+      }
+    }
+
   };
 };
 
-export default setViewport;
+export default withViewport;
 ```
 
 ```js
 // MyComponent.js
 import React from 'react';
-import setViewport from './setViewport';
+import withViewport from './withViewport';
 
-@setViewport
+@withViewport
 class MyComponent {
   render() {
     let { width, height } = this.props.viewport;
diff --git a/src/decorators/withViewport.js b/src/decorators/withViewport.js
@@ -18,10 +18,6 @@ function handleWindowResize() {
 function withViewport(ComposedComponent) {
   return class WithViewport extends Component {
 
-    static displayName = (ComposedComponent.displayName && ComposedComponent.displayName.indexOf('.') !== -1 ?
-      ComposedComponent.displayName.substr(0, ComposedComponent.displayName.indexOf('.')) :
-      ComposedComponent.name) + '.' + WithViewport.name;
-
     constructor() {
       super();