react-classlist-helper - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

dist/react-classlist-helper.js

@@ -6,12 +6,24 @@ 'use strict';
 });
-exports.default = spred;
 
-var _lodash = require('lodash.isobject');
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
 
+exports.default = classList;
+exports.toggleClass = toggleClass;
+
+var _lodash = require('lodash.isboolean');
+
 var _lodash2 = _interopRequireDefault(_lodash);
 
-var _lodash3 = require('lodash.isstring');
+var _lodash3 = require('lodash.isobjectlike');
 
 var _lodash4 = _interopRequireDefault(_lodash3);
 
+var _lodash5 = require('lodash.isstring');
+
+var _lodash6 = _interopRequireDefault(_lodash5);
+
+var _lodash7 = require('lodash.isundefined');
+
+var _lodash8 = _interopRequireDefault(_lodash7);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -21,5 +33,3 @@
 
-function spred() {
-    var classList = [];
-
+function classList() {
     for (var _len = arguments.length, classes = Array(_len), _key = 0; _key < _len; _key++) {
@@ -29,16 +39,44 @@ classes[_key] = arguments[_key];
 
+    if (classes.length === 0) {
+        return '';
+    }
+
+    var classBuffer = [];
+
     classes.forEach(function (className) {
-        if ((0, _lodash2.default)(className)) {
+        if (Array.isArray(className)) {
+            classBuffer = [].concat(_toConsumableArray(classBuffer), [className.reduce(function (total, classItem) {
+                return total + ' ' + classItem;
+            })]);
+        } else if ((0, _lodash6.default)(className)) {
+            classBuffer = [].concat(_toConsumableArray(classBuffer), [className]);
+        } else if ((0, _lodash4.default)(className)) {
             var keys = Object.keys(className);
+
             keys.forEach(function (key) {
-                if (className[key] === true && (0, _lodash4.default)(key)) {
-                    classList = [].concat(_toConsumableArray(classList), [key]);
+                if (className[key] === true) {
+                    classBuffer = [].concat(_toConsumableArray(classBuffer), [key]);
                 }
             });
         } else {
-            classList = [].concat(_toConsumableArray(classList), [className]);
+            throw new Error('Expected className to be a string but instead got ' + (typeof className === 'undefined' ? 'undefined' : _typeof(className)));
         }
     });
 
-    return classList.join(' ');
+    return classBuffer.join(' ');
 }
+
+function toggleClass(className, condition) {
+    if ((0, _lodash8.default)(className) || !(0, _lodash6.default)(className)) {
+        throw new Error('Expected className to be a string but instead got ' + (typeof className === 'undefined' ? 'undefined' : _typeof(className)));
+    }
+
+    if ((0, _lodash8.default)(condition) || !(0, _lodash2.default)(condition)) {
+        throw new Error('Expected condition to be a boolean value but instead got ' + (typeof condition === 'undefined' ? 'undefined' : _typeof(condition)));
+    }
+
+    var ClassMap = {};
+    ClassMap[className] = condition;
+
+    return classList(ClassMap);
+}

dist/react-classlist-helper.min.js

@@ -1,1 +0,1 @@
-'use strict';Object.defineProperty(exports,'__esModule',{value:!0}),exports.default=spred;var _lodash=require('lodash.isobject'),_lodash2=_interopRequireDefault(_lodash),_lodash3=require('lodash.isstring'),_lodash4=_interopRequireDefault(_lodash3);function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}function _toConsumableArray(a){if(Array.isArray(a)){for(var b=0,c=Array(a.length);b<a.length;b++)c[b]=a[b];return c}return Array.from(a)}function spred(){for(var a=[],b=arguments.length,c=Array(b),d=0;d<b;d++)c[d]=arguments[d];return c.forEach(function(b){if((0,_lodash2.default)(b)){var c=Object.keys(b);c.forEach(function(c){!0===b[c]&&(0,_lodash4.default)(c)&&(a=[].concat(_toConsumableArray(a),[c]))})}else a=[].concat(_toConsumableArray(a),[b])}),a.join(' ')}
+'use strict';var _typeof='function'==typeof Symbol&&'symbol'==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&'function'==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?'symbol':typeof a};Object.defineProperty(exports,'__esModule',{value:!0});exports.default=classList,exports.toggleClass=toggleClass;var _lodash=require('lodash.isboolean'),_lodash2=_interopRequireDefault(_lodash),_lodash3=require('lodash.isobjectlike'),_lodash4=_interopRequireDefault(_lodash3),_lodash5=require('lodash.isstring'),_lodash6=_interopRequireDefault(_lodash5),_lodash7=require('lodash.isundefined'),_lodash8=_interopRequireDefault(_lodash7);function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}function _toConsumableArray(a){if(Array.isArray(a)){for(var b=0,c=Array(a.length);b<a.length;b++)c[b]=a[b];return c}return Array.from(a)}function classList(){for(var a=arguments.length,b=Array(a),c=0;c<a;c++)b[c]=arguments[c];if(0===b.length)return'';var d=[];return b.forEach(function(a){if(Array.isArray(a))d=[].concat(_toConsumableArray(d),[a.reduce(function(a,b){return a+' '+b})]);else if((0,_lodash6.default)(a))d=[].concat(_toConsumableArray(d),[a]);else if((0,_lodash4.default)(a)){var b=Object.keys(a);b.forEach(function(b){!0===a[b]&&(d=[].concat(_toConsumableArray(d),[b]))})}else throw new Error('Expected className to be a string but instead got '+('undefined'==typeof a?'undefined':_typeof(a)))}),d.join(' ')}function toggleClass(a,b){if((0,_lodash8.default)(a)||!(0,_lodash6.default)(a))throw new Error('Expected className to be a string but instead got '+('undefined'==typeof a?'undefined':_typeof(a)));if((0,_lodash8.default)(b)||!(0,_lodash2.default)(b))throw new Error('Expected condition to be a boolean value but instead got '+('undefined'==typeof b?'undefined':_typeof(b)));var c={};return c[a]=b,classList(c)}

package.json

 {
   "name": "react-classlist-helper",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Helper to defining multiple classes on a react component.",
@@ -10,3 +10,3 @@ "main": "./dist/react-classlist-helper.min.js",
     "prebuild": "npm run lint && npm test",
-    "build:minified": "babel ./src/index.js -o ./dist/react-classlist-helper.min.js --sourcemaps inline --presets babili",
+    "build:minified": "babel --presets babili ./src/index.js -o ./dist/react-classlist-helper.min.js --sourcemaps inline",
     "build": "babel ./src/index.js -o ./dist/react-classlist-helper.js --sourcemaps inline && npm run build:minified"
@@ -29,2 +29,3 @@ },
     "babel-plugin-transform-object-rest-spread": "^6.23.0",
+    "babel-preset-babili": "^0.1.4",
     "babel-preset-env": "^1.6.0",
@@ -40,6 +41,7 @@ "chai": "^4.0.2",
   "dependencies": {
-    "deepfreeze": "^2.0.0",
-    "lodash.isobject": "^3.0.2",
-    "lodash.isstring": "^4.0.1"
+    "lodash.isboolean": "^3.0.3",
+    "lodash.isobjectlike": "^4.0.0",
+    "lodash.isstring": "^4.0.1",
+    "lodash.isundefined": "^3.0.1"
   }
 }

