@wavemaker-ai/react-runtime 1.0.0-rc.309 → 1.0.0-rc.314

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

@@ -1,197 +1,180 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.WmProgressCircle = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _Box = _interopRequireDefault(require("@mui/material/Box"));
-var _withBaseWrapper = require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper");
-var _props = require("@wavemaker-ai/react-runtime/components/basic/progress-circle/props");
-var _constants = require("@wavemaker-ai/react-runtime/components/constants");
-var _props2 = require("./props");
-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;
-var WmProgressCircle = exports.WmProgressCircle = function WmProgressCircle(props) {
-  var datavalue = 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 !== undefined ? datavalue : _constants.progressBarConstants.DEFAULT_DATAVALUE;
-      var percent = (value - minvalue) / (maxvalue - minvalue) * 100;
-      // Round to avoid floating-point precision issues (e.g., 55.00000000000001)
-      var percentageVal = Math.min(Math.max(Math.round(percent * 1e10) / 1e10, 0), 100);
-
-      // Format display value
-      var decimalPlaces = _constants.progressBarConstants.DECIMAL_COUNT_MAP[displayformat];
-      var isPercent = displayformat.includes("%");
-      var displayVal = percentageVal.toFixed(decimalPlaces);
-      var stroke = props.strokeWidth || 5;
-      var radius = props.radius || 45;
-      var normalized = radius - stroke / 2;
-      var circum = normalized * 2 * Math.PI;
-      var offset = circum - percentageVal / 100 * circum;
-      return {
-        percentageValue: percentageVal,
-        displayValue: displayVal,
-        progressColor: type !== "default" ? type in _props2.EnumProgressCircleType ? "var(--wm-progress-circle-".concat(type, "-stroke-active)") : "var(--wm-progress-circle-stroke-active)" : "var(--wm-progress-circle-stroke-active)",
-        strokeWidth: stroke,
-        normalizedRadius: normalized,
-        circumference: circum,
-        strokeDashoffset: offset,
-        isPercent: isPercent
-      };
-    }, [datavalue, minvalue, maxvalue, type, displayformat, props.strokeWidth, props.radius]),
-    percentageValue = _useMemo.percentageValue,
-    displayValue = _useMemo.displayValue,
-    progressColor = _useMemo.progressColor,
-    strokeWidth = _useMemo.strokeWidth,
-    normalizedRadius = _useMemo.normalizedRadius,
-    circumference = _useMemo.circumference,
-    strokeDashoffset = _useMemo.strokeDashoffset,
-    isPercent = _useMemo.isPercent;
-  (0, _react.useEffect)(function () {
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef } from "react";
+import clsx from "clsx";
+import Box from "@mui/material/Box";
+import { withBaseWrapper } from "../../../higherOrder/withBaseWrapper";
+import {
+  TYPE_CLASS_MAP_PC
+} from "./props";
+import { progressBarConstants } from "../../constants";
+import { EnumProgressCircleType } from "./props";
+const WmProgressCircle = (props) => {
+  const {
+    datavalue,
+    minvalue = progressBarConstants.DEFAULT_MIN_VALUE,
+    maxvalue = progressBarConstants.DEFAULT_MAX_VALUE,
+    type = progressBarConstants.DEFAULT_TYPE,
+    displayformat = "9%",
+    captionplacement = "inside",
+    title,
+    subtitle,
+    className = "",
+    arialabel,
+    tabindex = 0,
+    hint,
+    name,
+    listener,
+    onClick,
+    onDoubleClick,
+    onMouseEnter,
+    onMouseLeave,
+    onBeforerender,
+    styles = {}
+  } = props;
+  const containerRef = useRef(null);
+  const {
+    percentageValue,
+    displayValue,
+    progressColor,
+    strokeWidth,
+    normalizedRadius,
+    circumference,
+    strokeDashoffset,
+    isPercent
+  } = useMemo(() => {
+    const value = typeof datavalue === "string" ? parseFloat(datavalue) : datavalue !== void 0 ? datavalue : progressBarConstants.DEFAULT_DATAVALUE;
+    const percent = (value - minvalue) / (maxvalue - minvalue) * 100;
+    const percentageVal = Math.min(Math.max(Math.round(percent * 1e10) / 1e10, 0), 100);
+    const decimalPlaces = progressBarConstants.DECIMAL_COUNT_MAP[displayformat];
+    const isPercent2 = displayformat.includes("%");
+    const displayVal = percentageVal.toFixed(decimalPlaces);
+    const stroke = props.strokeWidth || 5;
+    const radius = props.radius || 45;
+    const normalized = radius - stroke / 2;
+    const circum = normalized * 2 * Math.PI;
+    const offset = circum - percentageVal / 100 * circum;
+    return {
+      percentageValue: percentageVal,
+      displayValue: displayVal,
+      progressColor: type !== "default" ? type in EnumProgressCircleType ? `var(--wm-progress-circle-${type}-stroke-active)` : "var(--wm-progress-circle-stroke-active)" : "var(--wm-progress-circle-stroke-active)",
+      strokeWidth: stroke,
+      normalizedRadius: normalized,
+      circumference: circum,
+      strokeDashoffset: offset,
+      isPercent: isPercent2
+    };
+  }, [datavalue, minvalue, maxvalue, type, displayformat, props.strokeWidth, props.radius]);
+  useEffect(() => {
     if (listener && name) {
       listener.onChange(name, {
         percentagevalue: percentageValue
       });
-      onBeforerender === null || onBeforerender === void 0 || onBeforerender(listener, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
+      onBeforerender == null ? void 0 : onBeforerender(listener, listener == null ? void 0 : listener.Widgets[name]);
     }
   }, [percentageValue]);
-
-  // assigning default datavalue to the proxy object
-  (0, _react.useEffect)(function () {
+  useEffect(() => {
     if (listener) {
       listener.onChange(name, {
-        datavalue: datavalue !== undefined ? datavalue : _constants.progressBarConstants.DEFAULT_DATAVALUE
+        datavalue: datavalue !== void 0 ? datavalue : progressBarConstants.DEFAULT_DATAVALUE
       });
     }
   }, []);
-  return __jsx(_Box["default"], {
-    component: "div",
-    ref: containerRef,
-    className: (0, _clsx["default"])("progress", "app-progress", "circle", "wm-progress-circle-root", _props.TYPE_CLASS_MAP_PC[type], 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: styles,
-    hidden: props.hidden,
-    name: name
-  }, __jsx("svg", {
-    className: "wm-progress-circle-svg",
-    height: "100%",
-    width: "100%",
-    viewBox: "0 0 100 100",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, __jsx("circle", {
-    fill: "transparent",
-    strokeWidth: strokeWidth,
-    r: normalizedRadius,
-    cx: "50",
-    cy: "50"
-  }), __jsx("circle", {
-    className: "wm-progress-circle-arc",
-    fill: "transparent",
-    strokeWidth: strokeWidth,
-    strokeDasharray: circumference,
-    strokeDashoffset: strokeDashoffset,
-    strokeLinecap: "round",
-    r: normalizedRadius,
-    cx: "50",
-    cy: "50",
-    style: {
-      stroke: progressColor
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      component: "div",
+      ref: containerRef,
+      className: clsx(
+        "progress",
+        "app-progress",
+        "circle",
+        "wm-progress-circle-root",
+        TYPE_CLASS_MAP_PC[type],
+        className
+      ),
+      "aria-label": arialabel,
+      onClick: (e) => onClick == null ? void 0 : onClick(e, props),
+      onDoubleClick: (e) => onDoubleClick == null ? void 0 : onDoubleClick(e, props),
+      onMouseEnter: (e) => onMouseEnter == null ? void 0 : onMouseEnter(e, props),
+      onMouseLeave: (e) => onMouseLeave == null ? void 0 : onMouseLeave(e, props),
+      tabIndex: tabindex,
+      "aria-valuenow": percentageValue,
+      "aria-valuemin": minvalue,
+      "aria-valuemax": maxvalue,
+      role: "progressbar",
+      title: hint,
+      style: styles,
+      hidden: props.hidden,
+      name,
+      children: /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          className: "wm-progress-circle-svg",
+          height: "100%",
+          width: "100%",
+          viewBox: "0 0 100 100",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: [
+            /* @__PURE__ */ jsx("circle", { fill: "transparent", strokeWidth, r: normalizedRadius, cx: "50", cy: "50" }),
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                className: "wm-progress-circle-arc",
+                fill: "transparent",
+                strokeWidth,
+                strokeDasharray: circumference,
+                strokeDashoffset,
+                strokeLinecap: "round",
+                r: normalizedRadius,
+                cx: "50",
+                cy: "50",
+                style: { stroke: progressColor }
+              }
+            ),
+            captionplacement === "inside" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              !title && /* @__PURE__ */ jsxs("text", { x: "50", y: "50", textAnchor: "middle", children: [
+                /* @__PURE__ */ jsx(
+                  "tspan",
+                  {
+                    x: "50",
+                    y: "55",
+                    fontWeight: "normal",
+                    className: "wm-progress-circle-caption-primary",
+                    children: displayValue
+                  }
+                ),
+                /* @__PURE__ */ jsx("tspan", { fontWeight: "normal", className: "wm-progress-circle-caption-suffix", children: isPercent ? "%" : "" })
+              ] }),
+              title && /* @__PURE__ */ jsx("text", { x: "50", y: subtitle ? "40" : "50", textAnchor: "middle", children: /* @__PURE__ */ jsx(
+                "tspan",
+                {
+                  x: "50",
+                  y: subtitle ? "40" : "50",
+                  fontWeight: "400",
+                  className: "wm-progress-circle-caption-primary",
+                  children: title
+                }
+              ) }),
+              subtitle && /* @__PURE__ */ jsx("text", { x: "50", y: "60", textAnchor: "middle", children: /* @__PURE__ */ jsx(
+                "tspan",
+                {
+                  x: "50",
+                  y: "60",
+                  fontWeight: "400",
+                  className: "wm-progress-circle-caption-primary",
+                  children: subtitle
+                }
+              ) })
+            ] })
+          ]
+        }
+      )
     }
-  }), captionplacement === "inside" && __jsx(_react["default"].Fragment, null, !title && __jsx("text", {
-    x: "50",
-    y: "50",
-    textAnchor: "middle"
-  }, __jsx("tspan", {
-    x: "50",
-    y: "55",
-    fontWeight: "normal",
-    className: "wm-progress-circle-caption-primary"
-  }, displayValue), __jsx("tspan", {
-    fontWeight: "normal",
-    className: "wm-progress-circle-caption-suffix"
-  }, isPercent ? "%" : "")), title && __jsx("text", {
-    x: "50",
-    y: subtitle ? "40" : "50",
-    textAnchor: "middle"
-  }, __jsx("tspan", {
-    x: "50",
-    y: subtitle ? "40" : "50",
-    fontWeight: "400",
-    className: "wm-progress-circle-caption-primary"
-  }, title)), subtitle && __jsx("text", {
-    x: "50",
-    y: "60",
-    textAnchor: "middle"
-  }, __jsx("tspan", {
-    x: "50",
-    y: "60",
-    fontWeight: "400",
-    className: "wm-progress-circle-caption-primary"
-  }, subtitle)))));
+  );
 };
 WmProgressCircle.displayName = "WmProgressCircle";
