Merge pull request #132 from BHP-DevHub/master

Release v1.0.8

Author: lilfolr

package.json

@@ -1,12 +1,12 @@
 {
   "name": "react-timeline-9000",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "Performance focused timeline for react",
   "private": false,
   "scripts": {
     "build": "webpack --config webpack.prod.js",
     "build_lib": "babel src --out-dir lib --ignore demo*,setupTests.js,*.test.js --copy-files --source-maps inline",
-    "build_demo": "webpack --config webpack.dev.js",
+    "build_demo": "webpack --config webpack.demo.prod.js",
     "start": "webpack-dev-server --open --config webpack.dev.js",
     "docs": "esdoc",
     "pretty": "prettier --write --tab-width 4 \"src/**/*.js\"",

src/timeline.js

@@ -123,6 +123,7 @@ export default class Timeline extends React.Component {
     this.updateDimensions = this.updateDimensions.bind(this);
     this.grid_ref_callback = this.grid_ref_callback.bind(this);
     this.select_ref_callback = this.select_ref_callback.bind(this);
+    this.throttledMouseMoveFunc = _.throttle(this.throttledMouseMoveFunc.bind(this), 20);
     this.mouseMoveFunc = this.mouseMoveFunc.bind(this);
     this.getCursor = this.getCursor.bind(this);
 
@@ -135,6 +136,7 @@ export default class Timeline extends React.Component {
   componentDidMount() {
     window.addEventListener('resize', this.updateDimensions);
   }
+
   componentWillReceiveProps(nextProps) {
     this.setTimeMap(nextProps.items, nextProps.startDate, nextProps.endDate);
     // @TODO
@@ -290,7 +292,11 @@ export default class Timeline extends React.Component {
     if (canDrag) {
       this._itemInteractable
         .draggable({
-          enabled: true
+          enabled: true,
+          restrict: {
+            restriction: `.${topDivClassId}`,
+            elementRect: {left: 0, right: 1, top: 0, bottom: 1}
+          }
         })
         .on('dragstart', e => {
           let selections = [];
@@ -729,7 +735,7 @@ export default class Timeline extends React.Component {
    * Event handler for onMouseMove.
    * Only calls back if a new snap time is reached
    */
-  mouseMoveFunc(e) {
+  throttledMouseMoveFunc(e) {
     const {componentId} = this.props;
     const leftOffset = document.querySelector(`.rct9k-id-${componentId} .parent-div`).getBoundingClientRect().left;
     const cursorSnappedTime = getTimeAtPixel(
@@ -753,6 +759,11 @@ export default class Timeline extends React.Component {
     }
   }
 
+  mouseMoveFunc(e) {
+    e.persist();
+    this.throttledMouseMoveFunc(e);
+  }
+
   render() {
     const {onInteraction, groupOffset, timebarFormat, componentId, groupTitleRenderer} = this.props;
 

webpack.demo.prod.js

@@ -0,0 +1,26 @@
+const webpack = require('webpack');
+const merge = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = merge(common, {
+  entry: './src/demo_index.js',
+  mode: 'production',
+  devtool: 'source-map',
+  plugins: [
+    new HtmlWebpackPlugin({
+      title: 'React Timeline 9000',
+      template: 'src/demo.html',
+      chunksSortMode: 'dependency',
+      inject: 'body',
+      minify: {
+        removeComments: false,
+        collapseWhitespace: false
+      }
+    }),
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('production')
+    })
+  ]
+});