react-range-progress - npm Package Compare versions

Comparing version 4.0.2 to 4.0.3

dist/index.js

@@ -29,10 +29,50 @@ 'use strict';
 var trackPosition = exports.trackPosition = function trackPosition(_ref) {
-  var thumbSize = _ref.thumbSize;
-  var height = _ref.height;
+  var thumbSize = _ref.thumbSize,
+      height = _ref.height;
   return {
     top: (thumbSize - Math.min(height, thumbSize)) / 2,
-    height: height + 'px'
+    height: height
   };
 };
 
+var baseStyles = {
+  rootStyle: '\n    input[type=\'range\']::-moz-focus-outer {\n      border: 0;\n    }\n    input[type=range]::-ms-track {\n      width:100%;\n      height:100%;\n\n      -webkit-appearance:none;\n      margin:0px;\n      padding:0px;\n      border:0 none;\n\n      background:transparent;\n      color:transparent;\n      overflow:visible;\n    }\n\n    input[type=range]::-moz-range-track {\n      width:100%;\n      height:100%;\n\n      -moz-appearance:none;\n      margin:0px;\n      padding:0px;\n      border:0 none;\n\n      background:transparent;\n      color:transparent;\n      overflow:visible;\n    }\n\n    input[type=range] {\n      cursor: pointer;\n\n      -webkit-appearance:none;\n      padding:0px;\n      border:0 none;\n\n      background:transparent;\n      color:transparent;\n      overflow:visible;\n    }\n\n    input[type=range]:focus::-webkit-slider-runnable-track {\n      background:transparent;\n      border:transparent;\n    }\n\n    input[type=range]:focus {\n      outline: none;\n    }\n\n    input[type=range]::-ms-thumb {\n      width:12px;\n      height:12px;\n\n      border-radius:0px;\n      border:0 none;\n      background:transparent;\n    }\n    input[type=range]::-moz-range-thumb {\n      width:12px;\n      height:12px;\n\n      border-radius:0px;\n      border:0 none;\n      background:transparent;\n    }\n    input[type=range]::-webkit-slider-thumb {\n      width:12px;\n      height:12px;\n\n      border-radius:0px;\n      border:0 none;\n      background:transparent;\n      -webkit-appearance:none;\n    }\n\n    input[type=range]::-ms-fill-lower {\n      background:transparent;\n      border:0 none;\n    }\n    input[type=range]::-ms-fill-upper {\n      background:transparent;\n      border:0 none;\n    }\n    input[type=range]::-ms-tooltip {\n      display: none;\n    }',
+  baseDiv: {
+    border: '0 none',
+    position: 'relative',
+    left: 0,
+    top: 0,
+    overflow: 'visible'
+  },
+  track: {
+    border: 0,
+    position: 'absolute',
+    width: '100%'
+  },
+  fill: {
+    border: 0,
+    position: 'absolute',
+    pointerEvents: 'none'
+  },
+  thumb: {
+    position: 'absolute',
+    top: 0,
+    border: '0 none',
+    padding: 0,
+    margin: 0,
+    textAlign: 'center',
+    pointerEvents: 'none',
+    boxShadow: '0 0 3px black'
+  },
+  input: {
+    top: 0,
+    WebkitAppearance: 'none',
+    background: 'transparent',
+    position: 'absolute',
+    left: 0,
+    overflow: 'visible',
+    zIndex: 100
+  }
+};
+
 var Range = function (_React$Component) {
@@ -42,18 +82,27 @@ _inherits(Range, _React$Component);
   function Range() {
+    var _ref2;
+
+    var _temp, _this, _ret;
+
     _classCallCheck(this, Range);
 
-    var _this = _possibleConstructorReturn(this, (Range.__proto__ || Object.getPrototypeOf(Range)).call(this));
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
 
-    _this.state = { value: 0 };
-    return _this;
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref2 = Range.__proto__ || Object.getPrototypeOf(Range)).call.apply(_ref2, [this].concat(args))), _this), _this.state = { value: 0 }, _this.onChange = function (e) {
+      if (!_this.props.readOnly) {
+        var newVal = parseInt(e.nativeEvent ? e.nativeEvent.target.value : e, 10);
+        _this.setState({ value: newVal });
+        _this.props.onChange && _this.props.onChange(newVal);
+      }
+    }, _temp), _possibleConstructorReturn(_this, _ret);
   }
 
   _createClass(Range, [{
-    key: 'onChange',
-    value: function onChange(e) {
-      if (!this.props.readOnly) {
-        var newVal = parseInt(e.nativeEvent ? e.nativeEvent.target.value : e, 10);
-        this.setState({ value: newVal });
-        this.props.onChange && this.props.onChange(newVal);
-      }
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(nextProps) {
+      this.setState({
+        value: nextProps.value
+      });
     }
@@ -63,14 +112,24 @@ }, {
     value: function render() {
-      var val = Math.min(this.props.max, this.state.value || this.props.value);
-      var min = this.props.min;
-      var max = this.props.max;
+      var _props = this.props,
+          value = _props.value,
+          min = _props.min,
+          max = _props.max,
+          thumbSize = _props.thumbSize,
+          width = _props.width,
+          trackColor = _props.trackColor,
+          height = _props.height,
+          fillColor = _props.fillColor,
+          hideThumb = _props.hideThumb,
+          thumbColor = _props.thumbColor;
 
+
+      var val = Math.min(max, this.state.value || value);
+
       var percentProgress = val / (max - min);
 
-      var componentHeight = Math.max(this.props.height, this.props.thumbSize);
+      var componentHeight = Math.max(height, thumbSize);
 
       return _react2.default.createElement(
         'div',
-        {
-          style: { width: this.props.width } },
+        { style: { width: width } },
         _react2.default.createElement(
@@ -80,48 +139,36 @@ 'div',
             id: 'rrp-baseDiv',
-            style: {
-              height: componentHeight + 'px',
-              border: '0 none',
-              position: 'relative',
-              left: 0,
-              top: 0,
-              overflow: 'visible'
-            } },
-          _react2.default.createElement('style', { dangerouslySetInnerHTML: {
-              __html: '\n                 input[type=\'range\']::-moz-focus-outer {\n                   border: 0;\n                 }\n                 input[type=range]::-ms-track {\n                   width:100%;\n                   height:100%;\n\n                   -webkit-appearance:none;\n                   margin:0px;\n                   padding:0px;\n                   border:0 none;\n\n                   background:transparent;\n                   color:transparent;\n                   overflow:visible;\n                 }\n\n                 input[type=range]::-moz-range-track {\n                   width:100%;\n                   height:100%;\n\n                   -moz-appearance:none;\n                   margin:0px;\n                   padding:0px;\n                   border:0 none;\n\n                   background:transparent;\n                   color:transparent;\n                   overflow:visible;\n                 }\n\n                 input[type=range] {\n                   cursor: pointer;\n\n                   -webkit-appearance:none;\n                   padding:0px;\n                   border:0 none;\n\n                   background:transparent;\n                   color:transparent;\n                   overflow:visible;\n                 }\n\n                 input[type=range]:focus::-webkit-slider-runnable-track {\n                   background:transparent;\n                   border:transparent;\n                 }\n\n                 input[type=range]:focus {\n                   outline: none;\n                 }\n\n                 input[type=range]::-ms-thumb {\n                   width:12px;\n                   height:12px;\n\n                   border-radius:0px;\n                   border:0 none;\n                   background:transparent;\n                 }\n                 input[type=range]::-moz-range-thumb {\n                   width:12px;\n                   height:12px;\n\n                   border-radius:0px;\n                   border:0 none;\n                   background:transparent;\n                 }\n                 input[type=range]::-webkit-slider-thumb {\n                   width:12px;\n                   height:12px;\n\n                   border-radius:0px;\n                   border:0 none;\n                   background:transparent;\n                   -webkit-appearance:none;\n                 }\n\n                 input[type=range]::-ms-fill-lower {\n                   background:transparent;\n                   border:0 none;\n                 }\n                 input[type=range]::-ms-fill-upper {\n                   background:transparent;\n                   border:0 none;\n                 }\n                 input[type=range]::-ms-tooltip {\n                    display: none;\n                 }'
-            } }),
+            style: _extends({}, baseStyles.baseDiv, {
+              height: componentHeight
+            })
+          },
+          _react2.default.createElement('style', {
+            dangerouslySetInnerHTML: {
+              __html: baseStyles.rootStyle
+            }
+          }),
           _react2.default.createElement('div', {
             id: 'rrp-track',
-            style: _extends({
-              border: 0,
-              position: 'absolute',
-              background: toRgbaString(this.props.trackColor),
-              borderRadius: this.props.height + 'px',
-              width: '100%'
-            }, trackPosition(this.props)) }),
+            style: _extends({}, baseStyles.track, {
+              borderRadius: height,
+              background: toRgbaString(trackColor)
+            }, trackPosition(this.props))
+          }),
           _react2.default.createElement('div', {
             id: 'rrp-fill',
-            style: _extends({
-              border: 0,
-              position: 'absolute',
-              pointerEvents: 'none',
-              borderRadius: this.props.height + 'px',
-              background: toRgbaString(this.props.fillColor),
+            style: _extends({}, baseStyles.fill, {
+              borderRadius: height,
+              background: toRgbaString(fillColor),
               width: 'calc(100% * ' + percentProgress + ' + ' + (1 - percentProgress) * componentHeight + 'px)'
-            }, trackPosition(this.props)) }),
-          this.props.hideThumb ? null : _react2.default.createElement('div', {
+            }, trackPosition(this.props))
+          }),
+          hideThumb ? null : _react2.default.createElement('div', {
             id: 'rrp-thumb',
-            style: {
-              position: 'absolute',
-              top: 0,
-              border: '0 none',
-              padding: 0,
-              margin: 0,
-              textAlign: 'center',
-              pointerEvents: 'none',
+            style: _extends({}, baseStyles.thumb, {
               width: componentHeight,
-              height: componentHeight + 'px',
-              borderRadius: componentHeight + 'px',
-              background: toRgbaString(this.props.thumbColor),
-              boxShadow: '0 0 3px black',
-              left: 'calc((100% - ' + componentHeight + 'px) * ' + percentProgress + ')' } }),
+              height: componentHeight,
+              borderRadius: componentHeight,
+              background: toRgbaString(thumbColor),
+              left: 'calc((100% - ' + componentHeight + 'px) * ' + percentProgress + ')'
+            })
+          }),
           _react2.default.createElement('input', {
@@ -132,15 +179,9 @@ style: _extends({}, trackPosition(this.props), {
               marginRight: componentHeight / 2,
-              top: 0,
-              height: componentHeight,
-              WebkitAppearance: 'none',
-              background: 'transparent',
-              position: 'absolute',
-              left: 0,
-              overflow: 'visible',
-              zIndex: 100
-            }),
+              height: componentHeight
+            }, baseStyles.input),
             type: 'range',
-            onChange: this.onChange.bind(this),
+            onChange: this.onChange,
             min: min,
-            max: max })
+            max: max
+          })
         )
