fix(formily): set default language (#163)

Auto sets the language to Chinese when the browser's language does not match in preset language.
alibaba · Dec 13, 2021 · b7668b4 · b7668b4
1 parent b982a2e
commit b7668b4
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 46 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>