From 93b16925e717b8c536d8d1855123df7195f439f7 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 19 Jul 2016 22:13:18 +0530 Subject: [PATCH 01/61] Add syntax for ExtractTextPlugin v2 --- README.md | 48 +++++++++++++++++++++++++++++++++++++----------- 1 file changed, 37 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 5c8c0ef..91cbc55 100644 --- a/README.md +++ b/README.md @@ -182,22 +182,48 @@ Setup: * Install [`style-loader`](https://www.npmjs.com/package/style-loader). * Install [`css-loader`](https://www.npmjs.com/package/css-loader). * Use [`extract-text-webpack-plugin`](https://www.npmjs.com/package/extract-text-webpack-plugin) to extract chunks of CSS into a single stylesheet. + * Setup `/\.css$/` loader: -```js -{ - test: /\.css$/, - loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]') -} -``` + * ExtractTextPlugin v1x: + + ```js + { + test: /\.css$/, + loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]') + } + ``` + + * ExtractTextPlugin v2x: + + ```js + { + test: /\.css$/, + loader: ExtractTextPlugin.extract({ + notExtractLoader: 'style-loader', + loader: 'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]!resolve-url!postcss', + }), + } + ``` * Setup `extract-text-webpack-plugin` plugin: -```js -new ExtractTextPlugin('app.css', { - allChunks: true -}) -``` + * ExtractTextPlugin v1x: + + ```js + new ExtractTextPlugin('app.css', { + allChunks: true + }) + ``` + + * ExtractTextPlugin v2x: + + ```js + new ExtractTextPlugin({ + filename: 'app.css', + allChunks: true + }) + ``` Refer to [webpack-demo](https://github.com/css-modules/webpack-demo) or [react-css-modules-examples](https://github.com/gajus/react-css-modules-examples) for an example of a complete setup. From c8f67992315411c61e40eb7fdb96bd1521db354f Mon Sep 17 00:00:00 2001 From: "Christian.Schilling" Date: Thu, 4 Aug 2016 13:33:59 +0200 Subject: [PATCH 02/61] Fix failing tests for IE11 map compatibility (fixes https://github.com/gajus/react-css-modules/issues/157) --- src/generateAppendClassName.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/generateAppendClassName.js b/src/generateAppendClassName.js index c896f6e..3bbb23f 100644 --- a/src/generateAppendClassName.js +++ b/src/generateAppendClassName.js @@ -15,7 +15,8 @@ export default (styles, styleNames: Array, errorWhenNotFound: boolean): return styleNameIndex; } } else { - stylesIndexMap = stylesIndex.set(styles, new Map()); + stylesIndexMap = new Map(); + stylesIndex.set(styles, new Map()); } appendClassName = ''; From 478f0e6ff27317fdd5e62e60500d30a1734fcb6c Mon Sep 17 00:00:00 2001 From: Gajus Kuizinas Date: Tue, 9 Aug 2016 11:38:49 +0100 Subject: [PATCH 03/61] 3.7.10 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index e8a0947..369d02c 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "css", "modules" ], - "version": "3.7.9", + "version": "3.7.10", "author": { "name": "Gajus Kuizinas", "email": "gajus@gajus.com", From e49229fc7a582c257b4f014ccc5bc8ec31c479a5 Mon Sep 17 00:00:00 2001 From: fix-fix Date: Fri, 19 Aug 2016 14:47:50 +0500 Subject: [PATCH 04/61] Fix typo in class name example Cell element from the rendering output example has a class that looks like some mix of `styles.row` and `styles.cell`, but it should have exactly the same class from `styles.cell` as the other cell element. --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 5c8c0ef..6baaa37 100644 --- a/README.md +++ b/README.md @@ -61,7 +61,7 @@ Rendering the component will produce a markup similar to: ```js
-
A0
+
A0
B0
From 1cb161d04fe05ecd561199511d24c476bb32643d Mon Sep 17 00:00:00 2001 From: Kinsey Van Ost Date: Fri, 2 Sep 2016 02:21:29 -0700 Subject: [PATCH 05/61] docs: change composting to composing (#175) --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index f21089c..8ffae15 100644 --- a/README.md +++ b/README.md @@ -574,7 +574,7 @@ This pattern emerged with the advent of OOCSS. The biggest disadvantage of this ### Class Composition Using CSS Preprocessors -This section of the document is included as a learning exercise to broaden the understanding about the origin of Class Composition. CSS Modules support a native method of composting CSS Modules using [`composes`](https://github.com/css-modules/css-modules#composition) keyword. CSS Preprocessor is not required. +This section of the document is included as a learning exercise to broaden the understanding about the origin of Class Composition. CSS Modules support a native method of composing CSS Modules using [`composes`](https://github.com/css-modules/css-modules#composition) keyword. CSS Preprocessor is not required. You can write compositions in SCSS using [`@extend`](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#extend) keyword and using [Mixin Directives](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#mixins), e.g. From fb3ca5e6b287f20b68776835cc934acbd7b51d5b Mon Sep 17 00:00:00 2001 From: Gajus Kuizinas Date: Sat, 10 Sep 2016 11:00:47 +0100 Subject: [PATCH 06/61] fix: implement SimpleMap without using getters/setters Squashed commit of the following: commit ea31b3a8b0a60f2e428a61fdf28f6cc0f8d469e2 Author: Gajus Kuizinas Date: Sat Sep 10 10:59:27 2016 +0100 refactor: remove SimpleMap factory commit 9549afdab039fb151387c65214e78edaef3a3ada Merge: 1cb161d fb31781 Author: Gajus Kuizinas Date: Sat Sep 10 10:54:33 2016 +0100 Merge branch 'simple-map-ie8-fix' of https://github.com/lbeschastny/react-css-modules into lbeschastny-simple-map-ie8-fix commit fb31781461b20de1bb5815c18d65a66fa626d89e Author: Leonid Beschastny Date: Mon Aug 29 12:00:17 2016 +0300 Add createSimpleMap factory function to defer SimpleMap creation commit 7e6a9f9d443d6307b230b7a13e1487c73f5eaaff Author: Leonid Beschastny Date: Mon Aug 29 11:52:35 2016 +0300 Replace size getter in SimpleMap class with regularly updated property --- src/simple-map.js | 6 ++---- tests/simple-map.js | 4 +++- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/simple-map.js b/src/simple-map.js index 4582e33..ce412b7 100644 --- a/src/simple-map.js +++ b/src/simple-map.js @@ -1,13 +1,10 @@ export class SimpleMap { constructor () { + this.size = 0; this.keys = []; this.values = []; } - get size () { - return this.keys.length; - } - get (key) { const index = this.keys.indexOf(key); @@ -17,6 +14,7 @@ export class SimpleMap { set (key, value) { this.keys.push(key); this.values.push(value); + this.size = this.keys.length; return value; } diff --git a/tests/simple-map.js b/tests/simple-map.js index 29d12ac..9057eca 100644 --- a/tests/simple-map.js +++ b/tests/simple-map.js @@ -1,7 +1,9 @@ import { expect } from 'chai'; -import {SimpleMap} from './../src/simple-map'; +import { + SimpleMap +} from './../src/simple-map'; const getTests = (map) => { return () => { From 1aad1a0df44edf49a30ff38f0fa77d04e6e7ff98 Mon Sep 17 00:00:00 2001 From: Gajus Kuizinas Date: Sat, 10 Sep 2016 11:11:38 +0100 Subject: [PATCH 07/61] style: correct indentation --- src/extendReactClass.js | 66 ++--- src/generateAppendClassName.js | 54 ++-- src/index.js | 44 ++-- src/isIterable.js | 20 +- src/linkClass.js | 78 +++--- src/makeConfiguration.js | 28 +- src/parseStyleName.js | 24 +- src/simple-map.js | 30 +-- src/wrapStatelessFunction.js | 46 ++-- tests/extendReactClass.js | 212 +++++++-------- tests/linkClass.js | 459 ++++++++++++++++----------------- tests/makeConfiguration.js | 54 ++-- tests/reactCssModules.js | 287 +++++++++++---------- tests/simple-map.js | 50 ++-- tests/wrapStatelessFunction.js | 114 ++++---- 15 files changed, 783 insertions(+), 783 deletions(-) diff --git a/src/extendReactClass.js b/src/extendReactClass.js index b5cfb2d..4e56567 100644 --- a/src/extendReactClass.js +++ b/src/extendReactClass.js @@ -12,39 +12,39 @@ import linkClass from './linkClass'; * @returns {ReactClass} */ export default (Component: Object, defaultStyles: Object, options: Object) => { - const WrappedComponent = class extends Component { - render () { - let propsChanged, - styles; - - propsChanged = false; - - if (this.props.styles) { - styles = this.props.styles; - } else if (_.isObject(defaultStyles)) { - this.props = _.assign({}, this.props, { - styles: defaultStyles - }); - - propsChanged = true; - styles = defaultStyles; - } else { - styles = {}; - } - - const renderResult = super.render(); - - if (propsChanged) { - delete this.props.styles; - } - - if (renderResult) { - return linkClass(renderResult, styles, options); - } - - return React.createElement('noscript'); - } + const WrappedComponent = class extends Component { + render () { + let propsChanged, + styles; + + propsChanged = false; + + if (this.props.styles) { + styles = this.props.styles; + } else if (_.isObject(defaultStyles)) { + this.props = _.assign({}, this.props, { + styles: defaultStyles + }); + + propsChanged = true; + styles = defaultStyles; + } else { + styles = {}; + } + + const renderResult = super.render(); + + if (propsChanged) { + delete this.props.styles; + } + + if (renderResult) { + return linkClass(renderResult, styles, options); + } + + return React.createElement('noscript'); + } }; - return hoistNonReactStatics(WrappedComponent, Component); + return hoistNonReactStatics(WrappedComponent, Component); }; diff --git a/src/generateAppendClassName.js b/src/generateAppendClassName.js index 3bbb23f..e0fe7df 100644 --- a/src/generateAppendClassName.js +++ b/src/generateAppendClassName.js @@ -3,39 +3,39 @@ import Map from './simple-map'; const stylesIndex = new Map(); export default (styles, styleNames: Array, errorWhenNotFound: boolean): string => { - let appendClassName, - stylesIndexMap; + let appendClassName, + stylesIndexMap; - stylesIndexMap = stylesIndex.get(styles); + stylesIndexMap = stylesIndex.get(styles); - if (stylesIndexMap) { - const styleNameIndex = stylesIndexMap.get(styleNames); + if (stylesIndexMap) { + const styleNameIndex = stylesIndexMap.get(styleNames); - if (styleNameIndex) { - return styleNameIndex; - } - } else { - stylesIndexMap = new Map(); - stylesIndex.set(styles, new Map()); + if (styleNameIndex) { + return styleNameIndex; } - - appendClassName = ''; - - for (const styleName in styleNames) { - if (styleNames.hasOwnProperty(styleName)) { - const className = styles[styleNames[styleName]]; - - if (className) { - appendClassName += ' ' + className; - } else if (errorWhenNotFound === true) { - throw new Error('"' + styleNames[styleName] + '" CSS module is undefined.'); - } - } + } else { + stylesIndexMap = new Map(); + stylesIndex.set(styles, new Map()); + } + + appendClassName = ''; + + for (const styleName in styleNames) { + if (styleNames.hasOwnProperty(styleName)) { + const className = styles[styleNames[styleName]]; + + if (className) { + appendClassName += ' ' + className; + } else if (errorWhenNotFound === true) { + throw new Error('"' + styleNames[styleName] + '" CSS module is undefined.'); + } } + } - appendClassName = appendClassName.trim(); + appendClassName = appendClassName.trim(); - stylesIndexMap.set(styleNames, appendClassName); + stylesIndexMap.set(styleNames, appendClassName); - return appendClassName; + return appendClassName; }; diff --git a/src/index.js b/src/index.js index 7ee7e4e..b913b29 100644 --- a/src/index.js +++ b/src/index.js @@ -12,45 +12,45 @@ type TypeOptions = {}; * Determines if the given object has the signature of a class that inherits React.Component. */ const isReactComponent = (maybeReactComponent: any): boolean => { - return 'prototype' in maybeReactComponent && _.isFunction(maybeReactComponent.prototype.render); + return 'prototype' in maybeReactComponent && _.isFunction(maybeReactComponent.prototype.render); }; /** * When used as a function. */ const functionConstructor = (Component: Function, defaultStyles: Object, options: TypeOptions): Function => { - let decoratedClass; + let decoratedClass; - const configuration = makeConfiguration(options); + const configuration = makeConfiguration(options); - if (isReactComponent(Component)) { - decoratedClass = extendReactClass(Component, defaultStyles, configuration); - } else { - decoratedClass = wrapStatelessFunction(Component, defaultStyles, configuration); - } + if (isReactComponent(Component)) { + decoratedClass = extendReactClass(Component, defaultStyles, configuration); + } else { + decoratedClass = wrapStatelessFunction(Component, defaultStyles, configuration); + } - if (Component.displayName) { - decoratedClass.displayName = Component.displayName; - } else { - decoratedClass.displayName = Component.name; - } + if (Component.displayName) { + decoratedClass.displayName = Component.displayName; + } else { + decoratedClass.displayName = Component.name; + } - return decoratedClass; + return decoratedClass; }; /** * When used as a ES7 decorator. */ const decoratorConstructor = (defaultStyles: Object, options: TypeOptions): Function => { - return (Component: Function) => { - return functionConstructor(Component, defaultStyles, options); - }; + return (Component: Function) => { + return functionConstructor(Component, defaultStyles, options); + }; }; export default (...args) => { - if (_.isFunction(args[0])) { - return functionConstructor(args[0], args[1], args[2]); - } else { - return decoratorConstructor(args[0], args[1]); - } + if (_.isFunction(args[0])) { + return functionConstructor(args[0], args[1], args[2]); + } else { + return decoratorConstructor(args[0], args[1]); + } }; diff --git a/src/isIterable.js b/src/isIterable.js index 2c800b1..67d0a94 100644 --- a/src/isIterable.js +++ b/src/isIterable.js @@ -8,17 +8,17 @@ const OLD_ITERATOR_SYMBOL = '@@iterator'; * @see https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Iteration_protocols */ export default (maybeIterable: any): boolean => { - let iterator; + let iterator; - if (!_.isObject(maybeIterable)) { - return false; - } + if (!_.isObject(maybeIterable)) { + return false; + } - if (ITERATOR_SYMBOL) { - iterator = maybeIterable[ITERATOR_SYMBOL]; - } else { - iterator = maybeIterable[OLD_ITERATOR_SYMBOL]; - } + if (ITERATOR_SYMBOL) { + iterator = maybeIterable[ITERATOR_SYMBOL]; + } else { + iterator = maybeIterable[OLD_ITERATOR_SYMBOL]; + } - return _.isFunction(iterator); + return _.isFunction(iterator); }; diff --git a/src/linkClass.js b/src/linkClass.js index ea199e9..64a1636 100644 --- a/src/linkClass.js +++ b/src/linkClass.js @@ -8,54 +8,54 @@ import parseStyleName from './parseStyleName'; import generateAppendClassName from './generateAppendClassName'; const linkElement = (element: ReactElement, styles: Object, configuration: Object): ReactElement => { - let appendClassName, - elementIsFrozen, - elementShallowCopy; + let appendClassName, + elementIsFrozen, + elementShallowCopy; - elementShallowCopy = element; + elementShallowCopy = element; - if (Object.isFrozen && Object.isFrozen(elementShallowCopy)) { - elementIsFrozen = true; + if (Object.isFrozen && Object.isFrozen(elementShallowCopy)) { + elementIsFrozen = true; // https://github.com/facebook/react/blob/v0.13.3/src/classic/element/ReactElement.js#L131 - elementShallowCopy = objectUnfreeze(elementShallowCopy); - elementShallowCopy.props = objectUnfreeze(elementShallowCopy.props); - } + elementShallowCopy = objectUnfreeze(elementShallowCopy); + elementShallowCopy.props = objectUnfreeze(elementShallowCopy.props); + } - const styleNames = parseStyleName(elementShallowCopy.props.styleName || '', configuration.allowMultiple); + const styleNames = parseStyleName(elementShallowCopy.props.styleName || '', configuration.allowMultiple); - if (React.isValidElement(elementShallowCopy.props.children)) { - elementShallowCopy.props.children = linkElement(React.Children.only(elementShallowCopy.props.children), styles, configuration); - } else if (_.isArray(elementShallowCopy.props.children) || isIterable(elementShallowCopy.props.children)) { - elementShallowCopy.props.children = React.Children.map(elementShallowCopy.props.children, (node) => { - if (React.isValidElement(node)) { - return linkElement(node, styles, configuration); - } else { - return node; - } - }); - } + if (React.isValidElement(elementShallowCopy.props.children)) { + elementShallowCopy.props.children = linkElement(React.Children.only(elementShallowCopy.props.children), styles, configuration); + } else if (_.isArray(elementShallowCopy.props.children) || isIterable(elementShallowCopy.props.children)) { + elementShallowCopy.props.children = React.Children.map(elementShallowCopy.props.children, (node) => { + if (React.isValidElement(node)) { + return linkElement(node, styles, configuration); + } else { + return node; + } + }); + } - if (styleNames.length) { - appendClassName = generateAppendClassName(styles, styleNames, configuration.errorWhenNotFound); + if (styleNames.length) { + appendClassName = generateAppendClassName(styles, styleNames, configuration.errorWhenNotFound); - if (appendClassName) { - if (elementShallowCopy.props.className) { - appendClassName = elementShallowCopy.props.className + ' ' + appendClassName; - } + if (appendClassName) { + if (elementShallowCopy.props.className) { + appendClassName = elementShallowCopy.props.className + ' ' + appendClassName; + } - elementShallowCopy.props.className = appendClassName; - } + elementShallowCopy.props.className = appendClassName; } + } - delete elementShallowCopy.props.styleName; + delete elementShallowCopy.props.styleName; - if (elementIsFrozen) { - Object.freeze(elementShallowCopy.props); - Object.freeze(elementShallowCopy); - } + if (elementIsFrozen) { + Object.freeze(elementShallowCopy.props); + Object.freeze(elementShallowCopy); + } - return elementShallowCopy; + return elementShallowCopy; }; /** @@ -65,9 +65,9 @@ const linkElement = (element: ReactElement, styles: Object, configuration: Objec */ export default (element: ReactElement, styles = {}, configuration = {}): ReactElement => { // @see https://github.com/gajus/react-css-modules/pull/30 - if (!_.isObject(element)) { - return element; - } + if (!_.isObject(element)) { + return element; + } - return linkElement(element, styles, configuration); + return linkElement(element, styles, configuration); }; diff --git a/src/makeConfiguration.js b/src/makeConfiguration.js index 83b2d41..0eae15f 100644 --- a/src/makeConfiguration.js +++ b/src/makeConfiguration.js @@ -12,22 +12,22 @@ import _ from 'lodash'; * @returns {CSSModules~Options} */ export default (userConfiguration = {}) => { - const configuration = { - allowMultiple: false, - errorWhenNotFound: true - }; + const configuration = { + allowMultiple: false, + errorWhenNotFound: true + }; - _.forEach(userConfiguration, (value, name) => { - if (_.isUndefined(configuration[name])) { - throw new Error('Unknown configuration property "' + name + '".'); - } + _.forEach(userConfiguration, (value, name) => { + if (_.isUndefined(configuration[name])) { + throw new Error('Unknown configuration property "' + name + '".'); + } - if (!_.isBoolean(value)) { - throw new Error('"' + name + '" property value must be a boolean.'); - } + if (!_.isBoolean(value)) { + throw new Error('"' + name + '" property value must be a boolean.'); + } - configuration[name] = value; - }); + configuration[name] = value; + }); - return configuration; + return configuration; }; diff --git a/src/parseStyleName.js b/src/parseStyleName.js index 39c328a..7b5ee55 100644 --- a/src/parseStyleName.js +++ b/src/parseStyleName.js @@ -3,20 +3,20 @@ import _ from 'lodash'; const styleNameIndex = {}; export default (styleNamePropertyValue: string, allowMultiple: boolean): Array => { - let styleNames; + let styleNames; - if (styleNameIndex[styleNamePropertyValue]) { - styleNames = styleNameIndex[styleNamePropertyValue]; - } else { - styleNames = _.trim(styleNamePropertyValue).split(' '); - styleNames = _.filter(styleNames); + if (styleNameIndex[styleNamePropertyValue]) { + styleNames = styleNameIndex[styleNamePropertyValue]; + } else { + styleNames = _.trim(styleNamePropertyValue).split(' '); + styleNames = _.filter(styleNames); - styleNameIndex[styleNamePropertyValue] = styleNames; - } + styleNameIndex[styleNamePropertyValue] = styleNames; + } - if (allowMultiple === false && styleNames.length > 1) { - throw new Error('ReactElement styleName property defines multiple module names ("' + styleNamePropertyValue + '").'); - } + if (allowMultiple === false && styleNames.length > 1) { + throw new Error('ReactElement styleName property defines multiple module names ("' + styleNamePropertyValue + '").'); + } - return styleNames; + return styleNames; }; diff --git a/src/simple-map.js b/src/simple-map.js index ce412b7..435ae25 100644 --- a/src/simple-map.js +++ b/src/simple-map.js @@ -1,23 +1,23 @@ export class SimpleMap { - constructor () { - this.size = 0; - this.keys = []; - this.values = []; - } + constructor () { + this.size = 0; + this.keys = []; + this.values = []; + } - get (key) { - const index = this.keys.indexOf(key); + get (key) { + const index = this.keys.indexOf(key); - return this.values[index]; - } + return this.values[index]; + } - set (key, value) { - this.keys.push(key); - this.values.push(value); - this.size = this.keys.length; + set (key, value) { + this.keys.push(key); + this.values.push(value); + this.size = this.keys.length; - return value; - } + return value; + } } const exportedMap = typeof Map === 'undefined' ? SimpleMap : Map; diff --git a/src/wrapStatelessFunction.js b/src/wrapStatelessFunction.js index 878119a..35ad3ba 100644 --- a/src/wrapStatelessFunction.js +++ b/src/wrapStatelessFunction.js @@ -8,34 +8,34 @@ import linkClass from './linkClass'; * @see https://facebook.github.io/react/blog/2015/09/10/react-v0.14-rc1.html#stateless-function-components */ export default (Component: Function, defaultStyles: Object, options: Object): Function => { - const WrappedComponent = (props = {}, ...args) => { - let styles, - useProps; + const WrappedComponent = (props = {}, ...args) => { + let styles, + useProps; - if (props.styles) { - useProps = props; - styles = props.styles; - } else if (_.isObject(defaultStyles)) { - useProps = _.assign({}, props, { - styles: defaultStyles - }); + if (props.styles) { + useProps = props; + styles = props.styles; + } else if (_.isObject(defaultStyles)) { + useProps = _.assign({}, props, { + styles: defaultStyles + }); - styles = defaultStyles; - } else { - useProps = props; - styles = {}; - } + styles = defaultStyles; + } else { + useProps = props; + styles = {}; + } - const renderResult = Component(useProps, ...args); + const renderResult = Component(useProps, ...args); - if (renderResult) { - return linkClass(renderResult, styles, options); - } + if (renderResult) { + return linkClass(renderResult, styles, options); + } - return React.createElement('noscript'); - }; + return React.createElement('noscript'); + }; - _.assign(WrappedComponent, Component); + _.assign(WrappedComponent, Component); - return WrappedComponent; + return WrappedComponent; }; diff --git a/tests/extendReactClass.js b/tests/extendReactClass.js index fe51a78..83d308d 100644 --- a/tests/extendReactClass.js +++ b/tests/extendReactClass.js @@ -1,4 +1,4 @@ -/* eslint-disable max-nested-callbacks, react/prefer-stateless-function, react/prop-types, react/no-multi-comp */ +/* eslint-disable max-nested-callbacks, react/prefer-stateless-function, react/prop-types, react/no-multi-comp, class-methods-use-this */ import { expect @@ -10,140 +10,140 @@ import jsdom from 'jsdom'; import extendReactClass from './../src/extendReactClass'; describe('extendReactClass', () => { - beforeEach(() => { - global.document = jsdom.jsdom(''); + beforeEach(() => { + global.document = jsdom.jsdom(''); - global.window = document.defaultView; - }); - context('using default styles', () => { - it('exposes styles through this.props.styles property', (done) => { - let Component; + global.window = document.defaultView; + }); + context('using default styles', () => { + it('exposes styles through this.props.styles property', (done) => { + let Component; - const styles = { - foo: 'foo-1' - }; + const styles = { + foo: 'foo-1' + }; - Component = class extends React.Component { - render () { - expect(this.props.styles).to.equal(styles); - done(); - } - }; + Component = class extends React.Component { + render () { + expect(this.props.styles).to.equal(styles); + done(); + } + }; - Component = extendReactClass(Component, styles); + Component = extendReactClass(Component, styles); - TestUtils.renderIntoDocument(); - }); - it('does not affect the other instance properties', (done) => { - let Component; + TestUtils.renderIntoDocument(); + }); + it('does not affect the other instance properties', (done) => { + let Component; - Component = class extends React.Component { - render () { - expect(this.props.bar).to.equal('baz'); - done(); - } - }; + Component = class extends React.Component { + render () { + expect(this.props.bar).to.equal('baz'); + done(); + } + }; - const styles = { - foo: 'foo-1' - }; + const styles = { + foo: 'foo-1' + }; - Component = extendReactClass(Component, styles); + Component = extendReactClass(Component, styles); - TestUtils.renderIntoDocument(); - }); - it('does not affect pure-render logic', (done) => { - let Component, - rendered; + TestUtils.renderIntoDocument(); + }); + it('does not affect pure-render logic', (done) => { + let Component, + rendered; - rendered = false; + rendered = false; - const styles = { - foo: 'foo-1' - }; + const styles = { + foo: 'foo-1' + }; - Component = class extends React.Component { - shouldComponentUpdate (newProps) { - if (rendered) { - expect(shallowCompare(this.props, newProps)).to.equal(true); + Component = class extends React.Component { + shouldComponentUpdate (newProps) { + if (rendered) { + expect(shallowCompare(this.props, newProps)).to.equal(true); - done(); - } + done(); + } - return true; - } + return true; + } - render () { - rendered = true; - } - }; + render () { + rendered = true; + } + }; - Component = extendReactClass(Component, styles); + Component = extendReactClass(Component, styles); - const instance = TestUtils.renderIntoDocument(); + const instance = TestUtils.renderIntoDocument(); - // trigger shouldComponentUpdate - instance.setState({}); - }); + // trigger shouldComponentUpdate + instance.setState({}); }); - context('overwriting default styles using "styles" property of the extended component', () => { - it('overwrites default styles', (done) => { - let Component; - - const styles = { - foo: 'foo-1' - }; - - Component = class extends React.Component { - render () { - expect(this.props.styles).to.equal(styles); - done(); - } - }; - - Component = extendReactClass(Component, { - bar: 'bar-0', - foo: 'foo-0' - }); - - TestUtils.renderIntoDocument(); - }); + }); + context('overwriting default styles using "styles" property of the extended component', () => { + it('overwrites default styles', (done) => { + let Component; + + const styles = { + foo: 'foo-1' + }; + + Component = class extends React.Component { + render () { + expect(this.props.styles).to.equal(styles); + done(); + } + }; + + Component = extendReactClass(Component, { + bar: 'bar-0', + foo: 'foo-0' + }); + + TestUtils.renderIntoDocument(); }); - context('rendering Component that returns null', () => { - it('generates