breakpoints.forEach((breakpoint, index) => {
var bQuery;
if (index === 0) {
bQuery = json2mq({minWidth: 0, maxWidth: breakpoint});
} else {
bQuery = json2mq({minWidth: breakpoints[index-1], maxWidth: breakpoint});
}
this.media(bQuery, () => {
this.setState({breakpoint: breakpoint});
});
});
componentWillMount: function () {
if (this.props.responsive) {
var breakpoints = this.props.responsive.map(breakpt => breakpt.breakpoint);
breakpoints.sort((x, y) => x - y);
breakpoints.forEach((breakpoint, index) => {
var bQuery;
if (index === 0) {
bQuery = json2mq({minWidth: 0, maxWidth: breakpoint});
} else {
bQuery = json2mq({minWidth: breakpoints[index-1], maxWidth: breakpoint});
}
this.media(bQuery, () => {
this.setState({breakpoint: breakpoint});
});
});
// Register media query for full screen. Need to support resize from small to large
var query = json2mq({minWidth: breakpoints.slice(-1)[0]});
this.media(query, () => {
this.setState({breakpoint: null});
});
}
},
breakpoints.forEach((breakpoint, index) => {
// media query for each breakpoint
let bQuery;
if (index === 0) {
bQuery = json2mq({ minWidth: 0, maxWidth: breakpoint });
} else {
bQuery = json2mq({
minWidth: breakpoints[index - 1] + 1,
maxWidth: breakpoint
});
}
// when not using server side rendering
canUseDOM() &&
this.media(bQuery, () => {
this.setState({ breakpoint: breakpoint });
});
});
componentWillMount() {
let { query } = this.props
if (typeof query !== 'string')
query = json2mq(query)
if (typeof window === 'object') {
this.mediaQueryList = window.matchMedia(query)
this.mediaQueryList.addListener(this.updateMatches)
this.updateMatches()
}
}
// handles responsive breakpoints
componentWillMount() {
// performance monitoring
//if (process.env.NODE_ENV !== 'production') {
//const { whyDidYouUpdate } = require('why-did-you-update')
//whyDidYouUpdate(React)
//}
if (this.props.responsive) {
let breakpoints = this.props.responsive.map(
breakpt => breakpt.breakpoint
);
// sort them in increasing order of their numerical value
breakpoints.sort((x, y) => x - y);
breakpoints.forEach((breakpoint, index) => {
// media query for each breakpoint
let bQuery;
if (index === 0) {
bQuery = json2mq({ minWidth: 0, maxWidth: breakpoint });
} else {
bQuery = json2mq({
minWidth: breakpoints[index - 1] + 1,
maxWidth: breakpoint
});
}
// when not using server side rendering
canUseDOM() &&
this.media(bQuery, () => {
this.setState({ breakpoint: breakpoint });
});
});
// Register media query for full screen. Need to support resize from small to large
// convert javascript object to media query string
let query = json2mq({ minWidth: breakpoints.slice(-1)[0] });
canUseDOM() &&
this.media(query, () => {
this.setState({ breakpoint: null });
});
}
}