@wavemaker/react-runtime 11.14.1-16.6404

package/components/container/panel/hooks.js

@@ -0,0 +1,144 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePanelFullscreen = exports.usePanelExpansion = exports.usePanelDimensions = exports.useChildrenClassification = void 0;
+var _react = _interopRequireWildcard(require("react"));
+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 usePanelExpansion = exports.usePanelExpansion = function usePanelExpansion() {
+  var initialExpanded = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+  var onExpand = arguments.length > 1 ? arguments[1] : undefined;
+  var onCollapse = arguments.length > 2 ? arguments[2] : undefined;
+  var name = arguments.length > 3 ? arguments[3] : undefined;
+  var listener = arguments.length > 4 ? arguments[4] : undefined;
+  var _useState = (0, _react.useState)(initialExpanded),
+    isExpanded = _useState[0],
+    setIsExpanded = _useState[1];
+  var isExpandedRef = (0, _react.useRef)(initialExpanded);
+  var toggleExpand = (0, _react.useCallback)(function (event) {
+    if (event && event.preventDefault) {
+      event.preventDefault();
+    }
+    var newExpanded = !isExpandedRef.current;
+    isExpandedRef.current = newExpanded;
+    setIsExpanded(newExpanded);
+    if (newExpanded) {
+      var _listener$Widgets;
+      onExpand === null || onExpand === void 0 || onExpand(event || {}, listener === null || listener === void 0 || (_listener$Widgets = listener.Widgets) === null || _listener$Widgets === void 0 ? void 0 : _listener$Widgets[name]);
+    } else {
+      var _listener$Widgets2;
+      onCollapse === null || onCollapse === void 0 || onCollapse(event || {}, listener === null || listener === void 0 || (_listener$Widgets2 = listener.Widgets) === null || _listener$Widgets2 === void 0 ? void 0 : _listener$Widgets2[name]);
+    }
+  }, [onExpand, onCollapse, name, listener]);
+  (0, _react.useEffect)(function () {
+    setIsExpanded(initialExpanded);
+    isExpandedRef.current = initialExpanded;
+  }, [initialExpanded]);
+
+  // Update ref whenever state changes from external sources
+  (0, _react.useEffect)(function () {
+    isExpandedRef.current = isExpanded;
+  }, [isExpanded]);
+  return {
+    isExpanded: isExpanded,
+    toggleExpand: toggleExpand,
+    isExpandedRef: isExpandedRef
+  };
+};
+var usePanelFullscreen = exports.usePanelFullscreen = function usePanelFullscreen() {
+  var initialFullscreen = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  var enablefullscreen = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var onFullscreen = arguments.length > 2 ? arguments[2] : undefined;
+  var onExitfullscreen = arguments.length > 3 ? arguments[3] : undefined;
+  var name = arguments.length > 4 ? arguments[4] : undefined;
+  var listener = arguments.length > 5 ? arguments[5] : undefined;
+  var _useState2 = (0, _react.useState)(initialFullscreen),
+    isFullscreen = _useState2[0],
+    setIsFullscreen = _useState2[1];
+  var toggleFullScreen = (0, _react.useCallback)(function (event) {
+    if (!enablefullscreen) return;
+    var newFullscreen = !isFullscreen;
+    setIsFullscreen(newFullscreen);
+    if (newFullscreen) {
+      var _listener$Widgets3;
+      onFullscreen === null || onFullscreen === void 0 || onFullscreen(event, listener === null || listener === void 0 || (_listener$Widgets3 = listener.Widgets) === null || _listener$Widgets3 === void 0 ? void 0 : _listener$Widgets3[name]);
+      document.body.style.overflow = "hidden";
+    } else {
+      var _listener$Widgets4;
+      onExitfullscreen === null || onExitfullscreen === void 0 || onExitfullscreen(event, listener === null || listener === void 0 || (_listener$Widgets4 = listener.Widgets) === null || _listener$Widgets4 === void 0 ? void 0 : _listener$Widgets4[name]);
+      document.body.style.overflow = "";
+    }
+  }, [isFullscreen, enablefullscreen, onFullscreen, onExitfullscreen, name, listener]);
+  (0, _react.useEffect)(function () {
+    setIsFullscreen(initialFullscreen);
+  }, [initialFullscreen]);
+  (0, _react.useEffect)(function () {
+    return function () {
+      if (isFullscreen) {
+        document.body.style.overflow = "";
+      }
+    };
+  }, [isFullscreen]);
+  return {
+    isFullscreen: isFullscreen,
+    toggleFullScreen: toggleFullScreen
+  };
+};
+var usePanelDimensions = exports.usePanelDimensions = function usePanelDimensions(height, isFullscreen, hideFooter, panelRef, panelContentRef, panelHeaderRef) {
+  var computeDimensions = (0, _react.useCallback)(function () {
+    var _panelHeaderRef$curre, _panelRef$current;
+    if (!panelRef || !panelContentRef || !panelHeaderRef) return;
+    var headerHeight = ((_panelHeaderRef$curre = panelHeaderRef.current) === null || _panelHeaderRef$curre === void 0 ? void 0 : _panelHeaderRef$curre.offsetHeight) || 0;
+    var footer = (_panelRef$current = panelRef.current) === null || _panelRef$current === void 0 ? void 0 : _panelRef$current.querySelector(".panel-footer");
+    var footerHeight = (footer === null || footer === void 0 ? void 0 : footer.offsetHeight) || 0;
+    var content = panelContentRef.current;
+    var vHeight = window.innerHeight;
+    var inlineHeight = "";
+    if (isFullscreen) {
+      inlineHeight = hideFooter ? vHeight - headerHeight : vHeight - (footerHeight + headerHeight);
+    } else {
+      inlineHeight = height || "";
+    }
+    if (content) {
+      content.style.height = typeof inlineHeight === "number" ? "".concat(inlineHeight, "px") : inlineHeight.toString();
+    }
+  }, [height, isFullscreen, hideFooter]);
+  (0, _react.useEffect)(function () {
+    var handleResize = function handleResize() {
+      computeDimensions();
+    };
+    window.addEventListener("resize", handleResize);
+    return function () {
+      return window.removeEventListener("resize", handleResize);
+    };
+  }, [computeDimensions]);
+  return {
+    computeDimensions: computeDimensions
+  };
+};
+var useChildrenClassification = exports.useChildrenClassification = function useChildrenClassification(children) {
+  var isWmPanelFooter = function isWmPanelFooter(element) {
+    var elementType = element.type;
+    var props = element.props;
+    if (props.WmPanelFooter || props["data-wm-panel-footer"]) {
+      return true;
+    }
+    if (typeof elementType === "function") {
+      var component = elementType;
+      return !!(component.WmPanelFooter || component.displayName === "WmPanelFooter");
+    }
+    return false;
+  };
+  return {
+    bodyContent: _react["default"].Children.toArray(children).filter(function (child) {
+      if (! /*#__PURE__*/_react["default"].isValidElement(child)) return true;
+      return !isWmPanelFooter(child);
+    }),
+    footerContent: _react["default"].Children.toArray(children).filter(function (child) {
+      if (! /*#__PURE__*/_react["default"].isValidElement(child)) return false;
+      return isWmPanelFooter(child);
+    })
+  };
+};

