@wavemaker-ai/react-runtime 1.0.0-rc.647502 → 1.0.0-rc.647565

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

@@ -1,183 +1,247 @@
-"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.WmProgressBar = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireWildcard(require("react"));
-var _Box = _interopRequireDefault(require("@mui/material/Box"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _transformedDatasetUtils = require("@wavemaker-ai/react-runtime/utils/transformedDataset-utils");
-var _props = require("@wavemaker-ai/react-runtime/components/basic/progress-bar/props");
-var _withBaseWrapper = require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper");
-var _formatUtil = require("@wavemaker-ai/react-runtime/utils/format-util");
-var _constants = require("@wavemaker-ai/react-runtime/components/constants");
-var _attr = require("@wavemaker-ai/react-runtime/utils/attr");
-var _excluded = ["type", "datavalue", "minvalue", "maxvalue", "captionplacement", "tabindex", "arialabel", "dataset", "displayformat", "styles", "className", "hint", "height", "width", "listener", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave"];
-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 WmProgressBar = exports.WmProgressBar = /*#__PURE__*/(0, _react.memo)(function (props) {
-  var _props$type = props.type,
-    type = _props$type === void 0 ? _constants.progressBarConstants.DEFAULT_TYPE : _props$type,
-    _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$captionplaceme = props.captionplacement,
-    captionplacement = _props$captionplaceme === void 0 ? _constants.progressBarConstants.DEFAULT_CAPTION_PLACEMENT : _props$captionplaceme,
-    tabindex = props.tabindex,
-    arialabel = props.arialabel,
-    dataset = props.dataset,
-    displayformat = props.displayformat,
-    styles = props.styles,
-    className = props.className,
-    hint = props.hint,
-    height = props.height,
-    width = props.width,
-    listener = props.listener,
-    onClick = props.onClick,
-    onDoubleClick = props.onDoubleClick,
-    onMouseEnter = props.onMouseEnter,
-    onMouseLeave = props.onMouseLeave,
-    rest = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  var transformedDataset = (0, _react.useMemo)(function () {
-    if (!Array.isArray(dataset)) {
-      return [];
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
     }
-    var firstItem = dataset === null || dataset === void 0 ? void 0 : dataset[0];
-    var firstKey = firstItem ? Object.keys(firstItem)[0] : "";
-    return (0, _transformedDatasetUtils.transformDataset)(dataset, datavalue, firstKey, "", "", "", "", "");
-  }, [dataset]);
-  var _useState = (0, _react.useState)([{
-      cls: _props.TYPE_CLASS_MAP[type || "default"],
-      progressBarWidth: "0%",
-      displayValue: "0"
-    }]),
-    progressData = _useState[0],
-    setProgressData = _useState[1];
-  var getFormattedDisplayVal = (0, _react.useCallback)(function (val) {
-    var format = displayformat || "9";
-    var formattedValue = parseFloat(String(val)).toFixed((0, _formatUtil.getDecimalCount)(format, _constants.progressBarConstants.DECIMAL_COUNT_MAP));
-    if (format.includes("%")) {
-      formattedValue += "%";
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
     }
-    return formattedValue;
-  }, [displayformat]);
-  var prepareData = (0, _react.useCallback)(function () {
-    if (transformedDataset && Array.isArray(transformedDataset) && transformedDataset.length > 0 && type && datavalue) {
-      var newProgressData = transformedDataset.map(function (datum) {
-        var _valFromDatum$dataObj;
-        var valFromDatum = (0, _formatUtil.findValueOf)(datum, datavalue);
-        var valStr = String((valFromDatum === null || valFromDatum === void 0 || (_valFromDatum$dataObj = valFromDatum.dataObject) === null || _valFromDatum$dataObj === void 0 ? void 0 : _valFromDatum$dataObj[datavalue]) || datavalue);
-        var progressBarWidthStr = valStr;
-        if (valStr && !valStr.includes("%")) {
-          progressBarWidthStr = "".concat(valStr, "%");
+  return target;
+};
+import { jsx } from "react/jsx-runtime";
+import { createElement } from "react";
+import { memo, useEffect, useMemo, useCallback, useState } from "react";
+import Box from "@mui/material/Box";
+import clsx from "clsx";
+import { transformDataset } from "../../../utils/transformedDataset-utils";
+import {
+  TYPE_CLASS_MAP
+} from "./props";
+import { withBaseWrapper } from "../../../higherOrder/withBaseWrapper";
+import {
+  getDecimalCount,
+  isPercentageValue,
+  findValueOf
+} from "../../../utils/format-util";
+import { progressBarConstants } from "../../constants";
+import { removeInvalidAttributes } from "../../../utils/attr";
+const WmProgressBar = memo(
+  (props) => {
+    const _a = props, {
+      type = progressBarConstants.DEFAULT_TYPE,
+      datavalue = 30,
+      minvalue = progressBarConstants.DEFAULT_MIN_VALUE,
+      maxvalue = progressBarConstants.DEFAULT_MAX_VALUE,
+      captionplacement = progressBarConstants.DEFAULT_CAPTION_PLACEMENT,
+      tabindex,
+      arialabel,
+      dataset,
+      displayformat,
+      styles,
+      className,
+      hint,
+      height,
+      width,
+      listener,
+      onClick,
+      onDoubleClick,
+      onMouseEnter,
+      onMouseLeave
+    } = _a, rest = __objRest(_a, [
+      "type",
+      "datavalue",
+      "minvalue",
+      "maxvalue",
+      "captionplacement",
+      "tabindex",
+      "arialabel",
+      "dataset",
+      "displayformat",
+      "styles",
+      "className",
+      "hint",
+      "height",
+      "width",
+      "listener",
+      "onClick",
+      "onDoubleClick",
+      "onMouseEnter",
+      "onMouseLeave"
+    ]);
+    const transformedDataset = useMemo(() => {
+      if (!Array.isArray(dataset)) {
+        return [];
+      }
+      const firstItem = dataset == null ? void 0 : dataset[0];
+      const firstKey = firstItem ? Object.keys(firstItem)[0] : "";
+      return transformDataset(dataset, datavalue, firstKey, "", "", "", "", "");
+    }, [dataset]);
+    const [progressData, setProgressData] = useState([
+      {
+        cls: TYPE_CLASS_MAP[type || "default"],
+        progressBarWidth: "0%",
+        displayValue: "0"
+      }
+    ]);
+    const getFormattedDisplayVal = useCallback(
+      (val) => {
+        const format = displayformat || "9";
+        let formattedValue = parseFloat(String(val)).toFixed(
+          getDecimalCount(format, progressBarConstants.DECIMAL_COUNT_MAP)
+        );
+        if (format.includes("%")) {
+          formattedValue += "%";
         }
-        var cls = _props.TYPE_CLASS_MAP[type];
-        var displayValue = getFormattedDisplayVal(valStr);
-        return {
-          cls: cls,
-          progressBarWidth: progressBarWidthStr,
-          displayValue: displayValue
-        };
-      });
-      setProgressData(newProgressData);
-    } else {
-      var calculatedWidth = "0%";
-      var valueForDisplayFormat = 0;
-      if (datavalue !== undefined && datavalue !== null) {
-        var datavalueStr = String(datavalue);
-        if ((0, _formatUtil.isPercentageValue)(datavalueStr)) {
-          calculatedWidth = datavalueStr || "0%";
-          valueForDisplayFormat = datavalueStr;
-        } else {
-          var denominator = Number(maxvalue) - Number(minvalue) || 1;
-          calculatedWidth = "".concat((Number(datavalueStr) - Number(minvalue)) * 100 / denominator, "%");
-          valueForDisplayFormat = calculatedWidth;
+        return formattedValue;
+      },
+      [displayformat]
+    );
+    const prepareData = useCallback(() => {
+      if (transformedDataset && Array.isArray(transformedDataset) && transformedDataset.length > 0 && type && datavalue) {
+        const newProgressData = transformedDataset.map((datum) => {
+          var _a2;
+          const valFromDatum = findValueOf(datum, datavalue);
+          const valStr = String(((_a2 = valFromDatum == null ? void 0 : valFromDatum.dataObject) == null ? void 0 : _a2[datavalue]) || datavalue);
+          let progressBarWidthStr = valStr;
+          if (valStr && !valStr.includes("%")) {
+            progressBarWidthStr = `${valStr}%`;
+          }
+          const cls = TYPE_CLASS_MAP[type];
+          const displayValue = getFormattedDisplayVal(valStr);
+          return {
+            cls,
+            progressBarWidth: progressBarWidthStr,
+            displayValue
+          };
+        });
+        setProgressData(newProgressData);
+      } else {
+        let calculatedWidth = "0%";
+        let valueForDisplayFormat = 0;
+        if (datavalue !== void 0 && datavalue !== null) {
+          const datavalueStr = String(datavalue);
+          if (isPercentageValue(datavalueStr)) {
+            calculatedWidth = datavalueStr || "0%";
+            valueForDisplayFormat = datavalueStr;
+          } else {
+            const denominator = Number(maxvalue) - Number(minvalue) || 1;
+            calculatedWidth = `${(Number(datavalueStr) - Number(minvalue)) * 100 / denominator}%`;
+            valueForDisplayFormat = calculatedWidth;
+          }
         }
+        setProgressData([
+          {
+            displayValue: getFormattedDisplayVal(String(valueForDisplayFormat)),
+            progressBarWidth: calculatedWidth,
+            cls: TYPE_CLASS_MAP[type || "default"]
+          }
+        ]);
       }
-      setProgressData([{
-        displayValue: getFormattedDisplayVal(String(valueForDisplayFormat)),
-        progressBarWidth: calculatedWidth,
-        cls: _props.TYPE_CLASS_MAP[type || "default"]
-      }]);
-    }
-  }, [transformedDataset, datavalue, type, minvalue, maxvalue, getFormattedDisplayVal, setProgressData]);
-  var handleClick = (0, _react.useCallback)(function (event) {
-    onClick === null || onClick === void 0 || onClick(event, props);
-    if (listener !== null && listener !== void 0 && listener.onChange) {
-      listener.onChange(props.name, {
-        datavalue: datavalue
-      });
-    }
-  }, [onClick, listener, datavalue, props]);
-  var handleDoubleClick = (0, _react.useCallback)(function (event) {
-    onDoubleClick === null || onDoubleClick === void 0 || onDoubleClick(event, props);
-  }, [onDoubleClick]);
-  var handleMouseEnter = (0, _react.useCallback)(function (event) {
-    onMouseEnter === null || onMouseEnter === void 0 || onMouseEnter(event, props);
-  }, [onMouseEnter]);
-  var handleMouseLeave = (0, _react.useCallback)(function (event) {
-    onMouseLeave === null || onMouseLeave === void 0 || onMouseLeave(event, props);
-  }, [onMouseLeave]);
-  (0, _react.useEffect)(function () {
-    prepareData();
-  }, [prepareData]);
-  var events = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, onClick ? {
-    onClick: handleClick
-  } : {}), onDoubleClick ? {
-    onDoubleClick: handleDoubleClick
-  } : {}), onMouseEnter ? {
-    onMouseEnter: handleMouseEnter
-  } : {}), onMouseLeave ? {
-    onMouseLeave: handleMouseLeave
-  } : {});
-  return __jsx(_Box["default"], (0, _extends2["default"])({
-    className: (0, _clsx["default"])(_constants.progressBarConstants.DEFAULT_CLASS, className)
-  }, (0, _attr.removeInvalidAttributes)(rest), {
-    style: styles,
-    "aria-label": arialabel,
-    title: hint
-  }), progressData.map(function (bar, index) {
-    return __jsx(_Box["default"], (0, _extends2["default"])({}, events, {
-      role: "progressbar",
-      key: index,
-      className: "multi-bar wm-progress-segment ".concat(bar.cls),
-      style: {
-        "--wm-progress-segment-width": bar.progressBarWidth
+    }, [
+      transformedDataset,
+      datavalue,
+      type,
+      minvalue,
+      maxvalue,
+      getFormattedDisplayVal,
+      setProgressData
+    ]);
+    const handleClick = useCallback(
+      (event) => {
+        onClick == null ? void 0 : onClick(event, props);
+        if (listener == null ? void 0 : listener.onChange) {
+          listener.onChange(props.name, {
+            datavalue
+          });
+        }
+      },
+      [onClick, listener, datavalue, props]
+    );
+    const handleDoubleClick = useCallback(
+      (event) => {
+        onDoubleClick == null ? void 0 : onDoubleClick(event, props);
+      },
+      [onDoubleClick]
+    );
+    const handleMouseEnter = useCallback(
+      (event) => {
+        onMouseEnter == null ? void 0 : onMouseEnter(event, props);
+      },
+      [onMouseEnter]
+    );
+    const handleMouseLeave = useCallback(
+      (event) => {
+        onMouseLeave == null ? void 0 : onMouseLeave(event, props);
       },
-      "aria-valuenow": Number(bar.displayValue) || 0,
-      "aria-valuemin": minvalue,
-      "aria-valuemax": maxvalue,
-      tabIndex: tabindex
-    }), captionplacement === "inside" && __jsx(_Box["default"], {
-      component: "span",
-      className: "app-progress-label",
-      "data-caption-placement": captionplacement
-    }, bar.displayValue));
-  }));
-}, function (prev, current) {
-  return prev.datavalue === current.datavalue && prev.type === current.type && prev.height === current.height && prev.width === current.width && JSON.stringify(prev.dataset) === JSON.stringify(current.dataset) && prev.minvalue === current.minvalue && prev.maxvalue === current.maxvalue && prev.hidden === current.hidden;
-});
+      [onMouseLeave]
+    );
+    useEffect(() => {
+      prepareData();
+    }, [prepareData]);
+    const events = __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, onClick ? { onClick: handleClick } : {}), onDoubleClick ? { onDoubleClick: handleDoubleClick } : {}), onMouseEnter ? { onMouseEnter: handleMouseEnter } : {}), onMouseLeave ? { onMouseLeave: handleMouseLeave } : {});
+    return /* @__PURE__ */ jsx(
+      Box,
+      __spreadProps(__spreadValues({
+        className: clsx(progressBarConstants.DEFAULT_CLASS, className)
+      }, removeInvalidAttributes(rest)), {
+        style: styles,
+        "aria-label": arialabel,
+        title: hint,
+        children: progressData.map((bar, index) => /* @__PURE__ */ createElement(
+          Box,
+          __spreadProps(__spreadValues({}, events), {
+            role: "progressbar",
+            key: index,
+            className: `multi-bar wm-progress-segment ${bar.cls}`,
+            style: {
+              "--wm-progress-segment-width": bar.progressBarWidth
+            },
+            "aria-valuenow": Number(bar.displayValue) || 0,
+            "aria-valuemin": minvalue,
+            "aria-valuemax": maxvalue,
+            tabIndex: tabindex
+          }),
+          captionplacement === "inside" && /* @__PURE__ */ jsx(
+            Box,
+            {
+              component: "span",
+              className: "app-progress-label",
+              "data-caption-placement": captionplacement,
+              children: bar.displayValue
+            }
+          )
+        ))
+      })
+    );
+  },
+  (prev, current) => {
+    return prev.datavalue === current.datavalue && prev.type === current.type && prev.height === current.height && prev.width === current.width && JSON.stringify(prev.dataset) === JSON.stringify(current.dataset) && prev.minvalue === current.minvalue && prev.maxvalue === current.maxvalue && prev.hidden === current.hidden;
+  }
+);
 WmProgressBar.displayName = "WmProgressBar";
