react-vertical-timeline - npm Package Compare versions

Comparing version 0.1.2 to 0.2.0

dist-modules/Bookmark.js

 'use strict';
 
-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; }; }();
-
 Object.defineProperty(exports, "__esModule", {
@@ -9,2 +7,4 @@ value: true
 
+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 = require('react');
@@ -14,2 +14,6 @@
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -26,6 +30,9 @@
 
-  function Bookmark() {
+  function Bookmark(props) {
     _classCallCheck(this, Bookmark);
 
-    return _possibleConstructorReturn(this, Object.getPrototypeOf(Bookmark).apply(this, arguments));
+    var _this = _possibleConstructorReturn(this, (Bookmark.__proto__ || Object.getPrototypeOf(Bookmark)).call(this, props));
+
+    _this.clickHandler = _this.clickHandler.bind(_this);
+    return _this;
   }
@@ -43,8 +50,8 @@
         top: this.context.height * (this.props.progress / 100) + 'px'
-      },
-          cls = ['timeline-bookmark', this.props.progress <= this.context.progress ? 'visited' : null].join(' ');
+      };
+      var cls = ['timeline-bookmark', this.props.progress <= this.context.progress ? 'visited' : null].join(' ');
 
       return _react2.default.createElement(
         'div',
-        { className: cls, onClick: this.clickHandler.bind(this), style: style },
+        { className: cls, onClick: this.clickHandler, style: style },
         _react2.default.createElement(
@@ -64,11 +71,18 @@ 'div',
 
+
 Bookmark.contextTypes = {
-  height: _react2.default.PropTypes.number.isRequired,
-  progress: _react2.default.PropTypes.number
+  height: _propTypes2.default.number.isRequired,
+  progress: _propTypes2.default.number,
+  onSelect: function onSelect() {}
 };
 
-Bookmark.propTypes = {
-  children: _react2.default.PropTypes.node,
-  onSelect: _react2.default.PropTypes.func,
-  progress: _react2.default.PropTypes.number.isRequired
-};
+Bookmark.defaultProps = {
+  onSelect: function onSelect() {},
+  children: []
+};
+
+Bookmark.propTypes = process.env.NODE_ENV !== "production" ? {
+  children: _propTypes2.default.node,
+  onSelect: _propTypes2.default.func,
+  progress: _propTypes2.default.number.isRequired
+} : {};

dist-modules/index.js

@@ -18,5 +18,5 @@ 'use strict';
 module.exports = {
-  'Timeline': _Timeline2.default,
-  'Bookmark': _Bookmark2.default,
-  'Marker': _Marker2.default
+  Timeline: _Timeline2.default,
+  Bookmark: _Bookmark2.default,
+  Marker: _Marker2.default
 };

dist-modules/Marker.js

 'use strict';
 
-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; }; }();
-
 Object.defineProperty(exports, "__esModule", {
@@ -9,2 +7,4 @@ value: true
 
+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 = require('react');
@@ -14,2 +14,6 @@
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -29,3 +33,3 @@
 
-    return _possibleConstructorReturn(this, Object.getPrototypeOf(Marker).apply(this, arguments));
+    return _possibleConstructorReturn(this, (Marker.__proto__ || Object.getPrototypeOf(Marker)).apply(this, arguments));
   }
@@ -57,8 +61,9 @@
 
+
 Marker.contextTypes = {
-  height: _react2.default.PropTypes.number.isRequired
+  height: _propTypes2.default.number.isRequired
 };
 
-Marker.propTypes = {
-  progress: _react2.default.PropTypes.number.isRequired
-};
+Marker.propTypes = process.env.NODE_ENV !== "production" ? {
+  progress: _propTypes2.default.number.isRequired
+} : {};

dist-modules/Timeline.js

 'use strict';
 
-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; }; }();
-
 Object.defineProperty(exports, "__esModule", {
@@ -9,2 +7,4 @@ value: true
 
+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 = require('react');
@@ -14,2 +14,6 @@
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -23,12 +27,40 @@
 
+var validateProgressValue = function validateProgressValue(value) {
+  var progress = value;
+  if (value > 100) {
+    progress = 100;
+  } else if (value < 0) {
+    progress = 0;
+  }
+  return progress;
+};
+
+var getHeight = function getHeight(element) {
+  var e = element;
+  while (e.className !== 'timeline-block' && e.parentElement) {
+    e = element.parentElement;
+  }
+  return e && e.offsetHeight;
+};
+
+var getPosition = function getPosition(e) {
+  // e = Mouse click event.
+  var rect = e.target.getBoundingClientRect();
+  var x = e.clientX - rect.left; // x position within the element.
+  var y = e.clientY - rect.top; // y position within the element.
+  return { x: x, y: y };
+};
+
 var Timeline = function (_React$Component) {
   _inherits(Timeline, _React$Component);
 
-  function Timeline() {
+  function Timeline(props) {
     _classCallCheck(this, Timeline);
 
-    var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Timeline).call(this));
+    var _this = _possibleConstructorReturn(this, (Timeline.__proto__ || Object.getPrototypeOf(Timeline)).call(this, props));
 
+    _this.handleProgressClick = _this.handleProgressClick.bind(_this);
+
     _this.state = {
-      progress: 0
+      progress: validateProgressValue(props.progress)
     };
@@ -41,9 +73,5 @@ return _this;
     value: function componentWillReceiveProps(nextProps) {
-      if (nextProps.progress > 100) {
-        this.state.progress = 100;
-      } else if (nextProps.progress < 0) {
-        this.state.progress = 0;
-      } else {
-        this.state.progress = nextProps.progress;
-      }
+      this.setState({
+        progress: validateProgressValue(nextProps.progress)
+      });
     }
@@ -59,28 +87,6 @@ }, {
   }, {
-    key: 'getHeight',
-    value: function getHeight(element) {
-      var e = element;
-      while (e.className !== 'timeline-block' && e.parentElement) {
-        e = element.parentElement;
-      }
-      return e && e.offsetHeight;
-    }
-  }, {
-    key: 'getPosition',
-    value: function getPosition(element) {
-      var xPosition = 0;
-      var yPosition = 0;
-
-      while (element) {
-        xPosition += element.offsetLeft - element.scrollLeft + element.clientLeft;
-        yPosition += element.offsetTop - element.scrollTop + element.clientTop;
-        element = element.offsetParent;
-      }
-      return { x: xPosition, y: yPosition };
-    }
-  }, {
     key: 'handleProgressClick',
     value: function handleProgressClick(e) {
-      var parentPosition = this.getPosition(e.currentTarget);
-      var progress = (e.clientY - parentPosition.y) / this.getHeight(e.currentTarget) * 100;
+      var parentPosition = getPosition(e);
+      var progress = parentPosition.y / getHeight(e.currentTarget) * 100;
       this.props.onSelect(progress);
@@ -93,7 +99,6 @@ e.stopPropagation();
     value: function render() {
-      var clickHandler = this.handleProgressClick.bind(this);
       var progressStyle = {
         height: this.state.progress + '%'
-      },
-          wrapperStyle = {
+      };
+      var wrapperStyle = {
         height: this.props.height + 'px'
@@ -105,7 +110,11 @@ };
         { className: 'timeline-block', style: wrapperStyle },
-        _react2.default.createElement('div', { className: 'timeline-line',
-          onClick: clickHandler }),
-        _react2.default.createElement('div', { className: 'timeline-progress',
-          onClick: clickHandler,
-          style: progressStyle }),
+        _react2.default.createElement('div', {
+          className: 'timeline-line',
+          onClick: this.handleProgressClick
+        }),
+        _react2.default.createElement('div', {
+          className: 'timeline-progress',
+          onClick: this.handleProgressClick,
+          style: progressStyle
+        }),
         this.props.children
@@ -121,18 +130,19 @@ );
 
-Timeline.propTypes = {
-  children: _react2.default.PropTypes.node,
-  height: _react2.default.PropTypes.number.isRequired,
-  onSelect: _react2.default.PropTypes.func,
-  progress: _react2.default.PropTypes.number
-};
 
+Timeline.propTypes = process.env.NODE_ENV !== "production" ? {
+  children: _propTypes2.default.node,
+  height: _propTypes2.default.number.isRequired,
+  onSelect: _propTypes2.default.func,
+  progress: _propTypes2.default.number
+} : {};
+
 Timeline.defaultProps = {
-  height: 200,
   onSelect: function onSelect() {},
-  progress: 0
+  progress: 0,
+  children: []
 };
 
 Timeline.childContextTypes = {
-  height: _react2.default.PropTypes.number,
-  progress: _react2.default.PropTypes.number
+  height: _propTypes2.default.number,
+  progress: _propTypes2.default.number
 };

lib/post_install.js

@@ -0,1 +1,2 @@
+/* eslint-disable */
 // adapted based on rackt/history (MIT)
@@ -27,2 +28,2 @@ // Node 0.10+
   }
-});
+});

