Update demo components to be compatible with React 15.2 and up

google-fabric · Aug 5, 2016 · 2b82374 · 2b82374
1 parent 0bf2646
commit 2b82374
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 3 deletions.
diff --git a/demo/components/box.jsx b/demo/components/box.jsx
@@ -1,3 +1,4 @@
+var _ = require('lodash');
 var React = require('react');
 
 require('../css/polyfill.css');
@@ -51,11 +52,14 @@ var Box = React.createClass({
       opacity: 0.4,
     };
 
+    // Pass any props that are not our own on through.
+    var restProps = _.omit(this.props, _.keys(this.constructor.propTypes));
+
     // outer div below absorbs Velocity's display: block behavior, keeping it from overwriting
     // the display: flex
     return (
       <div style={{margin: 10}}>
-        <div {...this.props} className="flex-box flex-column justify-content-center align-items-center user-select-none" style={style}>
+        <div {...restProps} className="flex-box flex-column justify-content-center align-items-center user-select-none" style={style}>
           {this.props.children}
           {this.props.instruction ? <div style={instructionStyle}>{this.props.instruction}</div> : null}
         </div>

diff --git a/demo/examples/toggle-box.jsx b/demo/examples/toggle-box.jsx
@@ -87,7 +87,7 @@ var ToggleBox = React.createClass({
     return (
       <div className="flex-box flex-column flex-1 align-items-center">
         <div>
-          <select rvalue={this.state.effect} onChange={this.whenSelectChanged}>{this.renderEffects()}</select>
+          <select value={this.state.effect} onChange={this.whenSelectChanged}>{this.renderEffects()}</select>
         </div>
         <Box className="flex-1 flex-box flex-column align-items-center" style={{backgroundColor: '#f5f5f5'}} onClick={this.whenToggleClicked} instruction="Click!">
           {/*

diff --git a/demo/examples/trigger-box.jsx b/demo/examples/trigger-box.jsx
@@ -57,7 +57,7 @@ var TriggerBox = React.createClass({
     return (
       <div className="flex-box flex-column flex-1 align-items-center">
         <div>
-          <select rvalue={this.state.effect} onChange={this.whenSelectChanged}>{this.renderEffects()}</select>
+          <select value={this.state.effect} onChange={this.whenSelectChanged}>{this.renderEffects()}</select>
         </div>
         <div className="flex-1">
           {/*