Skip to content

Commit

Permalink
Update source to ES2015 syntax.
Browse files Browse the repository at this point in the history
- remove object-assign dependency.
  • Loading branch information
eightypop committed Nov 8, 2016
1 parent 94dbf57 commit b72e2c0
Show file tree
Hide file tree
Showing 4 changed files with 56 additions and 76 deletions.
3 changes: 1 addition & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,7 @@
"dependencies": {
"babel-runtime": "^6.18.0",
"hyphenate-style-name": "^1.0.0",
"matchmedia": "^0.1.2",
"object-assign": "^4.0.1"
"matchmedia": "^0.1.2"
},
"peerDependencies": {
"react": "^0.12.0 || ^0.13.0 || ^0.14.0 || ^15.0.0"
Expand Down
82 changes: 35 additions & 47 deletions src/index.js
Original file line number Diff line number Diff line change
@@ -1,54 +1,43 @@
'use strict'
import React from 'react'
import matchMedia from 'matchmedia'
import hyphenate from 'hyphenate-style-name'
import mediaQuery from './mediaQuery'
import toQuery from './toQuery'

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')

let defaultTypes = {
const 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 ])
}
let mediaKeys = Object.keys(mediaQuery.all)
let excludedQueryKeys = Object.keys(defaultTypes)
let excludedPropKeys = excludedQueryKeys.concat(mediaKeys)
const mediaKeys = Object.keys(mediaQuery.all)
const excludedQueryKeys = Object.keys(defaultTypes)
const excludedPropKeys = excludedQueryKeys.concat(mediaKeys)

function omit(object, keys) {
let newObject = assign({}, object)
keys.forEach(function (key) {
delete newObject[key]
})
const newObject = { ...object }
keys.forEach(key => delete newObject[key])
return newObject
}

let mq = React.createClass({
displayName: 'MediaQuery',

getDefaultProps: function () {
return {
values: {}
}
},
export default class MediaQuery extends React.Component {
static displayName = 'MediaQuery'
static defaultProps = {
values: {}
}

getInitialState: function () {
return {
matches: false
}
},
state = { matches: false }

componentWillMount: function () {
componentWillMount() {
this.updateQuery(this.props)
},
}

componentWillReceiveProps: function (props) {
this.updateQuery(props)
},
componentWillReceiveProps(nextProps) {
this.updateQuery(nextProps)
}

updateQuery: function (props) {
updateQuery(props) {
let values
if (props.query) {
this.query = props.query
Expand All @@ -75,33 +64,34 @@ let mq = React.createClass({
this._mql = matchMedia(this.query, values)
this._mql.addListener(this.updateMatches)
this.updateMatches()
},
}


componentWillUnmount: function () {
componentWillUnmount() {
this._mql.removeListener(this.updateMatches)
},
}

updateMatches: function () {
updateMatches = () => {
if (this._mql.matches === this.state.matches) {
return
}
this.setState({
matches: this._mql.matches
})
},
}

render: function () {
render() {
if(typeof this.props.children === 'function') {
return this.props.children(this.state.matches)
}

if (this.state.matches === false) {
return null
}
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 ||
const props = omit(this.props, excludedPropKeys)
const hasMergeProps = Object.keys(props).length > 0
const childrenCount = React.Children.count(this.props.children)
const wrapChildren = this.props.component ||
childrenCount > 1 ||
typeof this.props.children === 'string' ||
this.props.children === undefined
Expand All @@ -123,6 +113,4 @@ let mq = React.createClass({
return null
}
}
})

module.exports = mq
}
25 changes: 11 additions & 14 deletions src/mediaQuery.js
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
let PropTypes = require('react').PropTypes
let assign = require('object-assign')
import { PropTypes } from 'react'

let stringOrNumber = PropTypes.oneOfType([
const stringOrNumber = PropTypes.oneOfType([
PropTypes.string,
PropTypes.number
])

// properties that match media queries
let matchers = {
const matchers = {
orientation: PropTypes.oneOf([
'portrait',
'landscape'
Expand Down Expand Up @@ -36,7 +35,7 @@ let matchers = {
}

// media features
let features = {
const features = {
minAspectRatio: PropTypes.string,
maxAspectRatio: PropTypes.string,
minDeviceAspectRatio: PropTypes.string,
Expand All @@ -62,13 +61,13 @@ let features = {
maxMonochrome: PropTypes.number,

minResolution: stringOrNumber,
maxResolution: stringOrNumber
}
maxResolution: stringOrNumber,

assign(features, matchers)
...matchers
}

// media types
let types = {
const types = {
all: PropTypes.bool,
grid: PropTypes.bool,
aural: PropTypes.bool,
Expand All @@ -82,14 +81,12 @@ let types = {
embossed: PropTypes.bool
}

let all = {}
assign(all, types)
assign(all, features)
const all = { ...types, ...features }

// add the type property
assign(matchers, { type: Object.keys(types) })
matchers.type = Object.keys(types)

module.exports = {
export default {
all: all,
types: types,
matchers: matchers,
Expand Down
22 changes: 9 additions & 13 deletions src/toQuery.js
Original file line number Diff line number Diff line change
@@ -1,36 +1,32 @@
'use strict'
import hyphenate from 'hyphenate-style-name'
import mq from './mediaQuery'

let hyphenate = require('hyphenate-style-name')
let mq = require('./mediaQuery')

function negate(cond) {
return 'not ' + cond
}
const negate = cond => `not ${cond}`

function keyVal(k, v) {
let realKey = hyphenate(k)
const realKey = hyphenate(k)

// px shorthand
if (typeof v === 'number') {
v = v+'px'
v = `${v}px`
}
if (v === true) {
return k
}
if (v === false) {
return negate(k)
}
return '('+realKey+': '+v+')'
return `(${realKey}: ${v})`
}

function join(conds) {
return conds.join(' and ')
}

module.exports = function (obj) {
let rules = []
export default function (obj) {
const rules = []
Object.keys(mq.all).forEach(function (k) {
let v = obj[k]
const v = obj[k]
if (v != null) {
rules.push(keyVal(k, v))
}
Expand Down

0 comments on commit b72e2c0

Please sign in to comment.