@@ -147,0 +188,0 @@ );

package.json

 {
   "name": "react-range-progress",
-  "version": "4.0.2",
+  "version": "4.0.3",
   "description": "Eases styling of sliders (range inputs).",
@@ -13,3 +13,3 @@ "main": "dist/index.js",
     "report-coverage": "cat ./coverage/lcov.info | codecov",
-    "check-coverage": "nyc check-coverage --functions 75",
+    "check-coverage": "nyc check-coverage --functions 50",
     "build": "./node_modules/.bin/babel ./src/index.js -o ./dist/index.js",
@@ -41,2 +41,3 @@ "prepublish": "npm run build",
   "devDependencies": {
+    "cz-conventional-changelog": "^2.0.0",
     "autoprefixer": "6.4.0",
@@ -61,3 +62,3 @@ "babel-cli": "6.14.0",
     "react-unit": "2.0.0",
-    "semantic-release": "^4.3.5",
+    "semantic-release": "^6.3.6",
     "tape": "4.6.0",
@@ -64,0 +65,0 @@ "tape-jsx-equals": "1.0.0"

README.md

 react-range-progress
 =======================
 
+
 [![Travis](https://img.shields.io/travis/vgrafe/react-range-progress.svg?maxAge=2592000)](https://travis-ci.org/vgrafe/react-range-progress) [![Codecov](https://img.shields.io/codecov/c/github/vgrafe/react-range-progress.svg?maxAge=2592000)](https://codecov.io/gh/vgrafe/react-range-progress) [![npm](https://img.shields.io/npm/dt/react-range-progress.svg?maxAge=2592000)](https://www.npmjs.com/package/react-range-progress)
@@ -14,5 +15,7 @@
 
+You can also import from [npmcdn](https://npmcdn.com/react-range-progress) or [unpkg](https://unpkg.com/react-range-progress).
+
 ## Playground
 
-You can play around with a few properties on [webpackbin](http://www.webpackbin.com/VkXZkAUsW)
+You can play around with a few properties on [codesandbox](https://codesandbox.io/s/JqRpW8Mw2)
 
@@ -85,2 +88,8 @@ ## Props
 
-MIT. Copyright (c) 2016 Vincent Grafé.
+MIT. Copyright (c) 2017 Vincent Grafé.
+
+
+## Disclaimer
+
+This package main purpose was to teach myself about publishing a package on npm.
+Now I see there are a few monthly downloads, I advise any user to look at the source before using this package. If you can just style a couple of divs into a range, do it instead. Styling a range input may be overkill to reach the desired goal.

src/index.js

@@ -1,199 +0,244 @@
-import React, { PropTypes } from 'react'
+import React, { PropTypes } from 'react';
 
-export const toRgbaString = rgbaObject => `rgba(${rgbaObject.r}, ${rgbaObject.g}, ${rgbaObject.b}, ${rgbaObject.a})`
+export const toRgbaString = rgbaObject =>
+  `rgba(${rgbaObject.r}, ${rgbaObject.g}, ${rgbaObject.b}, ${rgbaObject.a})`;
 
-export const trackPosition = ({thumbSize, height}) => ({
+export const trackPosition = ({ thumbSize, height }) => ({
   top: (thumbSize - Math.min(height, thumbSize)) / 2,
-  height: height + 'px'
-})
+  height
+});
 
-class Range extends React.Component {
-  constructor () {
-    super()
-    this.state = {value: 0}
-  }
+const baseStyles = {
+  rootStyle: `
+    input[type='range']::-moz-focus-outer {
+      border: 0;
+    }
+    input[type=range]::-ms-track {
+      width:100%;
+      height:100%;
 
-  onChange (e) {
-    if (!this.props.readOnly) {
-      const newVal = parseInt(e.nativeEvent ? e.nativeEvent.target.value : e, 10)
-      this.setState({value: newVal})
-      this.props.onChange && this.props.onChange(newVal)
+      -webkit-appearance:none;
+      margin:0px;
+      padding:0px;
+      border:0 none;
+
+      background:transparent;
+      color:transparent;
+      overflow:visible;
     }
-  }
 
-  render () {
-    const val = Math.min(this.props.max, this.state.value || this.props.value)
-    const min = this.props.min
-    const max = this.props.max
+    input[type=range]::-moz-range-track {
+      width:100%;
+      height:100%;
 
-    const percentProgress = val / (max - min)
+      -moz-appearance:none;
+      margin:0px;
+      padding:0px;
+      border:0 none;
 
-    const componentHeight = Math.max(this.props.height, this.props.thumbSize)
+      background:transparent;
+      color:transparent;
+      overflow:visible;
+    }
 
-    return <div
-            style={{width: this.props.width}}>
-            <div
-             id='rrp-baseDiv'
-             style={{
-               height: componentHeight + 'px',
-               border: '0 none',
-               position: 'relative',
-               left: 0,
-               top: 0,
-               overflow: 'visible'
-             }}>
-             <style dangerouslySetInnerHTML={{
-               __html:
-                 `
-                 input[type='range']::-moz-focus-outer {
-                   border: 0;
-                 }
-                 input[type=range]::-ms-track {
-                   width:100%;
-                   height:100%;
+    input[type=range] {
+      cursor: pointer;
 
-                   -webkit-appearance:none;
-                   margin:0px;
-                   padding:0px;
-                   border:0 none;
+      -webkit-appearance:none;
+      padding:0px;
+      border:0 none;
 
-                   background:transparent;
-                   color:transparent;
-                   overflow:visible;
-                 }
+      background:transparent;
+      color:transparent;
+      overflow:visible;
+    }
 
-                 input[type=range]::-moz-range-track {
-                   width:100%;
-                   height:100%;
+    input[type=range]:focus::-webkit-slider-runnable-track {
+      background:transparent;
+      border:transparent;
+    }
 
-                   -moz-appearance:none;
-                   margin:0px;
-                   padding:0px;
-                   border:0 none;
+    input[type=range]:focus {
+      outline: none;
+    }
 
-                   background:transparent;
-                   color:transparent;
-                   overflow:visible;
-                 }
+    input[type=range]::-ms-thumb {
+      width:12px;
+      height:12px;
 
-                 input[type=range] {
-                   cursor: pointer;
+      border-radius:0px;
+      border:0 none;
+      background:transparent;
+    }
+    input[type=range]::-moz-range-thumb {
+      width:12px;
+      height:12px;
 
-                   -webkit-appearance:none;
-                   padding:0px;
-                   border:0 none;
+      border-radius:0px;
+      border:0 none;
+      background:transparent;
+    }
+    input[type=range]::-webkit-slider-thumb {
+      width:12px;
+      height:12px;
 
-                   background:transparent;
-                   color:transparent;
-                   overflow:visible;
-                 }
+      border-radius:0px;
+      border:0 none;
+      background:transparent;
+      -webkit-appearance:none;
+    }
 
-                 input[type=range]:focus::-webkit-slider-runnable-track {
-                   background:transparent;
-                   border:transparent;
-                 }
+    input[type=range]::-ms-fill-lower {
+      background:transparent;
+      border:0 none;
+    }
+    input[type=range]::-ms-fill-upper {
+      background:transparent;
+      border:0 none;
+    }
+    input[type=range]::-ms-tooltip {
+      display: none;
+    }`,
+  baseDiv: {
+    border: '0 none',
+    position: 'relative',
+    left: 0,
+    top: 0,
+    overflow: 'visible'
+  },
+  track: {
+    border: 0,
+    position: 'absolute',
+    width: `100%`
+  },
+  fill: {
+    border: 0,
+    position: 'absolute',
+    pointerEvents: 'none'
+  },
+  thumb: {
+    position: 'absolute',
+    top: 0,
+    border: '0 none',
+    padding: 0,
+    margin: 0,
+    textAlign: 'center',
+    pointerEvents: 'none',
+    boxShadow: '0 0 3px black'
+  },
+  input: {
+    top: 0,
+    WebkitAppearance: 'none',
+    background: 'transparent',
+    position: 'absolute',
+    left: 0,
+    overflow: 'visible',
+    zIndex: 100
+  }
+};
 
-                 input[type=range]:focus {
-                   outline: none;
-                 }
+class Range extends React.Component {
+  state = { value: 0 };
 
-                 input[type=range]::-ms-thumb {
-                   width:12px;
-                   height:12px;
+  componentWillReceiveProps(nextProps) {
+    this.setState({
+      value: nextProps.value
+    });
+  }
 
-                   border-radius:0px;
-                   border:0 none;
-                   background:transparent;
-                 }
-                 input[type=range]::-moz-range-thumb {
-                   width:12px;
-                   height:12px;
+  onChange = e => {
+    if (!this.props.readOnly) {
+      const newVal = parseInt(
+        e.nativeEvent ? e.nativeEvent.target.value : e,
+        10
+      );
+      this.setState({ value: newVal });
+      this.props.onChange && this.props.onChange(newVal);
+    }
+  };
 
-                   border-radius:0px;
-                   border:0 none;
-                   background:transparent;
-                 }
-                 input[type=range]::-webkit-slider-thumb {
-                   width:12px;
-                   height:12px;
+  render() {
+    const {
+      value,
+      min,
+      max,
+      thumbSize,
+      width,
+      trackColor,
+      height,
+      fillColor,
+      hideThumb,
+      thumbColor
+    } = this.props;
 
-                   border-radius:0px;
-                   border:0 none;
-                   background:transparent;
-                   -webkit-appearance:none;
-                 }
+    const val = Math.min(max, this.state.value || value);
 
-                 input[type=range]::-ms-fill-lower {
-                   background:transparent;
-                   border:0 none;
-                 }
-                 input[type=range]::-ms-fill-upper {
-                   background:transparent;
-                   border:0 none;
-                 }
-                 input[type=range]::-ms-tooltip {
-                    display: none;
-                 }`
-             }}>
-            </style>
-             <div
-               id='rrp-track'
-               style={{
-                 border: 0,
-                 position: 'absolute',
-                 background: toRgbaString(this.props.trackColor),
-                 borderRadius: this.props.height + 'px',
-                 width: `100%`,
-                 ...trackPosition(this.props)
-               }}></div>
-             <div
-               id='rrp-fill'
-               style={{
-                 border: 0,
-                 position: 'absolute',
-                 pointerEvents: 'none',
-                 borderRadius: this.props.height + 'px',
-                 background: toRgbaString(this.props.fillColor),
-                 width: `calc(100% * ${percentProgress} + ${(1 - percentProgress) * componentHeight}px)`,
-                 ...trackPosition(this.props)
-               }}></div>
-               {this.props.hideThumb ? null
-               : <div
-                  id='rrp-thumb'
-                  style={{
-                    position: 'absolute',
-                    top: 0,
-                    border: '0 none',
-                    padding: 0,
-                    margin: 0,
-                    textAlign: 'center',
-                    pointerEvents: 'none',
-                    width: componentHeight,
-                    height: componentHeight + 'px',
-                    borderRadius: componentHeight + 'px',
-                    background: toRgbaString(this.props.thumbColor),
-                    boxShadow: '0 0 3px black',
-                    left: `calc((100% - ${componentHeight}px) * ${percentProgress})` }}>
-                  </div>}
-             <input
-               style={{
-                 ...trackPosition(this.props),
-                 width: 'calc(100% - ' + componentHeight + 'px)',
-                 marginLeft: componentHeight / 2,
-                 marginRight: componentHeight / 2,
-                 top: 0,
-                 height: componentHeight,
-                 WebkitAppearance: 'none',
-                 background: 'transparent',
-                 position: 'absolute',
-                 left: 0,
-                 overflow: 'visible',
-                 zIndex: 100
-               }}
-               type='range'
-               onChange={this.onChange.bind(this)}
-               min={min}
-               max={max} />
-           </div>
+    const percentProgress = val / (max - min);
+
+    const componentHeight = Math.max(height, thumbSize);
+
+    return (
+      <div style={{ width: width }}>
+        <div
+          id="rrp-baseDiv"
+          style={{
+            ...baseStyles.baseDiv,
+            height: componentHeight
+          }}
+        >
+          <style
+            dangerouslySetInnerHTML={{
+              __html: baseStyles.rootStyle
+            }}
+          />
+          <div
+            id="rrp-track"
+            style={{
+              ...baseStyles.track,
+              borderRadius: height,
+              background: toRgbaString(trackColor),
+              ...trackPosition(this.props)
+            }}
+          />
+          <div
+            id="rrp-fill"
+            style={{
+              ...baseStyles.fill,
+              borderRadius: height,
+              background: toRgbaString(fillColor),
+              width: `calc(100% * ${percentProgress} + ${(1 - percentProgress) *
+                componentHeight}px)`,
+              ...trackPosition(this.props)
+            }}
+          />
+          {hideThumb ? null : (
+            <div
+              id="rrp-thumb"
+              style={{
+                ...baseStyles.thumb,
+                width: componentHeight,
+                height: componentHeight,
+                borderRadius: componentHeight,
+                background: toRgbaString(thumbColor),
+                left: `calc((100% - ${componentHeight}px) * ${percentProgress})`
+              }}
+            />
+          )}
+          <input
+            style={{
+              ...trackPosition(this.props),
+              width: 'calc(100% - ' + componentHeight + 'px)',
+              marginLeft: componentHeight / 2,
+              marginRight: componentHeight / 2,
+              height: componentHeight,
+              ...baseStyles.input
+            }}
+            type="range"
+            onChange={this.onChange}
+            min={min}
+            max={max}
+          />
+        </div>
       </div>
+    );
   }
@@ -203,5 +248,5 @@ }
 Range.defaultProps = {
-  fillColor: {r: 255, g: 255, b: 255, a: 1},
-  trackColor: {r: 255, g: 255, b: 255, a: 0.5},
-  thumbColor: {r: 255, g: 255, b: 255, a: 1},
+  fillColor: { r: 255, g: 255, b: 255, a: 1 },
+  trackColor: { r: 255, g: 255, b: 255, a: 0.5 },
+  thumbColor: { r: 255, g: 255, b: 255, a: 1 },
   thumbSize: 12,
@@ -214,3 +259,3 @@ height: 6,
   onChange: () => {}
-}
+};
 
@@ -222,3 +267,3 @@ const colorWithAlpha = {
   a: PropTypes.number.isRequired
-}
+};
 
@@ -241,4 +286,4 @@ Range.propTypes = {
   readOnly: PropTypes.bool
-}
+};
 
-export default Range
+export default Range;

src/test.js

@@ -1,12 +0,12 @@
-import React from 'react'
-import createComponent from 'react-unit'
-import tape from 'tape'
-import addAssertions from 'extend-tape'
-import jsxEquals from 'tape-jsx-equals'
-const test = addAssertions(tape, {jsxEquals})
+import React from 'react';
+import createComponent from 'react-unit';
+import tape from 'tape';
+import addAssertions from 'extend-tape';
+import jsxEquals from 'tape-jsx-equals';
+const test = addAssertions(tape, { jsxEquals });
 
 // Component to test
-import Range, { toRgbaString, trackPosition } from './index'
+import Range, { toRgbaString, trackPosition } from './index';
 
-test('Testing toRgbaString', (t) => {
+test('Testing toRgbaString', t => {
   const mock = {
@@ -17,44 +17,54 @@ r: 1,
     a: 0.5
-  }
-  const actual = toRgbaString(mock)
-  const expected = `rgba(1, 2, 3, 0.5)`
-  t.equal(actual, expected, 'formats object to string compliant with css rgba syntax')
-  t.end()
-})
+  };
+  const actual = toRgbaString(mock);
+  const expected = `rgba(1, 2, 3, 0.5)`;
+  t.equal(
+    actual,
+    expected,
+    'formats object to string compliant with css rgba syntax'
+  );
+  t.end();
+});
 
-test('Testing trackPosition with thumb bigger than track', (t) => {
+test('Testing trackPosition with thumb bigger than track', t => {
   const mock = {
-    height: 37, thumbSize: 87
-  }
-  const actual = trackPosition(mock)
+    height: 37,
+    thumbSize: 87
+  };
+  const actual = trackPosition(mock);
   const expected = {
     top: 25,
-    height: '37px'
-  }
-  t.equal(actual.top, expected.top, 'sets top gap to correct value')
-  t.equal(actual.height, expected.height, 'sets height to max param')
-  t.end()
-})
+    height: 37
+  };
+  t.equal(actual.top, expected.top, 'sets top gap to correct value');
+  t.equal(actual.height, expected.height, 'sets height to max param');
+  t.end();
+});
 
