From ce1f8e2fa9e4196a1394e412db62421f364697b6 Mon Sep 17 00:00:00 2001 From: Swaagie Date: Wed, 27 Sep 2017 13:48:51 +0200 Subject: [PATCH 1/3] [fix] resolver of react-native loops require on ./ --- CHANGELOG.md | 2 + index.js | 108 ++++++------------------------------------------ index.native.js | 15 ++++++- package.json | 2 +- test.js | 2 +- 5 files changed, 30 insertions(+), 99 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9244b61..8d86037 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,7 @@ # CHANGELOG +- Use seperate file for `Breakdancer` base class, allows React Native to resolve `Breakdancer`. + ## 1.1.1 - Removed `react-native` from peerDependencies. See #11 #12 diff --git a/index.js b/index.js index abbd382..c4b6585 100644 --- a/index.js +++ b/index.js @@ -1,3 +1,4 @@ +import Breakdancer from './breakdancer'; import get from 'propget'; /** @@ -21,38 +22,25 @@ const win = typeof window !== 'undefined' ? window : { * @param {Object} windows Option window object reference. * @public */ -export default class Breakdancer { +export default class WebDancer extends Breakdancer { constructor(specification, windows) { - this.window = windows || win; + super(specification); - // - // Setup our default values after the window has been set so we don't have - // any undefined references. - // - this.specification = this.normalize(specification); + this.window = windows || win; this.breakpoint = this.currently(); } /** - * Normalize the specification. + * Return the current view port. * - * @param {Array|Object} specification Different breakpoints we need to know. - * @returns {Array} List of media query specifications - * @private + * @returns {Object} viewport + * @public */ - normalize(specification) { - if (Array.isArray(specification)) return specification; - - return Object.keys(specification).reduce(function reduce(memo, key) { - var breakpoint = specification[key]; - - // - // If there is no name specified, use the key as name. - // - breakpoint.name = breakpoint.name || key; - memo.push(breakpoint); - return memo; - }, []); + viewport() { + return { + height: this.height(), + width: this.width() + }; } /** @@ -80,76 +68,4 @@ export default class Breakdancer { || get(this.window, 'document.body.clientHeight') || 0; } - - /** - * Check if the setup has changed since we've last checked the real estate. - * - * @param {Object} viewport The view port specification. - * @returns {Boolean} True if the breakpoint for the viewport has changed. - * @public - */ - changed(viewport) { - var breakpoint = this.breakpoint; - this.breakpoint = this.currently(viewport); - - return this.breakpoint !== breakpoint; - } - - /** - * Return the current view port. - * - * @returns {Object} viewport - * @public - */ - viewport() { - return { - height: this.height(), - width: this.width() - }; - } - - /** - * Check if a given specification matches our current set resolution. - * - * @param {Object} viewport The view port specification. - * @param {Object} specification The supplied specification. - * @returns {Boolean} True if viewport fits into the specification. - * @private - */ - matches(viewport, specification) { - viewport = viewport || this.viewport(); - - let matched = false; - - if ('height' in specification) { - matched = viewport.height < specification.height; - - if (!matched) return matched; - } - - if ('width' in specification) { - matched = viewport.width < specification.width; - } - - return matched; - } - - /** - * Find out which breakpoint we're currently triggering. - * - * @param {Object} viewport The view port specification. - * @returns {String} The current breakpoint that we got triggered. - * @public - */ - currently(viewport) { - viewport = viewport || this.viewport(); - - for (var i = 0, l = this.specification.length; i < l; i++) { - var spec = this.specification[i]; - - if (this.matches(viewport, spec)) return spec.name; - } - - return 'unknown'; - } } diff --git a/index.native.js b/index.native.js index 26d8558..1130ec1 100644 --- a/index.native.js +++ b/index.native.js @@ -1,7 +1,20 @@ -import Breakdancer from './'; +import Breakdancer from './breakdancer'; import { Dimensions } from 'react-native'; +/** + * Breakdancer is a simple breakpoint utility. + * + * @constructor + * @param {Object} specification Different breakpoints we need to know. + * @public + */ export default class NativeDancer extends Breakdancer { + constructor(specification) { + super(specification); + + this.breakpoint = this.currently(); + } + /** * Return the current view port. * diff --git a/package.json b/package.json index 3d73e85..e0624d4 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "lint": "eslint-godaddy *.js", "test:web": "mocha --compilers js:babel-register ./test.js", "test:native": "mocha --require react-native-mock/mock.js --compilers js:babel-register ./test.native.js", - "build": "babel index.js -d ./lib", + "build": "babel index.js breakdancer.js -d ./lib", "prepublish": "npm run build", "pretest": "npm run lint", "test": "npm run test:web && npm run test:native" diff --git a/test.js b/test.js index 0306fb0..3d31183 100644 --- a/test.js +++ b/test.js @@ -1,4 +1,4 @@ -import Breakdancer from './'; +import Breakdancer from './index'; import assume from 'assume'; it('is exposed as a function', function () { From 03a2e2e579ffecc5845f06b56cd12d8fce831348 Mon Sep 17 00:00:00 2001 From: Swaagie Date: Wed, 27 Sep 2017 13:51:06 +0200 Subject: [PATCH 2/3] [doc] typo --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8d86037..e89d4a3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ # CHANGELOG -- Use seperate file for `Breakdancer` base class, allows React Native to resolve `Breakdancer`. +- Use separate file for `Breakdancer` base class, allows React Native to resolve `Breakdancer`. ## 1.1.1 From 0b2f0775eb414359d6b94e1ab648abb5f68afca7 Mon Sep 17 00:00:00 2001 From: Swaagie Date: Wed, 27 Sep 2017 14:00:27 +0200 Subject: [PATCH 3/3] [fix] adding missing file --- breakdancer.js | 97 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 97 insertions(+) create mode 100644 breakdancer.js diff --git a/breakdancer.js b/breakdancer.js new file mode 100644 index 0000000..05a611f --- /dev/null +++ b/breakdancer.js @@ -0,0 +1,97 @@ +/** + * Breakdancer is a simple breakpoint utility. + * + * @constructor + * @param {Object} specification Different breakpoints we need to know. + * @public + */ +export default class Breakdancer { + constructor(specification) { + // + // Setup our default values after the window has been set so we don't have + // any undefined references. + // + this.specification = this.normalize(specification); + } + + /** + * Normalize the specification. + * + * @param {Array|Object} specification Different breakpoints we need to know. + * @returns {Array} List of media query specifications + * @private + */ + normalize(specification) { + if (Array.isArray(specification)) return specification; + + return Object.keys(specification).reduce(function reduce(memo, key) { + var breakpoint = specification[key]; + + // + // If there is no name specified, use the key as name. + // + breakpoint.name = breakpoint.name || key; + memo.push(breakpoint); + return memo; + }, []); + } + + /** + * Check if the setup has changed since we've last checked the real estate. + * + * @param {Object} viewport The view port specification. + * @returns {Boolean} True if the breakpoint for the viewport has changed. + * @public + */ + changed(viewport) { + var breakpoint = this.breakpoint; + this.breakpoint = this.currently(viewport); + + return this.breakpoint !== breakpoint; + } + + /** + * Check if a given specification matches our current set resolution. + * + * @param {Object} viewport The view port specification. + * @param {Object} specification The supplied specification. + * @returns {Boolean} True if viewport fits into the specification. + * @private + */ + matches(viewport, specification) { + viewport = viewport || this.viewport(); + + let matched = false; + + if ('height' in specification) { + matched = viewport.height < specification.height; + + if (!matched) return matched; + } + + if ('width' in specification) { + matched = viewport.width < specification.width; + } + + return matched; + } + + /** + * Find out which breakpoint we're currently triggering. + * + * @param {Object} viewport The view port specification. + * @returns {String} The current breakpoint that we got triggered. + * @public + */ + currently(viewport) { + viewport = viewport || this.viewport(); + + for (var i = 0, l = this.specification.length; i < l; i++) { + var spec = this.specification[i]; + + if (this.matches(viewport, spec)) return spec.name; + } + + return 'unknown'; + } +}