ui-kit-ck-consultant 0.5.149 → 0.5.150

package/dist/index.js

@@ -3705,6 +3705,138 @@ var Switch = /*#__PURE__*/function (_React$Component) {
   return Switch;
 }(React__default.Component);
 
+var Gauge = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(Gauge, _React$Component);
+
+  function Gauge(props) {
+    var _this;
+
+    _this = _React$Component.call(this, props) || this;
+    _this.state = {
+      position: 0
+    };
+    return _this;
+  }
+
+  var _proto = Gauge.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    if (this.props.position) {
+      this.setState({
+        position: this.props.position
+      });
+    }
+  };
+
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+    if (prevProps.position !== this.props.position && this.props.position !== this.state.position) {
+      this.setState({
+        position: this.props.position
+      });
+    }
+  };
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: this.props.className
+    }, /*#__PURE__*/React__default.createElement("span", {
+      style: {
+        display: 'inline-block',
+        fontSize: '14px',
+        fontWeight: 'bold',
+        color: 'var(--black)',
+        marginBottom: '16px'
+      }
+    }, this.props.title), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
+      style: {
+        position: 'relative',
+        width: '100%',
+        height: '22px',
+        backgroundImage: this.props.colors.length === 3 ? "linear-gradient(to right, " + this.props.colors[0] + " 0%, " + this.props.colors[1] + " 50%, " + this.props.colors[2] + " 100%)" : "linear-gradient(to right, " + this.props.colors[0] + ", " + this.props.colors[1] + ")",
+        borderRadius: '8px'
+      },
+      onClick: function onClick(e) {
+        var currentTargetRect = e.currentTarget.getBoundingClientRect();
+        var width = currentTargetRect.width;
+        var positionX = e.pageX - currentTargetRect.left;
+
+        _this2.setState({
+          position: positionX * 100 / width
+        }, function () {
+          return _this2.props.onChange ? _this2.props.onChange(_this2.state.position) : null;
+        });
+      }
+    }, this.props.min ? /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
+      style: {
+        position: 'absolute',
+        left: this.props.min + '%',
+        transform: 'translateX(-50%)',
+        textAlign: 'center',
+        top: '-18px',
+        fontSize: '10px'
+      }
+    }, "MIN"), /*#__PURE__*/React__default.createElement("div", {
+      style: {
+        position: 'absolute',
+        width: '4px',
+        height: '28px',
+        borderRadius: '4px',
+        top: '-3px',
+        backgroundColor: 'black',
+        left: this.props.min + '%',
+        transform: 'translateX(-50%)'
+      }
+    })) : null, this.props.max ? /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
+      style: {
+        position: 'absolute',
+        left: this.props.max + '%',
+        transform: 'translateX(-50%)',
+        textAlign: 'center',
+        top: '-18px',
+        fontSize: '10px'
+      }
+    }, "MAX"), /*#__PURE__*/React__default.createElement("div", {
+      style: {
+        position: 'absolute',
+        width: '4px',
+        height: '28px',
+        borderRadius: '4px',
+        top: '-3px',
+        backgroundColor: 'black',
+        left: this.props.max + '%',
+        transform: 'translateX(-50%)'
+      }
+    })) : null, /*#__PURE__*/React__default.createElement("span", {
+      style: {
+        position: 'absolute',
+        left: this.state.position + '%',
+        transform: 'translateX(-50%)',
+        textAlign: 'center',
+        top: '-16px',
+        fontSize: '10px',
+        fontWeight: 'bold'
+      }
+    }, parseInt(this.state.position), "%"), /*#__PURE__*/React__default.createElement("div", {
+      className: "cursor-pointer",
+      style: {
+        position: 'absolute',
+        bottom: '-6px',
+        width: 0,
+        height: 0,
+        borderLeft: '10px solid transparent',
+        borderRight: '10px solid transparent',
+        borderBottom: '18px solid black',
+        transform: 'translateX(-50%)',
+        left: this.state.position + '%'
+      }
+    }))));
+  };
+
+  return Gauge;
+}(React__default.Component);
+
 exports.Alert = Alert;
 exports.AlertContainer = AlertContainer;
 exports.AlertElement = AlertElement;
@@ -3732,6 +3864,7 @@ exports.FormRange = FormRange;
 exports.FormSelect = FormSelect;
 exports.FormTextarea = FormTextarea;
 exports.FullModal = FullModal;
+exports.Gauge = Gauge;
 exports.Header = Header;
 exports.HorizontalBarChart = HorizontalBarChart;
 exports.Icon = Icon;