-test('Testing trackPosition with thumb lower than track', (t) => {
+test('Testing trackPosition with thumb lower than track', t => {
   const mock = {
-    height: 100, thumbSize: 12
-  }
-  const actual = trackPosition(mock)
+    height: 100,
+    thumbSize: 12
+  };
+  const actual = trackPosition(mock);
   const expected = {
     top: 0,
-    height: '100px'
-  }
-  t.equal(actual.top, expected.top, 'sets top gap = 0 if thumb lower than track')
-  t.equal(actual.height, expected.height, 'sets height to max param')
-  t.end()
-})
+    height: 100
+  };
+  t.equal(
+    actual.top,
+    expected.top,
+    'sets top gap = 0 if thumb lower than track'
+  );
+  t.equal(actual.height, expected.height, 'sets height to max param');
+  t.end();
+});
 
-test('Testing component default values when no props set', (t) => {
-  const component = createComponent.shallow(<Range />)
+test('Testing component default values when no props set', t => {
+  const component = createComponent.shallow(<Range />);
 
   const defaultProps = {
-    fillColor: {r: 255, g: 255, b: 255, a: 1},
-    trackColor: {r: 255, g: 255, b: 255, a: 0.5},
-    thumbColor: {r: 255, g: 255, b: 255, a: 1},
+    fillColor: { r: 255, g: 255, b: 255, a: 1 },
+    trackColor: { r: 255, g: 255, b: 255, a: 0.5 },
+    thumbColor: { r: 255, g: 255, b: 255, a: 1 },
     thumbSize: 12,
@@ -65,61 +75,119 @@ height: 6,
     value: 0
-  }
+  };
 
-  const percentProgress = defaultProps.value / (defaultProps.max - defaultProps.min)
+  const percentProgress =
+    defaultProps.value / (defaultProps.max - defaultProps.min);
 
-  const rangeInput = component.findByQuery('input')[0]
-  const trackDiv = component.findByQuery('#rrp-track')[0]
-  const fillDiv = component.findByQuery('#rrp-fill')[0]
-  const thumb = component.findByQuery('#rrp-thumb')[0]
-  const baseDiv = component.findByQuery('#rrp-baseDiv')[0]
+  const rangeInput = component.findByQuery('input')[0];
+  const trackDiv = component.findByQuery('#rrp-track')[0];
+  const fillDiv = component.findByQuery('#rrp-fill')[0];
+  const thumb = component.findByQuery('#rrp-thumb')[0];
+  const baseDiv = component.findByQuery('#rrp-baseDiv')[0];
 
-  t.equal(baseDiv.props.style.height, `${defaultProps.thumbSize}px`, 'base div is thumb default size')
+  t.equal(
+    baseDiv.props.style.height,
+    defaultProps.thumbSize,
+    'base div is thumb default size'
+  );
 
-  t.equal(rangeInput.props.min, defaultProps.min, 'default min value is set on range input')
-  t.equal(rangeInput.props.max, defaultProps.max, 'default max value is set on range input')
+  t.equal(
+    rangeInput.props.min,
+    defaultProps.min,
+    'default min value is set on range input'
+  );
+  t.equal(
+    rangeInput.props.max,
+    defaultProps.max,
+    'default max value is set on range input'
+  );
 
-  t.equal(trackDiv.props.style.background, toRgbaString(defaultProps.trackColor), 'default track color is set on track div')
-  t.equal(trackDiv.props.style.borderRadius, `${defaultProps.height}px`, 'track div corner radius equals height prop')
-  t.equal(trackDiv.props.style.top, trackPosition(defaultProps).top, 'track div has correct top margin')
-  t.equal(trackDiv.props.style.height, trackPosition(defaultProps).height, 'track div has correct height')
+  t.equal(
+    trackDiv.props.style.background,
+    toRgbaString(defaultProps.trackColor),
+    'default track color is set on track div'
+  );
+  t.equal(
+    trackDiv.props.style.borderRadius,
+    defaultProps.height,
+    'track div corner radius equals height prop'
+  );
+  t.equal(
+    trackDiv.props.style.top,
+    trackPosition(defaultProps).top,
+    'track div has correct top margin'
+  );
+  t.equal(
+    trackDiv.props.style.height,
+    trackPosition(defaultProps).height,
+    'track div has correct height'
+  );
 
-  t.equal(fillDiv.props.style.background, toRgbaString(defaultProps.fillColor), 'default fill color is set on fill div')
-  t.equal(fillDiv.props.style.borderRadius, `${defaultProps.height}px`, 'fill div corner radius equals height prop')
-  t.equal(fillDiv.props.style.width, `calc(100% * ${percentProgress} + ${(1 - percentProgress) * defaultProps.thumbSize}px)`, 'width is 0')
+  t.equal(
+    fillDiv.props.style.background,
+    toRgbaString(defaultProps.fillColor),
+    'default fill color is set on fill div'
+  );
+  t.equal(
+    fillDiv.props.style.borderRadius,
+    defaultProps.height,
+    'fill div corner radius equals height prop'
+  );
+  t.equal(
+    fillDiv.props.style.width,
+    `calc(100% * ${percentProgress} + ${(1 - percentProgress) *
+      defaultProps.thumbSize}px)`,
+    'width is 0'
+  );
 
-  t.equal(thumb.props.style.background, toRgbaString(defaultProps.thumbColor), 'default thumb color is set on thumb div')
+  t.equal(
+    thumb.props.style.background,
+    toRgbaString(defaultProps.thumbColor),
+    'default thumb color is set on thumb div'
+  );
 
-  t.end()
-})
+  t.end();
+});
 
