feat(material): form-materials i18n #641 (#715)

apps/demo-free-layout/src/nodes/condition/condition-inputs/index.tsx

@@ -6,7 +6,7 @@
 import { useLayoutEffect } from 'react';
 
 import { nanoid } from 'nanoid';
-import { Field, FieldArray, WorkflowNodePortsData } from '@flowgram.ai/free-layout-editor';
+import { Field, FieldArray, I18n, WorkflowNodePortsData } from '@flowgram.ai/free-layout-editor';
 import { ConditionRow, ConditionRowValueType } from '@flowgram.ai/form-materials';
 import { Button } from '@douyinfe/semi-ui';
 import { IconPlus, IconCrossCircleStroked } from '@douyinfe/semi-icons';
@@ -74,7 +74,7 @@ export function ConditionInputs() {
                   })
                 }
               >
-                Add
+                {I18n.t('Add')}
               </Button>
             </div>
           )}

packages/materials/form-antd-materials/src/components/constant-input/index.tsx

@@ -8,13 +8,14 @@ import React, { useMemo } from 'react';
 
 import { PropsType, Strategy } from './types';
 import { UIInput, UIInputNumber, UISelect } from './styles';
+import { I18n } from '@flowgram.ai/editor';
 
 const defaultStrategies: Strategy[] = [
   {
     hit: (schema) => schema?.type === 'string',
     Renderer: (props) => (
       <UIInput
-        placeholder="Please Input String"
+        placeholder={I18n.t('Please Input String')}
         size="small"
         disabled={props.readonly}
         {...props}
@@ -25,7 +26,7 @@ const defaultStrategies: Strategy[] = [
     hit: (schema) => schema?.type === 'number',
     Renderer: (props) => (
       <UIInputNumber
-        placeholder="Please Input Number"
+        placeholder={I18n.t('Please Input Number')}
         size="small"
         disabled={props.readonly}
         {...props}
@@ -36,7 +37,7 @@ const defaultStrategies: Strategy[] = [
     hit: (schema) => schema?.type === 'integer',
     Renderer: (props) => (
       <UIInputNumber
-        placeholder="Please Input Integer"
+      placeholder={I18n.t('Please Input Integer')}
         size="small"
         disabled={props.readonly}
         precision={0}

packages/materials/form-antd-materials/src/components/json-schema-editor/index.tsx

@@ -39,6 +39,7 @@ import {
 import { usePropertiesEdit } from './hooks';
 import { DefaultValue } from './default-value';
 import { BlurInput } from './components/blur-input';
+import { I18n } from '@flowgram.ai/editor';
 
 export function JsonSchemaEditor(props: {
   value?: IJsonSchema;
@@ -155,7 +156,7 @@ function PropertyEdit(props: {
           <UIRow>
             <UIName>
               <BlurInput
-                placeholder={config?.placeholder ?? 'Input Variable Name'}
+                placeholder={config?.placeholder ?? I18n.t('Input Variable Name')}
                 size="small"
                 value={name}
                 onChange={(value) => onChange('name', value)}

packages/materials/form-materials/src/components/json-editor-with-variables/index.tsx

@@ -12,6 +12,7 @@ import { CodeEditor, type CodeEditorPropsType } from '@/components/code-editor';
 
 import { VariableTree } from './extensions/variable-tree';
 import { VariableTagInject } from './extensions/variable-tag';
+import { I18n } from '@flowgram.ai/editor';
 
 type Match = { match: string; range: [number, number] };
 function findAllMatches(inputString: string, regex: RegExp): Match[] {
@@ -52,7 +53,7 @@ export function JsonEditorWithVariables(props: Omit<CodeEditorPropsType, 'langua
   return (
     <CodeEditor
       languageId="json"
-      activeLinePlaceholder="Press '@' to Select variable"
+      activeLinePlaceholder={I18n.t("Press '@' to Select variable")}
       {...props}
       options={{
         transformer,

packages/materials/form-materials/src/components/json-schema-editor/index.tsx

@@ -132,7 +132,7 @@ function PropertyEdit(props: {
             <UIName>
               <BlurInput
                 disabled={readonly}
-                placeholder={config?.placeholder ?? 'Input Variable Name'}
+                placeholder={config?.placeholder ?? I18n.t('Input Variable Name')}
                 size="small"
                 value={name}
                 onChange={(value) => onChange('name', value)}