react-parabola - npm Package Compare versions

Comparing version 0.0.1 to 0.1.0

example/app.jsx

 import React, { Component } from 'react';
-import { showParabola } from './../src/index';
+import { showParabola } from '../src/index';
 import './style.less';
@@ -50,3 +50,5 @@
 
-    this.config = { ...this.config, start, end, children, onAfterEnd };
+    this.config = {
+      ...this.config, start, end, children, onAfterEnd,
+    };
     showParabola(this.config);
@@ -71,2 +73,3 @@ }
                 key={i}
+                onKeyPress={() => {}}
                 role="button"
@@ -73,0 +76,0 @@ tabIndex="0"

example/main.js

 /* eslint-disable */
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { AppContainer } from 'react-hot-loader';
 import App from './app';
@@ -12,16 +11,5 @@
 function render(Component) {
-  ReactDOM.render(
-    <AppContainer>
-      <Component />
-    </AppContainer>, div
-  );
+  ReactDOM.render(<Component />, div);
 }
 
-render(App);
-
-if (module.hot) {
-  module.hot.accept('./app', () => {
-    const NewApp = require('./app').default;
-    render(NewApp);
-  });
-}
+render(App);

lib/components/index.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -6,25 +6,35 @@ Object.defineProperty(exports, "__esModule", {
 });
+exports["default"] = void 0;
 
-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 _react = _interopRequireWildcard(require("react"));
 
-var _react = require('react');
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _react2 = _interopRequireDefault(_react);
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var _propTypes = require('prop-types');
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }
 
-var _propTypes2 = _interopRequireDefault(_propTypes);
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+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); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 var nil = function nil() {
   return false;
 };