-test('Testing when height > thumbsize', (t) => {
-  const bigVal = 43
-  const smallVal = 13
-  const component = createComponent.shallow(<Range height={bigVal} thumbSize={smallVal} />)
-  const baseDiv = component.findByQuery('#rrp-baseDiv')[0]
-  t.equal(baseDiv.props.style.height, `${bigVal}px`, 'when height > thumbsize, base div is set to height prop')
-  t.end()
-})
+test('Testing when height > thumbsize', t => {
+  const bigVal = 43;
+  const smallVal = 13;
+  const component = createComponent.shallow(
+    <Range height={bigVal} thumbSize={smallVal} />
+  );
+  const baseDiv = component.findByQuery('#rrp-baseDiv')[0];
+  t.equal(
+    baseDiv.props.style.height,
+    bigVal,
+    'when height > thumbsize, base div is set to height prop'
+  );
+  t.end();
+});
 
-test('Testing when height < thumbsize', (t) => {
-  const bigVal = 43
-  const smallVal = 13
-  const component = createComponent.shallow(<Range height={smallVal} thumbSize={bigVal} />)
-  const baseDiv = component.findByQuery('#rrp-baseDiv')[0]
-  t.equal(baseDiv.props.style.height, `${bigVal}px`, 'when height < thumbsize, base div is set to thumbSize prop')
-  t.end()
-})
+test('Testing when height < thumbsize', t => {
+  const bigVal = 43;
+  const smallVal = 13;
+  const component = createComponent.shallow(
+    <Range height={smallVal} thumbSize={bigVal} />
+  );
+  const baseDiv = component.findByQuery('#rrp-baseDiv')[0];
+  t.equal(
+    baseDiv.props.style.height,
+    bigVal,
+    'when height < thumbsize, base div is set to thumbSize prop'
+  );
+  t.end();
+});
 