-
-/**
- * The WmProgressCircle component is used to display progress in a circular format.
- * It supports various colors (types) and custom title/subtitle.
- *
- * - [Playground](https://react-components.wavemaker.ai/?path=/story/basic-progresscircle--showcase)
- *
- * - [Docs](https://react-components.wavemaker.ai/?path=/story/basic-progresscircle--docs)
- *
- * @param props - {@link WmProgressCircleProps}
- */
-var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WmProgressCircle);
+var progress_circle_default = withBaseWrapper(WmProgressCircle);
+export {
+  WmProgressCircle,
+  progress_circle_default as default
+};

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

@@ -1,39 +1,19 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TYPE_CLASS_MAP_PC = exports.EnumProgressCircleType = void 0;
-/**
- * Base props specific to the WmProgressCircle component.
- */
-
-/**
- * Combined props for the WmProgressCircle component, including base WaveMaker props.
- */
-
-/**
- * Map of progress-circle type and classes.
- */
-var TYPE_CLASS_MAP_PC = exports.TYPE_CLASS_MAP_PC = {
-  "default": "",
+const TYPE_CLASS_MAP_PC = {
+  default: "",
   success: "progress-circle-success",
   info: "progress-circle-info",
   warning: "progress-circle-warning",
   danger: "progress-circle-danger"
 };
-
-/**
- * Enum-like type for progress circle types.
- */
-/**
- * Enum for progress circle types.
- */
-var EnumProgressCircleType = exports.EnumProgressCircleType = /*#__PURE__*/function (EnumProgressCircleType) {
-  EnumProgressCircleType["SUCCESS"] = "success";
-  EnumProgressCircleType["INFO"] = "info";
-  EnumProgressCircleType["WARNING"] = "warning";
-  EnumProgressCircleType["DANGER"] = "danger";
-  EnumProgressCircleType["DEFAULT"] = "default";
-  return EnumProgressCircleType;
-}({});
+var EnumProgressCircleType = /* @__PURE__ */ ((EnumProgressCircleType2) => {
+  EnumProgressCircleType2["SUCCESS"] = "success";
+  EnumProgressCircleType2["INFO"] = "info";
+  EnumProgressCircleType2["WARNING"] = "warning";
+  EnumProgressCircleType2["DANGER"] = "danger";
+  EnumProgressCircleType2["DEFAULT"] = "default";
+  return EnumProgressCircleType2;
+})(EnumProgressCircleType || {});
+export {
+  EnumProgressCircleType,
+  TYPE_CLASS_MAP_PC
+};