@plasmicpkgs/plasmic-rich-components 1.0.76 → 1.0.78

package/dist/index.js

@@ -6,6 +6,8 @@ var proComponents = require('@ant-design/pro-components');
 var React = require('react');
 var antd = require('antd');
 var icons = require('@ant-design/icons');
+var lib = require('@ant-design/pro-utils/lib');
+var configProvider = require('antd/es/config-provider');
 var csvWriterBrowser = require('csv-writer-browser');
 var fastStringify = require('fast-stringify');
 
@@ -949,9 +951,12 @@ function capitalize(text) {
     return text.slice(0, 1).toUpperCase() + text.slice(1);
 }
 
+function ensureArray(xs) {
+    return Array.isArray(xs) ? xs : [xs];
+}
 function RichLayout(_a) {
     var _b, _c, _d;
-    var children = _a.children, navMenuItems = _a.navMenuItems, _e = _a.rootUrl, rootUrl = _e === void 0 ? "/" : _e, actionsChildren = _a.actionsChildren, footerChildren = _a.footerChildren, avatarLabel = _a.avatarLabel, avatarImage = _a.avatarImage, showAvatarMenu = _a.showAvatarMenu, className = _a.className, layoutProps = __rest(_a, ["children", "navMenuItems", "rootUrl", "actionsChildren", "footerChildren", "avatarLabel", "avatarImage", "showAvatarMenu", "className"]);
+    var children = _a.children, navMenuItems = _a.navMenuItems, _e = _a.rootUrl, rootUrl = _e === void 0 ? "/" : _e, actionsChildren = _a.actionsChildren, footerChildren = _a.footerChildren, avatarLabel = _a.avatarLabel, avatarImage = _a.avatarImage, showAvatarMenu = _a.showAvatarMenu, className = _a.className, simpleNavTheme = _a.simpleNavTheme, layoutProps = __rest(_a, ["children", "navMenuItems", "rootUrl", "actionsChildren", "footerChildren", "avatarLabel", "avatarImage", "showAvatarMenu", "className", "simpleNavTheme"]);
     var isClient = useIsClient();
     var _f = React.useState(undefined), pathname = _f[0], setPathname = _f[1];
     React.useEffect(function () {
@@ -959,12 +964,58 @@ function RichLayout(_a) {
             setPathname(location.pathname);
         }
     }, []);
+    var _g = React.useContext(configProvider.ConfigContext); _g.locale; var th = _g.theme; __rest(_g, ["locale", "theme"]);
+    var token = antd.theme.useToken().token;
+    var inDarkMode = ensureArray(th === null || th === void 0 ? void 0 : th.algorithm).includes(antd.theme.darkAlgorithm);
+    var bgColor = (simpleNavTheme === null || simpleNavTheme === void 0 ? void 0 : simpleNavTheme.scheme) === "accent"
+        ? token.colorPrimary
+        : (simpleNavTheme === null || simpleNavTheme === void 0 ? void 0 : simpleNavTheme.scheme) === "dark"
+            ? // This is the default dark Menu color in Ant.
+                "#011528"
+            : inDarkMode
+                ? // Just use this sorta ugly gray if using 'light' scheme in 'dark' mode....
+                    "rgba(0,0,0,0.6)"
+                : // Using 'light' scheme in 'light' mode
+                    undefined;
     if (!isClient) {
         return null;
     }
     return (React__default.default.createElement("div", { className: className },
         React__default.default.createElement("style", null, ".ant-pro-layout-bg-list {\n            display: none;\n        }"),
         React__default.default.createElement(proComponents.ProLayout, __assign({}, layoutProps, { 
+            // Theme just the header. If you simply pass in navTheme=realDark, it affects all main content as well.
+            headerRender: function (props, defaultDom) { return (React__default.default.createElement(proComponents.ProConfigProvider, { dark: (simpleNavTheme === null || simpleNavTheme === void 0 ? void 0 : simpleNavTheme.scheme) !== "light" }, defaultDom)); }, token: {
+                header: lib.omitUndefined({
+                    colorBgHeader: bgColor,
+                }),
+                // 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 bothered debugging the pro components code to figure out the proper way to do this, so just
+                // bluntly specifying tokens here.
+                sider: !inDarkMode && (simpleNavTheme === null || simpleNavTheme === void 0 ? void 0 : simpleNavTheme.scheme) === "light"
+                    ? undefined
+                    : {
+                        colorBgCollapsedButton: "#fff",
+                        colorTextCollapsedButtonHover: "rgba(0,0,0,0.65)",
+                        colorTextCollapsedButton: "rgba(0,0,0,0.45)",
+                        colorMenuBackground: bgColor,
+                        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",
+                    },
+            }, 
             // 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: 
             // Doesn't stretch full height if you set this to false and you're in mix mode.
@@ -981,7 +1032,7 @@ function RichLayout(_a) {
                 // collapsedShowGroupTitle: true,
                 defaultOpenAll: true,
                 // hideMenuWhenCollapsed: true,
-            }, avatarProps: showAvatarMenu && false
+            }, avatarProps: showAvatarMenu && 0 / 1
                 ? {
                     src: avatarImage,
                     size: "small",
@@ -1070,6 +1121,21 @@ var richLayoutMeta = {
             }); }),
             defaultValueHint: "top",
         },
+        simpleNavTheme: {
+            displayName: "Theme",
+            advanced: true,
+            type: "object",
+            fields: {
+                scheme: {
+                    type: "choice",
+                    options: ["light", "accent", "dark"].map(function (v) { return ({
+                        label: capitalize(v),
+                        value: v,
+                    }); }),
+                    defaultValue: "accent",
+                },
+            },
+        },
         // Advanced, show later
         /*
         siderMenuType: {
@@ -1087,18 +1153,6 @@ var richLayoutMeta = {
           options: ["Fluid", "Fixed"],
           defaultValueHint: "Fluid",
         },
-        navTheme: {
-          displayName: "Theme",
-          type: "choice",
-          options: [
-            { value: "realDark", label: "Dark" },
-            { value: "light", label: "Light" },
-          ],
-        },
-        colorPrimary: {
-          displayName: "Primary color",
-          type: "color",
-        },
         */
         fixedHeader: {
             displayName: "Sticky header",