-test('Testing when hideThumb = true', (t) => {
-  const component = createComponent.shallow(<Range hideThumb />)
-  const thumb = component.findByQuery('#rrp-thumb')[0]
-  t.equal(thumb, undefined, 'thumb is not displayed')
-  t.end()
-})
+test('Testing when hideThumb = true', t => {
+  const component = createComponent.shallow(<Range hideThumb />);
+  const thumb = component.findByQuery('#rrp-thumb')[0];
+  t.equal(thumb, undefined, 'thumb is not displayed');
+  t.end();
+});
 
-test('Testing when setting props', (t) => {
-  let handlerWasFired = false
+test('Testing when setting props', t => {
+  let handlerWasFired = false;
   const handler = e => {
-    handlerWasFired = e
-  }
+    handlerWasFired = e;
+  };
 
@@ -131,3 +199,3 @@ const color0 = {
     a: 0.8
-  }
+  };
 
@@ -139,3 +207,3 @@ const color1 = {
     a: 1
-  }
+  };
 
@@ -147,3 +215,3 @@ const color2 = {
     a: 0.87
-  }
+  };
 
@@ -156,43 +224,57 @@ const component = createComponent.shallow(
       trackColor={color1}
-      onChange={handler} />
-    )
+      onChange={handler}
+    />
+  );
 
