From 5c6572e3026ce7dafde6648b04f6ea0bc1be4b5e Mon Sep 17 00:00:00 2001
From: haoziqaq <357229046@qq.com>
Date: Tue, 17 Jan 2023 18:58:34 +0800
Subject: [PATCH] fix(react-simulator-renderer): fix missing i18n of
 customCreateElement

---
 .../src/locale/en-US.json                     |  4 ++++
 .../src/locale/index.ts                       | 21 +++++++++++++++++++
 .../src/locale/zh-CN.json                     |  4 ++++
 .../src/renderer-view.tsx                     | 10 +++++----
 4 files changed, 35 insertions(+), 4 deletions(-)
 create mode 100644 packages/react-simulator-renderer/src/locale/en-US.json
 create mode 100644 packages/react-simulator-renderer/src/locale/index.ts
 create mode 100644 packages/react-simulator-renderer/src/locale/zh-CN.json

diff --git a/packages/react-simulator-renderer/src/locale/en-US.json b/packages/react-simulator-renderer/src/locale/en-US.json
new file mode 100644
index 000000000..ac864c0a2
--- /dev/null
+++ b/packages/react-simulator-renderer/src/locale/en-US.json
@@ -0,0 +1,4 @@
+{
+  "Drag and drop components or templates here": "Drag and drop components or templates here",
+  "Locked elements and child elements cannot be edited": "Locked elements and child elements cannot be edited"
+}
\ No newline at end of file
diff --git a/packages/react-simulator-renderer/src/locale/index.ts b/packages/react-simulator-renderer/src/locale/index.ts
new file mode 100644
index 000000000..e4b39a347
--- /dev/null
+++ b/packages/react-simulator-renderer/src/locale/index.ts
@@ -0,0 +1,21 @@
+import { createElement } from 'react';
+import enUS from './en-US.json';
+import zhCN from './zh-CN.json';
+
+const instance: Record<string, Record<string, string>> = {
+  'zh-CN': zhCN as Record<string, string>,
+  'en-US': enUS as Record<string, string>,
+};
+
+export function createIntl(locale: string = 'zh-CN') {
+  const intl = (id: string) => {
+    return instance[locale][id];
+  };
+
+  const intlNode = (id: string) => createElement('span', instance[locale][id]);
+
+  return {
+    intl,
+    intlNode,
+  };
+}
diff --git a/packages/react-simulator-renderer/src/locale/zh-CN.json b/packages/react-simulator-renderer/src/locale/zh-CN.json
new file mode 100644
index 000000000..74bb821dd
--- /dev/null
+++ b/packages/react-simulator-renderer/src/locale/zh-CN.json
@@ -0,0 +1,4 @@
+{
+  "Drag and drop components or templates here": "拖拽组件或模板到这里",
+  "Locked elements and child elements cannot be edited": "锁定元素及子元素无法编辑"
+}
\ No newline at end of file
diff --git a/packages/react-simulator-renderer/src/renderer-view.tsx b/packages/react-simulator-renderer/src/renderer-view.tsx
index d1c7abe30..68e66fc02 100644
--- a/packages/react-simulator-renderer/src/renderer-view.tsx
+++ b/packages/react-simulator-renderer/src/renderer-view.tsx
@@ -10,6 +10,7 @@ import { SimulatorRendererContainer, DocumentInstance } from './renderer';
 import { host } from './host';
 import { isRendererDetached } from './utils/misc';
 import './renderer.less';
+import { createIntl } from './locale';
 
 // patch cloneElement avoid lost keyProps
 const originCloneElement = window.React.cloneElement;
@@ -130,6 +131,7 @@ class Renderer extends Component<{
   documentInstance: DocumentInstance;
 }> {
   startTime: number | null = null;
+  schemaChangedSymbol = false;
 
   componentDidUpdate() {
     this.recordTime();
@@ -152,8 +154,6 @@ class Renderer extends Component<{
     this.recordTime();
   }
 
-  schemaChangedSymbol = false;
-
   getSchemaChangedSymbol = () => {
     return this.schemaChangedSymbol;
   };
@@ -172,6 +172,8 @@ class Renderer extends Component<{
 
     if (!container.autoRender || isRendererDetached()) return null;
 
+    const { intl } = createIntl(locale);
+
     return (
       <LowCodeRenderer
         locale={locale}
@@ -206,12 +208,12 @@ class Renderer extends Component<{
             (children == null || (Array.isArray(children) && !children.length)) &&
             (!viewProps.style || Object.keys(viewProps.style).length === 0)
           ) {
-            let defaultPlaceholder = '拖拽组件或模板到这里';
+            let defaultPlaceholder = intl('Drag and drop components or templates here');
             const lockedNode = getClosestNode(leaf, (node) => {
               return node?.getExtraProp('isLocked')?.getValue() === true;
             });
             if (lockedNode) {
-              defaultPlaceholder = '锁定元素及子元素无法编辑';
+              defaultPlaceholder = intl('Locked elements and child elements cannot be edited');
             }
             children = (
               <div className={cn('lc-container-placeholder', { 'lc-container-locked': !!lockedNode })} style={viewProps.placeholderStyle}>