allowMultiple

Author: gajus

README.md

@@ -5,6 +5,15 @@
 
 ## Usage
 
+```js
+/**
+ * @param {ReactClass} Component
+ * @param {Object} styles CSS modules class map.
+ * @param {Object} options {@link https://github.com/gajus/react-css-modules#options}
+ * @return {ReactClass}
+ */
+```
+
 First you need to setup [webpack](http://webpack.github.io/docs/) to load your css files using "css" loader and enable CSS modules. You will also need to use `extract-text-webpack-plugin` to aggregate the CSS into a single file. Refer to [webpack-demo](https://github.com/css-modules/webpack-demo).
 
 Then you need use the higher order component declaration pattern to "decorate" your component, e.g.

dist/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, '__esModule', {
 
 var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
 
-var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
+var _get = function get(_x2, _x3, _x4) { var _again = true; _function: while (_again) { var object = _x2, property = _x3, receiver = _x4; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x2 = parent; _x3 = property; _x4 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
@@ -19,14 +19,17 @@ var _linkClass = require('./linkClass');
 var _linkClass2 = _interopRequireDefault(_linkClass);
 
 /**
- * @param {ReactClass} Target
- * @param {Object} styles {localClassName: 'generatedClassName'}
+ * @param {ReactClass} Component
+ * @param {Object} styles CSS modules class map.
+ * @param {Object} options {@link https://github.com/gajus/react-css-modules#options}
  * @return {ReactClass}
  */
 
-exports['default'] = function (Target, styles) {
-    return (function (_Target) {
-        _inherits(_class, _Target);
+exports['default'] = function (Component, styles) {
+    var options = arguments.length <= 2 || arguments[2] === undefined ? {} : arguments[2];
+
+    return (function (_Component) {
+        _inherits(_class, _Component);
 
         function _class() {
             _classCallCheck(this, _class);
@@ -37,12 +40,20 @@ exports['default'] = function (Target, styles) {
         _createClass(_class, [{
             key: 'render',
             value: function render() {
-                return (0, _linkClass2['default'])(_get(Object.getPrototypeOf(_class.prototype), 'render', this).call(this), styles);
+                if (options.allowMultiple !== false) {
+                    options.allowMultiple = true;
+                }
+
+                if (options.includeOriginal !== false) {
+                    options.includeOriginal = true;
+                }
+
+                return (0, _linkClass2['default'])(_get(Object.getPrototypeOf(_class.prototype), 'render', this).call(this), styles, options);
             }
         }]);
 
         return _class;
-    })(Target);
+    })(Component);
 };
 
 module.exports = exports['default'];

dist/linkClass.js

@@ -14,19 +14,27 @@ var linkClass = undefined;
 
 /**
  * @param {ReactElement} element
- * @param {Object} styles
+ * @param {Object} styles CSS modules class map.
+ * @param {Object} options {@link https://github.com/gajus/react-css-modules#options}
  * @return {ReactElement}
  */
 linkClass = function (element) {
     var styles = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
+    var options = arguments.length <= 2 || arguments[2] === undefined ? {} : arguments[2];
 
     var newProps = undefined,
         newClassName = undefined,
         newChildren = undefined,
         childrenCount = undefined;
 
     if (element.props.className) {
-        newClassName = element.props.className.split(' ').map(function (className) {
+        newClassName = element.props.className.split(' ');
+
+        if (options.allowMultiple === false && newClassName.length > 1) {
+            throw new Error('ReactElement defines multiple class names ("' + element.props.className + '") in className declaration.');
+        }
+
+        newClassName = newClassName.map(function (className) {
             if (styles[className]) {
                 return className + ' ' + styles[className];
             } else {

src/linkClass.js

@@ -15,7 +15,13 @@ linkClass = (element, styles = {}, options = {}) => {
         childrenCount;
 
     if (element.props.className) {
-        newClassName = element.props.className.split(' ').map((className) => {
+        newClassName = element.props.className.split(' ');
+
+        if (options.allowMultiple === false && newClassName.length > 1) {
+            throw new Error(`ReactElement defines multiple class names ("${element.props.className}") in className declaration.`);
+        }
+
+        newClassName = newClassName.map((className) => {
             if (styles[className]) {
                 return `${className} ${styles[className]}`;
             } else {

test/linkClass.js

@@ -131,7 +131,7 @@ describe('linkClass', () => {
             it('throws an error', () => {
                 expect(() => {
                     linkClass(<div className='foo bar'></div>, {}, {allowMultiple: false});
-                }).to.throw(Error);
+                }).to.throw(Error, 'ReactElement defines multiple class names ("foo bar") in className declaration.');
             });
         });
     });