@plasmicpkgs/plasmic-rich-components 1.0.78 → 1.0.80

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

@@ -1,11 +1,10 @@
 import registerComponent from '@plasmicapp/host/registerComponent';
 import '@plasmicapp/host/registerGlobalContext';
 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 React, { useState, useEffect, useRef } from 'react';
+import { Checkbox, Switch, Empty, theme, ConfigProvider, Dropdown, Button } from 'antd';
+import { tinycolor } from '@ctrl/tinycolor';
 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';
 
@@ -201,10 +200,11 @@ function buildFieldsPropType(opts) {
             displayName: displayName,
             control: control,
             argNames: ["currentItem", "currentValue"],
-            argValues: function (_props, ctx) {
-                var _a;
-                var row = (_a = ctx === null || ctx === void 0 ? void 0 : ctx.data) === null || _a === void 0 ? void 0 : _a[0];
-                var cell = _props.fieldId ? row === null || row === void 0 ? void 0 : row[_props.fieldId] : undefined;
+            argValues: function (_props, ctx, _a) {
+                var _b;
+                var item = _a.item;
+                var row = (_b = ctx === null || ctx === void 0 ? void 0 : ctx.data) === null || _b === void 0 ? void 0 : _b[0];
+                var cell = item.fieldId ? row === null || row === void 0 ? void 0 : row[item.fieldId] : undefined;
                 return [row, cell];
             },
         });
@@ -251,7 +251,7 @@ function buildFieldsPropType(opts) {
                     type: "string",
                     displayName: "Title",
                     defaultValueHint: getDefaultValueHint("title"),
-                }, expr: rowDataType("Customize data"), isHidden: {
+                }, expr: rowDataType("Customize cell data"), isHidden: {
                     type: "boolean",
                     displayName: "Is hidden",
                     defaultValueHint: getDefaultValueHint("isHidden"),
@@ -865,7 +865,10 @@ function useColumnDefinitions$1(data, props) {
                     return defaultRender(_);
                 },
                 render: function (value, record, rowIndex) {
-                    return renderValue(value, record, cconfig);
+                    var cellValue = cconfig.fieldId
+                        ? record[cconfig.fieldId]
+                        : undefined;
+                    return renderValue(cellValue, record, cconfig);
                 },
             };
             return columnDefinition;
@@ -942,9 +945,16 @@ function useIsClient() {
 function capitalize(text) {
     return text.slice(0, 1).toUpperCase() + text.slice(1);
 }
+function isLight(color) {
+    var _a = tinycolor(color).toRgb(), r = _a.r, g = _a.g, b = _a.b;
+    return r * 0.299 + g * 0.587 + b * 0.114 > 186;
+}
 
-function ensureArray(xs) {
-    return Array.isArray(xs) ? xs : [xs];
+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;
@@ -956,19 +966,35 @@ 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;
+    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;
     }
@@ -976,23 +1002,37 @@ function RichLayout(_a) {
         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: {
+            //
+            // 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.createElement(ConfigProvider, { theme: { token: omitUndefined({ colorTextBase: navTextColor }) } },
+                React.createElement(ProConfigProvider, { dark: !isNavBgLight }, defaultDom))); }, token: {
                 header: omitUndefined({
-                    colorBgHeader: bgColor,
+                    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 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"
+                // 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: "#fff",
-                        colorTextCollapsedButtonHover: "rgba(0,0,0,0.65)",
-                        colorTextCollapsedButton: "rgba(0,0,0,0.45)",
-                        colorMenuBackground: bgColor,
+                        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)",
@@ -1024,7 +1064,7 @@ function RichLayout(_a) {
                 // collapsedShowGroupTitle: true,
                 defaultOpenAll: true,
                 // hideMenuWhenCollapsed: true,
-            }, avatarProps: showAvatarMenu && 0 / 1
+            }, avatarProps: showAvatarMenu
                 ? {
                     src: avatarImage,
                     size: "small",
@@ -1064,7 +1104,7 @@ function generateNavMenuType(remainingDepth, displayName, defaultValue) {
             nameFunc: function (item) {
                 return item.name || (!displayName ? "Unnamed nested item" : "Unnamed item");
             },
-            fields: __assign({ path: "string", name: "string" }, (remainingDepth === 0
+            fields: __assign({ path: "href", name: "string" }, (remainingDepth === 0
                 ? {}
                 : {
                     routes: generateNavMenuType(remainingDepth - 1),
@@ -1074,7 +1114,7 @@ function generateNavMenuType(remainingDepth, displayName, defaultValue) {
 }
 var richLayoutMeta = {
     name: "hostless-rich-layout",
-    displayName: "Rich Page Layout",
+    displayName: "Rich App Layout",
     props: {
         children: {
             type: "slot",
@@ -1115,16 +1155,21 @@ var richLayoutMeta = {
         },
         simpleNavTheme: {
             displayName: "Theme",
-            advanced: true,
             type: "object",
             fields: {
                 scheme: {
                     type: "choice",
-                    options: ["light", "accent", "dark"].map(function (v) { return ({
+                    options: ["default", "primary", "light", "dark", "custom"].map(function (v) { return ({
                         label: capitalize(v),
                         value: v,
                     }); }),
-                    defaultValue: "accent",
+                    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",
                 },
             },
         },
@@ -1194,6 +1239,7 @@ var richLayoutMeta = {
     defaultStyles: {
         width: "full-bleed",
         height: "stretch",
+        minHeight: "100vh",
     },
     importName: "RichLayout",
     importPath: "@plasmicpkgs/plasmic-rich-components",
@@ -1352,7 +1398,10 @@ function useColumnDefinitions(data, props) {
                     return defaultRender(_);
                 },
                 render: function (value, record, rowIndex) {
-                    return renderValue(value, record, cconfig);
+                    var cellValue = cconfig.fieldId
+                        ? record[cconfig.fieldId]
+                        : undefined;
+                    return renderValue(cellValue, record, cconfig);
                 },
             };
             return columnDefinition;