@wavemaker/react-runtime 11.14.1-rc.236

package/components/basic/progress-circle/index.js

@@ -0,0 +1,196 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _withBaseWrapper = require("@wavemaker/react-runtime/higherOrder/withBaseWrapper");
+var _props = require("./props");
+var _constants = require("../../constants");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var __jsx = _react["default"].createElement;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var WmProgressCircle = function WmProgressCircle(props) {
+  var _props$datavalue = props.datavalue,
+    datavalue = _props$datavalue === void 0 ? "30" : _props$datavalue,
+    _props$minvalue = props.minvalue,
+    minvalue = _props$minvalue === void 0 ? _constants.progressBarConstants.DEFAULT_MIN_VALUE : _props$minvalue,
+    _props$maxvalue = props.maxvalue,
+    maxvalue = _props$maxvalue === void 0 ? _constants.progressBarConstants.DEFAULT_MAX_VALUE : _props$maxvalue,
+    _props$type = props.type,
+    type = _props$type === void 0 ? _constants.progressBarConstants.DEFAULT_TYPE : _props$type,
+    _props$displayformat = props.displayformat,
+    displayformat = _props$displayformat === void 0 ? "9%" : _props$displayformat,
+    _props$captionplaceme = props.captionplacement,
+    captionplacement = _props$captionplaceme === void 0 ? "inside" : _props$captionplaceme,
+    title = props.title,
+    subtitle = props.subtitle,
+    _props$className = props.className,
+    className = _props$className === void 0 ? "" : _props$className,
+    arialabel = props.arialabel,
+    _props$tabindex = props.tabindex,
+    tabindex = _props$tabindex === void 0 ? 0 : _props$tabindex,
+    hint = props.hint,
+    name = props.name,
+    listener = props.listener,
+    _onClick = props.onClick,
+    _onDoubleClick = props.onDoubleClick,
+    _onMouseEnter = props.onMouseEnter,
+    _onMouseLeave = props.onMouseLeave,
+    onBeforerender = props.onBeforerender,
+    _props$styles = props.styles,
+    styles = _props$styles === void 0 ? {} : _props$styles;
+  var containerRef = (0, _react.useRef)(null);
+
+  // Memoize core calculations
+  var _useMemo = (0, _react.useMemo)(function () {
+      // Calculate percentage
+      var value = typeof datavalue === "string" ? parseFloat(datavalue) : datavalue;
+      var percent = (value - minvalue) / (maxvalue - minvalue) * 100;
+      var percentageVal = Math.min(Math.max(percent, 0), 100);
+
+      // Format display value
+      var decimalPlaces = _constants.progressBarConstants.DECIMAL_COUNT_MAP[displayformat];
+      var isPercent = displayformat.includes("%");
+      var displayVal = percentageVal.toFixed(decimalPlaces);
+      var stroke = 5;
+      var radius = 45;
+      var normalized = radius - stroke / 2;
+      var circum = normalized * 2 * Math.PI;
+      var offset = circum - percentageVal / 100 * circum;
+
+      // Calculate the path for the progress arc
+      var angle = percentageVal / 100 * 360;
+      var rad = (angle - 90) * Math.PI / 180;
+      var x = 50 + normalized * Math.cos(rad);
+      var y = 50 + normalized * Math.sin(rad);
+      var largeArcFlag = angle > 180 ? 1 : 0;
+      var path = "M 50,".concat(50 - normalized, " A ").concat(normalized, " ").concat(normalized, " 0 ").concat(largeArcFlag, " 1 ").concat(x, " ").concat(y);
+      return {
+        percentageValue: percentageVal,
+        displayValue: displayVal,
+        progressColor: type !== "default" ? "var(--wm-progress-circle-".concat(type, "-stroke-active)") : "var(--wm-progress-circle-stroke-active)",
+        strokeWidth: stroke,
+        normalizedRadius: normalized,
+        circumference: circum,
+        strokeDashoffset: offset,
+        isPercent: isPercent,
+        progressPath: path
+      };
+    }, [datavalue, minvalue, maxvalue, type, displayformat]),
+    percentageValue = _useMemo.percentageValue,
+    displayValue = _useMemo.displayValue,
+    progressColor = _useMemo.progressColor,
+    strokeWidth = _useMemo.strokeWidth,
+    normalizedRadius = _useMemo.normalizedRadius,
+    circumference = _useMemo.circumference,
+    strokeDashoffset = _useMemo.strokeDashoffset,
+    isPercent = _useMemo.isPercent,
+    progressPath = _useMemo.progressPath;
+
+  // Default styles if not provided
+  var finalStyles = _objectSpread({
+    width: "150px",
+    height: "150px"
+  }, styles);
+  (0, _react.useEffect)(function () {
+    listener.onChange(name, {
+      percentagevalue: percentageValue
+    });
+    onBeforerender === null || onBeforerender === void 0 || onBeforerender(listener, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
+  }, [percentageValue]);
+  return __jsx(_Box["default"], {
+    component: "div",
+    ref: containerRef,
+    className: "progress app-progress circle ".concat(_props.TYPE_CLASS_MAP_PC[type], " ").concat(className),
+    "aria-label": arialabel,
+    onClick: function onClick(e) {
+      return _onClick === null || _onClick === void 0 ? void 0 : _onClick(e, props);
+    },
+    onDoubleClick: function onDoubleClick(e) {
+      return _onDoubleClick === null || _onDoubleClick === void 0 ? void 0 : _onDoubleClick(e, props);
+    },
+    onMouseEnter: function onMouseEnter(e) {
+      return _onMouseEnter === null || _onMouseEnter === void 0 ? void 0 : _onMouseEnter(e, props);
+    },
+    onMouseLeave: function onMouseLeave(e) {
+      return _onMouseLeave === null || _onMouseLeave === void 0 ? void 0 : _onMouseLeave(e, props);
+    },
+    tabIndex: tabindex,
+    "aria-valuenow": percentageValue,
+    "aria-valuemin": minvalue,
+    "aria-valuemax": maxvalue,
+    role: "progressbar",
+    title: hint,
+    style: finalStyles
+  }, __jsx("svg", {
+    height: "100%",
+    width: "100%",
+    viewBox: "0 0 100 100",
+    xmlns: "http://www.w3.org/2000/svg",
+    style: {
+      overflow: "visible"
+    }
+  }, __jsx("circle", {
+    fill: "transparent",
+    strokeWidth: strokeWidth,
+    r: normalizedRadius,
+    cx: "50",
+    cy: "50"
+  }), __jsx("path", {
+    d: progressPath,
+    fill: "none",
+    strokeWidth: strokeWidth,
+    style: {
+      stroke: progressColor,
+      strokeLinecap: "round",
+      transition: "all 0.3s ease"
+    }
+  }), captionplacement === "inside" && __jsx(_react["default"].Fragment, null, !title && __jsx("text", {
+    x: "50",
+    y: "50",
+    textAnchor: "middle"
+  }, __jsx("tspan", {
+    x: "50",
+    y: "55",
+    fontWeight: "normal",
+    style: {
+      fontSize: "0.70em"
+    }
+  }, displayValue), __jsx("tspan", {
+    fontWeight: "normal",
+    style: {
+      fontSize: "0.45em"
+    }
+  }, isPercent ? "%" : "")), title && __jsx("text", {
+    x: "50",
+    y: subtitle ? "40" : "50",
+    textAnchor: "middle"
+  }, __jsx("tspan", {
+    x: "50",
+    y: subtitle ? "40" : "50",
+    fontWeight: "400",
+    style: {
+      fontSize: "0.70em"
+    }
+  }, title)), subtitle && __jsx("text", {
+    x: "50",
+    y: "60",
+    textAnchor: "middle"
+  }, __jsx("tspan", {
+    x: "50",
+    y: "60",
+    fontWeight: "400",
+    style: {
+      fontSize: "0.70em"
+    }
+  }, subtitle)))));
+};
+WmProgressCircle.displayName = "WmProgressCircle";
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WmProgressCircle);

package/components/basic/progress-circle/props.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TYPE_CLASS_MAP_PC = void 0;
+// Type definitions for the component props
+
+// Map of progress-bar type and classes
+var TYPE_CLASS_MAP_PC = exports.TYPE_CLASS_MAP_PC = {
+  "default": "",
+  success: "progress-circle-success",
+  info: "progress-circle-info",
+  warning: "progress-circle-warning",
+  danger: "progress-circle-danger"
+};