update reactify, add example, use React.PropTypes.shape to define values

yocontra · Feb 27, 2015 · 48e6c5d · 48e6c5d
1 parent 759154b
commit 48e6c5d
Show file tree

Hide file tree

Showing 6 changed files with 116 additions and 36 deletions.
diff --git a/gulpfile.js b/gulpfile.js
@@ -42,6 +42,15 @@ var sampleBundler = watchify(browserify('./samples/sandbox/src/index.jsx', {
 }));
 sampleBundler.transform(reactify);
 
+var staticSampleBundler = watchify(browserify('./samples/static/src/index.jsx', {
+  cache: bundleCache,
+  packageCache: pkgCache,
+  fullPaths: true,
+  standalone: 'sample',
+  debug: true
+}));
+staticSampleBundler.transform(reactify);
+
 gulp.task('watch', function(){
   bundler.on('update', function(){
     gulp.start('js');
@@ -79,11 +88,20 @@ gulp.task('samples', function(){
     .pipe(gulp.dest('samples/sandbox/dist'))
     .pipe(lr());
 
+  var browserifyStream2 = staticSampleBundler.bundle()
+    // browserify -> gulp transfer
+    .pipe(source('index.js'))
+    .pipe(buffer())
+    .pipe(cached('index'))
+    .pipe(sourcemaps.init({loadMaps: true}))
+    .pipe(sourcemaps.write('.'))
+    .pipe(gulp.dest('samples/static/dist'));
+
   var staticStream = gulp.src(['samples/sandbox/src/**/*', '!samples/sandbox/src/**/*.js'])
     .pipe(cached('static-samples'))
     .pipe(gulp.dest('samples/sandbox/dist'));
 
-  return merge(staticStream, browserifyStream);
+  return merge(staticStream, browserifyStream, browserifyStream2);
 });
 
 gulp.task('sample-server', function(cb){

diff --git a/package.json b/package.json
@@ -44,7 +44,7 @@
     "jshint-stylish": "^0.4.0",
     "merge-stream": "^0.1.5",
     "mocha": "^1.20.1",
-    "reactify": "^0.14.0",
+    "reactify": "^1.0.0",
     "should": "^4.0.4",
     "vinyl-buffer": "0.0.0",
     "vinyl-source-stream": "^0.1.1",

diff --git a/samples/sandbox/src/index.jsx b/samples/sandbox/src/index.jsx
@@ -1,9 +1,8 @@
-/** @jsx React.DOM */
 /* global document, window */
 
 'use strict';
 
-var mq = require('../../../src');
+var Mq = require('../../../src');
 var React = require('react');
 window.React = React; // for dev
 
@@ -13,31 +12,31 @@ var App = React.createClass({
     return (
       <div>
         <div>Device Test!</div>
-        <mq minDeviceWidth={1224}>
+        <Mq minDeviceWidth={1224}>
           <div>You are a desktop or laptop</div>
-          <mq minDeviceWidth={1824}>
+          <Mq minDeviceWidth={1824}>
             <div>You also have a huge screen</div>
-          </mq>
-          <mq maxWidth={1224}>
+          </Mq>
+          <Mq maxWidth={1224}>
             <div>You are sized like a tablet or mobile phone though</div>
-          </mq>
-        </mq>
-        <mq maxDeviceWidth={1224}>
+          </Mq>
+        </Mq>
+        <Mq maxDeviceWidth={1224}>
           <div>You are a tablet or mobile phone</div>
-        </mq>
+        </Mq>
 
-        <mq orientation='portrait'>
+        <Mq orientation='portrait'>
           <div>You are portrait</div>
-        </mq>
-         <mq orientation='landscape'>
+        </Mq>
+         <Mq orientation='landscape'>
           <div>You are landscape</div>
-        </mq>
-        <mq minResolution='2dppx'>
+        </Mq>
+        <Mq minResolution='2dppx'>
           <div>You are retina</div>
-        </mq>
+        </Mq>
       </div>
     );
   }
 });
 
-React.renderComponent(App(), document.body);
+React.renderComponent(App(), document.body);
diff --git a/samples/static/src/index.jsx b/samples/static/src/index.jsx
@@ -0,0 +1,39 @@
+'use strict';
+
+var Mq = require('../../../src');
+var React = require('react');
+
+var App = React.createClass({
+  displayName: 'demo',
+  render: function(){
+    return (
+      <div>
+        <div>Device Test!</div>
+        <Mq minDeviceWidth={1224} values={{deviceWidth: 1230}}>
+          <div>You are a desktop or laptop</div>
+          <Mq minDeviceWidth={1824}>
+            <div>You also have a huge screen</div>
+          </Mq>
+          <Mq maxWidth={1224}>
+            <div>You are sized like a tablet or mobile phone though</div>
+          </Mq>
+        </Mq>
+        <Mq maxDeviceWidth={1224}>
+          <div>You are a tablet or mobile phone</div>
+        </Mq>
+
+        <Mq orientation='portrait'>
+          <div>You are portrait</div>
+        </Mq>
+         <Mq orientation='landscape'>
+          <div>You are landscape</div>
+        </Mq>
+        <Mq minResolution='2dppx'>
+          <div>You are retina</div>
+        </Mq>
+      </div>
+    );
+  }
+});
+
+console.log(React.renderToString(<App />));
diff --git a/src/index.js b/src/index.js
@@ -4,14 +4,15 @@
 
 var React = require('react');
 var omit = require('lodash.omit');
+var matchMedia = require('matchmedia');
+var hyphenate = require('react/lib/hyphenateStyleName');
 var mediaQuery = require('./mediaQuery');
 var toQuery = require('./toQuery');
-var matchMedia = require('matchmedia');
 
 var defaultTypes = {
-  component: React.PropTypes.func,
+  component: React.PropTypes.node,
   query: React.PropTypes.string,
-  values: React.PropTypes.object
+  values: React.PropTypes.shape(mediaQuery.matchers)
 };
 var mediaKeys = Object.keys(mediaQuery.all);
 var excludedQueryKeys = Object.keys(defaultTypes);
@@ -22,7 +23,8 @@ var mq = React.createClass({
 
   getDefaultProps: function(){
     return {
-      component: React.DOM.div
+      component: 'div',
+      values: {}
     };
   },
 
@@ -41,6 +43,7 @@ var mq = React.createClass({
   },
 
   updateQuery: function(props){
+    var values;
     if (props.query) {
       this.query = props.query;
     } else {
@@ -50,7 +53,16 @@ var mq = React.createClass({
     if (!this.query) {
       throw new Error('Invalid or missing MediaQuery!');
     }
-    this._mql = matchMedia(this.query, this.props.values);
+
+    if (props.values) {
+      values = Object.keys(props.values)
+        .reduce(function(result, key){
+          result[hyphenate(key)] = props.values[key];
+          return result;
+        }, {});
+    }
+
+    this._mql = matchMedia(this.query, values);
     this._mql.addListener(this.updateMatches);
     this.updateMatches();
   },
@@ -73,7 +85,7 @@ var mq = React.createClass({
       return null;
     }
     var props = omit(this.props, excludedPropKeys);
-    return this.props.component(props, this.props.children);
+    return React.createElement(this.props.component, props, this.props.children);
   }
 });
 

diff --git a/src/mediaQuery.js b/src/mediaQuery.js
@@ -6,8 +6,8 @@ var stringOrNumber = PropTypes.oneOfType([
   PropTypes.number
 ]);
 
-var features = {
-  // media features
+// properties that match media queries
+var matchers = {
   orientation: PropTypes.oneOf([
     'portrait',
     'landscape'
@@ -19,43 +19,54 @@ var features = {
   ]),
 
   aspectRatio: PropTypes.string,
+  deviceAspectRatio: PropTypes.string,
+
+  height: stringOrNumber,
+  deviceHeight: stringOrNumber,
+
+  width: stringOrNumber,
+  deviceWidth: stringOrNumber,
+
+  color: PropTypes.bool,
+
+  colorIndex: PropTypes.bool,
+
+  monochrome: PropTypes.bool,
+  resolution: stringOrNumber
+};
+
+// media features
+var features = {
   minAspectRatio: PropTypes.string,
   maxAspectRatio: PropTypes.string,
-  deviceAspectRatio: PropTypes.string,
   minDeviceAspectRatio: PropTypes.string,
   maxDeviceAspectRatio: PropTypes.string,
 
-  height: stringOrNumber,
   minHeight: stringOrNumber,
   maxHeight: stringOrNumber,
-  deviceHeight: stringOrNumber,
   minDeviceHeight: stringOrNumber,
   maxDeviceHeight: stringOrNumber,
 
-  width: stringOrNumber,
   minWidth: stringOrNumber,
   maxWidth: stringOrNumber,
-  deviceWidth: stringOrNumber,
   minDeviceWidth: stringOrNumber,
   maxDeviceWidth: stringOrNumber,
 
-  color: PropTypes.bool,
   minColor: PropTypes.number,
   maxColor: PropTypes.number,
 
-  colorIndex: PropTypes.bool,
   minColorIndex: PropTypes.number,
   maxColorIndex: PropTypes.number,
 
-  monochrome: PropTypes.bool,
   minMonochrome: PropTypes.number,
   maxMonochrome: PropTypes.number,
 
-  resolution: stringOrNumber,
   minResolution: stringOrNumber,
   maxResolution: stringOrNumber
 };
 
+assign(features, matchers);
+
 // media types
 var types = {
   grid: PropTypes.bool,
@@ -77,5 +88,6 @@ assign(all, features);
 module.exports = {
   all: all,
   types: types,
+  matchers: matchers,
   features: features
 };