Merge pull request #5 from rafaelklaessen/v1.1.0

v1.1.0

Author: rafaelklaessen

CHANGELOG.md

@@ -1,3 +1,11 @@
+# Version 1.1.0
+Released 2018-03-28
+
+- Fixed dependency versions in `package.json`
+- Moved from `PureComponent` to `Component`
+- Added `onDragStart` and `onDragStop` callbacks
+- Updated README
+
 # Version 1.0.1
 Released 2018-03-23
 

README.md

@@ -54,6 +54,8 @@ export default class App extends Component {
         equalColor="blue"
         style={{ marginBottom: 40 }}
         onSlide={this.handleSlide}
+        onDragStart={progress => console.log(`Started dragging: ${progress}%`)}
+        onDragStop={progress => console.log(`Stopped dragging: ${progress}%`)}
         roundedCorners
         reversed
       />
@@ -80,8 +82,10 @@ Prop | Description | Type | Default
 `slidableZoneSize` | Size of the zone in which sliders can be dragged | `number` or `string` | `7px`,
 `backgroundColor` | Background color of the slider | `string` | `#EEEEEE`
 `equalColor` | Color of all bars when their values are equal | `string` |
-`style` | Custom style for the slider | `object` or `function` | `{}`
-`onSlide*` | Callback that gets called when the progress is updated | `function` |
+`style` | Custom style for the slider <br> *Signature:* <br> `function(props: object) => object` | `object` or `function` | `{}`
+`onSlide` | Callback that is fired when the progress was set <br> *Signature:* <br> `function(progress: number) => void` | `function` |
+`onDragStart` | Callback function that is fired when the slider has begun to move <br> *Signature:* <br> `function(progress: number) => void` | `function` |
+`onDragStop`| Callback function that is fired when the slide has stopped moving <br> *Signature:* <br> `function(progress: number) => void` | `function` |
 `roundedCorners` | When set to `true`, the slider has rounded corners | `bool` | `false`
 `reversed` | When set to `true`, the slider is reversed | `bool` | `false`
 `readOnly` | When set to `true`, the slider can't be updated | `bool` | `false`
@@ -94,7 +98,7 @@ Prop | Description | Type | Default
 ----- | ----------- | ---- | -------
 `color*` | Color of the progress bar | `string` |
 `progress*` | Progress of the progress bar | `number` |
-`style` | Custom style for the progress bar | `object` or `function` |
+`style` | Custom style for the progress bar <br> *Signature:* <br> `function(props: object) => object` | `object` or `function` |
 `children` | The slider dot (or any other children) | `node` |
 
 All other props (not documented here) will be passed on to the root element.
@@ -106,8 +110,8 @@ Prop | Description | Type | Default
 `height` | Height of the dot | `number` or `string` | `50` when the dot has an icon, `28` if not
 `color` | Color of the dot | `string` |
 `icon` | URL of the image to use as dot icon | `string` |
-`style` | Custom style for the dot | `object` or `function` |
-`iconStyle` | Custom style for the dot icon | `object` or `function` |
+`style` | Custom style for the dot <br> *Signature:* <br> `function(props: object) => object` | `object` or `function` |
+`iconStyle` | Custom style for the dot icon <br> *Signature:* <br> `function(props: object) => object` | `object` or `function` |
 `children` | Children of the dot | `node` |
 
 All other props (not documented here) will be passed on to the root element.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-multi-bar-slider",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Slider component with multiple bars for React",
   "repository": {
     "type": "git",
@@ -19,11 +19,11 @@
     "react multi slider"
   ],
   "peerDependencies": {
-    "glamor": "^2.20.40",
-    "glamorous": "^4.12.1",
-    "prop-types": "^15.6.1",
-    "react": "^15.3.0 || ^16.0.0",
-    "react-dom": "^15.3.0 || ^16.0.0"
+    "glamor": "^2.x",
+    "glamorous": "^4.x",
+    "prop-types": "^15.x",
+    "react": "^15.3.x || ^16.x",
+    "react-dom": "^15.3.x || ^16.x"
   },
   "scripts": {
     "build": "webpack --config webpack.config.babel.js",
@@ -37,6 +37,7 @@
     "babel-eslint": "^8.0.1",
     "babel-jest": "^22.1.0",
     "babel-loader": "^7.1.2",
+    "babel-preset-env": "^1.6.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
     "clean-webpack-plugin": "^0.1.16",
@@ -53,8 +54,5 @@
     "react-dom": "^16.2.0",
     "react-test-renderer": "^16.2.0",
     "webpack": "^3.8.1"
-  },
-  "dependencies": {
-    "babel-preset-env": "^1.6.1"
   }
 }

