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

package/components/basic/spinner/index.js

@@ -0,0 +1,205 @@
+"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.WmSpinner = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _withBaseWrapper = require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper");
+var _props = 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;
+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 WmSpinner = exports.WmSpinner = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var _props$listener2;
+  var _props$caption = props.caption,
+    caption = _props$caption === void 0 ? "" : _props$caption,
+    name = props.name,
+    _props$type = props.type,
+    type = _props$type === void 0 ? "icon" : _props$type,
+    _props$iconclass = props.iconclass,
+    iconclass = _props$iconclass === void 0 ? "fa fa-circle-o-notch fa-spin" : _props$iconclass,
+    iconsize = props.iconsize,
+    _props$imagewidth = props.imagewidth,
+    imagewidth = _props$imagewidth === void 0 ? "20px" : _props$imagewidth,
+    imageheight = props.imageheight,
+    _props$animation = props.animation,
+    animation = _props$animation === void 0 ? "spin" : _props$animation,
+    styles = props.styles,
+    className = props.className,
+    id = props.id,
+    servicevariabletotrack = props.servicevariabletotrack,
+    show = props.show,
+    hint = props.hint,
+    arialabel = props.arialabel;
+  var DEFAULT_CLS = "app-spinner";
+  var servicesRef = (0, _react.useRef)(null);
+  var isMounted = (0, _react.useRef)(true);
+  var invokedVariablesRef = (0, _react.useRef)(new Set());
+  var _useState = (0, _react.useState)({}),
+    trackedVariable = _useState[0],
+    setTrackedVariable = _useState[1];
+  var parsedShow = (0, _react.useMemo)(function () {
+    return !!show;
+  }, [show]);
+  var _useState2 = (0, _react.useState)(parsedShow),
+    isVisible = _useState2[0],
+    setIsVisible = _useState2[1];
+  var handleVariableEvent = function handleVariableEvent(variableName, event, variable) {
+    var _ref;
+    // Prevent state updates if component is unmounted
+    if (!isMounted.current) return;
+    var updateState = (_ref = event === _props.VariableEvents.SUCCESS ? variable : undefined) !== null && _ref !== void 0 ? _ref : {};
+    setTrackedVariable(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, (0, _defineProperty2["default"])({}, variableName, _objectSpread(_objectSpread({}, prev[variableName] || {}), {}, {
+        loading: event === _props.VariableEvents.BEFORE_INVOKE,
+        error: event === _props.VariableEvents.ERROR ? variable : null,
+        variable: variable,
+        spinnerMessage: variable.spinnerMessage,
+        spinnerContext: variable.spinnerContext
+      })));
+    });
+    if (updateState != undefined) {
+      messageHandler(variableName);
+    }
+  };
+  var messageHandler = function messageHandler(key) {
+    var _trackedVariable$key;
+    return __jsx(_Typography["default"], {
+      component: "p",
+      key: key
+    }, (_trackedVariable$key = trackedVariable[key]) === null || _trackedVariable$key === void 0 ? void 0 : _trackedVariable$key.spinnerMessage);
+  };
+  (0, _react.useEffect)(function () {
+    var newSubscriptions = [];
+    if (servicevariabletotrack && props.listener) {
+      var _props$listener;
+      servicesRef.current = servicevariabletotrack.split(",");
+      var Variables = (_props$listener = props.listener) === null || _props$listener === void 0 ? void 0 : _props$listener.Variables;
+      if (!Variables) return; // Guard if listener or Variables is not present
+      servicesRef.current.forEach(function (name) {
+        var variable = Variables[name];
+        if (variable) {
+          if (typeof variable.invoke === "function" && !invokedVariablesRef.current.has(name)) {
+            variable.invoke();
+            invokedVariablesRef.current.add(name);
+          }
+          Object.values(_props.VariableEvents).forEach(function (event) {
+            var handler = function handler() {
+              return handleVariableEvent(name, event, variable);
+            };
+            if (variable && typeof variable.subscribe === "function") {
+              variable.subscribe(event, handler);
+              newSubscriptions.push({
+                variable: variable,
+                event: event,
+                handler: handler
+              });
+            }
+          });
+        }
+      });
+    }
+    return function () {
+      newSubscriptions.forEach(function (_ref2) {
+        var variable = _ref2.variable,
+          event = _ref2.event,
+          handler = _ref2.handler;
+        if (variable && typeof variable.unsubscribe === "function") {
+          variable.unsubscribe(event, handler);
+        }
+      });
+    };
+  }, [servicevariabletotrack, (_props$listener2 = props.listener) === null || _props$listener2 === void 0 ? void 0 : _props$listener2.Variables]);
+  (0, _react.useEffect)(function () {
+    if (servicevariabletotrack) {
+      // If servicevariabletotrack is defined, its loading state dictates visibility
+      var services = servicevariabletotrack.split(",");
+      var isLoading = services.some(function (serviceName) {
+        var _trackedVariable$serv;
+        return ((_trackedVariable$serv = trackedVariable[serviceName]) === null || _trackedVariable$serv === void 0 ? void 0 : _trackedVariable$serv.loading) === true;
+      });
+      setIsVisible(isLoading);
+    } else {
+      // If servicevariabletotrack is NOT defined, parsedShow dictates visibility
+      setIsVisible(parsedShow);
+    }
+  }, [trackedVariable, servicevariabletotrack, parsedShow]);
+  var renderSpinnerContent = function renderSpinnerContent() {
+    if (type === "image" && props.image) {
+      return __jsx(_Box["default"], {
+        component: "span",
+        className: (0, _clsx["default"])("spinner-image", "wm-spinner-image", "animated infinite", animation === "spin" ? "fa-spin" : animation),
+        style: {
+          "--wm-spinner-image-width": imagewidth || "20px",
+          "--wm-spinner-image-height": imageheight || "auto",
+          "--wm-spinner-image-bg-image": "url(".concat(props.image, ")"),
+          "--wm-spinner-image-bg-size": imagewidth || "20px"
+        },
+        "aria-hidden": "true"
+      });
+    }
+    if (type === "icon") {
+      return __jsx("i", {
+        className: (0, _clsx["default"])("spinner-image animated infinite", "wm-spinner-icon", iconclass, animation === "spin" ? "fa-spin" : animation),
+        "aria-hidden": "true",
+        style: {
+          "--wm-spinner-icon-size": iconsize
+        }
+      });
+    }
+    return __jsx(_CircularProgress["default"], null);
+  };
+  var hasDynamicMessages = servicevariabletotrack && Object.keys(trackedVariable).length > 0;
+  var shouldShowStaticCaption = caption && !hasDynamicMessages;
+  return __jsx(_react["default"].Fragment, null, isVisible && __jsx(_Box["default"], {
+    title: hint,
+    className: (0, _clsx["default"])(DEFAULT_CLS, className),
+    style: styles,
+    id: id,
+    "aria-label": arialabel,
+    role: "alert",
+    "aria-live": "polite",
+    "aria-busy": "true",
+    hidden: props.hidden
+  }, __jsx(_Box["default"], {
+    className: "spinner-message"
+  }, renderSpinnerContent(), shouldShowStaticCaption && __jsx(_Typography["default"], {
+    component: "span",
+    className: "spinner-text",
+    dangerouslySetInnerHTML: {
+      __html: caption
+    }
+  }), hasDynamicMessages && __jsx(_Box["default"], {
+    className: "spinner-messages"
+  }, Object.keys(trackedVariable).map(function (key) {
+    return messageHandler(key);
+  })))));
+}, function (prev, current) {
+  var keys = ["caption", "type", "servicevariabletotrack", "show", "iconclass", "iconsize", "image", "imagewidth", "imageheight", "animation"];
+  return keys.every(function (key) {
+    return prev[key] === current[key];
+  });
+});
+WmSpinner.displayName = "WmSpinner";
+
+/**
+ * The WmSpinner component is used to show a loading indicator, which can be an icon,
+ * an image, or a default circular progress bar. It can track service variables to
+ * automatically show/hide based on their loading state.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/basic-spinner--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/basic-spinner--docs)
+ *
+ * @param props - {@link WmSpinnerProps}
+ */
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WmSpinner);