src/index.js

@@ -1,21 +0,47 @@
-import isObject from 'lodash.isobject';
+import isBoolean from 'lodash.isboolean';
+import isObject from 'lodash.isobjectlike';
 import isString from 'lodash.isstring';
+import isUndefined from 'lodash.isundefined';
 
-export default function spred(...classes) {
-    let classList = [];
+export default function classList(...classes) {
+    if (classes.length === 0) {
+        return '';
+    }
 
+    let classBuffer = [];
+
     classes.forEach((className) => {
-        if (isObject(className)) {
+        if (Array.isArray(className)) {
+            classBuffer = [...classBuffer, className.reduce((total, classItem) => `${total} ${classItem}`)];
+        } else if (isString(className)) {
+            classBuffer = [...classBuffer, className];
+        } else if (isObject(className)) {
             const keys = Object.keys(className);
+
             keys.forEach((key) => {
-                if (className[key] === true && isString(key)) {
-                    classList = [...classList, key];
+                if (className[key] === true) {
+                    classBuffer = [...classBuffer, key];
                 }
             });
         } else {
-            classList = [...classList, className];
+            throw new Error(`Expected className to be a string but instead got ${typeof className}`);
         }
     });
 
-    return classList.join(' ');
+    return classBuffer.join(' ');
 }
+
+export function toggleClass(className, condition) {
+    if (isUndefined(className) || !isString(className)) {
+        throw new Error(`Expected className to be a string but instead got ${typeof className}`);
+    }
+
+    if (isUndefined(condition) || !isBoolean(condition)) {
+        throw new Error(`Expected condition to be a boolean value but instead got ${typeof condition}`);
+    }
+
+    const ClassMap = {};
+    ClassMap[className] = condition;
+
+    return classList(ClassMap);
+}

src/index.spec.js

 import { expect } from 'chai';
 
 import classList from './index';
+import { toggleClass } from './index';
 
 
-describe('React ClassList Helper', () => {
+describe('React classList Function', () => {
 
@@ -36,4 +37,14 @@ it('should be defined without any erros', () => {
 
+    it('should handle arrays as input', () => {
+        const expectedOutput = 'hello react';
+        const inputs = ['hello', 'react'];
+
+        const output = classList(inputs);
+
+        expect(output).to.equal(expectedOutput);
+        expect(output).to.be.a('string');
+    });
+
     it('should handle diferent types of input', () => {
-        const expectedOutput = 'hello react';
+        const expectedOutput = 'hello react world';
         const inputs = [
@@ -44,2 +55,3 @@ 'hello',
             },
+            ['world'],
         ];
@@ -66,3 +78,52 @@
 
+    it('should throw an error when something other than a string/object/array is passed', () => {
+        expect(() => classList(2)).to.throw();
+        expect(() => classList(1, 'string')).to.throw();
+    });
+
+    it('should handle empty inputs gracefully', () => {
+        const output = classList();
+        const expectedOutput = '';
+
+        expect(output).to.equal(expectedOutput);
+        expect(output).to.be.a('string');
+    });
+
 });
 
+
+describe('React toggleClass Function', () => {
+
+    it('should be defined without any erros', () => {
+        expect(classList).to.be.a('function');
+        expect(classList).to.be.ok;
+    });
+
+    it('should return a class if condition is true', () => {
+        const expectedOutput = 'Hello';
+        const condition = true;
+
+        const output = toggleClass('Hello', condition);
+
+        expect(output).to.be.a('string');
+        expect(output).to.equal(expectedOutput);
+    });
+
+    it('should return an empty string if condition is false', () => {
+        const expectedOutput = '';
+        const condition = false;
+
+        const output = toggleClass('Hello', condition);
+
+        expect(output).to.be.a('string');
+        expect(output).to.equal(expectedOutput);
+    });
+
+    it('should throw an error if something is wrong with the input', () => {
+        expect(() => toggleClass()).to.throw();
+        expect(() => toggleClass('a')).to.throw();
+        expect(() => toggleClass(2, true)).to.throw();
+        expect(() => toggleClass('', '')).to.throw();
+    });
+
+});

New alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

13814

increased by67.91%

Lines of code

200

increased by90.48%

Worsened metrics

Dependency count

4

increased by33.33%

Dev dependency count

11

increased by10%

Dependency changes

• + Addedlodash.isboolean@^3.0.3

• + Addedlodash.isobjectlike@^4.0.0

• + Addedlodash.isundefined@^3.0.1

• + Addedlodash.isboolean@3.0.3(transitive)

• + Addedlodash.isobjectlike@4.0.0(transitive)

• + Addedlodash.isundefined@3.0.1(transitive)

• - Removeddeepfreeze@^2.0.0

• - Removedlodash.isobject@^3.0.2

• - Removeddeepfreeze@2.0.0(transitive)

• - Removedlodash.isobject@3.0.2(transitive)

• - Removedx-is-object@0.1.0(transitive)