-
-/**
- * The WmProgressBar component is used to display the progress of a task.
- * It supports different types (colors), striped variations, and custom captions.
- *
- * - [Playground](https://react-components.wavemaker.ai/?path=/story/basic-progressbar--showcase)
- *
- * - [Docs](https://react-components.wavemaker.ai/?path=/story/basic-progressbar--docs)
- *
- * @param props - {@link WmProgressBarProps}
- */
-var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WmProgressBar);
+var progress_bar_default = withBaseWrapper(WmProgressBar);
+export {
+  WmProgressBar,
+  progress_bar_default as default
+};

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

@@ -1,26 +1,5 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TYPE_CLASS_MAP = void 0;
-/**
- * Information about the progress state.
- */
-
-/**
- * Valid types for the ProgressBar component.
- */
-
-/**
- * Valid caption placements for the ProgressBar component.
- */
-
-/**
- * Map of progress-bar type and classes.
- */
-var TYPE_CLASS_MAP = exports.TYPE_CLASS_MAP = {
-  "default": "progress-bar",
+const TYPE_CLASS_MAP = {
+  default: "progress-bar",
   "default-striped": "progress-bar progress-bar-striped",
   success: "progress-bar progress-bar-success",
   "success-striped": "progress-bar progress-bar-success progress-bar-striped",
@@ -31,11 +10,6 @@ var TYPE_CLASS_MAP = exports.TYPE_CLASS_MAP = {
   danger: "progress-bar progress-bar-danger",
   "danger-striped": "progress-bar progress-bar-danger progress-bar-striped"
 };
-
-/**
- * Base props specific to the WmProgressBar component.
- */
-
-/**
- * Combined props for the WmProgressBar component, including base WaveMaker props.
- */
+export {
+  TYPE_CLASS_MAP
+};