package/components/basic/spinner/props.d.ts

@@ -0,0 +1,63 @@
+import { BaseProps, Prettify } from "@wavemaker-ai/react-runtime/higherOrder/props";
+/**
+ * Interface for subscription to variable events.
+ */
+export interface Subscription {
+    variable: any;
+    event: string;
+    handler: () => void;
+}
+/**
+ * Events that can be triggered by a service variable.
+ */
+export declare const VariableEvents: {
+    BEFORE_INVOKE: string;
+    SUCCESS: string;
+    ERROR: string;
+    AFTER_INVOKE: string;
+};
+/**
+ * Base props specific to the WmSpinner component.
+ */
+export interface SpinnerProps {
+    /**
+     * The message to be displayed along with the spinner.
+     */
+    caption?: string;
+    /**
+     * The type of spinner to display: 'icon', 'image', or any other value for a default circular progress.
+     * @default "icon"
+     */
+    type?: string;
+    /**
+     * Comma-separated names of service variables to track for loading state.
+     */
+    servicevariabletotrack?: string;
+    /**
+     * The CSS class for the icon (effective only when type is 'icon').
+     * @default "fa fa-circle-o-notch fa-spin"
+     */
+    iconclass?: string;
+    /**
+     * The font size for the icon (effective only when type is 'icon').
+     */
+    iconsize?: string;
+    /**
+     * The URL of the image to use as a spinner (effective only when type is 'image').
+     */
+    image?: string;
+    /**
+     * The width of the spinner image.
+     * @default "20px"
+     */
+    imagewidth?: string;
+    /**
+     * The height of the spinner image.
+     */
+    imageheight?: string;
+    id?: string;
+}
+/**
+ * Combined props for the WmSpinner component, including base WaveMaker props.
+ */
+export type WmSpinnerProps = Prettify<SpinnerProps & BaseProps>;