-
 /*
@@ -43,13 +53,10 @@ * Parabola 组件参数说明：
 
-var Parabola = function (_Component) {
+
+var Parabola =
+/*#__PURE__*/
+function (_Component) {
   _inherits(Parabola, _Component);
 
   _createClass(Parabola, null, [{
-    key: 'calculate',
-
-
-    /*
-     * 根据极值点和另外一点计算抛物线参数
-     * 抛物线顶点式方程：y=a(x-h)^2+k，其中 (h, k) 为 极值点坐标
-     */
+    key: "calculate",
     value: function calculate(extreme, point) {
@@ -60,9 +67,10 @@ var ex = extreme.x,
           y = point.y;
-
-
       var a = (y - ey) / Math.pow(x - ex, 2);
       var h = ex;
       var k = ey;
-
-      return { a: a, h: h, k: k };
+      return {
+        a: a,
+        h: h,
+        k: k
+      };
     }
@@ -72,6 +80,7 @@ }]);
   function Parabola(props) {
+    var _this;
+
     _classCallCheck(this, Parabola);
 
-    // 初始状态
-    var _this = _possibleConstructorReturn(this, (Parabola.__proto__ || Object.getPrototypeOf(Parabola)).call(this, props));
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(Parabola).call(this, props)); // 初始状态
 
@@ -85,6 +94,6 @@ _this.state = {
     };
-
     _this.startTime = new Date();
 
     _this.initParabolas();
+
     return _this;
@@ -94,3 +103,3 @@ }
   _createClass(Parabola, [{
-    key: 'componentDidMount',
+    key: "componentDidMount",
     value: function componentDidMount() {
@@ -101,3 +110,3 @@ this.beforeStart();
   }, {
-    key: 'componentWillUnmount',
+    key: "componentWillUnmount",
     value: function componentWillUnmount() {
@@ -107,33 +116,40 @@ this.afterEnd();
   }, {
-    key: 'draw',
+    key: "draw",
     value: function draw() {
       var _this2 = this;
 
+      var delay = this.props.delay;
       setTimeout(function () {
         _this2.update();
+
         _this2.startTime = new Date();
-      }, this.props.delay);
+      }, delay);
     }
   }, {
-    key: 'finish',
+    key: "finish",
     value: function finish() {
-      if (this.props.onEnd) {
-        this.props.onEnd();
+      var onEnd = this.props.onEnd;
+
+      if (onEnd) {
+        onEnd();
       }
     }
   }, {
-    key: 'beforeStart',
+    key: "beforeStart",
     value: function beforeStart() {
-      if (this.props.onBeforeStart) {
-        this.props.onBeforeStart();
+      var onBeforeStart = this.props.onBeforeStart;
+
+      if (onBeforeStart) {
+        onBeforeStart();
       }
     }
   }, {
-    key: 'afterEnd',
+    key: "afterEnd",
     value: function afterEnd() {
-      if (this.props.onAfterEnd) {
-        this.props.onAfterEnd();
+      var onAfterEnd = this.props.onAfterEnd;
+
+      if (onAfterEnd) {
+        onAfterEnd();
       }
     }
-
     /*
@@ -144,39 +160,43 @@ * 坐标系统转换，将全局坐标系转换为相对坐标系
   }, {
-    key: 'initParabolas',
+    key: "initParabolas",
     value: function initParabolas() {
-      var _props = this.props,
-          rate = _props.rate,
-          top = _props.top,
-          start = _props.start,
-          end = _props.end;
-
-      var left = { // 起点
+      var _this$props = this.props,
+          rate = _this$props.rate,
+          top = _this$props.top,
+          start = _this$props.start,
+          end = _this$props.end;
+      var left = {
+        // 起点
         x: 0,
         y: 0
       };
-      var right = { // 终点
+      var right = {
+        // 终点
         x: end.x - start.x,
         y: end.y - start.y
       };
-      var extreme = { // 极值点
+      var extreme = {
+        // 极值点
         x: rate * right.x,
         y: Math.min(right.y, left.y) - top
       };
+      var lParabola = Parabola.calculate(extreme, left); // 极值点左侧抛物线参数
 
-      var lParabola = Parabola.calculate(extreme, left); // 极值点左侧抛物线参数
       var rParabola = Parabola.calculate(extreme, right); // 极值点右侧抛物线参数
 
-      this.parabolas = { lParabola: lParabola, rParabola: rParabola };
+      this.parabolas = {
+        lParabola: lParabola,
+        rParabola: rParabola
+      };
       return this.parabolas;
     }
   }, {
-    key: 'update',
+    key: "update",
     value: function update() {
-      var _props2 = this.props,
-          duration = _props2.duration,
-          rate = _props2.rate,
-          start = _props2.start,
-          end = _props2.end;
+      var _this$props2 = this.props,
+          duration = _this$props2.duration,
+          rate = _this$props2.rate,
+          start = _this$props2.start,
+          end = _this$props2.end;
       var animationEnd = this.state.animationEnd;
-
       var interval = Date.now() - this.startTime;
@@ -194,5 +214,5 @@
       var percent = interval / duration;
-      var _parabolas = this.parabolas,
-          lParabola = _parabolas.lParabola,
-          rParabola = _parabolas.rParabola;
+      var _this$parabolas = this.parabolas,
+          lParabola = _this$parabolas.lParabola,
+          rParabola = _this$parabolas.rParabola;
 
@@ -202,14 +222,10 @@ var _ref = rate > percent ? lParabola : rParabola,
           h = _ref.h,
-          k = _ref.k;
+          k = _ref.k; // 计算位置
 
-      // 计算位置
 
-
       var x = percent * (end.x - start.x);
-      var y = a * Math.pow(x - h, 2) + k;
+      var y = a * Math.pow(x - h, 2) + k; // 计算缩放
 
-      // 计算缩放
       var scaleX = 1 - percent * (1 - (end.width || 1) / (start.width || 1));
       var scaleY = 1 - percent * (1 - (end.height || 1) / (start.height || 1));
-
       this.setState({
@@ -221,36 +237,29 @@ translateX: x,
         animationEnd: animationEnd
-      });
+      }); // 刷新
 
-      // 刷新
       requestAnimationFrame(this.update.bind(this));
-
       return false;
     }
   }, {
-    key: 'render',
+    key: "render",
     value: function render() {
-      var _state = this.state,
-          translateX = _state.translateX,
-          translateY = _state.translateY,
-          scaleX = _state.scaleX,
-          scaleY = _state.scaleY;
-      var _props3 = this.props,
-          start = _props3.start,
-          children = _props3.children;
-
-      return _react2.default.createElement(
-        'div',
-        {
-          style: {
-            position: 'absolute',
-            left: start.x + 'px',
-            top: start.y + 'px',
-            width: start.width + 'px',
-            height: start.height + 'px',
-            transform: 'translate(' + translateX + 'px, ' + translateY + 'px) scale(' + scaleX + ', ' + scaleY + ')',
-            transformOrigin: '0 0'
-          }
-        },
-        children
-      );
+      var _this$state = this.state,
+          translateX = _this$state.translateX,
+          translateY = _this$state.translateY,
+          scaleX = _this$state.scaleX,
+          scaleY = _this$state.scaleY;
+      var _this$props3 = this.props,
+          start = _this$props3.start,
+          children = _this$props3.children;
+      return _react["default"].createElement("div", {
+        style: {
+          position: 'absolute',
+          left: "".concat(start.x, "px"),
+          top: "".concat(start.y, "px"),
+          width: "".concat(start.width, "px"),
+          height: "".concat(start.height, "px"),
+          transform: "translate(".concat(translateX, "px, ").concat(translateY, "px) scale(").concat(scaleX, ", ").concat(scaleY, ")"),
+          transformOrigin: '0 0'
+        }
+      }, children);
     }
@@ -262,3 +271,5 @@ }]);
 
-Parabola.defaultProps = {
+exports["default"] = Parabola;
+
+_defineProperty(Parabola, "defaultProps", {
   rate: 1,
@@ -272,24 +283,30 @@ duration: 800,
   onAfterEnd: nil
-};
-Parabola.propTypes = {
-  rate: _propTypes2.default.number,
-  start: _propTypes2.default.shape({
-    x: _propTypes2.default.number.isRequired,
-    y: _propTypes2.default.number.isRequired,
-    width: _propTypes2.default.number.isRequire,
-    height: _propTypes2.default.number.isRequire
+});
+
+_defineProperty(Parabola, "propTypes", {
+  rate: _propTypes["default"].number,
+  start: _propTypes["default"].shape({
+    x: _propTypes["default"].number.isRequired,
+    y: _propTypes["default"].number.isRequired,
+    width: _propTypes["default"].number.isRequired,
+    height: _propTypes["default"].number.isRequired
   }).isRequired,
-  end: _propTypes2.default.shape({
-    x: _propTypes2.default.number.isRequired,
-    y: _propTypes2.default.number.isRequired,
-    width: _propTypes2.default.number.isRequire,
-    height: _propTypes2.default.number.isRequire
+  end: _propTypes["default"].shape({
+    x: _propTypes["default"].number.isRequired,
+    y: _propTypes["default"].number.isRequired,
+    width: _propTypes["default"].number.isRequired,
+    height: _propTypes["default"].number.isRequired
   }).isRequired,
-  duration: _propTypes2.default.number,
-  top: _propTypes2.default.number,
-  delay: _propTypes2.default.number,
-  children: _propTypes2.default.element,
-  onEnd: _propTypes2.default.func,
-  onBeforeStart: _propTypes2.default.func,
-  onAfterEnd: _propTypes2.default.func };
-exports.default = Parabola;
+  duration: _propTypes["default"].number,
+  top: _propTypes["default"].number,
+  delay: _propTypes["default"].number,
+  children: _propTypes["default"].element,
+  onEnd: _propTypes["default"].func,
+  onBeforeStart: _propTypes["default"].func,
+  onAfterEnd: _propTypes["default"].func
+  /*
+   * 根据极值点和另外一点计算抛物线参数
+   * 抛物线顶点式方程：y=a(x-h)^2+k，其中 (h, k) 为 极值点坐标
+   */
+
+});

lib/index.js

@@ -1,23 +0,25 @@
-'use strict';
+"use strict";
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.showParabola = showParabola;
+exports["default"] = void 0;
 
-var _react = require('react');
+var _react = _interopRequireDefault(require("react"));
 
-var _react2 = _interopRequireDefault(_react);
+var _reactDom = _interopRequireDefault(require("react-dom"));
 
-var _reactDom = require('react-dom');
+var _index = _interopRequireDefault(require("./components/index"));
 
-var _reactDom2 = _interopRequireDefault(_reactDom);
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var _index = require('./components/index');
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
 
-var _index2 = _interopRequireDefault(_index);
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 var nil = function nil() {};
 
 function showParabola(config) {
-  var props = _extends({}, config);
+  var props = _objectSpread({}, config);
 
@@ -28,3 +30,4 @@ var div = document.createElement('div');
   function remove() {
-    var unmountResult = _reactDom2.default.unmountComponentAtNode(div);
+    var unmountResult = _reactDom["default"].unmountComponentAtNode(div);
+
     if (unmountResult && div.parentNode) {
@@ -43,34 +46,30 @@ div.parentNode.removeChild(div);
       _props$onAfterEnd = props.onAfterEnd,
-      _onAfterEnd = _props$onAfterEnd === undefined ? nil : _props$onAfterEnd,
+      _onAfterEnd = _props$onAfterEnd === void 0 ? nil : _props$onAfterEnd,
       _props$onBeforeStart = props.onBeforeStart,
-      _onBeforeStart = _props$onBeforeStart === undefined ? nil : _props$onBeforeStart;
+      _onBeforeStart = _props$onBeforeStart === void 0 ? nil : _props$onBeforeStart;
 
-  _reactDom2.default.render(_react2.default.createElement(
-    _index2.default,
-    {
-      duration: duration,
-      rate: rate,
-      delay: delay,
-      top: top,
-      start: start,
-      end: end,
-      onBeforeStart: function onBeforeStart() {
-        return _onBeforeStart();
-      },
-      onEnd: function onEnd() {
-        return remove();
-      },
-      onAfterEnd: function onAfterEnd() {
-        return _onAfterEnd();
-      }
+  _reactDom["default"].render(_react["default"].createElement(_index["default"], {
+    duration: duration,
+    rate: rate,
+    delay: delay,
+    top: top,
+    start: start,
+    end: end,
+    onBeforeStart: function onBeforeStart() {
+      return _onBeforeStart();
     },
-    children
-  ), div);
+    onEnd: function onEnd() {
+      return remove();
+    },
+    onAfterEnd: function onAfterEnd() {
+      return _onAfterEnd();
+    }
+  }, children), div);
 }
 
-module.exports = {
+var _default = {
   showParabola: showParabola,
-  Parabola: _index2.default
-};
+  Parabola: _index["default"]
+}; // module.export { showParabola }, { Parabola };
 
-// module.export { showParabola }, { Parabola };
+exports["default"] = _default;

package.json

 {
   "name": "react-parabola",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "Parabolic motion of an object",
@@ -12,34 +12,44 @@ "main": "./lib/index.js",
   "dependencies": {
-    "prop-types": "^15.5.10",
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1"
+    "prop-types": "^15.7.2",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6"
   },
   "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.0",
-    "babel-eslint": "^8.0.0",
-    "babel-loader": "^7.1.2",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-0": "^6.24.1",
-    "css-loader": "^0.28.7",
-    "eslint": "^3.19.0",
-    "eslint-config-airbnb": "^15.1.0",
-    "eslint-plugin-import": "^2.7.0",
-    "eslint-plugin-jsx-a11y": "^5.1.1",
-    "eslint-plugin-react": "^7.3.0",
-    "extract-text-webpack-plugin": "^3.0.0",
-    "html-webpack-plugin": "^2.30.1",
-    "less": "^2.7.2",
-    "less-loader": "^4.0.5",
-    "react-addons-shallow-compare": "^15.6.0",
-    "react-hot-loader": "^3.0.0-beta.7",
-    "style-loader": "^0.18.2",
-    "webpack": "^3.5.6",
-    "webpack-dev-server": "^2.7.1"
+    "@babel/cli": "^7.4.4",
+    "@babel/core": "^7.4.4",
+    "@babel/plugin-proposal-class-properties": "^7.4.4",
+    "@babel/plugin-proposal-decorators": "^7.4.4",
+    "@babel/polyfill": "^7.4.4",
+    "@babel/preset-env": "^7.4.4",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/register": "^7.4.4",
+    "babel-eslint": "^10.0.1",
+    "babel-loader": "^8.0.5",
+    "cross-env": "^5.2.0",
+    "css-hot-loader": "^1.4.4",
+    "css-loader": "^2.1.1",
+    "eslint": "^5.16.0",
+    "eslint-config-airbnb": "^17.1.0",
+    "eslint-config-prettier": "^3.0.1",
+    "eslint-plugin-babel": "^5.3.0",
+    "eslint-plugin-compat": "^2.6.2",
+    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-jsx-a11y": "^6.1.2",
+    "eslint-plugin-markdown": "^1.0.0-beta.6",
+    "eslint-plugin-react": "^7.11.1",
+    "html-webpack-plugin": "^3.2.0",
+    "less": "^3.9.0",
+    "less-loader": "^5.0.0",
+    "mini-css-extract-plugin": "^0.6.0",
+    "style-loader": "^0.23.1",
+    "url-loader": "^1.1.2",
+    "webpack": "^4.30.0",
+    "webpack-cli": "^3.3.1",
+    "webpack-dev-server": "^3.3.1",
+    "webpack-merge": "^4.2.1"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "babel ./src --out-dir ./lib && webpack",
-    "dev": "BABEL_ENV=development webpack-dev-server --devtool eval --progress --colors",
+    "build": "babel ./src --out-dir ./lib && lessc src/style.less lib/style.css && node_modules/.bin/webpack --config ./webpack/webpack.prod.config.js",
+    "dev": "NODE_ENV='development' webpack-dev-server --open --progress --colors  --config ./webpack/webpack.dev.config.js --mode development",
     "lint": "eslint src example --ext '.js,.jsx' --cache"
@@ -51,6 +61,4 @@ },
   },
-  "author": [
-    "gewenmao"
-  ],
+  "author": "gewenmao",
   "license": "MIT"
 }

src/components/index.jsx

@@ -36,4 +36,4 @@ import React, { Component } from 'react';
       y: PropTypes.number.isRequired,
-      width: PropTypes.number.isRequire,
-      height: PropTypes.number.isRequire,
+      width: PropTypes.number.isRequired,
+      height: PropTypes.number.isRequired,
     }).isRequired,
@@ -43,4 +43,4 @@ end: PropTypes.shape({
       y: PropTypes.number.isRequired,
-      width: PropTypes.number.isRequire,
-      height: PropTypes.number.isRequire,
+      width: PropTypes.number.isRequired,
+      height: PropTypes.number.isRequired,
     }).isRequired,
@@ -98,15 +98,20 @@ duration: PropTypes.number,
   draw() {
+    const { delay } = this.props;
     setTimeout(() => {
       this.update();
       this.startTime = new Date();
-    }, this.props.delay);
+    }, delay);
   }
+
   finish() {
-    if (this.props.onEnd) {
-      this.props.onEnd();
+    const { onEnd } = this.props;
+    if (onEnd) {
+      onEnd();
     }
   }
+
   beforeStart() {
-    if (this.props.onBeforeStart) {
-      this.props.onBeforeStart();
+    const { onBeforeStart } = this.props;
+    if (onBeforeStart) {
+      onBeforeStart();
     }
@@ -116,4 +121,5 @@ }
   afterEnd() {
-    if (this.props.onAfterEnd) {
-      this.props.onAfterEnd();
+    const { onAfterEnd } = this.props;
+    if (onAfterEnd) {
+      onAfterEnd();
     }
@@ -126,3 +132,5 @@ }
   initParabolas() {
-    const { rate, top, start, end } = this.props;
+    const {
+      rate, top, start, end,
+    } = this.props;
     const left = { // 起点
@@ -149,3 +157,5 @@ x: 0,
   update() {
-    const { duration, rate, start, end } = this.props;
+    const {
+      duration, rate, start, end,
+    } = this.props;
     let { animationEnd } = this.state;
@@ -190,3 +200,5 @@ let interval = Date.now() - this.startTime;
   render() {
-    const { translateX, translateY, scaleX, scaleY } = this.state;
+    const {
+      translateX, translateY, scaleX, scaleY,
+    } = this.state;
     const { start, children } = this.props;
@@ -210,2 +222,1 @@ return (
 }
-

src/index.jsx

@@ -7,3 +7,3 @@ import React from 'react';
 
-function showParabola(config) {
+export function showParabola(config) {
   const props = {
@@ -42,7 +42,8 @@ ...config,
       { children }
-    </Parabola>
-  , div);
+    </Parabola>,
+    div,
+  );
 }
 
-module.exports = {
+export default {
   showParabola,
@@ -49,0 +50,0 @@ Parabola,

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

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

Fixed alerts

AI-detected possible typosquat

Supply chain risk

AI has identified this package as a potential typosquat of a more popular package. This suggests that the package may be intentionally mimicking another package's name, description, or other metadata.

Found 1 instance in 1 package

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

Found 1 instance in 1 package

Improved metrics

Number of package files

22

increased by29.41%

Number of low maintenance alerts

2

decreased by-33.33%

Number of lines in readme file

50

increased by47.06%

Worsened metrics

Total package byte prevSize

426713

decreased by-85.7%

Dev dependency count

32

increased by45.45%

Lines of code

2340

decreased by-92.29%

Number of low supply chain risk alerts

2

increased byInfinity%

Dependency changes

• + Addedreact@16.14.0(transitive)

• + Addedreact-dom@16.14.0(transitive)

• + Addedscheduler@0.19.1(transitive)

• - Removedasap@2.0.6(transitive)

• - Removedcore-js@1.2.7(transitive)

• - Removedcreate-react-class@15.7.0(transitive)

• - Removedencoding@0.1.13(transitive)

• - Removedfbjs@0.8.18(transitive)

• - Removediconv-lite@0.6.3(transitive)

• - Removedis-stream@1.1.0(transitive)

• - Removedisomorphic-fetch@2.2.1(transitive)

• - Removednode-fetch@1.7.3(transitive)

• - Removedpromise@7.3.1(transitive)

• - Removedreact@15.7.0(transitive)

• - Removedreact-dom@15.7.0(transitive)

• - Removedsafer-buffer@2.1.2(transitive)

• - Removedsetimmediate@1.0.5(transitive)

• - Removedua-parser-js@0.7.40(transitive)

• - Removedwhatwg-fetch@3.6.20(transitive)

• Updatedprop-types@^15.7.2

• Updatedreact@^16.8.6

• Updatedreact-dom@^16.8.6