From b7668b4e9c3b64497977dca926d8b6953c07e712 Mon Sep 17 00:00:00 2001
From: Minfee <39008983+Minfee@users.noreply.github.com>
Date: Mon, 13 Dec 2021 13:44:17 +0800
Subject: [PATCH] fix(formily): set default language (#163)

Auto sets the language to Chinese when the browser's language does not match in preset language.
---
 examples/basic/src/main.tsx                   | 55 +++++++++++--------
 examples/sandbox/src/main.tsx                 | 54 ++++++++++--------
 .../antd/playground/widgets/ActionsWidget.tsx |  6 ++
 .../next/playground/widgets/ActionsWidget.tsx |  6 ++
 4 files changed, 75 insertions(+), 46 deletions(-)

diff --git a/examples/basic/src/main.tsx b/examples/basic/src/main.tsx
index cbd8f349f..66f33af65 100644
--- a/examples/basic/src/main.tsx
+++ b/examples/basic/src/main.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import ReactDOM from 'react-dom'
 import {
   Designer,
@@ -298,28 +298,37 @@ const Logo: React.FC = () => (
   </div>
 )
 
-const Actions = observer(() => (
-  <Space style={{ marginRight: 10 }}>
-    <Radio.Group
-      value={GlobalRegistry.getDesignerLanguage()}
-      optionType="button"
-      options={[
-        { label: 'English', value: 'en-us' },
-        { label: '简体中文', value: 'zh-cn' },
-        { label: '한국어', value: 'ko-kr' },
-      ]}
-      onChange={(e) => {
-        GlobalRegistry.setDesignerLanguage(e.target.value)
-      }}
-    />
-    <Button href="https://github.com/alibaba/designable" target="_blank">
-      <GithubOutlined />
-      Github
-    </Button>
-    <Button>保存</Button>
-    <Button type="primary">发布</Button>
-  </Space>
-))
+const Actions = observer(() => {
+  const supportLocales = ['zh-cn', 'en-us', 'ko-kr']
+  useEffect(() => {
+    if (!supportLocales.includes(GlobalRegistry.getDesignerLanguage())) {
+      GlobalRegistry.setDesignerLanguage('zh-cn')
+    }
+  }, [])
+
+  return (
+    <Space style={{ marginRight: 10 }}>
+      <Radio.Group
+        value={GlobalRegistry.getDesignerLanguage()}
+        optionType="button"
+        options={[
+          { label: 'English', value: 'en-us' },
+          { label: '简体中文', value: 'zh-cn' },
+          { label: '한국어', value: 'ko-kr' },
+        ]}
+        onChange={(e) => {
+          GlobalRegistry.setDesignerLanguage(e.target.value)
+        }}
+      />
+      <Button href="https://github.com/alibaba/designable" target="_blank">
+        <GithubOutlined />
+        Github
+      </Button>
+      <Button>保存</Button>
+      <Button type="primary">发布</Button>
+    </Space>
+  )
+})
 
 const engine = createDesigner()
 const App = () => {
diff --git a/examples/sandbox/src/main.tsx b/examples/sandbox/src/main.tsx
index bd7f325cf..f1267f192 100644
--- a/examples/sandbox/src/main.tsx
+++ b/examples/sandbox/src/main.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import ReactDOM from 'react-dom'
 import {
   Designer,
@@ -297,28 +297,36 @@ const Logo: React.FC = () => (
   </div>
 )
 
-const Actions = observer(() => (
-  <Space style={{ marginRight: 10 }}>
-    <Radio.Group
-      value={GlobalRegistry.getDesignerLanguage()}
-      optionType="button"
-      options={[
-        { label: 'English', value: 'en-us' },
-        { label: '简体中文', value: 'zh-cn' },
-        { label: '한국어', value: 'ko-kr' },
-      ]}
-      onChange={(e) => {
-        GlobalRegistry.setDesignerLanguage(e.target.value)
-      }}
-    />
-    <Button href="https://github.com/alibaba/designable" target="_blank">
-      <GithubOutlined />
-      Github
-    </Button>
-    <Button>保存</Button>
-    <Button type="primary">发布</Button>
-  </Space>
-))
+const Actions = observer(() => {
+  const supportLocales = ['zh-cn', 'en-us', 'ko-kr']
+  useEffect(() => {
+    if (!supportLocales.includes(GlobalRegistry.getDesignerLanguage())) {
+      GlobalRegistry.setDesignerLanguage('zh-cn')
+    }
+  }, [])
+  return (
+    <Space style={{ marginRight: 10 }}>
+      <Radio.Group
+        value={GlobalRegistry.getDesignerLanguage()}
+        optionType="button"
+        options={[
+          { label: 'English', value: 'en-us' },
+          { label: '简体中文', value: 'zh-cn' },
+          { label: '한국어', value: 'ko-kr' },
+        ]}
+        onChange={(e) => {
+          GlobalRegistry.setDesignerLanguage(e.target.value)
+        }}
+      />
+      <Button href="https://github.com/alibaba/designable" target="_blank">
+        <GithubOutlined />
+        Github
+      </Button>
+      <Button>保存</Button>
+      <Button type="primary">发布</Button>
+    </Space>
+  )
+})
 
 const engine = createDesigner()
 const App = () => {
diff --git a/formily/antd/playground/widgets/ActionsWidget.tsx b/formily/antd/playground/widgets/ActionsWidget.tsx
index bb89688a8..dbfb55d35 100644
--- a/formily/antd/playground/widgets/ActionsWidget.tsx
+++ b/formily/antd/playground/widgets/ActionsWidget.tsx
@@ -11,6 +11,12 @@ export const ActionsWidget = observer(() => {
   useEffect(() => {
     loadInitialSchema(designer)
   }, [])
+  const supportLocales = ['zh-cn', 'en-us', 'ko-kr']
+  useEffect(() => {
+    if (!supportLocales.includes(GlobalRegistry.getDesignerLanguage())) {
+      GlobalRegistry.setDesignerLanguage('zh-cn')
+    }
+  }, [])
   return (
     <Space style={{ marginRight: 10 }}>
       <Button href="https://designable-fusion.formilyjs.org">
diff --git a/formily/next/playground/widgets/ActionsWidget.tsx b/formily/next/playground/widgets/ActionsWidget.tsx
index 1ef5d94bc..b4825881d 100644
--- a/formily/next/playground/widgets/ActionsWidget.tsx
+++ b/formily/next/playground/widgets/ActionsWidget.tsx
@@ -11,6 +11,12 @@ export const ActionsWidget = observer(() => {
   useEffect(() => {
     loadInitialSchema(designer)
   }, [])
+  const supportLocales = ['zh-cn', 'en-us', 'ko-kr']
+  useEffect(() => {
+    if (!supportLocales.includes(GlobalRegistry.getDesignerLanguage())) {
+      GlobalRegistry.setDesignerLanguage('zh-cn')
+    }
+  }, [])
   return (
     <Space style={{ marginRight: 10 }}>
       <Button href="https://designable-antd.formilyjs.org">Ant Design</Button>