src/MultiSlider/Slider.js

@@ -8,7 +8,6 @@ const Slider = ({
   height,
   backgroundColor,
   style,
-  onSlide,
   onMouseMoveActivate,
   onMouseMoveDeactivate,
   onMouseMove,
@@ -30,7 +29,6 @@ const Slider = ({
       roundedCorners,
       readOnly
     })}
-    onClick={onSlide}
     onMouseDown={onMouseMoveActivate}
     onMouseUp={onMouseMoveDeactivate}
     onMouseLeave={onMouseMoveDeactivate}
@@ -54,7 +52,6 @@ Slider.propTypes = {
   ]).isRequired,
   backgroundColor: PropTypes.string.isRequired,
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired,
-  onSlide: PropTypes.func.isRequired,
   onMouseMoveActivate: PropTypes.func.isRequired,
   onMouseMoveDeactivate: PropTypes.func.isRequired,
   onMouseMove: PropTypes.func.isRequired,

src/MultiSlider/__tests__/__snapshots__/Slider.test.js.snap

@@ -3,7 +3,6 @@
 exports[`Slider.js matches the snapshot 1`] = `
 <div
   className="css-975bpe"
-  onClick={[Function]}
   onMouseDown={[Function]}
   onMouseLeave={[Function]}
   onMouseMove={[Function]}

src/MultiSlider/index.js

@@ -1,12 +1,12 @@
-import React, { PureComponent, Children } from 'react';
+import React, { Component, Children } from 'react';
 import PropTypes from 'prop-types';
 import getProgressFromMousePosition from '../utils/getProgressFromMousePosition';
 import progressEqual from '../utils/progressEqual';
 import sortProgress from '../utils/sortProgress';
 import Slider from './Slider';
 import SlidableZone from './SlidableZone';
 
-export default class MultiSlider extends PureComponent {
+export default class MultiSlider extends Component {
   static displayName = 'MultiSlider';
 
   static propTypes = {
@@ -17,6 +17,8 @@ export default class MultiSlider extends PureComponent {
     equalColor: PropTypes.string,
     style: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
     onSlide: PropTypes.func,
+    onDragStart: PropTypes.func,
+    onDragStop: PropTypes.func,
     roundedCorners: PropTypes.bool,
     reversed: PropTypes.bool,
     readOnly: PropTypes.bool,
@@ -53,8 +55,29 @@ export default class MultiSlider extends PureComponent {
     onSlide(newProgress);
   };
 
-  handleMouseMoveActivate = () => this.setState({ mouseDown: true });
-  handleMouseMoveDeactivate = () => this.setState({ mouseDown: false });
+  handleMouseMoveActivate = (e) => {
+    if (this.state.mouseDown) return;
+    this.setState({ mouseDown: true });
+
+    const { onDragStart, reversed } = this.props;
+    if (onDragStart) {
+      const progress = getProgressFromMousePosition(e, reversed);
+      onDragStart(progress);
+    }
+  };
+
+  handleMouseMoveDeactivate = (e) => {
+    if (!this.state.mouseDown) return;
+    this.setState({ mouseDown: false });
+
+    this.handleSlide(e);
+
+    const { onDragStop, reversed } = this.props;
+    if (onDragStop) {
+      const progress = getProgressFromMousePosition(e, reversed);
+      onDragStop(progress);
+    }
+  };
 
   handleMouseMove = (e) => {
     if (!this.state.mouseDown) return;
@@ -86,7 +109,6 @@ export default class MultiSlider extends PureComponent {
         height={height}
         backgroundColor={backgroundColor}
         style={style}
-        onSlide={this.handleSlide}
         onMouseMoveActivate={this.handleMouseMoveActivate}
         onMouseMoveDeactivate={this.handleMouseMoveDeactivate}
         onMouseMove={this.handleMouseMove}

src/__tests__/MultiSlider.test.js

@@ -116,7 +116,8 @@ describe('MultiSlider.js', () => {
         <Child progress={4} />
       </MultiSlider>
     );
-    multiSlider.find(Slider).prop('onSlide')({
+    multiSlider.find(Slider).prop('onMouseMoveActivate')();
+    multiSlider.find(Slider).prop('onMouseMoveDeactivate')({
       target: {
         classList: [],
         getBoundingClientRect: () => ({
@@ -149,14 +150,47 @@ describe('MultiSlider.js', () => {
     multiSlider.find(Slider).prop('onMouseMove')(fakeEvent);
     expect(onSlide.mock.calls.length).toBe(0);
 
-    multiSlider.find(Slider).prop('onMouseMoveActivate')();
+    multiSlider.find(Slider).prop('onMouseMoveActivate')(fakeEvent);
     multiSlider.update();
     multiSlider.find(Slider).prop('onMouseMove')(fakeEvent);
     expect(onSlide.mock.calls[0][0]).toBe(89);
 
-    multiSlider.find(Slider).prop('onMouseMoveDeactivate')();
+    multiSlider.find(Slider).prop('onMouseMoveDeactivate')(fakeEvent);
+    expect(onSlide.mock.calls.length).toBe(2);
     multiSlider.update();
     multiSlider.find(Slider).prop('onMouseMove')(fakeEvent);
-    expect(onSlide.mock.calls.length).toBe(1);
+    expect(onSlide.mock.calls.length).toBe(2);
+  });
+
+  it('calls onDragStart and onDragStop correctly', () => {
+    const onDragStart = jest.fn();
+    const onDragStop = jest.fn();
+    const multiSlider = shallow(
+      <MultiSlider
+        {...multiSliderProps}
+        onDragStart={onDragStart}
+        onDragStop={onDragStop}
+      >
+        <Child progress={4} />
+      </MultiSlider>
+    );
+    const fakeEvent = {
+      target: {
+        classList: [],
+        getBoundingClientRect: () => ({
+          left: 154,
+          width: 876
+        })
+      },
+      pageX: 933.64
+    };
+    multiSlider.instance().handleMouseMoveActivate(fakeEvent);
+    expect(onDragStart.mock.calls.length).toBe(1);
+    expect(onDragStop.mock.calls.length).toBe(0);
+    expect(onDragStart.mock.calls[0][0]).toBe(89);
+    multiSlider.instance().handleMouseMoveDeactivate(fakeEvent);
+    expect(onDragStart.mock.calls.length).toBe(1);
+    expect(onDragStop.mock.calls.length).toBe(1);
+    expect(onDragStop.mock.calls[0][0]).toBe(89);
   });
 });

src/__tests__/__snapshots__/MultiSlider.test.js.snap

@@ -3,7 +3,6 @@
 exports[`MultiSlider.js matches the snapshot 1`] = `
 <div
   className="css-1i6y0pe"
-  onClick={[Function]}
   onMouseDown={[Function]}
   onMouseLeave={[Function]}
   onMouseMove={[Function]}

yarn.lock

@@ -1339,8 +1339,8 @@ camelcase@^4.1.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
 
 caniuse-lite@^1.0.30000792:
-  version "1.0.30000819"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000819.tgz#aabee5fd15a080febab6ae5d30c9ea15f4c6d4e2"
+  version "1.0.30000821"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000821.tgz#0f3223f1e048ed96451c56ca6cf197058c42cb93"
 
 caseless@~0.12.0:
   version "0.12.0"
@@ -1849,8 +1849,8 @@ ecc-jsbn@~0.1.1:
     jsbn "~0.1.0"
 
 electron-to-chromium@^1.3.30:
-  version "1.3.40"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.40.tgz#1fbd6d97befd72b8a6f921dc38d22413d2f6fddf"
+  version "1.3.41"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.41.tgz#7e33643e00cd85edfd17e04194f6d00e73737235"
 
 elliptic@^6.0.0:
   version "6.4.0"