@kassellabs/react-semantic-ui-range - npm Package Compare versions

Comparing version 0.8.1 to 1.0.0

build/elements/range.css.js

@@ -6,7 +6,2 @@ "use strict";
 });
-
-var _thumb;
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 exports.default = {
@@ -51,3 +46,3 @@ range: {
   },
-  thumb: (_thumb = {
+  thumb: {
     position: "absolute",
@@ -58,4 +53,6 @@ top: "0",
     width: "20px",
-    background: "#fff linear-gradient(transparent, rgba(0, 0, 0, 0.5))"
-  }, _defineProperty(_thumb, "background", "#fff -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.5))"), _defineProperty(_thumb, "background", "#fff -o-linear-gradient(transparent, rgba(0, 0, 0, 0.5))"), _defineProperty(_thumb, "background", "#fff -moz-linear-gradient(transparent, rgba(0, 0, 0, 0.5))"), _defineProperty(_thumb, "borderRadius", "100%"), _defineProperty(_thumb, "backgroundColor", "rgba(255, 255, 255, 1)"), _defineProperty(_thumb, "boxShadow", "0 1px 2px 0 rgba(34,36,38,.15),0 0 0 1px rgba(34,36,38,.15) inset"), _thumb),
+    borderRadius: "100%",
+    backgroundColor: "rgba(255, 255, 255, 1)",
+    boxShadow: "0 1px 2px 0 rgba(34,36,38,.15),0 0 0 1px rgba(34,36,38,.15) inset"
+  },
   red: {
@@ -62,0 +59,0 @@ backgroundColor: "#DB2828"

build/elements/slider.js

@@ -37,3 +37,2 @@ "use strict";
 
-var TOOLTIP_PADDING = '25px';
 var TOOLTIP_POSITION = {
@@ -52,3 +51,3 @@ TOP: 'top',
 
-    var value = _this.props.value ? _this.props.value : props.multiple ? [].concat(_toConsumableArray(props.settings.start)) : props.settings.start;
+    var value = _this.props.value ? _this.props.value : props.multiple ? [].concat(_toConsumableArray(props.start)) : props.start;
     _this.state = {
@@ -78,3 +77,3 @@ value: value,
     value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      var isValueUnset = nextProps.value == null;
+      var isValueUnset = nextProps.value === null;
       if (!isValueUnset && nextProps.value !== this.state.value) {
@@ -129,2 +128,3 @@ if (this.props.multiple) {
         }
+        return false;
       });
@@ -138,3 +138,3 @@ return different;
       var innerLeft = _reactDom2.default.findDOMNode(this.inner).getBoundingClientRect().left;
-      var ratio = (value - this.props.settings.min) / (this.props.settings.max - this.props.settings.min);
+      var ratio = (value - this.props.min) / (this.props.max - this.props.min);
       var position = Math.round(ratio * this.inner.offsetWidth) + trackLeft - innerLeft - this.state.offset;
@@ -146,3 +146,3 @@ return position;
     value: function determinePrecision() {
-      var split = String(this.props.settings.step).split(".");
+      var split = String(this.props.step).split(".");
       var decimalPlaces = void 0;
@@ -162,8 +162,8 @@ if (split.length === 2) {
       var ratio = (currentPos - startPos) / (endPos - startPos);
-      var range = this.props.settings.max - this.props.settings.min;
-      var difference = Math.round(ratio * range / this.props.settings.step) * this.props.settings.step;
+      var range = this.props.max - this.props.min;
+      var difference = Math.round(ratio * range / this.props.step) * this.props.step;
       // Use precision to avoid ugly Javascript floating point rounding issues
       // (like 35 * .01 = 0.35000000000000003)
       difference = Math.round(difference * this.state.precision) / this.state.precision;
-      return difference + this.props.settings.min;
+      return difference + this.props.min;
     }
@@ -218,4 +218,4 @@ }, {
         }
-        if (this.props.settings.onChange) {
-          this.props.settings.onChange(newValue, {
+        if (this.props.onChange) {
+          this.props.onChange(newValue, {
             triggeredByUser: triggeredByUser
@@ -275,2 +275,6 @@ });
         this.rangeMouse(isTouch, e);
+
+        if (this.props.onChangeStart) {
+          this.props.onChangeStart();
+        }
       }
@@ -290,3 +294,3 @@ }
       if (pageX >= this.innerLeft && pageX <= this.innerRight) {
-        if (value >= this.props.settings.min && value <= this.props.settings.max) {
+        if (value >= this.props.min && value <= this.props.max) {
           var position = pageX - this.innerLeft - this.state.offset;
@@ -317,2 +321,6 @@ var thumbIndex = this.props.multiple ? this.determineThumb(position) : undefined;
     value: function rangeMouseUp() {
+      if (this.state.mouseDown && this.props.onChangeEnd) {
+        this.props.onChangeEnd();
+      }
+
       this.setState({
@@ -383,2 +391,3 @@ mouseDown: false,
             _react2.default.createElement("div", {
+              className: "track",
               ref: function ref(track) {
@@ -390,2 +399,3 @@ _this3.track = track;
             _react2.default.createElement("div", {
+              className: "trackfill",
               ref: function ref(trackFill) {
@@ -401,2 +411,3 @@ _this3.trackFill = trackFill;
               return _react2.default.createElement("div", {
+                className: "thumb",
                 key: i,
@@ -422,3 +433,3 @@ style: _extends({}, _rangeCss2.default.thumb, _this3.props.style ? _this3.props.style.thumb ? _this3.props.style.thumb : {} : {}, { left: pos + "px" })
                     style: {
-                      transform: this.props.settings.tooltipPosition === TOOLTIP_POSITION.BOTTOM ? 'translateY(calc(50%))' : 'translateY(calc(-50% - 30px))'
+                      transform: this.props.tooltipPosition === TOOLTIP_POSITION.BOTTOM ? 'translateY(calc(50%))' : 'translateY(calc(-50% - 30px))'
                     }
@@ -430,2 +441,3 @@ },
               _react2.default.createElement("div", {
+                className: "thumb",
                 onMouseEnter: function onMouseEnter() {
@@ -454,9 +466,7 @@ return _this3.onMouseEnter();
   color: "red",
-  settings: {
-    tooltipPosition: 'top',
-    min: 0,
-    max: 10,
-    step: 1,
-    start: 0
-  }
+  tooltipPosition: 'top',
+  min: 0,
+  max: 10,
+  step: 1,
+  start: 0
 };
@@ -469,12 +479,14 @@
   inverted: _propTypes2.default.bool,
+  max: _propTypes2.default.number,
+  min: _propTypes2.default.number,
   multiple: _propTypes2.default.bool,
+  onChange: _propTypes2.default.func,
+  onChangeEnd: _propTypes2.default.func,
+  onChangeStart: _propTypes2.default.func,
+  start: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.arrayOf(_propTypes2.default.number)]),
+  step: _propTypes2.default.number,
+  style: _propTypes2.default.object,
   tooltip: _propTypes2.default.func,
-  settings: _propTypes2.default.shape({
-    tooltipPosition: _propTypes2.default.string,
-    min: _propTypes2.default.number,
-    max: _propTypes2.default.number,
-    step: _propTypes2.default.number,
-    start: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.arrayOf(_propTypes2.default.number)]),
-    onChange: _propTypes2.default.func
-  })
+  tooltipPosition: _propTypes2.default.string,
+  value: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.arrayOf(_propTypes2.default.number)])
 };

package.json

 {
   "name": "@kassellabs/react-semantic-ui-range",
-  "version": "0.8.1",
+  "version": "1.0.0",
   "description": "A Slider React Component for Semantic-UI",
@@ -5,0 +5,0 @@ "main": "build/index.js",

README.md

@@ -7,4 +7,8 @@ # react-semantic-ui-range
 
-The demo for the project can be found here: https://iozbeyli.github.io/react-semantic-ui-range/
+This is a fork because it seems the original repo it not being maintained anymore: [react-semantic-ui-range](https://github.com/iozbeyli/react-semantic-ui-range)
 
+The old demo and docs for the project can be found here: https://iozbeyli.github.io/react-semantic-ui-range/
+
+We need a new docs page, it seems the original author didn't include the docs source code, only the final build.
+
 The original library was using jQuery so I changed the parts that use jQuery to make it more compatible with React.
@@ -16,3 +20,3 @@
 
-Sample Usage
+## Sample Usage
 
@@ -28,12 +32,2 @@ ```javascript
 
-  const settings = {
-    start: 2,
-    min: 0,
-    max: 10,
-    step: 1,
-    onChange: value => {
-      setValue(value);
-    }
-  };
-
   const handleValueChange = e => {
@@ -50,3 +44,12 @@ let value = parseInt(e.target.value);
       <Grid.Column width={16}>
-        <Slider value={value} color="red" settings={settings} />
+        <Slider
+          value={value}
+          color="red"
+          settings={settings}
+          start={2}
+          min={0}
+          max={10}
+          step={1}
+          onChange={setValue}
+        />
       </Grid.Column>
@@ -65,1 +68,29 @@ <Grid.Column width={16}>
 
+## Props
+
+```javascript
+Slider.propTypes = {
+  color: PropTypes.string,
+  disabled: PropTypes.bool,
+  discrete: PropTypes.bool,
+  inverted: PropTypes.bool,
+  max: PropTypes.number,
+  min: PropTypes.number,
+  multiple: PropTypes.bool,
+  onChange: PropTypes.func,
+  onChangeEnd: PropTypes.func,
+  onChangeStart: PropTypes.func,
+  start: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.arrayOf(PropTypes.number)
+  ]),
+  step: PropTypes.number,
+  style: PropTypes.object,
+  tooltip: PropTypes.func,
+  tooltipPosition: PropTypes.string,
+  value: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.arrayOf(PropTypes.number)
+  ]),
+};
+```

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

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

41909

increased by1.47%

Lines of code

1014

increased by0.9%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

91

increased by49.18%

No dependency changes