-  const fillDiv = component.findByQuery('#rrp-fill')[0]
-  t.equal(fillDiv.props.style.background, toRgbaString(color0), 'fill div is colored as fillColor')
+  const fillDiv = component.findByQuery('#rrp-fill')[0];
+  t.equal(
+    fillDiv.props.style.background,
+    toRgbaString(color0),
+    'fill div is colored as fillColor'
+  );
 
-  const trackDiv = component.findByQuery('#rrp-track')[0]
-  t.equal(trackDiv.props.style.background, toRgbaString(color1), 'track div is colored as trackColor')
+  const trackDiv = component.findByQuery('#rrp-track')[0];
+  t.equal(
+    trackDiv.props.style.background,
+    toRgbaString(color1),
+    'track div is colored as trackColor'
+  );
 
-  const thumb = component.findByQuery('#rrp-thumb')[0]
-  t.equal(thumb.props.style.background, toRgbaString(color2), 'thumb is colored as thumbColor')
-  t.equal(thumb.props.style.height, '98px', 'thumb height = thumbSize')
-  t.equal(thumb.props.style.width, 98, 'thumb width = thumbSize')
+  const thumb = component.findByQuery('#rrp-thumb')[0];
+  t.equal(
+    thumb.props.style.background,
+    toRgbaString(color2),
+    'thumb is colored as thumbColor'
+  );
+  t.equal(thumb.props.style.height, 98, 'thumb height = thumbSize');
+  t.equal(thumb.props.style.width, 98, 'thumb width = thumbSize');
 
   // nativEvent throws - needs fix
