From 58985d62b36d4f83c238e5ffe1414b8ee0a231f2 Mon Sep 17 00:00:00 2001 From: breeny Date: Sat, 28 Jul 2018 23:44:30 +1000 Subject: [PATCH 1/2] Bump version, update gitignore --- .gitignore | 1 - es/Breakpoint.js | 84 +++++++++++++++++++++++++++++++++++++++++++++++ es/breakpoints.js | 49 +++++++++++++++++++++++++++ es/index.js | 9 +++++ package.json | 2 +- 5 files changed, 143 insertions(+), 2 deletions(-) create mode 100644 es/Breakpoint.js create mode 100644 es/breakpoints.js create mode 100644 es/index.js diff --git a/.gitignore b/.gitignore index 820bf6c..642271f 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,2 @@ node_modules/ -es/ coverage/ \ No newline at end of file diff --git a/es/Breakpoint.js b/es/Breakpoint.js new file mode 100644 index 0000000..d7ad187 --- /dev/null +++ b/es/Breakpoint.js @@ -0,0 +1,84 @@ +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } + +import React from 'react'; +import breakpoints from './breakpoints'; + +var Breakpoint = function (_React$Component) { + _inherits(Breakpoint, _React$Component); + + function Breakpoint() { + var _temp, _this, _ret; + + _classCallCheck(this, Breakpoint); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = _possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this.state = { + breakpoint: breakpoints.getBreakpoints()[0] + }, _temp), _possibleConstructorReturn(_this, _ret); + } + + Breakpoint.prototype.componentDidMount = function componentDidMount() { + var _this2 = this; + + this.queries = []; + breakpoints.getBreakpoints().forEach(function (breakpoint) { + var mq = window.matchMedia(breakpoint.query); + + if (mq.matches) { + _this2.setState({ + breakpoint: breakpoint + }); + } + + var listener = function listener(mql) { + if (mql.matches) { + _this2.setState({ + breakpoint: breakpoint + }); + } + }; + + mq.addListener(listener); + + _this2.queries.push({ + query: mq, + listener: listener + }); + }); + }; + + Breakpoint.prototype.componentWillUnmount = function componentWillUnmount() { + this.queries.forEach(function (bp) { + bp.query.removeListener(bp.listener); + }); + }; + + Breakpoint.prototype.render = function render() { + var breakpoint = this.state.breakpoint; + + if (this.props[breakpoint.name]) { + return this.props[breakpoint.name](); + } + + if (this.props.render) { + return this.props.render(breakpoint.name); + } + + if (this.props.children) { + return this.props.children(breakpoint.name); + } + + return null; + }; + + return Breakpoint; +}(React.Component); + +export default Breakpoint; \ No newline at end of file diff --git a/es/breakpoints.js b/es/breakpoints.js new file mode 100644 index 0000000..66f7ed9 --- /dev/null +++ b/es/breakpoints.js @@ -0,0 +1,49 @@ +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +import defaultBreakpoints from './default_breakpoints.json'; + +var Breakpoints = function () { + function Breakpoints() { + _classCallCheck(this, Breakpoints); + + this.generateMediaQueries(defaultBreakpoints); + } + + Breakpoints.prototype.generateMediaQueries = function generateMediaQueries(breakpoints) { + var queries = breakpoints.map(function (breakpoint) { + + var query = ''; + if (breakpoint.minWidth) { + query += '(min-width: ' + breakpoint.minWidth + 'px)'; + } + + if (query && breakpoint.maxWidth) { + query += ' and '; + } + + if (breakpoint.maxWidth) { + query += '(max-width: ' + breakpoint.maxWidth + 'px)'; + } + + return { + name: breakpoint.name, + query: query + }; + }); + + this.breakpoints = queries; + }; + + Breakpoints.prototype.configureBreakpoints = function configureBreakpoints(breakpoints) { + this.generateMediaQueries(breakpoints); + }; + + Breakpoints.prototype.getBreakpoints = function getBreakpoints() { + return this.breakpoints; + }; + + return Breakpoints; +}(); + +var breakpoints = new Breakpoints(); +export default breakpoints; \ No newline at end of file diff --git a/es/index.js b/es/index.js new file mode 100644 index 0000000..8af911d --- /dev/null +++ b/es/index.js @@ -0,0 +1,9 @@ +import breakpoints from './breakpoints'; + +var configure = function configure(newBreakpoints) { + breakpoints.configureBreakpoints(newBreakpoints); +}; + +export { default } from './Breakpoint'; + +export { configure }; \ No newline at end of file diff --git a/package.json b/package.json index 5d65bd1..f15aeda 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-media-breakpoints", - "version": "0.1.0", + "version": "0.1.2", "description": "Simple and configurable breakpoint matcher using matchMedia and render props", "main": "index.js", "module": "es/index.js", From 145c613f43e736c7e96041e886a93c2407c5c31c Mon Sep 17 00:00:00 2001 From: breeny Date: Sat, 28 Jul 2018 23:48:46 +1000 Subject: [PATCH 2/2] Bump final working code --- {src => es}/default_breakpoints.json | 0 package.json | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename {src => es}/default_breakpoints.json (100%) diff --git a/src/default_breakpoints.json b/es/default_breakpoints.json similarity index 100% rename from src/default_breakpoints.json rename to es/default_breakpoints.json diff --git a/package.json b/package.json index f15aeda..2323020 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-media-breakpoints", - "version": "0.1.2", + "version": "0.1.3", "description": "Simple and configurable breakpoint matcher using matchMedia and render props", "main": "index.js", "module": "es/index.js",