-
-
Notifications
You must be signed in to change notification settings - Fork 298
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
3 changed files
with
96 additions
and
96 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,128 +1,128 @@ | ||
'use strict'; | ||
'use strict' | ||
|
||
var React = require('react'); | ||
var matchMedia = require('matchmedia'); | ||
var hyphenate = require('hyphenate-style-name'); | ||
var mediaQuery = require('./mediaQuery'); | ||
var toQuery = require('./toQuery'); | ||
var assign = require('object-assign'); | ||
let React = require('react') | ||
let matchMedia = require('matchmedia') | ||
let hyphenate = require('hyphenate-style-name') | ||
let mediaQuery = require('./mediaQuery') | ||
let toQuery = require('./toQuery') | ||
let assign = require('object-assign') | ||
|
||
var defaultTypes = { | ||
let defaultTypes = { | ||
component: React.PropTypes.node, | ||
query: React.PropTypes.string, | ||
values: React.PropTypes.shape(mediaQuery.matchers), | ||
children: React.PropTypes.oneOfType([React.PropTypes.node, React.PropTypes.function]) | ||
}; | ||
var mediaKeys = Object.keys(mediaQuery.all); | ||
var excludedQueryKeys = Object.keys(defaultTypes); | ||
var excludedPropKeys = excludedQueryKeys.concat(mediaKeys); | ||
|
||
function omit(object, keys){ | ||
var newObject = assign({}, object); | ||
keys.forEach(function(key){ | ||
delete newObject[key]; | ||
}); | ||
return newObject; | ||
children: React.PropTypes.oneOfType([ React.PropTypes.node, React.PropTypes.function ]) | ||
} | ||
let mediaKeys = Object.keys(mediaQuery.all) | ||
let excludedQueryKeys = Object.keys(defaultTypes) | ||
let excludedPropKeys = excludedQueryKeys.concat(mediaKeys) | ||
|
||
function omit(object, keys) { | ||
let newObject = assign({}, object) | ||
keys.forEach(function (key) { | ||
delete newObject[key] | ||
}) | ||
return newObject | ||
} | ||
|
||
var mq = React.createClass({ | ||
let mq = React.createClass({ | ||
displayName: 'MediaQuery', | ||
|
||
getDefaultProps: function(){ | ||
getDefaultProps: function () { | ||
return { | ||
values: {} | ||
}; | ||
} | ||
}, | ||
|
||
getInitialState: function(){ | ||
getInitialState: function () { | ||
return { | ||
matches: false | ||
}; | ||
} | ||
}, | ||
|
||
componentWillMount: function(){ | ||
this.updateQuery(this.props); | ||
componentWillMount: function () { | ||
this.updateQuery(this.props) | ||
}, | ||
|
||
componentWillReceiveProps: function(props){ | ||
this.updateQuery(props); | ||
componentWillReceiveProps: function (props) { | ||
this.updateQuery(props) | ||
}, | ||
|
||
updateQuery: function(props){ | ||
var values; | ||
updateQuery: function (props) { | ||
let values | ||
if (props.query) { | ||
this.query = props.query; | ||
this.query = props.query | ||
} else { | ||
this.query = toQuery(omit(props, excludedQueryKeys)); | ||
this.query = toQuery(omit(props, excludedQueryKeys)) | ||
} | ||
|
||
if (!this.query) { | ||
throw new Error('Invalid or missing MediaQuery!'); | ||
throw new Error('Invalid or missing MediaQuery!') | ||
} | ||
|
||
if (props.values) { | ||
values = Object.keys(props.values) | ||
.reduce(function(result, key){ | ||
result[hyphenate(key)] = props.values[key]; | ||
return result; | ||
}, {}); | ||
.reduce(function (result, key) { | ||
result[hyphenate(key)] = props.values[key] | ||
return result | ||
}, {}) | ||
} | ||
|
||
if (this._mql) { | ||
this._mql.removeListener(this.updateMatches); | ||
this._mql.removeListener(this.updateMatches) | ||
} | ||
|
||
this._mql = matchMedia(this.query, values); | ||
this._mql.addListener(this.updateMatches); | ||
this.updateMatches(); | ||
this._mql = matchMedia(this.query, values) | ||
this._mql.addListener(this.updateMatches) | ||
this.updateMatches() | ||
}, | ||
|
||
componentWillUnmount: function(){ | ||
this._mql.removeListener(this.updateMatches); | ||
componentWillUnmount: function () { | ||
this._mql.removeListener(this.updateMatches) | ||
}, | ||
|
||
updateMatches: function(){ | ||
updateMatches: function () { | ||
if (this._mql.matches === this.state.matches) { | ||
return; | ||
return | ||
} | ||
this.setState({ | ||
matches: this._mql.matches | ||
}); | ||
}) | ||
}, | ||
|
||
render: function(){ | ||
render: function () { | ||
if(typeof this.props.children === 'function') { | ||
return this.props.children(this.state.matches); | ||
return this.props.children(this.state.matches) | ||
} | ||
|
||
if (this.state.matches === false) { | ||
return null; | ||
return null | ||
} | ||
var props = omit(this.props, excludedPropKeys); | ||
var hasMergeProps = Object.keys(props).length > 0; | ||
var childrenCount = React.Children.count(this.props.children); | ||
var wrapChildren = this.props.component || | ||
let props = omit(this.props, excludedPropKeys) | ||
let hasMergeProps = Object.keys(props).length > 0 | ||
let childrenCount = React.Children.count(this.props.children) | ||
let wrapChildren = this.props.component || | ||
childrenCount > 1 || | ||
typeof this.props.children === 'string' || | ||
this.props.children === undefined; | ||
this.props.children === undefined | ||
if (wrapChildren) { | ||
return React.createElement( | ||
this.props.component || 'div', | ||
props, | ||
this.props.children | ||
); | ||
) | ||
} else if (hasMergeProps) { | ||
return React.cloneElement( | ||
this.props.children, | ||
props | ||
); | ||
} else if (childrenCount){ | ||
return this.props.children; | ||
) | ||
} else if (childrenCount) { | ||
return this.props.children | ||
} | ||
else { | ||
return null; | ||
return null | ||
} | ||
} | ||
}); | ||
}) | ||
|
||
module.exports = mq; | ||
module.exports = mq |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,39 +1,39 @@ | ||
'use strict'; | ||
'use strict' | ||
|
||
var hyphenate = require('hyphenate-style-name'); | ||
var mq = require('./mediaQuery'); | ||
let hyphenate = require('hyphenate-style-name') | ||
let mq = require('./mediaQuery') | ||
|
||
function negate(cond) { | ||
return 'not ' + cond; | ||
return 'not ' + cond | ||
} | ||
|
||
function keyVal(k, v) { | ||
var realKey = hyphenate(k); | ||
let realKey = hyphenate(k) | ||
|
||
// px shorthand | ||
if (typeof v === 'number') { | ||
v = v+'px'; | ||
v = v+'px' | ||
} | ||
if (v === true) { | ||
return k; | ||
return k | ||
} | ||
if (v === false) { | ||
return negate(k); | ||
return negate(k) | ||
} | ||
return '('+realKey+': '+v+')'; | ||
return '('+realKey+': '+v+')' | ||
} | ||
|
||
function join(conds) { | ||
return conds.join(' and '); | ||
return conds.join(' and ') | ||
} | ||
|
||
module.exports = function(obj){ | ||
var rules = []; | ||
Object.keys(mq.all).forEach(function(k){ | ||
var v = obj[k]; | ||
module.exports = function (obj) { | ||
let rules = [] | ||
Object.keys(mq.all).forEach(function (k) { | ||
let v = obj[k] | ||
if (v != null) { | ||
rules.push(keyVal(k, v)); | ||
rules.push(keyVal(k, v)) | ||
} | ||
}); | ||
return join(rules); | ||
}; | ||
}) | ||
return join(rules) | ||
} |