feat(core): support designerLocales for Drag Source

packages/core/src/models/DragSource.ts

@@ -1,11 +1,12 @@
 import { each, uid } from '@designable/shared'
-import { GlobalRegistry } from '..'
-import { IDesignerControllerProps } from '../types'
+import { GlobalRegistry } from '../registry'
+import { IDesignerControllerProps, LocaleMessages } from '../types'
 import { TreeNode, ITreeNode } from './TreeNode'
 
 export interface ISourceNode
   extends Omit<ITreeNode, 'sourceName' | 'isSourceNode'> {
   designerProps?: IDesignerControllerProps
+  designerLocales?: LocaleMessages
 }
 
 const createNodesBySources = (
@@ -15,10 +16,16 @@ const createNodesBySources = (
 ) => {
   return sources.map((node) => {
     const designerProps = node.designerProps
+    const designerLocales = node.designerLocales
     const newNode = new TreeNode(node)
-    newNode.sourceName = `${prefix}-${group}-${newNode.id}`
+    newNode.sourceName = `${group}-${newNode.id}`
     if (designerProps)
       GlobalRegistry.setSourceDesignerProps(newNode.sourceName, designerProps)
+    if (designerLocales)
+      GlobalRegistry.setSourceDesignerLocales(
+        newNode.sourceName,
+        designerLocales
+      )
     return newNode
   })
 }

packages/core/src/registry.ts

@@ -1,6 +1,7 @@
 import { each, isFn, isPlainObj } from '@designable/shared'
 import { Path } from '@formily/path'
 import { define, observable } from '@formily/reactive'
+import { LocaleMessages } from './types'
 import { TreeNode } from './models'
 import {
   IDesignerControllerProps,
@@ -18,13 +19,13 @@ const getBrowserLanguage = () => {
   )
 }
 
-const getISOCode = (language: string) => {
+const getISOCode = (language: string, type = 'global') => {
   let isoCode = DESIGNER_LOCALES.language
   let lang = cleanSpace(language)
-  if (DESIGNER_LOCALES.messages[lang]) {
+  if (DESIGNER_LOCALES[type][lang]) {
     return lang
   }
-  each(DESIGNER_LOCALES.messages, (_, key: string) => {
+  each(DESIGNER_LOCALES[type], (_, key: string) => {
     if (key.indexOf(lang) > -1 || String(lang).indexOf(key) > -1) {
       isoCode = key
       return false
@@ -47,7 +48,9 @@ const DESIGNER_ICONS_MAP: Record<string, any> = {}
 
 const DESIGNER_LOCALES: IDesignerLocales = define(
   {
-    messages: {},
+    global: {},
+    components: {},
+    sources: {},
     language: getBrowserLanguage(),
   },
   {
@@ -114,22 +117,72 @@ const DESIGNER_GlobalRegistry = {
     }
   },
 
+  setComponentDesignerLocales: (
+    componentName: string,
+    locales: LocaleMessages
+  ) => {
+    const isoCodes = Object.keys(locales || {})
+    isoCodes.forEach((key) => {
+      const isoCode = cleanSpace(key)
+      const name = cleanSpace(componentName)
+      DESIGNER_LOCALES.components[isoCode] =
+        DESIGNER_LOCALES.components[isoCode] || {}
+      DESIGNER_LOCALES.components[isoCode][name] = mergeLocales(
+        {},
+        locales[key]
+      )
+    })
+  },
+
+  setSourceDesignerLocales: (sourceName: string, locales: LocaleMessages) => {
+    const isoCodes = Object.keys(locales || {})
+    isoCodes.forEach((key) => {
+      const isoCode = cleanSpace(key)
+      const name = cleanSpace(sourceName)
+      DESIGNER_LOCALES.sources[isoCode] =
+        DESIGNER_LOCALES.sources[isoCode] || {}
+      DESIGNER_LOCALES.sources[isoCode][name] = mergeLocales({}, locales[key])
+    })
+  },
+
   getComponentDesignerProps: (componentName: string) => {
     return COMPONENT_DESIGNER_PROPS_MAP[componentName] || {}
   },
 
-  getSourceDesignerProps: (nodeName: string) => {
-    return NODE_DESIGNER_PROPS_MAP[nodeName] || {}
+  getComponentDesignerMessage: (componentName: string, token: string) => {
+    const lang = getISOCode(DESIGNER_LOCALES.language)
+    const locale = DESIGNER_LOCALES.components?.[lang]?.[componentName]
+    if (!locale) {
+      for (let key in DESIGNER_LOCALES.components) {
+        const message = Path.getIn(
+          DESIGNER_LOCALES.components[key],
+          cleanSpace(token)
+        )
+        if (message) return message
+      }
+      return
+    }
+    return Path.getIn(locale, cleanSpace(token))
   },
 
-  registerDesignerProps: (map: IDesignerControllerPropsMap) => {
-    each(map, (props, name) => {
-      GlobalRegistry.setComponentDesignerProps(name, props)
-    })
+  getSourceDesignerMessage: (sourceName: string, token: string) => {
+    const lang = getISOCode(DESIGNER_LOCALES.language)
+    const locale = DESIGNER_LOCALES.sources?.[lang]?.[sourceName]
+    if (!locale) {
+      for (let key in DESIGNER_LOCALES.sources) {
+        const message = Path.getIn(
+          DESIGNER_LOCALES.sources[key],
+          cleanSpace(token)
+        )
+        if (message) return message
+      }
+      return
+    }
+    return Path.getIn(locale, cleanSpace(token))
   },
 
-  registerDesignerIcons: (map: Record<string, any>) => {
-    Object.assign(DESIGNER_ICONS_MAP, map)
+  getSourceDesignerProps: (nodeName: string) => {
+    return NODE_DESIGNER_PROPS_MAP[nodeName] || {}
   },
 
   getDesignerIcon: (name: string) => {
@@ -146,11 +199,11 @@ const DESIGNER_GlobalRegistry = {
 
   getDesignerMessage(token: string) {
     const lang = getISOCode(DESIGNER_LOCALES.language)
-    const locale = DESIGNER_LOCALES.messages[lang]
+    const locale = DESIGNER_LOCALES.global[lang]
     if (!locale) {
-      for (let key in DESIGNER_LOCALES.messages) {
+      for (let key in DESIGNER_LOCALES.global) {
         const message = Path.getIn(
-          DESIGNER_LOCALES.messages[key],
+          DESIGNER_LOCALES.global[key],
           cleanSpace(token)
         )
         if (message) return message
@@ -160,9 +213,19 @@ const DESIGNER_GlobalRegistry = {
     return Path.getIn(locale, cleanSpace(token))
   },
 
-  registerDesignerLocales(...packages: IDesignerLocales['messages'][]) {
+  registerDesignerProps: (map: IDesignerControllerPropsMap) => {
+    each(map, (props, name) => {
+      GlobalRegistry.setComponentDesignerProps(name, props)
+    })
+  },
+
+  registerDesignerIcons: (map: Record<string, any>) => {
+    Object.assign(DESIGNER_ICONS_MAP, map)
+  },
+
+  registerDesignerLocales(...packages: LocaleMessages[]) {
     packages.forEach((locales) => {
-      mergeLocales(DESIGNER_LOCALES.messages, locales)
+      mergeLocales(DESIGNER_LOCALES.global, locales)
     })
   },
 }

packages/core/src/types.ts

@@ -83,12 +83,16 @@ export type IDesignerControllerPropsMap = Record<
   string,
   IDesignerControllerProps
 >
-export interface IDesignerLocales {
-  messages: {
-    [ISOCode: string]: {
-      [key: string]: any
-    }
+
+export type LocaleMessages = {
+  [ISOCode: string]: {
+    [key: string]: any
   }
+}
+export interface IDesignerLocales {
+  global: LocaleMessages
+  components: LocaleMessages
+  sources: LocaleMessages
   language: string
 }
 

packages/playground/src/main.tsx

@@ -126,6 +126,29 @@ GlobalRegistry.registerDesignerProps({
 GlobalDragSource.setSourcesByGroup('form', [
   {
     componentName: 'Field',
+    designerLocales: {
+      'zh-CN': {
+        settings: {
+          default: '默认值1',
+        },
+      },
+    },
+    props: {
+      title: '输入框',
+      type: 'string',
+      'x-decorator': 'FormItem',
+      'x-component': 'Input',
+    },
+  },
+  {
+    componentName: 'Field',
+    designerLocales: {
+      'zh-CN': {
+        settings: {
+          default: '默认值2',
+        },
+      },
+    },
     props: {
       title: '输入框',
       type: 'string',
@@ -151,7 +174,15 @@ GlobalDragSource.setSourcesByGroup('form', [
       'x-component': 'Card',
     },
     designerProps: {
-      title: 'Card2',
+      title: 'title',
+    },
+    designerLocales: {
+      'zh-CN': {
+        title: '卡片2',
+      },
+      'en-US': {
+        title: 'Card2',
+      },
     },
     children: [
       {

packages/react-settings-form/src/SettingsForm.tsx

@@ -39,7 +39,7 @@ export const SettingsForm: React.FC<ISettingFormProps> = observer(
       return createForm({
         values: node?.props,
         effects(form) {
-          useLocales(schema?.['$namespace'])
+          useLocales(node)
           useSnapshot(operation)
           props.effects?.(form)
         },

packages/react-settings-form/src/effects/useLocales.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import { isVoidField, onFieldReact } from '@formily/core'
-import { GlobalRegistry } from '@designable/core'
+import { GlobalRegistry, TreeNode } from '@designable/core'
 import { isPlainObj, isStr } from '@designable/shared'
 import { IconWidget } from '@designable/react'
 
-const takeLocales = (message: any): any => {
+const takeMessage = (message: any): any => {
   if (isStr(message))
     return {
       title: message,
@@ -20,17 +20,34 @@ const takeIcon = (message: string) => {
   return
 }
 
-export const useLocales = (namespace?: string) => {
+export const useLocales = (node: TreeNode) => {
   onFieldReact('*', (field) => {
-    const path = field.path.toString().replace(/\.[\d+]/g, '')
-    const token = field.path.segments[field.path.segments.length - 1]
-    const commonMessage = GlobalRegistry.getDesignerMessage(`settings.${path}`)
-    const namespaceMessage = GlobalRegistry.getDesignerMessage(
-      `settings.${namespace}.${token}`
-    )
-    const locales = namespaceMessage
-      ? takeLocales(namespaceMessage)
-      : takeLocales(commonMessage)
+    const takeLocales = () => {
+      const namespace = node?.designerProps?.propsSchema?.$namespace
+      const componentName = node?.componentName
+      const sourceName = node?.sourceName
+      const path = field.path.toString().replace(/\.[\d+]/g, '')
+      const token = field.path.segments[field.path.segments.length - 1]
+      const commonMessage = GlobalRegistry.getDesignerMessage(
+        `settings.${path}`
+      )
+      const sourceMessage = GlobalRegistry.getSourceDesignerMessage(
+        sourceName,
+        `settings.${path}`
+      )
+      const componentMessage = GlobalRegistry.getSourceDesignerMessage(
+        componentName,
+        `settings.${path}`
+      )
+      const namespaceMessage = GlobalRegistry.getDesignerMessage(
+        `settings.${namespace}.${token}`
+      )
+      if (sourceMessage) return takeMessage(sourceMessage)
+      if (componentMessage) return takeMessage(componentMessage)
+      if (namespaceMessage) return takeMessage(namespaceMessage)
+      return takeMessage(commonMessage)
+    }
+    const locales = takeLocales()
     if (locales.title) {
       field.title = locales.title
     }

packages/react/src/widgets/DragSourceWidget/index.tsx

@@ -38,7 +38,11 @@ export const DragSourceWidget: React.FC<IDragSourceWidgetProps> = observer(
             />
           )}
           <span className={prefix + '-item-text'}>
-            <TextWidget>{node?.designerProps?.title}</TextWidget>
+            {
+              <TextWidget sourceName={node.sourceName} token="title">
+                {node?.designerProps?.title}
+              </TextWidget>
+            }
           </span>
         </div>
       )

packages/react/src/widgets/TextWidget/index.tsx

@@ -4,18 +4,36 @@ import { GlobalRegistry } from '@designable/core'
 import { observer } from '@formily/reactive-react'
 
 export interface ITextWidgetProps {
+  componentName?: string
+  sourceName?: string
   token?: string
 }
 
 export const TextWidget: React.FC<ITextWidgetProps> = observer((props) => {
-  const token = props.token
-    ? props.token
-    : isStr(props.children)
-    ? props.children
-    : null
-  if (token) {
+  const takeToken = () => {
+    if (isStr(props.children)) return props.children || props.token
+  }
+  const takeMessage = (token: string) => {
+    if (!token) return
+    if (props.sourceName) {
+      const message = GlobalRegistry.getSourceDesignerMessage(
+        props.sourceName,
+        token
+      )
+      if (message) return message
+    }
+    if (props.componentName) {
+      const message = GlobalRegistry.getComponentDesignerMessage(
+        props.componentName,
+        token
+      )
+      if (message) return message
+    }
     const message = GlobalRegistry.getDesignerMessage(token)
     if (message) return message
   }
+  const token = takeToken()
+  const message = takeMessage(token) || takeMessage(props.token)
+  if (message) return message
   return <Fragment>{props.children}</Fragment>
 })