@plasmicpkgs/plasmic-rich-components 1.0.160 → 1.0.162

package/dist/plasmic-rich-components.esm.js

@@ -3,14 +3,14 @@ import '@plasmicapp/host/registerGlobalContext';
 import { parseDate } from '@plasmicpkgs/luxon-parser';
 import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
-import React, { useState, useEffect, useMemo, useRef } from 'react';
+import React, { useRef, useState, useEffect, useMemo } from 'react';
 import { Result, Checkbox, Switch, Empty, Descriptions, theme, ConfigProvider, Dropdown, Button, Input, List, Tag, Card, Calendar, Badge } from 'antd';
 import 'lodash/get';
 import { useNormalizedData, deriveFieldConfigs } from '@plasmicapp/data-sources';
 import { tinycolor } from '@ctrl/tinycolor';
 import { LogoutOutlined, PlusOutlined, EllipsisOutlined } from '@ant-design/icons';
 import { ProLayout, ProConfigProvider, ProTable } from '@ant-design/pro-components';
-import { usePlasmicLink } from '@plasmicapp/host';
+import { useDataEnv, usePlasmicLink } from '@plasmicapp/host';
 import { createObjectCsvStringifier } from 'csv-writer-browser';
 import fastStringify from 'fast-stringify';
 import classNames from 'classnames';
@@ -1023,14 +1023,36 @@ function RichLayout(_a) {
     "logoElement"
   ]);
   var _a2, _b2, _c, _d, _e;
+  const $ctx = useDataEnv();
+  const ref = useRef(null);
   const isClient = useIsClient();
   const [pathname, setPathname] = useState(void 0);
+  const [openKeys, setOpenKeys] = useState([]);
+  const [ready, setReady] = useState(false);
   useEffect(() => {
+    setTimeout(() => {
+      setReady(true);
+    }, 500);
     if (typeof location !== "undefined") {
       setPathname(location.pathname);
     }
   }, []);
-  const Link = (_b2 = (_a2 = usePlasmicLink) == null ? void 0 : _a2()) != null ? _b2 : AnchorLink;
+  useEffect(() => {
+    if (!ready)
+      return;
+    if (!ref.current)
+      return;
+    const selectedSubmenus = Array.from(
+      ref.current.querySelectorAll(
+        "ul > li.ant-menu-submenu.ant-menu-submenu-selected > div"
+      )
+    ).map((el) => {
+      var _a3;
+      return (_a3 = el.getAttribute("data-menu-id")) == null ? void 0 : _a3.split("/").pop();
+    }).filter((i) => i).map((i) => `/${i}`) || [];
+    setOpenKeys(selectedSubmenus);
+  }, [ready]);
+  const PlasmicLink = (_b2 = (_a2 = usePlasmicLink) == null ? void 0 : _a2()) != null ? _b2 : AnchorLink;
   const { token } = theme.useToken();
   const origTextColor = token.colorTextBase;
   function getNavBgColor() {
@@ -1075,7 +1097,7 @@ function RichLayout(_a) {
     colorTextMenuActive: "rgba(255,255,255,0.95)",
     colorTextSubMenuSelected: "#fff"
   };
-  return /* @__PURE__ */ React.createElement("div", { className, style: { display: "flex" } }, /* @__PURE__ */ React.createElement("style", null, baseStyles), /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { ref, className, style: { display: "flex" } }, /* @__PURE__ */ React.createElement("style", null, baseStyles), /* @__PURE__ */ React.createElement(
     ProLayout,
     __spreadProps$5(__spreadValues$8({}, layoutProps), {
       pageTitleRender: () => "",
@@ -1117,7 +1139,7 @@ function RichLayout(_a) {
       },
       menu: {
         // collapsedShowGroupTitle: true,
-        defaultOpenAll: true
+        defaultOpenAll: false
         // hideMenuWhenCollapsed: true,
       },
       avatarProps: showAvatarMenu ? {
@@ -1151,9 +1173,12 @@ function RichLayout(_a) {
         return footerChildren;
       },
       onMenuHeaderClick: (e) => console.log(e),
-      menuItemRender: (item, dom) => /* @__PURE__ */ React.createElement(Link, { href: item.path }, dom),
-      headerTitleRender: (logo2, title, _) => {
-        return /* @__PURE__ */ React.createElement(Link, { href: rootUrl }, logo2, title);
+      openKeys,
+      onOpenChange: (keys) => keys === false || !ready ? [] : setOpenKeys(keys),
+      selectedKeys: [$ctx == null ? void 0 : $ctx.pagePath],
+      menuItemRender: (item, dom) => /* @__PURE__ */ React.createElement(PlasmicLink, { href: item.path }, dom),
+      headerTitleRender: (logoEl, title, _) => {
+        return /* @__PURE__ */ React.createElement(PlasmicLink, { href: rootUrl }, logoEl, title);
       }
     }),
     children