package/components/container/panel/index.js

@@ -0,0 +1,286 @@
+"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.WmPanelFooter = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _material = require("@mui/material");
+var _dompurify = _interopRequireDefault(require("dompurify"));
+var _hooks = require("./hooks");
+var _panelHeader = _interopRequireDefault(require("./components/panel-header"));
+var _withBaseWrapper = _interopRequireDefault(require("@wavemaker/react-runtime/higherOrder/withBaseWrapper"));
+var _excluded = ["actions", "badgetype", "badgevalue", "closable", "collapsible", "enablefullscreen", "expanded", "fullscreen", "helptext", "hint", "iconclass", "iconheight", "iconmargin", "iconurl", "iconwidth", "subheading", "title", "className", "style", "children", "height", "name", "itemlabel", "itemlink", "itemicon", "itemchildren", "onActionsclick", "onClose", "onCollapse", "onExpand", "onExitfullscreen", "onFullscreen", "onLoad", "onMouseenter", "onMouseleave", "onMouseout", "onMouseover", "onPropertyChange", "listener", "Widgets"];
+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 WmPanel = function WmPanel(props) {
+  var actions = props.actions,
+    _props$badgetype = props.badgetype,
+    badgetype = _props$badgetype === void 0 ? "default" : _props$badgetype,
+    badgevalue = props.badgevalue,
+    _props$closable = props.closable,
+    closable = _props$closable === void 0 ? false : _props$closable,
+    _props$collapsible = props.collapsible,
+    collapsible = _props$collapsible === void 0 ? false : _props$collapsible,
+    _props$enablefullscre = props.enablefullscreen,
+    enablefullscreen = _props$enablefullscre === void 0 ? false : _props$enablefullscre,
+    _props$expanded = props.expanded,
+    expanded = _props$expanded === void 0 ? true : _props$expanded,
+    _props$fullscreen = props.fullscreen,
+    fullscreen = _props$fullscreen === void 0 ? false : _props$fullscreen,
+    helptext = props.helptext,
+    hint = props.hint,
+    _props$iconclass = props.iconclass,
+    iconclass = _props$iconclass === void 0 ? "wi wi-account-circle" : _props$iconclass,
+    iconheight = props.iconheight,
+    iconmargin = props.iconmargin,
+    iconurl = props.iconurl,
+    iconwidth = props.iconwidth,
+    subheading = props.subheading,
+    _props$title = props.title,
+    title = _props$title === void 0 ? "Title" : _props$title,
+    className = props.className,
+    style = props.style,
+    children = props.children,
+    height = props.height,
+    name = props.name,
+    itemlabel = props.itemlabel,
+    itemlink = props.itemlink,
+    itemicon = props.itemicon,
+    itemchildren = props.itemchildren,
+    onActionsclick = props.onActionsclick,
+    onClose = props.onClose,
+    onCollapse = props.onCollapse,
+    onExpand = props.onExpand,
+    onExitfullscreen = props.onExitfullscreen,
+    onFullscreen = props.onFullscreen,
+    onLoad = props.onLoad,
+    onMouseenter = props.onMouseenter,
+    onMouseleave = props.onMouseleave,
+    onMouseout = props.onMouseout,
+    onMouseover = props.onMouseover,
+    onPropertyChange = props.onPropertyChange,
+    listener = props.listener,
+    Widgets = props.Widgets,
+    restProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var _useState = (0, _react.useState)(false),
+    helpVisible = _useState[0],
+    setHelpVisible = _useState[1];
+  var panelRef = (0, _react.useRef)(null);
+  var panelHeaderRef = (0, _react.useRef)(null);
+  var panelContentRef = (0, _react.useRef)(null);
+  var _useState2 = (0, _react.useState)(true),
+    show = _useState2[0],
+    setShow = _useState2[1];
+
+  //   Manages expand/collapse state
+  var _usePanelExpansion = (0, _hooks.usePanelExpansion)(expanded, onExpand, onCollapse, name, listener),
+    isExpanded = _usePanelExpansion.isExpanded,
+    toggleExpand = _usePanelExpansion.toggleExpand,
+    isExpandedRef = _usePanelExpansion.isExpandedRef;
+
+  //   Handles fullscreen functionality
+  var _usePanelFullscreen = (0, _hooks.usePanelFullscreen)(fullscreen, enablefullscreen, onFullscreen, onExitfullscreen, name, listener),
+    isFullscreen = _usePanelFullscreen.isFullscreen,
+    toggleFullScreen = _usePanelFullscreen.toggleFullScreen;
+  //  Classifies children into body and footer content
+  var _useChildrenClassific = (0, _hooks.useChildrenClassification)(children),
+    bodyContent = _useChildrenClassific.bodyContent,
+    footerContent = _useChildrenClassific.footerContent;
+  var hideFooter = !footerContent.length || !isExpanded;
+
+  //   Calculates panel dimensions
+  var _usePanelDimensions = (0, _hooks.usePanelDimensions)(height, isFullscreen, hideFooter, panelRef, panelContentRef, panelHeaderRef),
+    computeDimensions = _usePanelDimensions.computeDimensions;
+
+  // Event handlers
+  var handleClose = function handleClose(event) {
+    setShow(false);
+    if (onPropertyChange) {
+      onPropertyChange("show", false);
+    }
+
+    // Call the onClose callback if provided
+    if (onClose) {
+      var _listener$Widgets;
+      onClose(event, listener === null || listener === void 0 || (_listener$Widgets = listener.Widgets) === null || _listener$Widgets === void 0 ? void 0 : _listener$Widgets[name]);
+    }
+  };
+  var toggleHelp = function toggleHelp() {
+    return setHelpVisible(!helpVisible);
+  };
+  var handleMouseEnter = function handleMouseEnter(event) {
+    var _listener$Widgets2;
+    onMouseenter === null || onMouseenter === void 0 || onMouseenter(event, listener === null || listener === void 0 || (_listener$Widgets2 = listener.Widgets) === null || _listener$Widgets2 === void 0 ? void 0 : _listener$Widgets2[name]);
+  };
+  var handleMouseLeave = function handleMouseLeave(event) {
+    var _listener$Widgets3;
+    onMouseleave === null || onMouseleave === void 0 || onMouseleave(event, listener === null || listener === void 0 || (_listener$Widgets3 = listener.Widgets) === null || _listener$Widgets3 === void 0 ? void 0 : _listener$Widgets3[name]);
+  };
+  var handleMouseOver = function handleMouseOver(event) {
+    var _listener$Widgets4;
+    onMouseover === null || onMouseover === void 0 || onMouseover(event, listener === null || listener === void 0 || (_listener$Widgets4 = listener.Widgets) === null || _listener$Widgets4 === void 0 ? void 0 : _listener$Widgets4[name]);
+  };
+  var handleMouseOut = function handleMouseOut(event) {
+    var _listener$Widgets5;
+    onMouseout === null || onMouseout === void 0 || onMouseout(event, listener === null || listener === void 0 || (_listener$Widgets5 = listener.Widgets) === null || _listener$Widgets5 === void 0 ? void 0 : _listener$Widgets5[name]);
+  };
+
+  // onLoad handler
+  (0, _react.useEffect)(function () {
+    var _listener$Widgets6;
+    onLoad === null || onLoad === void 0 || onLoad(listener === null || listener === void 0 || (_listener$Widgets6 = listener.Widgets) === null || _listener$Widgets6 === void 0 ? void 0 : _listener$Widgets6[name]);
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (isExpanded) {
+      computeDimensions();
+    }
+  }, [isExpanded, height, isFullscreen, hideFooter, computeDimensions]);
+
+  // Handle ESC key for closing panel
+  (0, _react.useEffect)(function () {
+    var handleEscKey = function handleEscKey(event) {
+      if (closable && event.key === "Escape") {
+        handleClose({});
+      }
+    };
+    if (closable) {
+      window.addEventListener("keydown", handleEscKey);
+      return function () {
+        return window.removeEventListener("keydown", handleEscKey);
+      };
+    }
+  }, [closable]);
+
+  // Panel methods exposed via listener
+  var collapse = function collapse() {
+    if (isExpandedRef.current) {
+      toggleExpand();
+    }
+  };
+  var expand = function expand() {
+    if (!isExpandedRef.current) {
+      toggleExpand();
+    }
+  };
+  var close = function close() {
+    if (show) {
+      handleClose({});
+    }
+  };
+  var toggle = function toggle() {
+    toggleExpand();
+  };
+
+  // Register the methods
+  (0, _react.useEffect)(function () {
+    if (listener !== null && listener !== void 0 && listener.onChange) {
+      listener.onChange(name, {
+        collapse: collapse,
+        expand: expand,
+        close: close,
+        toggle: toggle,
+        toggleExpand: toggleExpand,
+        isExpanded: isExpanded,
+        isFullscreen: isFullscreen,
+        toggleFullScreen: toggleFullScreen,
+        show: show
+      });
+    }
+  }, []);
+  var componentProps = {
+    subheading: subheading,
+    iconclass: iconclass,
+    autoclose: props.autoclose,
+    title: title,
+    name: name,
+    badgevalue: badgevalue,
+    badgetype: badgetype,
+    hint: hint,
+    enablefullscreen: enablefullscreen.toString(),
+    animation: props.animation,
+    show: props.show,
+    "data-widget-id": props["data-widget-id"]
+  };
+  return __jsx(_material.Box, (0, _extends2["default"])({
+    ref: panelRef,
+    className: (0, _clsx["default"])("app-panel panel", className, {
+      fullscreen: isFullscreen,
+      "show-help": helpVisible
+    }),
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    onMouseOver: handleMouseOver,
+    onMouseOut: handleMouseOut,
+    hidden: !show,
+    component: "div"
+  }, componentProps), __jsx(_material.Box, {
+    className: (0, _clsx["default"])("panel-heading", {
+      "show-help": helpVisible
+    }),
+    ref: panelHeaderRef
+  }, __jsx(_panelHeader["default"], {
+    title: title,
+    subheading: subheading,
+    iconclass: iconclass,
+    iconurl: iconurl,
+    iconwidth: iconwidth,
+    iconheight: iconheight,
+    iconmargin: iconmargin,
+    badgevalue: badgevalue,
+    badgetype: badgetype,
+    actions: actions,
+    helptext: helptext,
+    isExpanded: isExpanded,
+    isFullscreen: isFullscreen,
+    collapsible: collapsible,
+    enablefullscreen: enablefullscreen,
+    closable: closable,
+    listener: listener,
+    itemlabel: itemlabel,
+    itemlink: itemlink,
+    itemicon: itemicon,
+    itemchildren: itemchildren,
+    onToggleExpand: toggleExpand,
+    onToggleFullScreen: toggleFullScreen,
+    onToggleHelp: toggleHelp,
+    onClose: handleClose,
+    onActionsclick: onActionsclick
+  })), isExpanded && __jsx(_material.Box, {
+    className: "panel-content",
+    ref: panelContentRef
+  }, __jsx(_material.Box, {
+    className: (0, _clsx["default"])("panel-body", {
+      "show-help": helpVisible
+    })
+  }, props.renderPartial ? props.renderPartial(props) : bodyContent), helptext && __jsx(_material.Box, {
+    component: "aside",
+    className: (0, _clsx["default"])("panel-help-message", {
+      "show-help": helpVisible
+    })
+  }, __jsx(_material.Typography, {
+    variant: "h5",
+    className: "panel-help-header"
+  }, "Help"), __jsx(_material.Box, {
+    className: "panel-help-content",
+    dangerouslySetInnerHTML: {
+      __html: _dompurify["default"].sanitize(helptext)
+    }
+  }))), !hideFooter && footerContent);
+};
+var WmPanelFooter = exports.WmPanelFooter = function WmPanelFooter(_ref) {
+  var children = _ref.children,
+    name = _ref.name;
+  return __jsx(_material.Box, {
+    className: "app-panel-footer panel-footer clearfix",
+    "aria-label": name
+  }, children);
+};
+WmPanelFooter.displayName = "WmPanelFooter";
+WmPanel.displayName = "WmPanel";
+var _default = exports["default"] = (0, _withBaseWrapper["default"])(WmPanel);

package/components/container/panel/props.js

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

package/components/container/props.js

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