react-dribble-button - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

lib/index.js

@@ -1,5 +0,194 @@
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./react-dribble-button');
-} else {
-  module.exports = require('./react-dribble-button.prod');
-}
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
+
+var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
+
+var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');
+
+var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+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 ReactDribbleButton = function (_PureComponent) {
+  (0, _inherits3.default)(ReactDribbleButton, _PureComponent);
+
+  function ReactDribbleButton() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
+    (0, _classCallCheck3.default)(this, ReactDribbleButton);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = ReactDribbleButton.__proto__ || (0, _getPrototypeOf2.default)(ReactDribbleButton)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+      effects: []
+    }, _this.onClick = function (event) {
+      _this.updateEffects(event);
+
+      if (_this.props.onClick) {
+        _this.props.onClick(event);
+      }
+    }, _this.renderEffects = function (_ref2, effectClassName) {
+      var effect = _ref2.effect;
+
+      if (!_this.button) {
+        return null;
+      }
+
+      var _this$button$getBound = _this.button.getBoundingClientRect(),
+          left = _this$button$getBound.left,
+          top = _this$button$getBound.top;
+
+      var diameter = Math.max(_this.button.offsetWidth, _this.button.offsetHeight);
+      var offsetTop = top + window.pageYOffset;
+      var offsetLeft = left + window.pageXOffset;
+
+      var className = effect + ' ' + effectClassName;
+
+      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,
+          top: pageY - offsetTop,
+          left: pageX - offsetLeft,
+          size: diameter,
+          className: className
+        });
+      });
+    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
+  }
+
+  (0, _createClass3.default)(ReactDribbleButton, [{
+    key: 'updateEffects',
+    value: function updateEffects(_ref4) {
+      var pageX = _ref4.pageX,
+          pageY = _ref4.pageY;
+
+      var now = Date.now();
+      var animationDuration = this.props.animationDuration;
+
+
+      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)(activeEffects), [{ date: now, pageX: pageX, pageY: pageY }])
+        };
+      });
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
+
+      var _props = this.props,
+          color = _props.color,
+          classes = _props.classes,
+          children = _props.children,
+          component = _props.component,
+          className = _props.className,
+          effectClassName = _props.effectClassName,
+          props = (0, _objectWithoutProperties3.default)(_props, ['color', 'classes', 'children', 'component', 'className', 'effectClassName']);
+
+
+      var Component = component;
+
+      return _react2.default.createElement(
+        Component,
+        (0, _extends3.default)({}, props, {
+          ref: function ref(_ref7) {
+            _this2.button = _ref7;
+          },
+          onClick: this.onClick,
+          className: classes.button + ' ' + className
+        }),
+        this.renderEffects(classes, effectClassName),
+        children
+      );
+    }
+  }]);
+  return ReactDribbleButton;
+}(_react.PureComponent);
+
+ReactDribbleButton.propTypes = {
+  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,
+  children: _propTypes2.default.children,
+  className: _propTypes2.default.string,
+  component: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
+  effectClassName: _propTypes2.default.string,
+  animationDuration: _propTypes2.default.number
+};
+ReactDribbleButton.defaultProps = {
+  color: 'default',
+  onClick: null,
+  children: null,
+  className: '',
+  component: 'button',
+  effectClassName: '',
+  animationDuration: 650
+};
+exports.default = (0, _reactJss2.default)(_styles2.default)(ReactDribbleButton);

package.json

 {
   "name": "react-dribble-button",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "The Button component with pretty nice hive and click effects",
   "main": "lib/index.js",
   "scripts": {
-    "clear": "rm ./lib/react-dribble-button.*",
+    "clear": "rm -rf ./lib",
     "lint": "eslint -c ./.eslintrc . ",
     "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",
+    "build": "babel src --out-dir lib",
     "storybook": "start-storybook -p 6006",
-    "prepublish": "npm run build:dev && npm run build:prod",
+    "prepublish": "npm run clear && npm run build",
     "build-storybook": "build-storybook"
@@ -33,3 +32,2 @@ },
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.10",
     "babel-plugin-transform-runtime": "^6.23.0",
@@ -36,0 +34,0 @@ "babel-preset-env": "^1.6.1",

README.md

@@ -42,4 +42,2 @@ [![](https://img.shields.io/npm/dm/react-dribble-button.svg?style=flat-square)](https://www.npmjs.com/package/react-dribble-button)
 
-> NOTE: To use color themes needs import specific theme from `'react-dribble-button/css/[color-theme].css'`
-
 | Property | Type | Defaut | Description |
@@ -46,0 +44,0 @@ | -------- | ---- | -------- | ----------- |

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

20

decreased by-4.76%

Number of package files

10

increased by11.11%

Number of low supply chain risk alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

34341599

Lines of code

494

decreased by-1.79%

Number of lines in readme file

58

decreased by-3.33%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes