@plasmicpkgs/plasmic-rich-components 1.0.92 → 1.0.93

package/dist/index.js

@@ -1051,6 +1051,13 @@ function omitUndefined(x) {
         return v !== undefined;
     }));
 }
+function filterNavMenuItemsByConditions(navMenuItems) {
+    return navMenuItems
+        .filter(function (item) { return item.condition === undefined || item.condition; })
+        .map(function (item) { return (__assign(__assign({}, item), { routes: item.routes
+            ? filterNavMenuItemsByConditions(item.routes)
+            : undefined })); });
+}
 // width: 100% needed because parent is display: flex, which is needed for the min-height behavior.
 var baseStyles = "\n.ant-pro-layout-bg-list {\n  display: none;\n}\n.ant-pro-layout {\n  display: flex;\n  width: 100%;\n}\n.ant-pro-layout .ant-pro-layout-content {\n  padding: 0;\n}\n";
 function RichLayout(_a) {
@@ -1095,6 +1102,27 @@ function RichLayout(_a) {
     if (!isClient) {
         return null;
     }
+    var layoutColorOverrides = isNavBgLight
+        ? undefined
+        : {
+            colorBgCollapsedButton: navBgColor,
+            colorTextCollapsedButtonHover: "rgba(255,255,255,0.85)",
+            colorTextCollapsedButton: "rgba(255,255,255,0.65)",
+            colorMenuBackground: navBgColor,
+            colorBgMenuItemCollapsedHover: "rgba(0,0,0,0.06)",
+            colorBgMenuItemCollapsedSelected: "rgba(0,0,0,0.15)",
+            colorBgMenuItemCollapsedElevated: "rgba(0,0,0,0.85)",
+            colorMenuItemDivider: "rgba(255,255,255,0.15)",
+            colorBgMenuItemHover: "rgba(0,0,0,0.06)",
+            colorBgMenuItemSelected: "rgba(0,0,0,0.15)",
+            colorTextMenuSelected: "#fff",
+            colorTextMenuItemHover: "rgba(255,255,255,0.75)",
+            colorTextMenu: "rgba(255,255,255,0.75)",
+            colorTextMenuSecondary: "rgba(255,255,255,0.65)",
+            colorTextMenuTitle: "rgba(255,255,255,0.95)",
+            colorTextMenuActive: "rgba(255,255,255,0.95)",
+            colorTextSubMenuSelected: "#fff",
+        };
     return (React__default.default.createElement("div", { className: className, style: { display: "flex" } },
         React__default.default.createElement("style", null, baseStyles),
         React__default.default.createElement(proComponents.ProLayout, __assign({}, layoutProps, { 
@@ -1114,36 +1142,14 @@ function RichLayout(_a) {
             // ProConfigProvider does first read/inherit the theme/tokens from the surrounding ConfigProvider.
             headerRender: function (_props, defaultDom) { return (React__default.default.createElement(antd.ConfigProvider, { theme: { token: omitUndefined({ colorTextBase: navTextColor }) } },
                 React__default.default.createElement(proComponents.ProConfigProvider, { dark: !isNavBgLight }, defaultDom))); }, token: {
-                header: omitUndefined({
-                    colorBgHeader: navBgColor,
-                }),
+                header: omitUndefined(__assign({ colorBgHeader: navBgColor }, layoutColorOverrides)),
                 // Ideally, we'd do something similar to headerRender above, and just specify general dark mode to specify
                 // whether all components/text should be light.
                 // But for some reason it doesn't work, causing the bg color to be ignored (just the default dark Menu color),
                 // *and* the text is just dark as well.
                 // Haven't yet been able to unravel the pro components code to figure out the proper way to do this, so just
                 // bluntly specifying tokens here, as recommended in some GitHub issue.
-                sider: isNavBgLight
-                    ? undefined
-                    : {
-                        colorBgCollapsedButton: navBgColor,
-                        colorTextCollapsedButtonHover: "rgba(255,255,255,0.85)",
-                        colorTextCollapsedButton: "rgba(255,255,255,0.65)",
-                        colorMenuBackground: navBgColor,
-                        colorBgMenuItemCollapsedHover: "rgba(0,0,0,0.06)",
-                        colorBgMenuItemCollapsedSelected: "rgba(0,0,0,0.15)",
-                        colorBgMenuItemCollapsedElevated: "rgba(0,0,0,0.85)",
-                        colorMenuItemDivider: "rgba(255,255,255,0.15)",
-                        colorBgMenuItemHover: "rgba(0,0,0,0.06)",
-                        colorBgMenuItemSelected: "rgba(0,0,0,0.15)",
-                        colorTextMenuSelected: "#fff",
-                        colorTextMenuItemHover: "rgba(255,255,255,0.75)",
-                        colorTextMenu: "rgba(255,255,255,0.75)",
-                        colorTextMenuSecondary: "rgba(255,255,255,0.65)",
-                        colorTextMenuTitle: "rgba(255,255,255,0.95)",
-                        colorTextMenuActive: "rgba(255,255,255,0.95)",
-                        colorTextSubMenuSelected: "#fff",
-                    },
+                sider: layoutColorOverrides,
             }, 
             // Tweak defaults. ProLayout is janky and has terrible docs!
             layout: (_b = layoutProps.layout) !== null && _b !== void 0 ? _b : "top", fixedHeader: (_c = layoutProps.fixedHeader) !== null && _c !== void 0 ? _c : false, fixSiderbar: 
@@ -1154,7 +1160,9 @@ function RichLayout(_a) {
             // This is always needed if you want layout mix to have effect and look any different from layout side - not clear why this should ever be false.
             splitMenus: layoutProps.layout === "mix", route: {
                 path: rootUrl,
-                routes: navMenuItems,
+                routes: navMenuItems
+                    ? filterNavMenuItemsByConditions(navMenuItems)
+                    : undefined,
             }, location: {
                 pathname: pathname,
             }, menu: {
@@ -1191,20 +1199,25 @@ function RichLayout(_a) {
             } }), children)));
 }
 
-function generateNavMenuType(remainingDepth, displayName, defaultValue) {
+function generateNavMenuType(isNested, remainingDepth, displayName, defaultValue) {
     return {
         displayName: displayName ? displayName : "Nested items",
         type: "array",
         defaultValue: defaultValue,
+        advanced: isNested,
         itemType: {
             type: "object",
             nameFunc: function (item) {
                 return item.name || (!displayName ? "Unnamed nested item" : "Unnamed item");
             },
-            fields: __assign({ path: "href", name: "string" }, (remainingDepth === 0
+            fields: __assign({ path: "href", name: "string", condition: {
+                    advanced: true,
+                    displayName: "Show only if",
+                    type: "exprEditor",
+                } }, (remainingDepth === 0
                 ? {}
                 : {
-                    routes: generateNavMenuType(remainingDepth - 1),
+                    routes: generateNavMenuType(true, remainingDepth - 1),
                 })),
         },
     };
@@ -1231,7 +1244,7 @@ var richLayoutMeta = {
             type: "imageUrl",
             defaultValue: "https://www.plasmic.app/favicon.ico",
         },
-        navMenuItems: generateNavMenuType(2, "Nav menu items", [
+        navMenuItems: generateNavMenuType(false, 2, "Nav menu items", [
             {
                 path: "/",
                 name: "Link 1",