@plasmicpkgs/plasmic-rich-components 1.0.77 → 1.0.78

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

@@ -1,9 +1,11 @@
 import registerComponent from '@plasmicapp/host/registerComponent';
 import '@plasmicapp/host/registerGlobalContext';
-import { ProDescriptions, ProLayout, ProTable, TableDropdown } from '@ant-design/pro-components';
-import React, { useState, useEffect, useRef } from 'react';
-import { Checkbox, Switch, Empty, Dropdown, Button } from 'antd';
+import { ProDescriptions, ProLayout, ProConfigProvider, ProTable, TableDropdown } from '@ant-design/pro-components';
+import React, { useState, useEffect, useContext, useRef } from 'react';
+import { Checkbox, Switch, Empty, theme, Dropdown, Button } from 'antd';
 import { LogoutOutlined, PlusOutlined, EllipsisOutlined } from '@ant-design/icons';
+import { omitUndefined } from '@ant-design/pro-utils/lib';
+import { ConfigContext } from 'antd/es/config-provider';
 import { createObjectCsvStringifier } from 'csv-writer-browser';
 import fastStringify from 'fast-stringify';
 
@@ -941,9 +943,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 = useState(undefined), pathname = _f[0], setPathname = _f[1];
     useEffect(function () {
@@ -951,12 +956,58 @@ function RichLayout(_a) {
             setPathname(location.pathname);
         }
     }, []);
+    var _g = useContext(ConfigContext); _g.locale; var th = _g.theme; __rest(_g, ["locale", "theme"]);
+    var token = theme.useToken().token;
+    var inDarkMode = ensureArray(th === null || th === void 0 ? void 0 : th.algorithm).includes(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.createElement("div", { className: className },
         React.createElement("style", null, ".ant-pro-layout-bg-list {\n            display: none;\n        }"),
         React.createElement(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.createElement(ProConfigProvider, { dark: (simpleNavTheme === null || simpleNavTheme === void 0 ? void 0 : simpleNavTheme.scheme) !== "light" }, defaultDom)); }, token: {
+                header: 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.
@@ -973,7 +1024,7 @@ function RichLayout(_a) {
                 // collapsedShowGroupTitle: true,
                 defaultOpenAll: true,
                 // hideMenuWhenCollapsed: true,
-            }, avatarProps: showAvatarMenu && false
+            }, avatarProps: showAvatarMenu && 0 / 1
                 ? {
                     src: avatarImage,
                     size: "small",
@@ -1062,6 +1113,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: {
@@ -1079,18 +1145,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",