package.json

@@ -6,16 +6,15 @@ {
   "user": "yeyus",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "scripts": {
-    "start": "webpack-dev-server",
-    "test": "karma start",
-    "test:tdd": "karma start --auto-watch --no-single-run",
-    "test:lint": "eslint . --ext .js --ext .jsx",
-    "gh-pages": "webpack",
-    "gh-pages:deploy": "gh-pages -d gh-pages",
-    "gh-pages:stats": "webpack --profile --json > stats.json",
-    "dist": "webpack",
-    "dist:min": "webpack",
-    "dist:modules": "babel ./src --out-dir ./dist-modules",
-    "preversion": "npm run test && npm run test:lint && npm run dist && npm run dist:min && git commit --allow-empty -am \"Update dist\"",
-    "prepublish": "npm run dist:modules",
+    "start": "catalog start docs",
+    "test": "jest",
+    "test:coverage": "jest --coverage",
+    "test:watch": "jest --watch",
+    "test:lint": "eslint . --ignore-path .gitignore",
+    "gh-pages": "catalog build docs",
+    "gh-pages:deploy": "gh-pages -d docs/build",
+    "dist:es6": "del-cli ./dist-es6 && cross-env BABEL_ENV=es6 babel ./src --out-dir ./dist-es6",
+    "dist:modules": "del-cli ./dist-modules && cross-env BABEL_ENV=modules babel ./src --out-dir ./dist-modules",
+    "preversion": "npm run test",
+    "prepublishOnly": "npm run dist:es6 && npm run dist:modules",
     "postpublish": "npm run gh-pages && npm run gh-pages:deploy",
@@ -25,54 +24,39 @@ "postinstall": "node lib/post_install.js"
   "main": "dist-modules",
+  "module": "dist-es6",
+  "jsnext:main": "dist-es6",
   "devDependencies": {
-    "babel-cli": "^6.4.0",
-    "babel-core": "^6.4.0",
-    "babel-eslint": "^5.0.0-beta6",
-    "babel-loader": "^6.2.1",
-    "babel-preset-es2015": "^6.3.13",
-    "babel-preset-react": "^6.3.13",
-    "babel-preset-react-hmre": "^1.0.1",
-    "babel-register": "^6.4.3",
-    "chai": "^3.4.1",
-    "clean-webpack-plugin": "^0.1.6",
-    "css-loader": "^0.23.1",
-    "eslint": "^1.10.3",
-    "eslint-loader": "^1.2.0",
-    "eslint-plugin-react": "^3.11.0",
-    "extract-text-webpack-plugin": "^1.0.1",
-    "file-loader": "^0.8.5",
-    "gh-pages": "^0.8.0",
-    "git-prepush-hook": "^1.0.1",
-    "highlight.js": "^9.1.0",
-    "html-webpack-plugin": "^1.7.0",
-    "isparta-loader": "^1.0.0",
-    "json-loader": "^0.5.4",
-    "karma": "^0.13.19",
-    "karma-chai": "^0.1.0",
-    "karma-chai-sinon": "^0.1.5",
-    "karma-coverage": "^0.5.3",
-    "karma-mocha": "^0.2.1",
-    "karma-phantomjs-launcher": "^0.2.3",
-    "karma-sinon": "^1.0.4",
-    "karma-sourcemap-loader": "^0.3.7",
-    "karma-spec-reporter": "0.0.23",
-    "karma-webpack": "^1.7.0",
-    "markdown-to-react-components": "^0.2.1",
-    "mocha": "^2.3.4",
-    "phantomjs": "^1.9.19",
-    "phantomjs-polyfill": "0.0.1",
-    "purecss": "^0.6.0",
-    "react": "^0.14.6",
-    "react-addons-test-utils": "^0.14.6",
-    "react-dom": "^0.14.6",
-    "react-ghfork": "^0.3.2",
-    "sinon": "^1.17.2",
-    "sinon-chai": "^2.8.0",
-    "style-loader": "^0.13.0",
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.0",
+    "babel-eslint": "^8.2.2",
+    "babel-jest": "^22.4.1",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.13",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-react": "^6.24.1",
+    "catalog": "^3.4.0",
+    "chai": "^4.1.2",
+    "cross-env": "^5.1.3",
+    "del-cli": "^1.1.0",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
+    "eslint": "^4.18.2",
+    "eslint-config-airbnb": "^16.1.0",
+    "eslint-plugin-import": "^2.9.0",
+    "eslint-plugin-jsx-a11y": "^6.0.3",
+    "eslint-plugin-react": "^7.7.0",
+    "gh-pages": "^1.1.0",
+    "git-prepush-hook": "^1.0.2",
+    "jest": "^22.4.2",
+    "purecss": "^1.0.0",
+    "react": "^16.2.0",
+    "react-addons-test-utils": "^15.6.2",
+    "react-dom": "^16.2.0",
+    "react-github-corner": "^2.1.0",
+    "rimraf": "^2.6.2",
     "sync-exec": "^0.6.2",
-    "system-bell-webpack-plugin": "^1.0.0",
-    "url-loader": "^0.5.7",
-    "webpack": "^1.12.11",
-    "webpack-dev-server": "^1.14.1",
-    "webpack-merge": "^0.7.3"
+    "webpack": "^3.10.0"
   },
+  "peerDependencies": {
+    "react": ">= 0.11.2 < 16.0.2"
+  },
   "repository": {
@@ -86,2 +70,13 @@ "type": "git",
   },
+  "jest": {
+    "collectCoverage": true,
+    "moduleFileExtensions": [
+      "js",
+      "jsx"
+    ],
+    "moduleDirectories": [
+      "node_modules",
+      "packages"
+    ]
+  },
   "keywords": [
@@ -97,5 +92,4 @@ "react",
   "pre-push": [
-    "test",
-    "test:lint"
+    "test"
   ]
 }

README.md

@@ -1,2 +0,2 @@
-[![build status](https://secure.travis-ci.org/yeyus/react-vertical-timeline.png)](http://travis-ci.org/yeyus/react-vertical-timeline) [![bitHound Score](https://www.bithound.io/github/yeyus/react-vertical-timeline/badges/score.svg)](https://www.bithound.io/github/yeyus/react-vertical-timeline) [![Dependency Status](https://david-dm.org/yeyus/react-vertical-timeline.svg)](https://david-dm.org/yeyus/react-vertical-timeline)
+[![build status](https://secure.travis-ci.org/yeyus/react-vertical-timeline.png)](http://travis-ci.org/yeyus/react-vertical-timeline) [![Dependency Status](https://david-dm.org/yeyus/react-vertical-timeline.svg)](https://david-dm.org/yeyus/react-vertical-timeline)
 # react-vertical-timeline - Vertical progress bar with bookmarks support
@@ -6,38 +6,60 @@
 
-* Linting - **npm run lint** - Runs ESLint.
-* Testing - **npm test** and **npm run tdd** - Runs Karma/Mocha/Chai/Phantom. Code coverage report is generated through istanbul/isparta to `build/`.
+Include the following package in your package.json : `npm install --save react-vertical-timeline'`.
 
+Import the UI components into your App:
+
+```js
+import { Timeline, Bookmark } from 'react-vertical-timeline';
+
+...
+```
+
+See [demo](#demo) section
+## Development
+
+Clone the repo : `git clone https://github.com/yeyus/react-vertical-timeline`.
+
+To get started with fresh history, do this:
+
+1. `cd react-vertical-timeline`
+4. `npm install` - Install all dependencies
+5. `npm start` - Start demo site
+
+### Common Tasks
+
 * Developing - **npm start** - Runs the development server at *localhost:8080* and use Hot Module Replacement. You can override the default host and port through env (`HOST`, `PORT`).
-* Creating a version - **npm version <x.y.z>** - Updates */dist* and *package.json* with the new version and create a version tag to Git.
+* Creating a version - **npm version <x.y.z>**.
 * Publishing a version - **npm publish** - Pushes a new version to npm and updates the project site.
 
-If you don't want to use universal rendering for the React portion, set `RENDER_UNIVERSAL` to `false` at *webpack.config.babel.js*.
-
 ### Testing
 
-The test setup is based on Karma/Mocha/Chai/Phantom. Code coverage report is generated through istanbul/isparta to `build/`.
+The test setup is based on Jest. Code coverage report is generated to `coverage/`. The coverage information is also uploaded to codecov.io after a successful Travis build.
 
 * Running tests once - **npm test**
-* Running tests continuously **npm run test:tdd**
+* Running tests continuously - **npm run test:watch**
+* Running individual tests - **npm test -- <pattern>** - Works with `test:watch` too.
 * Linting - **npm run test:lint** - Runs ESLint.
 
-### Demo Site
+### Documentation Site
 
-The boilerplate includes a [GitHub Pages](https://pages.github.com/) specific portion for setting up a demo site for the component. The main commands handle with the details for you. Sometimes you might want to generate and deploy it by hand, or just investigate the generated bundle.
+The boilerplate includes a [GitHub Pages](https://pages.github.com/) specific portion for setting up a documentation site for the component. The main commands handle with the details for you. Sometimes you might want to generate and deploy it by hand, or just investigate the generated bundle.
 
-* Building - **npm run gh-pages** - Builds the demo into `./gh-pages` directory.
+* Building - **npm run gh-pages** - Builds the documentation into `./gh-pages` directory.
 * Deploying - **npm run deploy-gh-pages** - Deploys the contents of `./gh-pages` to the `gh-pages` branch. GitHub will pick this up automatically. Your site will be available through *<user name>.github.io/<project name>`.
 * Generating stats - **npm run stats** - Generates stats that can be passed to [webpack analyse tool](https://webpack.github.io/analyse/). This is useful for investigating what the build consists of.
 
-## Highlighting Demo for the Site
+## Demo
 
-```html
-<Timeline height={300} progress={50} onSelect={fn..}>
-  <Bookmark progress={20} onSelect={fn..}>
+```jsx
+state: { progress: 50 }
+---
+<Timeline height={300} progress={ state.progress } onSelect={p => setState({ progress: p })}>
+  <Bookmark progress={20} onSelect={p => setState({ progress: p})}>
     Hi there 20%
   </Bookmark>
-  <Bookmark progress={55} onSelect={fn..}>
+  <Marker progress={33}/>
+  <Bookmark progress={55} onSelect={p => setState({ progress: p})}>
     Hi there 55%
   </Bookmark>
-  <Bookmark progress={75} onSelect={fn..}>
+  <Bookmark progress={75} onSelect={p => setState({ progress: p})}>
     Hi there 75%
@@ -44,0 +66,0 @@ </Bookmark>

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

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

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

Improved metrics

Dev dependency count

30

decreased by-40%

Number of package files

33

increased by50%

Number of lines in readme file

73

increased by43.14%

Worsened metrics

Total package byte prevSize

115230

decreased by-49.33%

Dependency count

1

increased byInfinity%

Lines of code

1281

decreased by-4.97%

Number of low supply chain risk alerts

8

increased by300%

Number of medium supply chain risk alerts

2

increased by100%

No dependency changes