@maslick/react-radiaslider - npm Package Compare versions

Comparing version 1.3.1 to 1.3.2

dist/index.js

 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
@@ -430,2 +432,104 @@
 
+var RadiaSlider =
+/*#__PURE__*/
+function (_React$Component) {
+  _inherits(RadiaSlider, _React$Component);
+
+  function RadiaSlider() {
+    _classCallCheck(this, RadiaSlider);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(RadiaSlider).apply(this, arguments));
+  }
+
+  _createClass(RadiaSlider, [{
+    key: "renderBand",
+    value: function renderBand(i, radius, min, max, step, color, changed) {
+      this.slider.addSlider({
+        id: i,
+        radius: radius,
+        min: min,
+        max: max,
+        color: color,
+        changed: changed
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return React.createElement("div", {
+        className: "slider"
+      }, React.createElement("canvas", {
+        id: this.props.id,
+        className: "graph",
+        width: "400",
+        height: "400"
+      }), React.createElement("div", {
+        id: this.props.id + "_value1",
+        className: "dashboard",
+        style: {
+          background: "#104b63",
+          color: "white"
+        }
+      }), React.createElement("div", {
+        id: this.props.id + "_value2",
+        className: "dashboard",
+        style: {
+          background: "#76c7e9",
+          color: "white"
+        }
+      }), React.createElement("div", {
+        id: this.props.id + "_value3",
+        className: "dashboard",
+        style: {
+          background: "#ff9a9a",
+          color: "white"
+        }
+      }), React.createElement("div", {
+        id: this.props.id + "_value4",
+        className: "dashboard",
+        style: {
+          background: "#fff69f",
+          color: "black"
+        }
+      }));
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this = this;
+
+      this.slider = new sliderCircular({
+        canvasId: this.props.id,
+        continuousMode: this.props.continuousMode === 'true'
+      });
+
+      var callback = function callback(v) {
+        return "Angle: " + v.deg.toFixed(2) + " deg, value: " + v.value.toFixed(2);
+      };
+
+      this.renderBand(1, 50, -50, 50, 1, "#104b63", function (v) {
+        document.getElementById("".concat(_this.props.id, "_value1")).innerHTML = callback(v);
+      });
+      this.renderBand(2, 90, -100, 100, 5, "#76c7e9", function (v) {
+        document.getElementById("".concat(_this.props.id, "_value2")).innerHTML = callback(v);
+      });
+      this.renderBand(3, 130, 0, 360, 0.1, "#ff9a9a", function (v) {
+        document.getElementById("".concat(_this.props.id, "_value3")).innerHTML = callback(v);
+      });
+      this.renderBand(4, 170, 0, 360, 1, "#fff69f", function (v) {
+        document.getElementById("".concat(_this.props.id, "_value4")).innerHTML = callback(v);
+      });
+      this.slider.setSliderValue(1, 34);
+      this.slider.setSliderValue(2, 70);
+      this.slider.setSliderValue(3, 307);
+      this.slider.setSliderValue(4, 307);
+    }
+  }]);
+
+  return RadiaSlider;
+}(React.Component);
+RadiaSlider.propTypes = {
+  id: propTypes.string.isRequired
+};
+
 var sliderLinear = createCommonjsModule(function (module) {
@@ -729,30 +833,33 @@ (function () {
 
-var radiaslider = {
-    circular: sliderCircular,
-    linear: sliderLinear
-};
-var radiaslider_1 = radiaslider.circular;
-
-var RadiaSlider =
+var LinearSlider =
 /*#__PURE__*/
 function (_React$Component) {
-  _inherits(RadiaSlider, _React$Component);
+  _inherits(LinearSlider, _React$Component);
 
-  function RadiaSlider() {
-    _classCallCheck(this, RadiaSlider);
+  function LinearSlider() {
+    _classCallCheck(this, LinearSlider);
 
-    return _possibleConstructorReturn(this, _getPrototypeOf(RadiaSlider).apply(this, arguments));
+    return _possibleConstructorReturn(this, _getPrototypeOf(LinearSlider).apply(this, arguments));
   }
 
-  _createClass(RadiaSlider, [{
-    key: "renderBand",
-    value: function renderBand(i, radius, min, max, step, color, changed) {
-      this.slider.addSlider({
-        id: i,
-        radius: radius,
-        min: min,
-        max: max,
-        color: color,
-        changed: changed
-      });
+  _createClass(LinearSlider, [{
+    key: "initKarandashi",
+    value: function initKarandashi() {
+      var colors = ["#104b63", "#ff9a9a", "#76c7e9", "#ffff9a", "#9e9e9e", "#bcf5bc", "#f096f0", "#229ed1"];
+      var temp = {
+        min: -100,
+        max: 100,
+        step: 10
+      };
+
+      for (var i = 0; i < 24; i++) {
+        var t = temp;
+        t.width = 340;
+        t.color = colors[i % 8];
+        t.x0 = 30 + 40 * i;
+        t.y0 = 370;
+        t.id = i.toString();
+        this.slider.addSlider(t);
+        this.slider.setSliderValue(t.id, LinearSlider.randomInRange(temp.min, temp.max));
+      }
     }
@@ -762,38 +869,7 @@ }, {
     value: function render() {
-      return React.createElement("div", {
-        className: "slider"
-      }, React.createElement("canvas", {
+      return React.createElement("canvas", {
         id: this.props.id,
-        className: "graph",
-        width: "400",
+        width: "980",
         height: "400"
-      }), React.createElement("div", {
-        id: this.props.id + "_value1",
-        className: "dashboard",
-        style: {
-          background: "#104b63",
-          color: "white"
-        }
-      }), React.createElement("div", {
-        id: this.props.id + "_value2",
-        className: "dashboard",
-        style: {
-          background: "#76c7e9",
-          color: "white"
-        }
-      }), React.createElement("div", {
-        id: this.props.id + "_value3",
-        className: "dashboard",
-        style: {
-          background: "#ff9a9a",
-          color: "white"
-        }
-      }), React.createElement("div", {
-        id: this.props.id + "_value4",
-        className: "dashboard",
-        style: {
-          background: "#fff69f",
-          color: "black"
-        }
-      }));
+      });
     }
@@ -803,39 +879,27 @@ }, {
     value: function componentDidMount() {
-      var _this = this;
-
-      this.slider = new radiaslider_1({
+      this.slider = new sliderLinear({
         canvasId: this.props.id,
-        continuousMode: this.props.continuousMode === 'true'
+        continuousMode: this.props.continuousMode,
+        vertical: true
       });
-
-      var callback = function callback(v) {
-        return "Angle: " + v.deg.toFixed(2) + " deg, value: " + v.value.toFixed(2);
-      };
-
-      this.renderBand(1, 50, -50, 50, 1, "#104b63", function (v) {
-        document.getElementById("".concat(_this.props.id, "_value1")).innerHTML = callback(v);
-      });
-      this.renderBand(2, 90, -100, 100, 5, "#76c7e9", function (v) {
-        document.getElementById("".concat(_this.props.id, "_value2")).innerHTML = callback(v);
-      });
-      this.renderBand(3, 130, 0, 360, 0.1, "#ff9a9a", function (v) {
-        document.getElementById("".concat(_this.props.id, "_value3")).innerHTML = callback(v);
-      });
-      this.renderBand(4, 170, 0, 360, 1, "#fff69f", function (v) {
-        document.getElementById("".concat(_this.props.id, "_value4")).innerHTML = callback(v);
-      });
-      this.slider.setSliderValue(1, 34);
-      this.slider.setSliderValue(2, 70);
-      this.slider.setSliderValue(3, 307);
-      this.slider.setSliderValue(4, 307);
+      this.initKarandashi();
     }
+  }], [{
+    key: "randomInRange",
+    value: function randomInRange(start, end) {
+      return Math.floor(Math.random() * (end - start + 1) + start);
+    }
   }]);
 
-  return RadiaSlider;
+  return LinearSlider;
 }(React.Component);
-
-RadiaSlider.propTypes = {
-  id: propTypes.string.isRequired
+LinearSlider.propTypes = {
+  id: propTypes.string.isRequired,
+  continuousMode: propTypes.bool
 };
+LinearSlider.defaultProps = {
+  continuousMode: true
+};
 
-module.exports = RadiaSlider;
+exports.RadiaSlider = RadiaSlider;
+exports.LinearSlider = LinearSlider;

index.js

@@ -1,66 +0,5 @@
-import React from "react";
-import PropTypes from 'prop-types';
-import { circular as Slider } from "@maslick/radiaslider";
+import RadiaSlider from "./RadiaComponent";
+import LinearSlider from "./LinearComponent";
 
+export { RadiaSlider, LinearSlider };
 
-class RadiaSlider extends React.Component {
-
-    renderBand(i, radius, min, max, step, color, changed) {
-        this.slider.addSlider({
-            id: i,
-            radius: radius,
-            min: min,
-            max: max,
-            color: color,
-            changed: changed
-        });
-    }
-
-    render() {
-        return (
-            <div className="slider">
-                <canvas id={this.props.id} className="graph" width="400" height="400"/>
-                <div id={this.props.id + "_value1"} className="dashboard" style={{background: "#104b63", color: "white"}}/>
-                <div id={this.props.id + "_value2"} className="dashboard" style={{background: "#76c7e9", color: "white"}}/>
-                <div id={this.props.id + "_value3"} className="dashboard" style={{background: "#ff9a9a", color: "white"}}/>
-                <div id={this.props.id + "_value4"} className="dashboard" style={{background: "#fff69f", color: "black"}}/>
-            </div>
-        );
-    }
-
-    componentDidMount() {
-        this.slider = new Slider({
-            canvasId: this.props.id,
-            continuousMode: this.props.continuousMode === 'true'
-        });
-
-        const callback = (v) => "Angle: " + v.deg.toFixed(2) + " deg, value: " + v.value.toFixed(2);
-
-        this.renderBand(1, 50, -50, 50, 1, "#104b63", v => {
-            document.getElementById(`${this.props.id}_value1`).innerHTML = callback(v);
-        });
-
-        this.renderBand(2, 90, -100, 100, 5, "#76c7e9", v => {
-            document.getElementById(`${this.props.id}_value2`).innerHTML = callback(v);
-        });
-
-        this.renderBand(3, 130, 0, 360, 0.1, "#ff9a9a", v => {
-            document.getElementById(`${this.props.id}_value3`).innerHTML = callback(v);
-        });
-
-        this.renderBand(4, 170, 0, 360, 1, "#fff69f", v => {
-            document.getElementById(`${this.props.id}_value4`).innerHTML = callback(v);
-        });
-
-        this.slider.setSliderValue(1, 34);
-        this.slider.setSliderValue(2, 70);
-        this.slider.setSliderValue(3, 307);
-        this.slider.setSliderValue(4, 307);
-    }
-}
-
-RadiaSlider.propTypes = {
-    id: PropTypes.string.isRequired
-};
-
-export default RadiaSlider;

package.json

 {
   "name": "@maslick/react-radiaslider",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "React component for radiaslider",
@@ -31,3 +31,3 @@ "repository": {
   "dependencies": {
-    "@maslick/radiaslider": "^1.5.0",
+    "@maslick/radiaslider": "^1.5.2",
     "prop-types": "^15.6.2"
@@ -34,0 +34,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

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

Lines of code

774

increased by1.31%

Worsened metrics

Total package byte prevSize

32490

decreased by-1.46%

Dependency changes

• Updated@maslick/radiaslider@^1.5.2