package/components/basic/spinner/props.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VariableEvents = void 0;
+/**
+ * Interface for subscription to variable events.
+ */
+
+/**
+ * Events that can be triggered by a service variable.
+ */
+var VariableEvents = exports.VariableEvents = {
+  BEFORE_INVOKE: "beforeInvoke",
+  SUCCESS: "success",
+  ERROR: "error",
+  AFTER_INVOKE: "afterInvoke"
+};
+
+/**
+ * Base props specific to the WmSpinner component.
+ */
+
+/**
+ * Combined props for the WmSpinner component, including base WaveMaker props.
+ */

package/components/basic/tile/index.d.ts

@@ -0,0 +1,68 @@
+import React from "react";
+import { WmTileProps } from "./props";
+export declare function WmTile(props: WmTileProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace WmTile {
+    var displayName: string;
+}
+/**
+ * The WmTile component is a flexible container that can be used to group related
+ * content and handle various user interactions.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/containers-tile--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/containers-tile--docs)
+ *
+ * @param props - {@link WmTileProps}
+ */
+declare const _default: React.ComponentType<{
+    id?: string;
+    standalone?: boolean;
+    ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
+    animation?: string;
+    show?: boolean | string;
+    padding?: string;
+    margin?: string;
+    width?: number | string;
+    height?: number | string;
+    className?: string;
+    conditionalstyle?: React.CSSProperties;
+    conditionalclass?: string;
+    showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
+    onClick?: (event?: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onDoubleClick?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseEnter?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseLeave?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOver?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOut?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onFocus?: (event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onBlur?: (event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeydown?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeyup?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeypress?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    eventCallback?: (eventName: string, data: any) => void;
+    forwardedRef?: React.ForwardedRef<any>;
+    viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
+    hint?: string;
+    arialabel?: string;
+    tabindex?: number;
+    styles?: React.CSSProperties;
+    children?: React.ReactNode;
+    hidden?: boolean;
+    name?: string;
+    listener?: Record<string, any>;
+    "data-widget-id"?: string;
+    iswidget?: boolean | string;
+    deferload?: boolean | string;
+    "item-id"?: string;
+    datavalue?: any;
+    prefab?: boolean;
+    inbound?: Record<string, any>;
+    outbound?: Record<string, any>;
+    key?: string;
+    formfield?: boolean;
+    updateon?: string;
+    dataset?: any;
+    prefabName?: string;
+}>;
+export default _default;

package/components/basic/tile/index.js

@@ -0,0 +1,104 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WmTile = WmTile;
+exports["default"] = 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 _clsx = _interopRequireDefault(require("clsx"));
+var _react = _interopRequireDefault(require("react"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _withBaseWrapper = require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper");
+var _attr = require("@wavemaker-ai/react-runtime/utils/attr");
+var _excluded = ["styles", "className"];
+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 DEFAULT_TILE_CLASS = "app-tile";
+function WmTile(props) {
+  var styles = props.styles,
+    className = props.className,
+    restProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  function handleClick(event) {
+    var _props$onClick;
+    props === null || props === void 0 || (_props$onClick = props.onClick) === null || _props$onClick === void 0 || _props$onClick.call(props, event, props);
+  }
+  function handleOnBlur(event) {
+    var _props$onBlur;
+    props === null || props === void 0 || (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 || _props$onBlur.call(props, event, props);
+  }
+  function handleOnFocus(event) {
+    var _props$onFocus;
+    props === null || props === void 0 || (_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 || _props$onFocus.call(props, event, props);
+  }
+  function handleMouseOver(event) {
+    var _props$onMouseOver;
+    props === null || props === void 0 || (_props$onMouseOver = props.onMouseOver) === null || _props$onMouseOver === void 0 || _props$onMouseOver.call(props, event, props);
+  }
+  function handleMouseOut(event) {
+    var _props$onMouseOut;
+    props === null || props === void 0 || (_props$onMouseOut = props.onMouseOut) === null || _props$onMouseOut === void 0 || _props$onMouseOut.call(props, event, props);
+  }
+  function handleMouseEnter(event) {
+    var _props$onMouseEnter;
+    props === null || props === void 0 || (_props$onMouseEnter = props.onMouseEnter) === null || _props$onMouseEnter === void 0 || _props$onMouseEnter.call(props, event, props);
+  }
+  function handleMouseLeave(event) {
+    var _props$onMouseLeave;
+    props === null || props === void 0 || (_props$onMouseLeave = props.onMouseLeave) === null || _props$onMouseLeave === void 0 || _props$onMouseLeave.call(props, event, props);
+  }
+  function handleDoubleClick(event) {
+    var _props$onDoubleClick;
+    props === null || props === void 0 || (_props$onDoubleClick = props.onDoubleClick) === null || _props$onDoubleClick === void 0 || _props$onDoubleClick.call(props, event, props);
+  }
+  function handleKeyDown(event) {
+    var _props$onKeydown;
+    props === null || props === void 0 || (_props$onKeydown = props.onKeydown) === null || _props$onKeydown === void 0 || _props$onKeydown.call(props, event, props);
+  }
+  function handleKeyUp(event) {
+    var _props$onKeyup;
+    props === null || props === void 0 || (_props$onKeyup = props.onKeyup) === null || _props$onKeyup === void 0 || _props$onKeyup.call(props, event, props);
+  }
+  var domEvents = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, (props === null || props === void 0 ? void 0 : props.onBlur) && {
+    onBlur: handleOnBlur
+  }), (props === null || props === void 0 ? void 0 : props.onFocus) && {
+    onFocus: handleOnFocus
+  }), (props === null || props === void 0 ? void 0 : props.onMouseEnter) && {
+    onMouseEnter: handleMouseEnter
+  }), (props === null || props === void 0 ? void 0 : props.onMouseLeave) && {
+    onMouseLeave: handleMouseLeave
+  }), (props === null || props === void 0 ? void 0 : props.onMouseOver) && {
+    onMouseOver: handleMouseOver
+  }), (props === null || props === void 0 ? void 0 : props.onMouseOut) && {
+    onMouseOut: handleMouseOut
+  }), (props === null || props === void 0 ? void 0 : props.onDoubleClick) && {
+    onDoubleClick: handleDoubleClick
+  }), (props === null || props === void 0 ? void 0 : props.onKeydown) && {
+    onKeyDown: handleKeyDown
+  }), (props === null || props === void 0 ? void 0 : props.onKeyup) && {
+    onKeyUp: handleKeyUp
+  }), (props === null || props === void 0 ? void 0 : props.onClick) && {
+    onClick: handleClick
+  });
+  return __jsx(_Box["default"], (0, _extends2["default"])({
+    className: (0, _clsx["default"])(DEFAULT_TILE_CLASS, className),
+    style: styles
+  }, (0, _attr.removeInvalidAttributes)(restProps), domEvents), props.children);
+}
+WmTile.displayName = "WmTile";
+
+/**
+ * The WmTile component is a flexible container that can be used to group related
+ * content and handle various user interactions.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/containers-tile--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/containers-tile--docs)
+ *
+ * @param props - {@link WmTileProps}
+ */
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WmTile);

