@plasmicpkgs/plasmic-rich-components 1.0.79 → 1.0.80

package/dist/common.d.ts

@@ -1,2 +1,3 @@
 export declare function useIsClient(): boolean;
 export declare function capitalize(text: string): string;
+export declare function isLight(color: string): boolean;

package/dist/index.js

@@ -5,6 +5,7 @@ require('@plasmicapp/host/registerGlobalContext');
 var proComponents = require('@ant-design/pro-components');
 var React = require('react');
 var antd = require('antd');
+var tinycolor = require('@ctrl/tinycolor');
 var icons = require('@ant-design/icons');
 var csvWriterBrowser = require('csv-writer-browser');
 var fastStringify = require('fast-stringify');
@@ -952,10 +953,20 @@ function useIsClient() {
 function capitalize(text) {
     return text.slice(0, 1).toUpperCase() + text.slice(1);
 }
+function isLight(color) {
+    var _a = tinycolor.tinycolor(color).toRgb(), r = _a.r, g = _a.g, b = _a.b;
+    return r * 0.299 + g * 0.587 + b * 0.114 > 186;
+}
 
+function omitUndefined(x) {
+    return Object.fromEntries(Object.entries(x).filter(function (_a) {
+        _a[0]; var v = _a[1];
+        return v !== undefined;
+    }));
+}
 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 () {
@@ -963,12 +974,88 @@ function RichLayout(_a) {
             setPathname(location.pathname);
         }
     }, []);
+    var token = antd.theme.useToken().token;
+    var origTextColor = token.colorTextBase;
+    function getNavBgColor() {
+        var _a, _b;
+        var scheme = (_a = simpleNavTheme === null || simpleNavTheme === void 0 ? void 0 : simpleNavTheme.scheme) !== null && _a !== void 0 ? _a : "default";
+        switch (scheme) {
+            case "primary":
+                return token.colorPrimary;
+            case "dark":
+                // Ant default dark blue Menu color.
+                return "#011528";
+            case "custom":
+                return (_b = simpleNavTheme === null || simpleNavTheme === void 0 ? void 0 : simpleNavTheme.customBgColor) !== null && _b !== void 0 ? _b : token.colorBgBase;
+            case "light":
+                // Just use this sorta ugly gray if using 'light' scheme in 'dark' mode.
+                // Otherwise using light scheme in light mode.
+                return "#fff";
+            case "default":
+                return token.colorBgBase || "#fff";
+        }
+    }
+    var navBgColor = getNavBgColor();
+    // Dynamically determine whether we need to change the text to black/white or not, based on background color.
+    // We don't want light-on-light or dark-on-dark, so if both isNavBgLight and isOrigTextLight are the same, then need to change.
+    // If no need to change, we leave text color as is.
+    var isNavBgLight = isLight(navBgColor);
+    var isOrigTextLight = isLight(origTextColor);
+    // Ant will interpret "" as defaulting to "#fff" for dark mode and "#000" in light mode.
+    var navTextColor = isNavBgLight !== isOrigTextLight ? 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.
+            //
+            // What we're doing is telling Ant to use the dark mode algorithm. However, dark mode algorithm doesn't change
+            // the seed tokens for colorTextBase and colorBgBase - it only fills in #fff and #000 for these if they are
+            // unset (""). So that's why further up we may be setting the text color to "".
+            //
+            // I think it doesn't matter too much what is the colorBgBase, since we are setting (Pro-specific) `tokens`
+            // further down for actually setting the fill of the nav sections. What matters is the text color - if we're
+            // showing a dark background, then we want the text to be white.
+            //
+            // We could specify darkAlgorithm to ConfigProvider, but IIRC Pro might be setting some of its own tokens
+            // based on whether dark is being specified to the ProConfigProvider. So that's why we need that.
+            //
+            // 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,
+                }),
+                // 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",
+                    },
+            }, 
             // 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.
@@ -985,7 +1072,7 @@ function RichLayout(_a) {
                 // collapsedShowGroupTitle: true,
                 defaultOpenAll: true,
                 // hideMenuWhenCollapsed: true,
-            }, avatarProps: showAvatarMenu && false
+            }, avatarProps: showAvatarMenu
                 ? {
                     src: avatarImage,
                     size: "small",
@@ -1035,7 +1122,7 @@ function generateNavMenuType(remainingDepth, displayName, defaultValue) {
 }
 var richLayoutMeta = {
     name: "hostless-rich-layout",
-    displayName: "Rich Page Layout",
+    displayName: "Rich App Layout",
     props: {
         children: {
             type: "slot",
@@ -1074,6 +1161,26 @@ var richLayoutMeta = {
             }); }),
             defaultValueHint: "top",
         },
+        simpleNavTheme: {
+            displayName: "Theme",
+            type: "object",
+            fields: {
+                scheme: {
+                    type: "choice",
+                    options: ["default", "primary", "light", "dark", "custom"].map(function (v) { return ({
+                        label: capitalize(v),
+                        value: v,
+                    }); }),
+                    defaultValueHint: "default",
+                },
+                customBgColor: {
+                    type: "color",
+                    displayName: "Custom color",
+                    hidden: function (props) { var _a; return !(((_a = props.simpleNavTheme) === null || _a === void 0 ? void 0 : _a.scheme) === "custom"); },
+                    defaultValue: "#D73B58",
+                },
+            },
+        },
         // Advanced, show later
         /*
         siderMenuType: {
@@ -1091,18 +1198,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",
@@ -1152,6 +1247,7 @@ var richLayoutMeta = {
     defaultStyles: {
         width: "full-bleed",
         height: "stretch",
+        minHeight: "100vh",
     },
     importName: "RichLayout",
     importPath: "@plasmicpkgs/plasmic-rich-components",