feat(form, basepicker, propertyselector, listpicker, panel): i18n (#1601

)

Co-authored-by: maxin <maxin@growingio.com>

src/form/ItemLabel.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 import classNames from 'classnames';
 import isNumber from 'lodash/isNumber';
 import isString from 'lodash/isString';
-
+import { useLocale } from '@gio-design/utils';
+import defaultLocaleTextObject from './locales/zh-CN';
 import { FormLabelAlign, RequiredMark } from './context';
 
 export interface Props {
@@ -35,9 +36,10 @@ const ItemLabel: React.FC<Props> = (props: Props) => {
     htmlFor = fieldId,
     labelAlign,
   } = props;
+  const localeTextObject: typeof defaultLocaleTextObject = useLocale('Form') || defaultLocaleTextObject;
   const isRequired = required && (requiredMark === true || requiredMark === undefined);
   const isOptional = !required && requiredMark === 'optional';
-  const innerMarker = isOptional ? '（选填）' : '*';
+  const innerMarker = isOptional ? localeTextObject.optional : ' *';
   const mergedRequiredMarker = marker !== undefined ? marker : innerMarker;
   const mergedTitle = isNumber(title) || isString(title) ? (title as string) : '';
   const cls = classNames(`${prefixCls}-label`, {

src/form/locales/en-US.ts

@@ -0,0 +1,3 @@
+export default {
+  optional: ' (optional)',
+};

src/form/locales/zh-CN.ts

@@ -0,0 +1,3 @@
+export default {
+  optional: '（选填）',
+};

src/legacy/base-picker/BasePicker.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import classnames from 'classnames';
-import { usePrefixCls } from '@gio-design/utils';
+import { useLocale, usePrefixCls } from '@gio-design/utils';
 import List from '../list';
 import { BasePickerProps } from './interfaces';
 import SearchBar from '../search-bar';
 import Alert from '../alert';
 import TabNav from '../tab-nav';
+import defaultLocaleText from './locales/zh-CN';
 
 function BasePicker({
   className,
@@ -19,6 +20,7 @@ function BasePicker({
   detailVisible = false,
   renderDetail,
 }: BasePickerProps) {
+  const localeText: typeof defaultLocaleText = useLocale('BasePicker') || defaultLocaleText;
   const prefixCls = usePrefixCls('base-picker-legacy');
   const [query, setQuery] = React.useState<string>('');
 
@@ -44,15 +46,7 @@ function BasePicker({
       {searchBar && (
         <div className={`${prefixCls}__header`}>
           <SearchBar size="middle" placeholder={searchBar.placeholder} value={query} onChange={handleQueryChange} />
-          {query.length > 200 && (
-            <Alert
-              type="warning"
-              message="搜索字符长度已超过 200，只取前 200 字符搜索"
-              size="small"
-              showIcon
-              closeable
-            />
-          )}
+          {query.length > 200 && <Alert type="warning" message={localeText.longTip} size="small" showIcon closeable />}
         </div>
       )}
       {tabNav && (

src/legacy/base-picker/locales/en-US.ts

@@ -0,0 +1,3 @@
+export default {
+  longTip: 'Search for characters longer than 200, only the first 200 characters will be searched',
+};

src/legacy/base-picker/locales/zh-CN.ts

@@ -0,0 +1,3 @@
+export default {
+  longTip: '搜索字符长度已超过 200，只取前 200 字符搜索',
+};

src/legacy/property-selector/PropertyPicker.tsx

@@ -29,6 +29,7 @@ import './style';
 import { Dimension } from './types';
 import IconRender from './PropertyValueIconRender';
 import defaultLocale from './locales/zh-CN';
+import defaultLocaleFromList from '../../list/locales/zh-CN';
 
 export const ExpandableGroupOrSubGroup = (props: {
   title?: string;
@@ -37,11 +38,12 @@ export const ExpandableGroupOrSubGroup = (props: {
   groupKey?: string;
 }) => {
   const { items = [], type = 'subgroup', title, groupKey: key } = props;
+  const localesText: typeof defaultLocaleFromList = useLocale('List') || defaultLocaleFromList;
   const [expanded, setExpand] = useState(false);
   const onExpand = () => {
     setExpand(true);
   };
-  const content = renderExpandableItems(expanded, items, onExpand);
+  const content = renderExpandableItems(expanded, items, onExpand, localesText);
   return (
     <>
       {type === 'group' && (
@@ -79,7 +81,7 @@ const PropertyPicker: React.FC<PropertyPickerProps> = (props: PropertyPickerProp
     ...rest
   } = props;
   const locale = useLocale('PropertyPicker');
-  const { allText, searchPlaceholder } = { ...defaultLocale, ...locale } as any;
+  const localeText = { ...defaultLocale, ...locale } as typeof defaultLocale;
   const [scope, setScope] = useState('all');
   const [keyword, setKeyword] = useState<string | undefined>('');
   const [recentlyUsedInMemo, setRecentlyUsedInMemo] = useState<{
@@ -106,14 +108,14 @@ const PropertyPicker: React.FC<PropertyPickerProps> = (props: PropertyPickerProp
     setDetailVisible(visible);
   }, detailVisibleDelay);
   const [dataList, setDataList] = useState<PropertyItem[]>([]);
-  const navRef = useRef([{ key: 'all', children: allText }]);
+  const navRef = useRef([{ key: 'all', children: localeText.allText }]);
   useEffect(() => {
     // 如果是Dimension类型 需要做一个数据转换
     let propertiItemList: PropertyItem[] = [];
     if (originDataSource && originDataSource.length) {
       if (!('value' in originDataSource[0])) {
         propertiItemList = originDataSource.map((v) => {
-          const item = dimensionToPropertyItem(v as Dimension);
+          const item = dimensionToPropertyItem(v as Dimension, localeText);
           item.itemIcon = () => <IconRender group={item.iconId} />;
           return item;
         });
@@ -141,9 +143,9 @@ const PropertyPicker: React.FC<PropertyPickerProps> = (props: PropertyPickerProp
      */
     const types = uniq(propertiItemList.map((p) => p.type));
     const tabs = Tabs.filter((t) => types.indexOf(t.key) > -1);
-    navRef.current = [{ key: 'all', children: allText }].concat(tabs);
+    navRef.current = [{ key: 'all', children: localeText.allText }].concat(tabs);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [allText, originDataSource]);
+  }, [localeText.allText, originDataSource]);
 
   /**
    * 搜索关键字的方法，支持拼音匹配
@@ -311,7 +313,7 @@ const PropertyPicker: React.FC<PropertyPickerProps> = (props: PropertyPickerProp
         <ExpandableGroupOrSubGroup
           groupKey="recently"
           key="exp-group-recently"
-          title="最近使用"
+          title={localeText.recent}
           type="group"
           items={getListItems(recentlyPropertyItems, 'recently')}
         />
@@ -403,7 +405,7 @@ const PropertyPicker: React.FC<PropertyPickerProps> = (props: PropertyPickerProp
         renderDetail={renderDetail}
         loading={loading}
         searchBar={{
-          placeholder: searchBar?.placeholder || searchPlaceholder,
+          placeholder: searchBar?.placeholder || localeText.searchPlaceholder,
           onSearch: handleSearch,
         }}
         tabNav={{

src/legacy/property-selector/components/list/ExpandItem.tsx

@@ -1,17 +1,20 @@
 import React from 'react';
 import classnames from 'classnames';
 import { DownOutlined } from '@gio-design/icons';
+import { useLocale } from '@gio-design/utils';
 import { ExpandItemProps } from './interfaces';
 import { useRootPrefixCls } from './utils';
+import defaultLocaleTextObject from '../../../../list/locales/zh-CN';
 
-function ExpandItem({ className, title = '展开全部', ...restProps }: ExpandItemProps) {
+function ExpandItem({ className, title, ...restProps }: ExpandItemProps) {
   const prefixCls = `${useRootPrefixCls()}__expand-item`;
   const cls = classnames(prefixCls, className);
+  const localeTextObject: typeof defaultLocaleTextObject = useLocale('List') || defaultLocaleTextObject;
   return (
     // eslint-disable-next-line react/jsx-props-no-spreading
     <li role="option" aria-selected {...restProps} className={cls}>
       <DownOutlined className={`${prefixCls}__icon`} size="14px" />
-      <span className={`${prefixCls}__text`}>{title}</span>
+      <span className={`${prefixCls}__text`}>{title ?? localeTextObject.expandAll()}</span>
     </li>
   );
 }

src/legacy/property-selector/components/list/ItemGroup.tsx

@@ -1,13 +1,15 @@
 import React from 'react';
 import classnames from 'classnames';
+import { useLocale } from '@gio-design/utils';
 import Divider from './Divider';
 import { ListItemGroupProps, ListItemSubgroupProps } from './interfaces';
 import { useRootPrefixCls, renderItem, renderExpandableItems } from './utils';
 import ItemSubgroup from './ItemSubgroup';
+import defaultLocaleFromList from '../../../../list/locales/zh-CN';
 
 function ItemGroup({ className, style, title, children, subgroups, items, expandable = false }: ListItemGroupProps) {
   const [expanded, setExpanded] = React.useState(false);
-
+  const localesText: typeof defaultLocaleFromList = useLocale('List') || defaultLocaleFromList;
   function onExpand() {
     setExpanded(true);
   }
@@ -23,7 +25,7 @@ function ItemGroup({ className, style, title, children, subgroups, items, expand
     content = renderSubgroups(subgroups);
   } else if (items) {
     if (expandable) {
-      content = renderExpandableItems(expanded, items, onExpand);
+      content = renderExpandableItems(expanded, items, onExpand, localesText);
     } else {
       content = items.map(renderItem);
     }

src/legacy/property-selector/components/list/ItemSubgroup.tsx

@@ -1,12 +1,14 @@
 import React from 'react';
 import classnames from 'classnames';
+import { useLocale } from '@gio-design/utils';
 import Divider from './Divider';
 import { ListItemSubgroupProps } from './interfaces';
 import { useRootPrefixCls, renderItem, renderExpandableItems } from './utils';
+import defaultLocaleFromList from '../../../../list/locales/zh-CN';
 
 function ItemSubgroup({ className, style, title, children, items, expandable = false }: ListItemSubgroupProps) {
   const [expanded, setExpanded] = React.useState(false);
-
+  const localesText: typeof defaultLocaleFromList = useLocale('List') || defaultLocaleFromList;
   function onExpand() {
     setExpanded(true);
   }
@@ -15,7 +17,7 @@ function ItemSubgroup({ className, style, title, children, items, expandable = f
   let content;
   if (items) {
     if (expandable) {
-      content = renderExpandableItems(expanded, items, onExpand);
+      content = renderExpandableItems(expanded, items, onExpand, localesText);
     } else {
       content = items.map(renderItem);
     }

src/legacy/property-selector/components/list/utils.tsx

@@ -4,6 +4,7 @@ import { usePrefixCls } from '@gio-design/utils';
 import Item from './Item';
 import ExpandItem from './ExpandItem';
 import { ListItemProps } from './interfaces';
+import defaultLocalText from '../../../../list/locales/zh-CN';
 
 const DEFAULT_SHOW_ITEMS_COUNT = 10;
 
@@ -13,7 +14,12 @@ export function renderItem(i: ListItemProps, idx: number) {
   return <Item {...i} key={i.key ?? `item-${idx}`} />;
 }
 
-export function renderExpandableItems(expanded: boolean, currentItems: ListItemProps[], onExpand: () => void) {
+export function renderExpandableItems(
+  expanded: boolean,
+  currentItems: ListItemProps[],
+  onExpand: () => void,
+  localesText: typeof defaultLocalText
+) {
   if (expanded) {
     return currentItems.map(renderItem);
   }
@@ -23,7 +29,7 @@ export function renderExpandableItems(expanded: boolean, currentItems: ListItemP
       .map(renderItem)
       .concat(
         <ExpandItem
-          title={`展开全部 (${currentItems.length - showItems.length})`}
+          title={localesText.expandAll(currentItems.length - showItems.length)}
           key={`expand-item-${currentItems[0].key}-${showItems.length + 1}`}
           onClick={onExpand}
         />

src/legacy/property-selector/interfaces.ts

@@ -4,6 +4,7 @@ import React from 'react';
 import { BasePickerProps } from '../base-picker';
 import { Dimension } from './types';
 import { SelectorProps } from '../selector-pro/interfaces';
+import defaultLocale from './locales/zh-CN';
 /**
  * 属性详情组件的参数
  */
@@ -90,11 +91,11 @@ export interface PropertyPickerProps
 /**
  * 属性的类型 event|avar|usr
  */
-export const PropertyTypes: { [key: string]: string } = {
-  event: '事件属性',
-  avar: '访问属性',
-  usr: '用户属性',
-};
+export const PropertyTypes: (localeText: typeof defaultLocale) => { [key: string]: string } = (localeText) => ({
+  event: localeText.eventProperties,
+  avar: localeText.accessProperties,
+  usr: localeText.userProperties,
+});
 
 // export type ItemValueType = 'int' | 'string' | 'double' | 'date' | 'list' | 'boolean';
 /**

src/legacy/property-selector/locales/en-US.ts

@@ -1,3 +1,5 @@
+import { Key } from 'react';
+
 export default {
   stringText: 'string',
   intText: 'int',
@@ -8,4 +10,17 @@ export default {
   allText: 'all',
   searchPlaceholder: 'search variable name',
   placeholderText: 'select variable',
+  recent: 'recent',
+  page: 'Page',
+  device: 'Device',
+  element: 'Autotrack Event',
+  tag: 'User Tags',
+  preset: (text: Key) => `Preset ${text}`,
+  custom: (text: Key) => `Custom ${text}`,
+  dimensionTable: 'Dimension Table',
+  eventVariables: 'Event Variables',
+  virtualProperties: 'Virtual Properties',
+  eventProperties: 'Event Properties',
+  accessProperties: 'Access Properties',
+  userProperties: 'User Properties',
 };

src/legacy/property-selector/locales/zh-CN.ts

@@ -1,11 +1,26 @@
+import { Key } from 'react';
+
 export default {
   stringText: '字符串类型',
   intText: '数值类型',
   doubleText: '数值类型',
   dateText: '日期类型',
-  booleanText: 'boolean',
+  booleanText: '布尔类型',
   listText: '列表类型',
   allText: '全部',
   searchPlaceholder: '搜索属性名称',
   placeholderText: '选择属性',
+  recent: '最近使用',
+  page: '页面',
+  device: '设备',
+  element: '无埋点事件属性',
+  tag: '用户标签',
+  preset: (text?: Key) => `预置${text}`,
+  custom: (text?: Key) => `自定义${text}`,
+  dimensionTable: '维度表',
+  eventVariables: '事件变量',
+  virtualProperties: '虚拟属性',
+  eventProperties: '事件属性',
+  accessProperties: '访问属性',
+  userProperties: '用户属性',
 };