Revert "use class properties syntax instead of bind (uber-archive#33)" (

uber-archive#35) This reverts commit b7bbb3d.
qiaoxin136 · Oct 31, 2017 · 1d7a4b2 · 1d7a4b2
1 parent f1a3ed8
commit 1d7a4b2
Show file tree

Hide file tree

Showing 24 changed files with 178 additions and 143 deletions.
diff --git a/src/demos/building-a-geospatial-app/1-starting-with-map/src/app.js b/src/demos/building-a-geospatial-app/1-starting-with-map/src/app.js
@@ -20,6 +20,7 @@ export default class App extends Component {
         maxZoom: 16
       }
     };
+    this._resize = this._resize.bind(this);
   }
 
   componentDidMount() {
@@ -37,7 +38,7 @@ export default class App extends Component {
     });
   }
 
-  _resize = () => {
+  _resize() {
     this._onViewportChange({
       width: window.innerWidth,
       height: window.innerHeight

diff --git a/src/demos/building-a-geospatial-app/2-scatterplot-overlay/src/app.js b/src/demos/building-a-geospatial-app/2-scatterplot-overlay/src/app.js
@@ -35,6 +35,7 @@ export default class App extends Component {
       hoveredObject: null,
       status: 'LOADING'
     };
+    this._resize = this._resize.bind(this);
   }
 
   componentDidMount() {
@@ -69,24 +70,24 @@ export default class App extends Component {
     }
   }
 
-  _onHover = ({x, y, object}) => {
+  _onHover({x, y, object}) {
     this.setState({x, y, hoveredObject: object});
   }
 
-  _onViewportChange = (viewport) => {
+  _onViewportChange(viewport) {
     this.setState({
       viewport: {...this.state.viewport, ...viewport}
     });
   }
 
-  _resize = () => {
+  _resize() {
     this._onViewportChange({
       width: window.innerWidth,
       height: window.innerHeight
     });
   }
 
-  _updateLayerSettings = (settings) => {
+  _updateLayerSettings(settings) {
     this.setState({settings});
   }
 
@@ -103,16 +104,16 @@ export default class App extends Component {
         <LayerControls
           settings={this.state.settings}
           propTypes={SCATTERPLOT_CONTROLS}
-          onChange={this._updateLayerSettings}/>
+          onChange={settings => this._updateLayerSettings(settings)}/>
         <MapGL
           {...this.state.viewport}
           mapStyle={MAPBOX_STYLE}
-          onViewportChange={this._onViewportChange}
+          onViewportChange={viewport => this._onViewportChange(viewport)}
           mapboxApiAccessToken={MAPBOX_TOKEN}>
           <DeckGLOverlay
             viewport={this.state.viewport}
             data={this.state.points}
-            onHover={this._onHover}
+            onHover={hover => this._onHover(hover)}
             {...this.state.settings}
           />
         </MapGL>

diff --git a/src/demos/building-a-geospatial-app/2-scatterplot-overlay/src/layer-controls.js b/src/demos/building-a-geospatial-app/2-scatterplot-overlay/src/layer-controls.js
@@ -54,7 +54,7 @@ export const SCATTERPLOT_CONTROLS = {
 
 export class LayerControls extends Component {
 
-  _onValueChange = (settingName, newValue) => {
+  _onValueChange(settingName, newValue) {
     const {settings} = this.props;
     // Only update if we have a confirmed change
     if (settings[settingName] !== newValue) {
@@ -83,7 +83,7 @@ export class LayerControls extends Component {
               settingName={key}
               value={settings[key]}
               propType={propTypes[key]}
-              onChange={this._onValueChange}/>
+              onChange={this._onValueChange.bind(this)}/>
           </div>)}
       </div>
     );

diff --git a/src/demos/building-a-geospatial-app/3-hexagon-overlay/src/app.js b/src/demos/building-a-geospatial-app/3-hexagon-overlay/src/app.js
@@ -43,6 +43,7 @@ export default class App extends Component {
 
       status: 'LOADING'
     };
+    this._resize = this._resize.bind(this);
   }
 
   componentDidMount() {
@@ -77,24 +78,24 @@ export default class App extends Component {
     }
   }
 
- _onHover = ({x, y, object}) => {
+ _onHover({x, y, object}) {
     this.setState({x, y, hoveredObject: object});
   }
 
-  _onViewportChange = (viewport) => {
+  _onViewportChange(viewport) {
     this.setState({
       viewport: {...this.state.viewport, ...viewport}
     });
   }
 
-  _resize = () => {
+  _resize() {
     this._onViewportChange({
       width: window.innerWidth,
       height: window.innerHeight
     });
   }
 
-  _updateLayerSettings = (settings) => {
+  _updateLayerSettings(settings) {
     this.setState({settings});
   }
 
@@ -111,16 +112,16 @@ export default class App extends Component {
         <LayerControls
           settings={this.state.settings}
           propTypes={HEXAGON_CONTROLS}
-          onChange={this._updateLayerSettings}/>
+          onChange={settings => this._updateLayerSettings(settings)}/>
         <MapGL
           {...this.state.viewport}
           mapStyle={MAPBOX_STYLE}
-          onViewportChange={this._onViewportChange}
+          onViewportChange={viewport => this._onViewportChange(viewport)}
           mapboxApiAccessToken={MAPBOX_TOKEN}>
           <DeckGLOverlay
             viewport={this.state.viewport}
             data={this.state.points}
-            onHover={this._onHover}
+            onHover={hover => this._onHover(hover)}
             {...this.state.settings}
           />
         </MapGL>

diff --git a/src/demos/building-a-geospatial-app/3-hexagon-overlay/src/layer-controls.js b/src/demos/building-a-geospatial-app/3-hexagon-overlay/src/layer-controls.js
@@ -54,7 +54,7 @@ export const SCATTERPLOT_CONTROLS = {
 
 export class LayerControls extends Component {
 
-  _onValueChange = (settingName, newValue) => {
+  _onValueChange(settingName, newValue) {
     const {settings} = this.props;
     // Only update if we have a confirmed change
     if (settings[settingName] !== newValue) {
@@ -83,7 +83,7 @@ export class LayerControls extends Component {
               settingName={key}
               value={settings[key]}
               propType={propTypes[key]}
-              onChange={this._onValueChange}/>
+              onChange={this._onValueChange.bind(this)}/>
           </div>)}
       </div>
     );

diff --git a/src/demos/building-a-geospatial-app/4-basic-charts/src/app.js b/src/demos/building-a-geospatial-app/4-basic-charts/src/app.js
@@ -36,6 +36,7 @@ export default class App extends Component {
 
       status: 'LOADING'
     };
+    this._resize = this._resize.bind(this);
   }
 
   componentDidMount() {
@@ -102,24 +103,24 @@ export default class App extends Component {
     }
   }
 
-  _onHover = ({x, y, object}) => {
+  _onHover({x, y, object}) {
     this.setState({x, y, hoveredObject: object});
   }
 
-  _onViewportChange = (viewport) => {
+  _onViewportChange(viewport) {
     this.setState({
       viewport: {...this.state.viewport, ...viewport}
     });
   }
 
-  _resize = () => {
+  _resize() {
     this._onViewportChange({
       width: window.innerWidth,
       height: window.innerHeight
     });
   }
 
-  _updateLayerSettings = (settings) => {
+  _updateLayerSettings(settings) {
     this.setState({settings});
   }
 
@@ -136,16 +137,16 @@ export default class App extends Component {
         <LayerControls
           settings={this.state.settings}
           propTypes={HEXAGON_CONTROLS}
-          onChange={this._updateLayerSettings}/>
+          onChange={settings => this._updateLayerSettings(settings)}/>
         <MapGL
           {...this.state.viewport}
           mapStyle={MAPBOX_STYLE}
-          onViewportChange={this._onViewportChange}
+          onViewportChange={viewport => this._onViewportChange(viewport)}
           mapboxApiAccessToken={MAPBOX_TOKEN}>
           <DeckGLOverlay
             viewport={this.state.viewport}
             data={this.state.points}
-            onHover={this._onHover}
+            onHover={hover => this._onHover(hover)}
              {...this.state.settings}
           />
         </MapGL>

diff --git a/src/demos/building-a-geospatial-app/4-basic-charts/src/layer-controls.js b/src/demos/building-a-geospatial-app/4-basic-charts/src/layer-controls.js
@@ -59,7 +59,7 @@ export const SCATTERPLOT_CONTROLS = {
 
 export class LayerControls extends Component {
 
-  _onValueChange = (settingName, newValue) => {
+  _onValueChange(settingName, newValue) {
     const {settings} = this.props;
     // Only update if we have a confirmed change
     if (settings[settingName] !== newValue) {
@@ -88,7 +88,7 @@ export class LayerControls extends Component {
               settingName={key}
               value={settings[key]}
               propType={propTypes[key]}
-              onChange={this._onValueChange}/>
+              onChange={this._onValueChange.bind(this)}/>
           </div>)}
       </div>
     );

diff --git a/src/demos/building-a-geospatial-app/5-interaction/src/app.js b/src/demos/building-a-geospatial-app/5-interaction/src/app.js
@@ -36,6 +36,7 @@ export default class App extends Component {
 
       status: 'LOADING'
     };
+    this._resize = this._resize.bind(this);
   }
 
   componentDidMount() {
@@ -102,36 +103,36 @@ export default class App extends Component {
     }
   }
 
-  _onHighlight = (highlightedHour) => {
+  _onHighlight(highlightedHour) {
     this.setState({highlightedHour});
   }
 
-  _onHover = ({x, y, object}) => {
+  _onHover({x, y, object}) {
     this.setState({x, y, hoveredObject: object});
   }
 
-  _onSelect = (selectedHour) => {
+  _onSelect(selectedHour) {
     this.setState({selectedHour:
       selectedHour === this.state.selectedHour ?
         null :
         selectedHour
       });
   }
 
-  _onViewportChange = (viewport) => {
+  _onViewportChange(viewport) {
     this.setState({
       viewport: {...this.state.viewport, ...viewport}
     });
   }
 
-  _resize = () => {
+  _resize() {
     this._onViewportChange({
       width: window.innerWidth,
       height: window.innerHeight
     });
   }
 
-  _updateLayerSettings = (settings) => {
+  _updateLayerSettings(settings) {
     this.setState({settings});
   }
 
@@ -148,22 +149,22 @@ export default class App extends Component {
         <LayerControls
           settings={this.state.settings}
           propTypes={HEXAGON_CONTROLS}
-          onChange={this._updateLayerSettings}/>
+          onChange={settings => this._updateLayerSettings(settings)}/>
         <MapGL
           {...this.state.viewport}
           mapStyle={MAPBOX_STYLE}
-          onViewportChange={this._onViewportChange}
+          onViewportChange={viewport => this._onViewportChange(viewport)}
           mapboxApiAccessToken={MAPBOX_TOKEN}>
           <DeckGLOverlay
             viewport={this.state.viewport}
             data={this.state.points}
-            onHover={this._onHover}
+            onHover={hover => this._onHover(hover)}
             {...this.state.settings}
           />
         </MapGL>
         <Charts {...this.state}
-          highlight={this._onHighlight}
-          select={this._onSelect}
+          highlight={hour => this._onHighlight(hour)}
+          select={hour => this._onSelect(hour)}
         />
         <Spinner status={this.state.status} />
       </div>

diff --git a/src/demos/building-a-geospatial-app/5-interaction/src/layer-controls.js b/src/demos/building-a-geospatial-app/5-interaction/src/layer-controls.js
@@ -59,7 +59,7 @@ export const SCATTERPLOT_CONTROLS = {
 
 export class LayerControls extends Component {
 
-  _onValueChange = (settingName, newValue) => {
+  _onValueChange(settingName, newValue) {
     const {settings} = this.props;
     // Only update if we have a confirmed change
     if (settings[settingName] !== newValue) {
@@ -88,7 +88,7 @@ export class LayerControls extends Component {
               settingName={key}
               value={settings[key]}
               propType={propTypes[key]}
-              onChange={this._onValueChange}/>
+              onChange={this._onValueChange.bind(this)}/>
           </div>)}
       </div>
     );