@blocklet/pages-kit-block-studio 0.4.73 → 0.4.74

package/lib/cjs/plugins/_theme.js

@@ -53,6 +53,7 @@ const components_1 = require("@blocklet/pages-kit-runtime/components");
 // @ts-ignore
 const locales_1 = require("@blocklet/pages-kit-runtime/locales");
 const components_2 = require("@blocklet/pages-kit/components");
+const property_1 = require("@blocklet/pages-kit/utils/property");
 // @ts-ignore
 const studio_ui_1 = require("@blocklet/studio-ui");
 const ui_react_1 = require("@blocklet/ui-react");
@@ -60,6 +61,7 @@ const Add_1 = __importDefault(require("@mui/icons-material/Add"));
 const material_1 = require("@mui/material");
 const ahooks_1 = require("ahooks");
 const cloneDeep_1 = __importDefault(require("lodash/cloneDeep"));
+const get_1 = __importDefault(require("lodash/get"));
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const react_1 = require("react");
 const react_dnd_1 = require("react-dnd");
@@ -83,6 +85,7 @@ function useSessionContext() {
 }
 const LEFT_DRAWER_WIDTH = 200;
 const RIGHT_DRAWER_WIDTH = 300;
+const defaultLocale = 'en';
 const ComparisonPreviewDialog = ({ open, title, leftTitle, leftContent, rightTitle, rightContent, description = '确认后将更新配置。', loading, onConfirm, onClose, }) => {
     const handleConfirm = async () => {
         try {
@@ -121,7 +124,6 @@ function Layout({ loadState, loadedData }) {
             createdAt: '',
             updatedAt: '',
         },
-        data: {},
         allResources: {},
         searchValue: '',
         newBlockParams: {
@@ -141,6 +143,7 @@ function Layout({ loadState, loadedData }) {
         },
         init: false,
         allComponents: [],
+        propertiesValue: {},
     });
     const { locale } = (0, context_1.useLocaleContext)();
     const { session } = useSessionContext();
@@ -270,6 +273,18 @@ function Layout({ loadState, loadedData }) {
             description: '',
         };
     };
+    let mergedPropertiesValues = Object.fromEntries(Object.values(state.metadata.properties ?? {}).map(({ data }) => {
+        return [
+            data.id,
+            {
+                value: state.propertiesValue[data.id]?.value ??
+                    (0, property_1.parsePropertyValue)(data, data.locales?.[locale]?.defaultValue ?? data.locales?.[defaultLocale]?.defaultValue, {
+                        locale,
+                        defaultLocale,
+                    }),
+            },
+        ];
+    }));
     const getRenderContent = (0, react_1.useCallback)(() => {
         if (loadState.type === '404') {
             return null;
@@ -279,12 +294,12 @@ function Layout({ loadState, loadedData }) {
         }
         // const pageData = loadedData[loadState.routePath];
         // const Component = pageData.main.default;
-        // return <Component {...state.data} />;
+        // return <Component />;
         return [
-            (0, jsx_runtime_1.jsx)(components_2.CustomComponentRenderer, { locale: locale, componentId: state.metadata.id, dev: { mode: 'draft', components: mergedAllBlocks, defaultLocale: 'en' }, props: state.data }, "custom"),
-            // <Component key="original" {...state.data} />,
+            (0, jsx_runtime_1.jsx)(components_2.CustomComponentRenderer, { locale: locale, componentId: state.metadata.id, dev: { mode: 'draft', components: mergedAllBlocks, defaultLocale }, properties: mergedPropertiesValues }, "custom"),
+            // <Component key="original"  />,
         ];
-    }, [loadedData, loadState, locale, state.injectBlocks, state.metadata, mergedAllBlocks]);
+    }, [loadedData, loadState, locale, state.injectBlocks, state.metadata, mergedAllBlocks, mergedPropertiesValues]);
     // add auto redirect to first route
     if (loadState.type === '404' &&
         !routes.includes(location.pathname) &&
@@ -369,7 +384,7 @@ function Layout({ loadState, loadedData }) {
                             position: 'relative',
                             height: '100%',
                         },
-                    }, children: (0, jsx_runtime_1.jsxs)(material_1.List, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: [(0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { width: '100%' }, children: (0, jsx_runtime_1.jsx)(components_1.BasicInfo, { config: state.metadata }) }) }), (0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(components_1.PropertiesConfig, { config: state.metadata, currentLocale: locale, defaultLocale: "en", allComponents: mergedAllBlocks, onUpdateConfig: (updater) => {
+                    }, children: (0, jsx_runtime_1.jsxs)(material_1.List, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: [(0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { width: '100%' }, children: (0, jsx_runtime_1.jsx)(components_1.BasicInfo, { config: state.metadata }) }) }), (0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(components_1.PropertiesConfig, { config: state.metadata, currentLocale: locale, defaultLocale: defaultLocale, allComponents: mergedAllBlocks, onUpdateConfig: (updater) => {
                                                 updater(state.metadata);
                                             }, useI18nEditor: false }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "column", spacing: 1, sx: { mt: 1 }, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", size: "small", color: "primary", onClick: async () => {
                                                         try {
@@ -478,16 +493,15 @@ function Layout({ loadState, loadedData }) {
                                                             console.error('生成接口预览失败:', error);
                                                             Toast_1.default.error('生成接口预览失败');
                                                         }
-                                                    }, children: "Properties \u2192 Interface" })] })] }) }), state.metadata.id && ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { width: '100%' }, children: (0, jsx_runtime_1.jsx)(components_1.ParametersConfig, { config: state.metadata, allComponents: mergedAllBlocks, defaultLocale: "en", locale: locale, 
-                                        // 不需要 propertiesValue
-                                        // propertiesValue={{}}
-                                        onChange: ({ key, value }) => {
-                                            state.data = {
-                                                ...state.data,
-                                                [key]: value.value,
+                                                    }, children: "Properties \u2192 Interface" })] })] }) }), state.metadata.id && ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { width: '100%' }, children: (0, jsx_runtime_1.jsx)(components_1.ParametersConfig, { config: state.metadata, allComponents: mergedAllBlocks, defaultLocale: defaultLocale, locale: locale, propertiesValue: mergedPropertiesValues, onChange: ({ key, value, id, path, ...rest }) => {
+                                            const property = (0, get_1.default)(state.metadata, [...path, 'data']);
+                                            const realValue = (0, property_1.parsePropertyValue)(property, value.value, {
+                                                locale,
+                                                defaultLocale,
+                                            });
+                                            state.propertiesValue[id] = {
+                                                value: realValue,
                                             };
-                                        }, props: {
-                                            ...state.data,
                                         } }) }) }))] }) }), (0, jsx_runtime_1.jsx)(CreateResource, { open: state.createResourceOpen, onClose: () => {
                         state.createResourceOpen = false;
                     } }), (0, jsx_runtime_1.jsxs)(material_1.Dialog, { open: state.createBlockOpen, onClose: onCloseCreateBlock, children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: "Create New Block" }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { spacing: 2, sx: { pt: 1, minWidth: 300 }, children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { autoFocus: true, required: true, label: "Name", fullWidth: true, value: state.newBlockParams.name, onChange: (e) => {