react-props-classnames - npm Package Compare versions

Comparing version 0.1.2 to 0.2.0

lib/PropsTransform.js

@@ -8,2 +8,4 @@ "use strict";
 
+var _utils = require("./utils");
+
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
@@ -27,2 +29,4 @@
       prefix = _ref$prefix === void 0 ? 'default-prefix' : _ref$prefix,
+      _ref$props = _ref.props,
+      _props2 = _ref$props === void 0 ? [] : _ref$props,
       _ref$bool = _ref.bool,
@@ -35,2 +39,10 @@ bool = _ref$bool === void 0 ? true : _ref$bool,
 
+  _defineProperty(this, "_getTransformProps", function (props) {
+    var _props = _this._props,
+        _hasProps = _this._hasProps;
+    return Object.keys(props).filter(function (propsKey) {
+      return _hasProps && _props.includes(propsKey) || !_hasProps;
+    });
+  });
+
   _defineProperty(this, "getClassNameFromProps", function (props) {
@@ -40,13 +52,17 @@ var _prefix = _this._prefix,
         _transformString = _this._transformString;
-    var className = Object.keys(props).reduce(function (result, propsKey) {
-      var newResult = result;
+
+    var propsKeys = _this._getTransformProps(props);
+
+    var className = propsKeys.reduce(function (prevResult, propsKey) {
+      var result = _toConsumableArray(prevResult);
+
       var value = props[propsKey];
 
-      if (_transformBool && typeof value === 'boolean' && value) {
-        newResult = _toConsumableArray(result).concat(["".concat(_prefix, "-").concat(propsKey)]);
-      } else if (_transformString && typeof value === 'string') {
-        newResult = _toConsumableArray(result).concat(["".concat(_prefix, "-").concat(propsKey, "-").concat(value)]);
+      if (_transformBool && (0, _utils.isBool)(value) && value) {
+        result.push("".concat(_prefix, "-").concat(propsKey));
+      } else if (_transformString && (0, _utils.isString)(value)) {
+        result.push("".concat(_prefix, "-").concat(propsKey, "-").concat(value));
       }
 
-      return newResult;
+      return result;
     }, []).join(' ');
@@ -57,6 +73,8 @@ return className;
   this._prefix = prefix;
+  this._props = _props2;
   this._transformBool = bool;
   this._transformString = string;
+  this._hasProps = !(0, _utils.isEmptyArray)(_props2);
 };
 
 exports.default = PropsTransform;

package.json

@@ -5,4 +5,12 @@ {
   "license": "MIT",
-  "author": "jigsawye <[e-mail]>",
-  "version": "0.1.2",
+  "author": "Evan Ye <[e-mail]> (https://jigsawye.com)",
+  "homepage": "https://github.com/jigsawye/react-props-classnames",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jigsawye/react-props-classnames.git"
+  },
+  "bugs": {
+    "url": "https://github.com/jigsawye/react-props-classnames/issues"
+  },
+  "version": "0.2.0",
   "main": "lib/index.js",
@@ -19,3 +27,3 @@ "files": [
     "prepublish": "npm run build",
-    "test": "npm run lint && npm run testonly",
+    "test": "npm run lint && npm run testonly && codecov",
     "testonly": "jest",
@@ -41,2 +49,3 @@ "testonly:cov": "jest --coverage --runInBand --forceExit",
     "babel-jest": "^23.0.1",
+    "codecov": "^3.0.2",
     "enzyme": "^3.3.0",
@@ -64,2 +73,7 @@ "enzyme-adapter-react-16": "^1.1.1",
     "coverageDirectory": "./coverage/",
+    "coveragePathIgnorePatterns": [
+      "node_modules",
+      "test"
+    ],
+    "collectCoverage": true,
     "transformIgnorePatterns": [
@@ -66,0 +80,0 @@ "node_modules",

README.md

 # React Props Classnames
 
+[![Travis](https://img.shields.io/travis/jigsawye/react-props-classnames.svg?style=flat-square)](https://travis-ci.org/jigsawye/react-props-classnames)
+[![Codecov](https://img.shields.io/codecov/c/github/jigsawye/react-props-classnames.svg?style=flat-square)](https://codecov.io/gh/jigsawye/react-props-classnames)
+[![npm](https://img.shields.io/npm/v/react-props-classnames.svg?style=flat-square)](https://www.npmjs.com/package/react-props-classnames)
+
 **Easily transform component's props to classnames**
 
 - Good usage with `styled-components` when you want to control styles by props.
-- Transform your boolena and string props to className.
+- Transform your boolean and string props to className.
 - Customized classNames prefix.
@@ -15,2 +19,6 @@
 
+## Examples
+
+[![Edit 5zzjpn94zn](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/5zzjpn94zn)
+
 ## Usage
@@ -22,3 +30,6 @@
 
-const propsTransform = createPropsTransform();
+const propsTransform = createPropsTransform({
+  prefix: 'my-button',
+  props: ['circle', 'size'],
+});
 
@@ -28,7 +39,7 @@ const Button = styled.button`
 
-  &.default-prefix-circle {
+  &.my-button-circle {
     /* ... */
   }
 
-  &.default-prefix-size-lg {
+  &.my-button-size-lg {
     /* ... */
@@ -42,7 +53,7 @@ }
 ```jsx
-<Button circle size="lg">Button</Button>
+<Button circle size="lg" type="button" disalbed>Button</Button>
 
 // will trasnform to
 
-<button class="{...styled generated} default-prefix-circle default-prefix-size-lg">Button</button>
+<button class="{...styled} my-button-circle my-button-size-lg">Button</button>
 ```
@@ -56,7 +67,8 @@
 
-| key    | Type      | Default          | Description                                   |
-| :----- | :-------- | :--------------- | :-------------------------------------------- |
-| bool   | `Boolean` | true             | Transform boolean props to classNames or not. |
-| string | `Boolean` | true             | Transform string props to classNames or not.  |
-| prefix | `String`  | 'default-prefix' | The prefix of every classNames.               |
+| key    | Type      | Default          | Description                                                                                             |
+| :----- | :-------- | :--------------- | :------------------------------------------------------------------------------------------------------ |
+| prefix | `String`  | 'default-prefix' | The prefix of every classNames.                                                                         |
+| props  | `Array`   | []               | The props which will be transformed. If this option is empty, `propsTransform` will transform any props |
+| bool   | `Boolean` | true             | Transform boolean props to classNames or not.                                                           |
+| string | `Boolean` | true             | Transform string props to classNames or not.                                                            |
 
@@ -63,0 +75,0 @@ #### Returns

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

14324

increased by24.81%

Number of package files

7

increased by16.67%

Lines of code

147

increased by26.72%

Number of low maintenance alerts

1

decreased by-50%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

77

increased by18.46%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

29

increased by3.57%

No dependency changes