react-dribble-button - npm Package Compare versions

Comparing version 0.1.3 to 0.2.0

lib/react-dribble-button.js

@@ -47,6 +47,16 @@ 'use strict';
 
+var _reactJss = require('react-jss');
+
+var _reactJss2 = _interopRequireDefault(_reactJss);
+
+var _Effect = require('./components/Effect');
+
+var _Effect2 = _interopRequireDefault(_Effect);
+
+var _styles = require('./styles');
+
+var _styles2 = _interopRequireDefault(_styles);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var ANIMATION_DURATION = 500;
-
 var ReactDribbleButton = function (_PureComponent) {
@@ -74,3 +84,5 @@ (0, _inherits3.default)(ReactDribbleButton, _PureComponent);
       }
-    }, _this.renderEffects = function (effectClassName) {
+    }, _this.renderEffects = function (_ref2, effectClassName) {
+      var effect = _ref2.effect;
+
       if (!_this.button) {
@@ -85,19 +97,17 @@ return null;
       var diameter = Math.max(_this.button.offsetWidth, _this.button.offsetHeight);
+      var offsetTop = top + window.pageYOffset;
+      var offsetLeft = left + window.pageXOffset;
 
-      return _this.state.effects.map(function (_ref2) {
-        var date = _ref2.date,
-            pageX = _ref2.pageX,
-            pageY = _ref2.pageY;
+      var className = effect + ' ' + effectClassName;
 
-        var effectStyle = {
-          top: pageY - (top + window.pageYOffset) + 'px',
-          left: pageX - (left + window.pageXOffset) + 'px',
-          width: diameter + 'px',
-          height: diameter + 'px'
-        };
-
-        return _react2.default.createElement('i', {
+      return _this.state.effects.map(function (_ref3) {
+        var date = _ref3.date,
+            pageX = _ref3.pageX,
+            pageY = _ref3.pageY;
+        return _react2.default.createElement(_Effect2.default, {
           key: date,
-          style: effectStyle,
-          className: 'react-dribble-button__effect ' + effectClassName
+          top: pageY - offsetTop,
+          left: pageX - offsetLeft,
+          size: diameter,
+          className: className
         });
@@ -110,19 +120,20 @@ });
     key: 'updateEffects',
-    value: function updateEffects(_ref3) {
-      var pageX = _ref3.pageX,
-          pageY = _ref3.pageY;
+    value: function updateEffects(_ref4) {
+      var pageX = _ref4.pageX,
+          pageY = _ref4.pageY;
 
       var now = Date.now();
+      var animationDuration = this.props.animationDuration;
 
-      this.setState(function (_ref4) {
-        var effects = _ref4.effects;
+
+      this.setState(function (_ref5) {
+        var effects = _ref5.effects;
+
+        var activeEffects = effects.filter(function (_ref6) {
+          var date = _ref6.date;
+          return now - date < animationDuration;
+        });
+
         return {
-          effects: [].concat((0, _toConsumableArray3.default)(effects.filter(function (_ref5) {
-            var date = _ref5.date;
-            return now - date < ANIMATION_DURATION;
-          })), [{
-            date: Date.now(),
-            pageX: pageX,
-            pageY: pageY
-          }])
+          effects: [].concat((0, _toConsumableArray3.default)(activeEffects), [{ date: now, pageX: pageX, pageY: pageY }])
         };
@@ -138,2 +149,3 @@ });
           color = _props.color,
+          classes = _props.classes,
           children = _props.children,
@@ -143,3 +155,3 @@ component = _props.component,
           effectClassName = _props.effectClassName,
-          props = (0, _objectWithoutProperties3.default)(_props, ['color', 'children', 'component', 'className', 'effectClassName']);
+          props = (0, _objectWithoutProperties3.default)(_props, ['color', 'classes', 'children', 'component', 'className', 'effectClassName']);
 
@@ -152,9 +164,9 @@
         (0, _extends3.default)({}, props, {
-          ref: function ref(_ref6) {
-            _this2.button = _ref6;
+          ref: function ref(_ref7) {
+            _this2.button = _ref7;
           },
           onClick: this.onClick,
-          className: 'react-dribble-button --' + color + ' ' + className
+          className: classes.button + ' ' + className
         }),
-        this.renderEffects(effectClassName),
+        this.renderEffects(classes, effectClassName),
         children
@@ -169,2 +181,6 @@ );
   color: _propTypes2.default.oneOf(['red', 'pink', 'blue', 'cyan', 'teal', 'lime', 'grey', 'green', 'amber', 'brown', 'black', 'orange', 'purple', 'yellow', 'indigo', 'default', 'blue-grey', 'light-blue', 'light-green', 'deep-orange', 'deep-purple']),
+  classes: _propTypes2.default.shape({
+    effect: _propTypes2.default.string,
+    button: _propTypes2.default.string
+  }).isRequired,
   onClick: _propTypes2.default.func,
@@ -174,3 +190,4 @@ children: _propTypes2.default.children,
   component: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
-  effectClassName: _propTypes2.default.string
+  effectClassName: _propTypes2.default.string,
+  animationDuration: _propTypes2.default.number
 };
@@ -183,4 +200,5 @@ ReactDribbleButton.defaultProps = {
   component: 'button',
-  effectClassName: ''
+  effectClassName: '',
+  animationDuration: 650
 };
-exports.default = ReactDribbleButton;
+exports.default = (0, _reactJss2.default)(_styles2.default)(ReactDribbleButton);

lib/react-dribble-button.prod.js

@@ -47,6 +47,16 @@ 'use strict';
 
+var _reactJss = require('react-jss');
+
+var _reactJss2 = _interopRequireDefault(_reactJss);
+
+var _Effect = require('./components/Effect');
+
+var _Effect2 = _interopRequireDefault(_Effect);
+
+var _styles = require('./styles');
+
+var _styles2 = _interopRequireDefault(_styles);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var ANIMATION_DURATION = 500;
-
 var ReactDribbleButton = function (_PureComponent) {
@@ -74,3 +84,5 @@ (0, _inherits3.default)(ReactDribbleButton, _PureComponent);
       }
-    }, _this.renderEffects = function (effectClassName) {
+    }, _this.renderEffects = function (_ref2, effectClassName) {
+      var effect = _ref2.effect;
+
       if (!_this.button) {
@@ -85,19 +97,17 @@ return null;
       var diameter = Math.max(_this.button.offsetWidth, _this.button.offsetHeight);
+      var offsetTop = top + window.pageYOffset;
+      var offsetLeft = left + window.pageXOffset;
 
-      return _this.state.effects.map(function (_ref2) {
-        var date = _ref2.date,
-            pageX = _ref2.pageX,
-            pageY = _ref2.pageY;
+      var className = effect + ' ' + effectClassName;
 
-        var effectStyle = {
-          top: pageY - (top + window.pageYOffset) + 'px',
-          left: pageX - (left + window.pageXOffset) + 'px',
-          width: diameter + 'px',
-          height: diameter + 'px'
-        };
-
-        return _react2.default.createElement('i', {
+      return _this.state.effects.map(function (_ref3) {
+        var date = _ref3.date,
+            pageX = _ref3.pageX,
+            pageY = _ref3.pageY;
+        return _react2.default.createElement(_Effect2.default, {
           key: date,
-          style: effectStyle,
-          className: 'react-dribble-button__effect ' + effectClassName
+          top: pageY - offsetTop,
+          left: pageX - offsetLeft,
+          size: diameter,
+          className: className
         });
@@ -110,19 +120,20 @@ });
     key: 'updateEffects',
-    value: function updateEffects(_ref3) {
-      var pageX = _ref3.pageX,
-          pageY = _ref3.pageY;
+    value: function updateEffects(_ref4) {
+      var pageX = _ref4.pageX,
+          pageY = _ref4.pageY;
 
       var now = Date.now();
+      var animationDuration = this.props.animationDuration;
 
-      this.setState(function (_ref4) {
-        var effects = _ref4.effects;
+
+      this.setState(function (_ref5) {
+        var effects = _ref5.effects;
+
+        var activeEffects = effects.filter(function (_ref6) {
+          var date = _ref6.date;
+          return now - date < animationDuration;
+        });
+
         return {
-          effects: [].concat((0, _toConsumableArray3.default)(effects.filter(function (_ref5) {
-            var date = _ref5.date;
-            return now - date < ANIMATION_DURATION;
-          })), [{
-            date: Date.now(),
-            pageX: pageX,
-            pageY: pageY
-          }])
+          effects: [].concat((0, _toConsumableArray3.default)(activeEffects), [{ date: now, pageX: pageX, pageY: pageY }])
         };
@@ -138,2 +149,3 @@ });
           color = _props.color,
+          classes = _props.classes,
           children = _props.children,
@@ -143,3 +155,3 @@ component = _props.component,
           effectClassName = _props.effectClassName,
-          props = (0, _objectWithoutProperties3.default)(_props, ['color', 'children', 'component', 'className', 'effectClassName']);
+          props = (0, _objectWithoutProperties3.default)(_props, ['color', 'classes', 'children', 'component', 'className', 'effectClassName']);
 
@@ -152,9 +164,9 @@
         (0, _extends3.default)({}, props, {
-          ref: function ref(_ref6) {
-            _this2.button = _ref6;
+          ref: function ref(_ref7) {
+            _this2.button = _ref7;
           },
           onClick: this.onClick,
-          className: 'react-dribble-button --' + color + ' ' + className
+          className: classes.button + ' ' + className
         }),
-        this.renderEffects(effectClassName),
+        this.renderEffects(classes, effectClassName),
         children
@@ -173,4 +185,5 @@ );
   component: 'button',
-  effectClassName: ''
+  effectClassName: '',
+  animationDuration: 650
 };
-exports.default = ReactDribbleButton;
+exports.default = (0, _reactJss2.default)(_styles2.default)(ReactDribbleButton);

package.json

 {
   "name": "react-dribble-button",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "The Button component with pretty nice hive and click effects",
   "main": "lib/index.js",
   "scripts": {
-    "clear": "rm -rf ./lib/css | rm ./lib/react-dribble-button.*",
+    "clear": "rm ./lib/react-dribble-button.*",
     "lint": "eslint -c ./.eslintrc . ",
-    "format": "prettier-eslint --write \"src/index.js\" \"stories/index.js\"",
-    "build": "npm run build:css && npm run build:dev && npm run build:prod",
-    "build:css": "postcss './src/**/*.css' --dir ./lib/css/",
+    "format": "prettier-eslint --write \"src/**/*.js\" \"stories/index.js\"",
     "build:dev": "babel ./src/index.js --out-file ./lib/react-dribble-button.js",
     "build:prod": "NODE_ENV=production babel ./src/index.js --out-file ./lib/react-dribble-button.prod.js",
     "storybook": "start-storybook -p 6006",
+    "prepublish": "npm run build:dev && npm run build:prod",
     "build-storybook": "build-storybook"
@@ -38,3 +37,2 @@ },
     "babel-preset-react": "6.24.1",
-    "css-loader": "^0.28.7",
     "eslint": "^4.9.0",
@@ -46,12 +44,10 @@ "eslint-config-airbnb": "^16.1.0",
     "eslint-plugin-react": "^7.4.0",
-    "postcss-cli": "^4.1.1",
-    "postcss-color-hex-alpha": "^3.0.0",
-    "postcss-loader": "^2.0.8",
-    "precss": "^2.0.0",
     "prettier": "^1.7.4",
     "prettier-eslint-cli": "^4.4.0",
     "react": "^16.0.0",
-    "react-dom": "^16.0.0",
-    "style-loader": "^0.19.0"
+    "react-dom": "^16.0.0"
+  },
+  "dependencies": {
+    "react-jss": "^7.2.0"
   }
 }

README.md

@@ -23,4 +23,2 @@ [![](https://img.shields.io/npm/dm/react-dribble-button.svg?style=flat-square)](https://www.npmjs.com/package/react-dribble-button)
 import DribbleButton from 'react-dribble-button';
-import 'react-dribble-button/css/style.css';
-import 'react-dribble-button/css/deep-orange.css';
 
@@ -30,3 +28,3 @@ // Inside of a component's render() method:
   return (
-    <DribbleButton colorSchema="deep-orange" onClick={this.onClick}>
+    <DribbleButton color="deep-orange" onClick={this.onClick} animationDuration={1000} >
       Try this cool color!
@@ -56,2 +54,3 @@ </DribbleButton>
 | `effectClassName` | `string` | `''` | Class name of the effect component. |
+| `animationDuration` | `number` | `650` | The dribble animation duration in ms. |
 
@@ -58,0 +57,0 @@

stories/index.js

@@ -8,24 +8,2 @@ import React from 'react';
 
-import '../src/style.css';
-import '../src/themes/red.css';
-import '../src/themes/pink.css';
-import '../src/themes/blue.css';
-import '../src/themes/purple.css';
-import '../src/themes/indigo.css';
-import '../src/themes/deep-purple.css';
-import '../src/themes/light-blue.css';
-import '../src/themes/cyan.css';
-import '../src/themes/teal.css';
-import '../src/themes/green.css';
-import '../src/themes/light-green.css';
-import '../src/themes/lime.css';
-import '../src/themes/yellow.css';
-import '../src/themes/amber.css';
-import '../src/themes/orange.css';
-import '../src/themes/deep-orange.css';
-import '../src/themes/brown.css';
-import '../src/themes/grey.css';
-import '../src/themes/blue-grey.css';
-import '../src/themes/black.css';
-
 const itemStyle = {
@@ -148,4 +126,3 @@ display: 'inline-block',
         <Button color="default" onClick={action('clicked')}>
-          {' '}
-          default{' '}
+          default
         </Button>
@@ -155,4 +132,3 @@ </div>
         <Button color="red" onClick={action('clicked')}>
-          {' '}
-          red{' '}
+          red
         </Button>
@@ -162,4 +138,3 @@ </div>
         <Button color="pink" onClick={action('clicked')}>
-          {' '}
-          pink{' '}
+          pink
         </Button>
@@ -169,4 +144,3 @@ </div>
         <Button color="purple" onClick={action('clicked')}>
-          {' '}
-          purple{' '}
+          purple
         </Button>
@@ -176,4 +150,3 @@ </div>
         <Button color="deep-purple" onClick={action('clicked')}>
-          {' '}
-          deep-purple{' '}
+          deep-purple
         </Button>
@@ -183,4 +156,3 @@ </div>
         <Button color="indigo" onClick={action('clicked')}>
-          {' '}
-          Indigo{' '}
+          Indigo
         </Button>
@@ -190,4 +162,3 @@ </div>
         <Button color="blue" onClick={action('clicked')}>
-          {' '}
-          blue{' '}
+          blue
         </Button>
@@ -197,4 +168,3 @@ </div>
         <Button color="light-blue" onClick={action('clicked')}>
-          {' '}
-          light-blue{' '}
+          light-blue
         </Button>
@@ -204,4 +174,3 @@ </div>
         <Button color="cyan" onClick={action('clicked')}>
-          {' '}
-          cyan{' '}
+          cyan
         </Button>
@@ -211,4 +180,3 @@ </div>
         <Button color="teal" onClick={action('clicked')}>
-          {' '}
-          teal{' '}
+          teal
         </Button>
@@ -218,4 +186,3 @@ </div>
         <Button color="green" onClick={action('clicked')}>
-          {' '}
-          green{' '}
+          green
         </Button>
@@ -225,4 +192,3 @@ </div>
         <Button color="light-green" onClick={action('clicked')}>
-          {' '}
-          light-green{' '}
+          light-green
         </Button>
@@ -232,4 +198,3 @@ </div>
         <Button color="lime" onClick={action('clicked')}>
-          {' '}
-          lime{' '}
+          lime
         </Button>
@@ -239,4 +204,3 @@ </div>
         <Button color="yellow" onClick={action('clicked')}>
-          {' '}
-          yellow{' '}
+          yellow
         </Button>
@@ -246,4 +210,3 @@ </div>
         <Button color="amber" onClick={action('clicked')}>
-          {' '}
-          amber{' '}
+          amber
         </Button>
@@ -253,4 +216,3 @@ </div>
         <Button color="orange" onClick={action('clicked')}>
-          {' '}
-          orange{' '}
+          orange
         </Button>
@@ -260,4 +222,3 @@ </div>
         <Button color="deep-orange" onClick={action('clicked')}>
-          {' '}
-          deep-orange{' '}
+          deep-orange
         </Button>
@@ -267,4 +228,3 @@ </div>
         <Button color="brown" onClick={action('clicked')}>
-          {' '}
-          brown{' '}
+          brown
         </Button>
@@ -274,4 +234,3 @@ </div>
         <Button color="grey" onClick={action('clicked')}>
-          {' '}
-          grey{' '}
+          grey
         </Button>
@@ -281,4 +240,3 @@ </div>
         <Button color="blue-grey" onClick={action('clicked')}>
-          {' '}
-          blue-grey{' '}
+          blue-grey
         </Button>
@@ -288,4 +246,3 @@ </div>
         <Button color="black" onClick={action('clicked')}>
-          {' '}
-          black{' '}
+          black
         </Button>
@@ -292,0 +249,0 @@ </div>

No alert changes

Improved metrics

Dev dependency count

21

decreased by-22.22%

Worsened metrics

Total package byte prevSize

34343239

decreased by-0.04%

Dependency count

1

increased byInfinity%

Number of package files

9

decreased by-70.97%

Lines of code

503

decreased by-49.75%

Number of lines in readme file

60

decreased by-1.64%

Dependency changes

• + Addedreact-jss@^7.2.0

• + Addedbrcast@3.0.2(transitive)

• + Addedcss-vendor@0.3.8(transitive)

• + Addedhoist-non-react-statics@1.2.0(transitive)

• + Addedis-function@1.0.2(transitive)

• + Addedis-in-browser@1.1.3(transitive)

• + Addedis-plain-object@2.0.4(transitive)

• + Addedisobject@3.0.1(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedjss@8.1.0(transitive)

• + Addedjss-camel-case@5.0.0(transitive)

• + Addedjss-compose@4.0.0(transitive)

• + Addedjss-default-unit@7.0.0(transitive)

• + Addedjss-expand@4.0.1(transitive)

• + Addedjss-extend@5.0.0(transitive)

• + Addedjss-global@2.0.0(transitive)

• + Addedjss-nested@5.0.0(transitive)

• + Addedjss-preset-default@3.0.0(transitive)

• + Addedjss-props-sort@5.0.0(transitive)

• + Addedjss-vendor-prefixer@6.0.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact@19.0.0(transitive)

• + Addedreact-is@16.13.1(transitive)

• + Addedreact-jss@7.2.0(transitive)

• + Addedtheming@1.3.0(transitive)

• + Addedwarning@3.0.0(transitive)