-  const rangeInput = component.findByQuery('input')[0]
-  rangeInput.onChange(99)
-  t.equal(handlerWasFired, 99, 'handler is fired when range value is changed')
+  const rangeInput = component.findByQuery('input')[0];
+  rangeInput.onChange(99);
+  t.equal(handlerWasFired, 99, 'handler is fired when range value is changed');
 
-  t.end()
-})
+  t.end();
+});
 
-test('Testing with readOnly = true', (t) => {
-  let handlerWasFired = false
+test('Testing with readOnly = true', t => {
+  let handlerWasFired = false;
   const handler = e => {
-    handlerWasFired = e
-  }
+    handlerWasFired = e;
+  };
 
   const component = createComponent.shallow(
-    <Range
-      value={12}
-      onChange={handler}
-      readOnly />
-  )
+    <Range value={12} onChange={handler} readOnly />
+  );
 
   // nativEvent throws - needs fix
-  const rangeInput = component.findByQuery('input')[0]
-  rangeInput.onChange(99)
-  t.equal(handlerWasFired, false, 'handler is NOT fired when range value is changed')
+  const rangeInput = component.findByQuery('input')[0];
+  rangeInput.onChange(99);
+  t.equal(
+    handlerWasFired,
+    false,
+    'handler is NOT fired when range value is changed'
+  );
 
-  t.end()
-})
+  t.end();
+});

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

376506

336.36%

Number of package files

21

10.53%

Lines of code

1116

16.74%

Number of lines in readme file

93

9.41%

Worsened metrics

Dev dependency count

23

4.55%

No dependency changes