package/components/basic/tile/props.d.ts

@@ -0,0 +1,11 @@
+import { BaseProps, Prettify } from "@wavemaker-ai/react-runtime/higherOrder/props";
+/**
+ * Base props specific to the WmTile component.
+ */
+export interface TileProps {
+    id?: string;
+}
+/**
+ * Combined props for the WmTile component, including base WaveMaker props.
+ */
+export type WmTileProps = Prettify<TileProps & BaseProps>;

package/components/basic/tile/props.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/components/basic/tree/Components/TreeNodeComponent.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { TreeNodeComponentProps } from "../props";
+declare const TreeNodeComponent: React.MemoExoticComponent<({ node, treeicons, isCheckboxTree, isRadioTree, selectedItem, handleNodeClick, toggleNodeExpansion, toggleNodeChecked, handleRadioSelect, depth, treeName, template, listener, }: TreeNodeComponentProps) => import("react/jsx-runtime").JSX.Element>;
+export default TreeNodeComponent;

package/components/basic/tree/Components/TreeNodeComponent.js

@@ -0,0 +1,174 @@
+"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 _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Collapse = _interopRequireDefault(require("@mui/material/Collapse"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _partialContainer = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/page/partial-container"));
+var _useTreePartialNodeApi = require("../hooks/useTreePartialNodeApi");
+var _utils = require("../utils");
+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 TreeNodeComponent = /*#__PURE__*/_react["default"].memo(function (_ref) {
+  var node = _ref.node,
+    treeicons = _ref.treeicons,
+    isCheckboxTree = _ref.isCheckboxTree,
+    isRadioTree = _ref.isRadioTree,
+    selectedItem = _ref.selectedItem,
+    handleNodeClick = _ref.handleNodeClick,
+    toggleNodeExpansion = _ref.toggleNodeExpansion,
+    toggleNodeChecked = _ref.toggleNodeChecked,
+    handleRadioSelect = _ref.handleRadioSelect,
+    _ref$depth = _ref.depth,
+    depth = _ref$depth === void 0 ? 0 : _ref$depth,
+    treeName = _ref.treeName,
+    template = _ref.template,
+    listener = _ref.listener;
+  var hasChildren = node.children && node.children.length > 0;
+  var disabledClassName = (0, _react.useMemo)(function () {
+    return (0, _utils.isTreeNodeDisabled)(node.data) ? "wm-tree-node-disabled" : "";
+  }, [node.data]);
+  var _useTreePartialNodeAp = (0, _useTreePartialNodeApi.useTreePartialNodeApi)({
+      node: node,
+      selectedItem: selectedItem,
+      isCheckboxTree: isCheckboxTree,
+      isRadioTree: isRadioTree,
+      handleNodeClick: handleNodeClick,
+      toggleNodeExpansion: toggleNodeExpansion
+    }),
+    partialItem = _useTreePartialNodeAp.partialItem;
+  var templateHost = (0, _react.useMemo)(function () {
+    if (!template) return null;
+    return __jsx(_partialContainer["default"], {
+      key: "".concat(treeName, "_").concat(node.nodeId, "_level").concat(depth),
+      content: template,
+      listener: listener,
+      partialName: "".concat(treeName, "_").concat(node.nodeId, "_level").concat(depth),
+      params: ["item"],
+      item: partialItem
+    });
+  }, [template, partialItem, treeName, node.nodeId, depth]);
+
+  // Generate a unique ID for DOM selection (similar to tId in zTree)
+  node.tId = node.tId || "".concat(treeName, "_").concat(node.nodeId);
+  node.isParent = hasChildren;
+  var renderExpandCollapseIcon = function renderExpandCollapseIcon() {
+    if (hasChildren) {
+      return __jsx(_Box["default"], {
+        component: "span",
+        className: (0, _clsx["default"])("button", "level".concat(depth), "switch", depth === 0 ? node.open ? "roots_open" : "roots_close" : node.open ? "bottom_open" : "bottom_close", treeicons, "treenode_switch", disabledClassName),
+        treeicons: treeicons,
+        onClick: function onClick(event) {
+          return toggleNodeExpansion(event, node);
+        },
+        id: "".concat(node.tId, "_switch"),
+        title: "",
+        treenode_switch: "true"
+      });
+    }
+    return __jsx(_Box["default"], {
+      component: "span",
+      treeicons: treeicons,
+      className: (0, _clsx["default"])("button", "level".concat(depth), "switch", "bottom_docu", treeicons, "treenode_switch", disabledClassName),
+      treenode_switch: "true"
+    });
+  };
+  var renderCheckboxOrRadio = function renderCheckboxOrRadio() {
+    if (!isCheckboxTree && !isRadioTree) return null;
+    return __jsx(_Box["default"], {
+      component: "span",
+      className: (0, _clsx["default"])("button", "chk", isRadioTree ? "radio_false_full" : "checkbox_false_full", node.checked && (isRadioTree ? "radio_true_full" : "checkbox_true_full"), disabledClassName),
+      onClick: function onClick(event) {
+        event.stopPropagation();
+        if (isRadioTree) {
+          handleRadioSelect(event, node);
+        } else {
+          toggleNodeChecked(event, node);
+        }
+      },
+      treeicons: treeicons,
+      id: "".concat(node.tId, "_check"),
+      treenode_check: "true"
+    });
+  };
+  var renderNodeIcon = function renderNodeIcon() {
+    if (!node.icon) return null;
+    return __jsx(_Box["default"], {
+      component: "span",
+      className: (0, _clsx["default"])("button", "ico_open", "treenode_ico", disabledClassName),
+      id: "".concat(node.tId, "_ico"),
+      title: "",
+      treenode_ico: "true"
+    });
+  };
+  var renderNodeContent = function renderNodeContent() {
+    return __jsx(_Box["default"], {
+      component: "a",
+      onClick: function onClick(event) {
+        return handleNodeClick(event, node);
+      },
+      className: (0, _clsx["default"])("level".concat(depth), !template && "glyphicon", !template && (node.icon || "glyphicon-music"), {
+        curSelectedNode: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.nodeId) === node.nodeId
+      }, "treenode_a", disabledClassName),
+      "data-node-id": node.nodeId,
+      id: "".concat(node.tId, "_a"),
+      title: node.label,
+      treenode_a: "true"
+    }, templateHost ? __jsx(_Box["default"], {
+      component: "span",
+      className: "wm-tree-node-template-host wm-tree-node-item",
+      id: "".concat(node.tId, "_template")
+    }, templateHost) : __jsx(_react["default"].Fragment, null, renderNodeIcon(), __jsx(_Box["default"], {
+      component: "span",
+      className: "node_name",
+      id: "".concat(node.tId, "_span")
+    }, node.label)));
+  };
+  var renderChildNodes = function renderChildNodes() {
+    if (!hasChildren) return null;
+    return __jsx(_Collapse["default"], {
+      "in": !!node.open,
+      timeout: "auto",
+      unmountOnExit: false
+    }, __jsx(_Box["default"], {
+      component: "ul",
+      className: (0, _clsx["default"])("level".concat(depth), "line", "wm-tree-children-list", node.open ? "wm-tree-children-open" : "wm-tree-children-closed"),
+      id: "".concat(node.tId, "_ul")
+    }, node.children && node.children.map(function (childNode) {
+      return __jsx(TreeNodeComponent, {
+        key: childNode.nodeId,
+        node: childNode,
+        treeicons: treeicons,
+        isCheckboxTree: isCheckboxTree,
+        isRadioTree: isRadioTree,
+        selectedItem: selectedItem,
+        handleNodeClick: handleNodeClick,
+        toggleNodeExpansion: toggleNodeExpansion,
+        toggleNodeChecked: toggleNodeChecked,
+        handleRadioSelect: handleRadioSelect,
+        depth: depth + 1,
+        treeName: treeName,
+        template: template,
+        listener: listener
+      });
+    })));
+  };
+  return __jsx(_Box["default"], {
+    component: "li",
+    key: node.nodeId,
+    className: (0, _clsx["default"])("level".concat(depth), {
+      selected: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.nodeId) === node.nodeId
+    }),
+    id: node.tId,
+    tabIndex: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.nodeId) === node.nodeId ? 0 : -1,
+    treenode: "true"
+  }, !template && renderExpandCollapseIcon(), renderCheckboxOrRadio(), renderNodeContent(), renderChildNodes());
+});
+TreeNodeComponent.displayName = "TreeNodeComponent";
+var _default = exports["default"] = TreeNodeComponent;