react-input-range - npm Package Compare versions

Comparing version 1.0.2 to 1.1.0

CHANGELOG.md

@@ -0,1 +1,11 @@
+<a name="1.1.0"></a>
+# [1.1.0](https://github.com/davidchin/react-input-range/compare/v1.0.2...v1.1.0) (2017-03-26)
+
+
+### Features
+
+* Add a callback prop responsible for notifying the start of any interaction ([#66](https://github.com/davidchin/react-input-range/issues/66)) ([4ca6ea2](https://github.com/davidchin/react-input-range/commit/4ca6ea2))
+
+
+
 <a name="1.0.2"></a>
@@ -2,0 +12,0 @@ ## [1.0.2](https://github.com/davidchin/react-input-range/compare/v1.0.1...v1.0.2) (2017-02-01)

lib/js/input-range/input-range.js

@@ -116,2 +116,3 @@ 'use strict';
         name: _react2.default.PropTypes.string,
+        onChangeStart: _react2.default.PropTypes.func,
         onChange: _react2.default.PropTypes.func.isRequired,
@@ -154,2 +155,3 @@ onChangeComplete: _react2.default.PropTypes.func,
      * @param {Function} [props.onChangeComplete]
+     * @param {Function} [props.onChangeStart]
      * @param {number} [props.step = 1]
@@ -574,7 +576,9 @@ * @param {number|Range} props.value
     value: function handleInteractionStart() {
-      if (!this.props.onChangeComplete || (0, _utils.isDefined)(this.startValue)) {
-        return;
+      if (this.props.onChangeStart) {
+        this.props.onChangeStart(this.props.value);
       }
 
-      this.startValue = this.props.value;
+      if (this.props.onChangeComplete && !(0, _utils.isDefined)(this.startValue)) {
+        this.startValue = this.props.value;
+      }
     }
@@ -581,0 +585,0 @@

package.json

 {
   "name": "react-input-range",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "React component for inputting numeric values within a range",
@@ -39,3 +39,3 @@ "keywords": [
     "conventional-changelog-cli": "~1.2.0",
-    "css-loader": "^0.26.1",
+    "css-loader": "^0.27.3",
     "dom4": "^1.8.3",
@@ -49,5 +49,5 @@ "enzyme": "^2.7.1",
     "eslint-plugin-import": "^2.2.0",
-    "eslint-plugin-jsx-a11y": "^3.0.2",
+    "eslint-plugin-jsx-a11y": "^4.0.0",
     "eslint-plugin-react": "^6.9.0",
-    "extract-text-webpack-plugin": "^1.0.1",
+    "extract-text-webpack-plugin": "^2.1.0",
     "jasmine-core": "^2.5.2",
@@ -68,7 +68,7 @@ "karma": "^1.4.0",
     "sass-lint": "^1.10.2",
-    "sass-loader": "^4.1.1",
+    "sass-loader": "^6.0.3",
     "sasslint-webpack-plugin": "^1.0.4",
-    "style-loader": "^0.13.1",
-    "webpack": "^1.14.0",
-    "webpack-dev-server": "^1.16.2"
+    "style-loader": "^0.14.0",
+    "webpack": "^2.2.1",
+    "webpack-dev-server": "^2.4.2"
   },
@@ -80,9 +80,9 @@ "peerDependencies": {
   "scripts": {
-    "prebuild": "npm run test && rm -rf lib",
+    "prebuild": "npm test && rm -rf lib",
     "build": "npm run build:lib && npm run build:scss && npm run build:bundle",
-    "build:bundle": "NODE_ENV=production webpack",
+    "build:bundle": "NODE_ENV=production webpack -p",
     "build:lib": "NODE_ENV=production babel src/js --out-dir lib/js --source-maps",
     "build:scss": "NODE_ENV=production node-sass src/scss --recursive --source-map true --output lib/css",
     "changelog": "conventional-changelog --preset angular --infile CHANGELOG.md --same-file",
-    "dev": "webpack-dev-server --inline --config webpack-example.config.js --content-base example",
+    "dev": "webpack-dev-server --inline --config webpack-example.config.babel.js --content-base example",
     "docs": "esdoc",
@@ -89,0 +89,0 @@ "lint": "npm run lint:js && npm run lint:scss",

react-input-range.d.ts

@@ -31,2 +31,3 @@ import * as React from 'react';
   onChange: (value: Range | number) => void;
+  onChangeStart?: (value: Range | number) => void;
   onChangeComplete?: (value: Range | number) => void;
@@ -33,0 +34,0 @@ step?: number;

README.md

@@ -12,3 +12,3 @@ # react-input-range
 
-1. Install `react-input-range` using npm. `npm install react-input-range`
+1. Install `react-input-range` using npm (or [yarn]). `npm install react-input-range`
 2. Import `react-input-range` to use `InputRange` component.
@@ -30,12 +30,6 @@ 3. Optionally, import `react-input-range/lib/css/index.css` if you want to apply the default styling.
     this.state = {
-      values: { min: 2, max: 10 },
+      value: { min: 2, max: 10 },
     };
-
-    this.handleChange = this.handleChange.bind(this);
   }
 
-  handleChange(values) {
-    this.setState({ values });
-  }
-
   render() {
@@ -46,4 +40,4 @@ return (
         minValue={0}
-        value={this.state.values}
-        onChange={this.handleChange} />
+        value={this.state.value}
+        onChange={value => this.setState({ value })} />
     );
@@ -61,7 +55,19 @@ }
 ```jsx
-<InputRange
-  maxValue={20}
-  minValue={0}
-  value={this.state.value}
-  onChange={this.handleChange} />
+class App extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = { value: 10 };
+  }
+
+  render() {
+    return (
+      <InputRange
+        maxValue={20}
+        minValue={0}
+        value={this.state.value}
+        onChange={value => this.setState({ value })} />
+    );
+  }
+}
 ```
@@ -72,5 +78,5 @@
 <InputRange
-  formatLabel={(value) => `${value}cm`}
+  formatLabel={value => `${value}cm`}
   value={this.state.value}
-  onChange={this.handleChange} />
+  onChange={value => this.setState({ value })} />
 ```
@@ -83,3 +89,3 @@
   value={this.state.value}
-  onChange={this.handleChange} />
+  onChange={value => this.setState({ value })} />
 ```
@@ -127,2 +133,6 @@
 
+#### onChangeStart: (value: number | Range): void
+
+Whenever your user starts interacting with your component (i.e.: `onMouseDown`, or `onTouchStart`), this function gets called.
+
 #### onChangeComplete: (value: number | Range): void
@@ -160,5 +170,6 @@
 
-If you want to work on this project locally, you need to grab all of its dependencies.
+If you want to work on this project locally, you need to grab all of its dependencies, for which 
+we recommend using [yarn]. You can find the instructions to setup yarn [here](https://yarnpkg.com/docs/install).
 ```
-npm install
+yarn install
 ```
@@ -168,3 +179,3 @@
 ```
-npm run dev
+yarn dev
 ```
@@ -174,5 +185,7 @@
 ```
-npm test
+yarn test
 ```
 
 Contributions are welcome. :)
+
+[yarn]: https://yarnpkg.com/

src/js/input-range/input-range.jsx

@@ -33,2 +33,3 @@ import React from 'react';
       name: React.PropTypes.string,
+      onChangeStart: React.PropTypes.func,
       onChange: React.PropTypes.func.isRequired,
@@ -68,2 +69,3 @@ onChangeComplete: React.PropTypes.func,
    * @param {Function} [props.onChangeComplete]
+   * @param {Function} [props.onChangeStart]
    * @param {number} [props.step = 1]
@@ -415,7 +417,9 @@ * @param {number|Range} props.value
   handleInteractionStart() {
-    if (!this.props.onChangeComplete || isDefined(this.startValue)) {
-      return;
+    if (this.props.onChangeStart) {
+      this.props.onChangeStart(this.props.value);
     }
 
-    this.startValue = this.props.value;
+    if (this.props.onChangeComplete && !isDefined(this.startValue)) {
+      this.startValue = this.props.value;
+    }
   }
@@ -422,0 +426,0 @@

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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

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

Number of package files

82

increased by3.8%

Number of lines in readme file

182

increased by7.69%

Worsened metrics

Total package byte prevSize

736654

decreased by-35.87%

Lines of code

3361

decreased by-61.49%

Number of low quality alerts

3

increased by200%

No dependency changes