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

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

@@ -1,174 +1,242 @@
-"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"
-      });
+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]);
     }
-    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"
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React, { useMemo } from "react";
+import clsx from "clsx";
+import Collapse from "@mui/material/Collapse";
+import Box from "@mui/material/Box";
+import WmPartialContainer from "../../../page/partial-container";
+import { useTreePartialNodeApi } from "../hooks/useTreePartialNodeApi";
+import { isTreeNodeDisabled } from "../utils";
+const TreeNodeComponent = React.memo(
+  ({
+    node,
+    treeicons,
+    isCheckboxTree,
+    isRadioTree,
+    selectedItem,
+    handleNodeClick,
+    toggleNodeExpansion,
+    toggleNodeChecked,
+    handleRadioSelect,
+    depth = 0,
+    treeName,
+    template,
+    listener
+  }) => {
+    const hasChildren = node.children && node.children.length > 0;
+    const disabledClassName = useMemo(() => {
+      return isTreeNodeDisabled(node.data) ? "wm-tree-node-disabled" : "";
+    }, [node.data]);
+    const { partialItem } = useTreePartialNodeApi({
+      node,
+      selectedItem,
+      isCheckboxTree,
+      isRadioTree,
+      handleNodeClick,
+      toggleNodeExpansion
     });
-  };
-  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);
+    const templateHost = useMemo(() => {
+      if (!template) return null;
+      return /* @__PURE__ */ jsx(
+        WmPartialContainer,
+        {
+          content: template,
+          listener,
+          partialName: `${treeName}_${node.nodeId}_level${depth}`,
+          params: ["item"],
+          item: partialItem
+        },
+        `${treeName}_${node.nodeId}_level${depth}`
+      );
+    }, [template, partialItem, treeName, node.nodeId, depth]);
+    node.tId = node.tId || `${treeName}_${node.nodeId}`;
+    node.isParent = hasChildren;
+    const renderExpandCollapseIcon = () => {
+      if (hasChildren) {
+        return /* @__PURE__ */ jsx(
+          Box,
+          __spreadValues({
+            component: "span",
+            className: clsx(
+              "button",
+              `level${depth}`,
+              "switch",
+              depth === 0 ? node.open ? "roots_open" : "roots_close" : node.open ? "bottom_open" : "bottom_close",
+              treeicons,
+              "treenode_switch",
+              disabledClassName
+            ),
+            treeicons,
+            onClick: (event) => toggleNodeExpansion(event, node),
+            id: `${node.tId}_switch`,
+            title: ""
+          }, { treenode_switch: "true" })
+        );
+      }
+      return /* @__PURE__ */ jsx(
+        Box,
+        __spreadValues({
+          component: "span",
+          treeicons,
+          className: clsx(
+            "button",
+            `level${depth}`,
+            "switch",
+            "bottom_docu",
+            treeicons,
+            "treenode_switch",
+            disabledClassName
+          )
+        }, { treenode_switch: "true" })
+      );
+    };
+    const renderCheckboxOrRadio = () => {
+      if (!isCheckboxTree && !isRadioTree) return null;
+      return /* @__PURE__ */ jsx(
+        Box,
+        __spreadValues({
+          component: "span",
+          className: clsx(
+            "button",
+            "chk",
+            isRadioTree ? "radio_false_full" : "checkbox_false_full",
+            node.checked && (isRadioTree ? "radio_true_full" : "checkbox_true_full"),
+            disabledClassName
+          ),
+          onClick: (event) => {
+            event.stopPropagation();
+            if (isRadioTree) {
+              handleRadioSelect(event, node);
+            } else {
+              toggleNodeChecked(event, node);
+            }
+          },
+          treeicons,
+          id: `${node.tId}_check`
+        }, { treenode_check: "true" })
+      );
+    };
+    const renderNodeIcon = () => {
+      if (!node.icon) return null;
+      return /* @__PURE__ */ jsx(
+        Box,
+        __spreadValues({
+          component: "span",
+          className: clsx("button", "ico_open", "treenode_ico", disabledClassName),
+          id: `${node.tId}_ico`,
+          title: ""
+        }, { treenode_ico: "true" })
+      );
+    };
+    const renderNodeContent = () => {
+      return /* @__PURE__ */ jsx(
+        Box,
+        __spreadProps(__spreadValues({
+          component: "a",
+          onClick: (event) => handleNodeClick(event, node),
+          className: clsx(
+            `level${depth}`,
+            !template && "glyphicon",
+            !template && (node.icon || "glyphicon-music"),
+            { curSelectedNode: (selectedItem == null ? void 0 : selectedItem.nodeId) === node.nodeId },
+            "treenode_a",
+            disabledClassName
+          ),
+          "data-node-id": node.nodeId,
+          id: `${node.tId}_a`,
+          title: node.label
+        }, { treenode_a: "true" }), {
+          children: templateHost ? /* @__PURE__ */ jsx(
+            Box,
+            {
+              component: "span",
+              className: "wm-tree-node-template-host wm-tree-node-item",
+              id: `${node.tId}_template`,
+              children: templateHost
+            }
+          ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            renderNodeIcon(),
+            /* @__PURE__ */ jsx(Box, { component: "span", className: "node_name", id: `${node.tId}_span`, children: node.label })
+          ] })
+        })
+      );
+    };
+    const renderChildNodes = () => {
+      if (!hasChildren) return null;
+      return /* @__PURE__ */ jsx(Collapse, { in: !!node.open, timeout: "auto", unmountOnExit: false, children: /* @__PURE__ */ jsx(
+        Box,
+        {
+          component: "ul",
+          className: clsx(
+            `level${depth}`,
+            "line",
+            "wm-tree-children-list",
+            node.open ? "wm-tree-children-open" : "wm-tree-children-closed"
+          ),
+          id: `${node.tId}_ul`,
+          children: node.children && node.children.map((childNode) => /* @__PURE__ */ jsx(
+            TreeNodeComponent,
+            {
+              node: childNode,
+              treeicons,
+              isCheckboxTree,
+              isRadioTree,
+              selectedItem,
+              handleNodeClick,
+              toggleNodeExpansion,
+              toggleNodeChecked,
+              handleRadioSelect,
+              depth: depth + 1,
+              treeName,
+              template,
+              listener
+            },
+            childNode.nodeId
+          ))
         }
-      },
-      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());
-});
+      ) });
+    };
+    return /* @__PURE__ */ jsxs(
+      Box,
+      __spreadProps(__spreadValues({
+        component: "li",
+        className: clsx(`level${depth}`, {
+          selected: (selectedItem == null ? void 0 : selectedItem.nodeId) === node.nodeId
+        }),
+        id: node.tId,
+        tabIndex: (selectedItem == null ? void 0 : selectedItem.nodeId) === node.nodeId ? 0 : -1
+      }, { treenode: "true" }), {
+        children: [
+          !template && renderExpandCollapseIcon(),
+          renderCheckboxOrRadio(),
+          renderNodeContent(),
+          renderChildNodes()
+        ]
+      }),
+      node.nodeId
+    );
+  }
+);
 TreeNodeComponent.displayName = "TreeNodeComponent";
-var _default = exports["default"] = TreeNodeComponent;
+var TreeNodeComponent_default = TreeNodeComponent;
+export {
+  TreeNodeComponent_default as default
+};