fix(locale): 修复国际化配置不生效 close #1394

antvis · Jun 1, 2022 · 2d18b40 · 2d18b40
1 parent 98ac165
commit 2d18b40
Show file tree

Hide file tree

Showing 25 changed files with 454 additions and 347 deletions.
diff --git a/packages/s2-core/src/common/constant/tooltip.ts b/packages/s2-core/src/common/constant/tooltip.ts
@@ -13,19 +13,19 @@ export const TOOLTIP_POSITION_OFFSET: TooltipPosition = {
   y: 10,
 };
 
-export const TOOLTIP_OPERATOR_HIDDEN_COLUMNS_MENU: TooltipOperatorMenu = {
+export const getTooltipOperatorHiddenColumnsMenu = (): TooltipOperatorMenu => ({
   key: 'hiddenColumns',
   text: i18n('隐藏'),
   icon: 'EyeOutlined',
-};
+});
 
-export const TOOLTIP_OPERATOR_TREND_MENU: TooltipOperatorMenu = {
+export const getTooltipOperatorTrendMenu = (): TooltipOperatorMenu => ({
   key: 'trend',
   text: i18n('趋势'),
   icon: 'Trend',
-};
+});
 
-export const TOOLTIP_OPERATOR_SORT_MENUS: TooltipOperatorMenu[] = [
+export const getTooltipOperatorSortMenus = (): TooltipOperatorMenu[] => [
   {
     key: 'asc',
     icon: 'groupAsc',
@@ -42,7 +42,7 @@ export const TOOLTIP_OPERATOR_SORT_MENUS: TooltipOperatorMenu[] = [
   },
 ];
 
-export const TOOLTIP_OPERATOR_TABLE_SORT_MENUS: TooltipOperatorMenu[] = [
+export const getTooltipOperatorTableSortMenus = (): TooltipOperatorMenu[] => [
   {
     key: 'asc',
     icon: 'groupAsc',

diff --git a/packages/s2-core/src/common/i18n/index.ts b/packages/s2-core/src/common/i18n/index.ts
@@ -17,7 +17,7 @@ let locale: LocaleType = {
 
 export const getLang = () => lang;
 
-const isEnUS = (l: LangType) => l.indexOf('en') === 0;
+const isEnUS = (l: LangType) => l.startsWith('en');
 
 /**
  * 设置语言
@@ -30,15 +30,12 @@ export const setLang = (l: LangType) => {
 /**
  * 拓展locale配置
  */
-export const extendLocale = (extend: LocaleType) => {
-  locale = merge({}, locale, extend);
+export const extendLocale = (extraLocale: LocaleType) => {
+  locale = merge({}, locale, extraLocale);
 };
 
-/**
- * 国际化方法
- * 国际化是 eva 整个整体设置，不跟着实例走！默认认为同一页面，不可能出现中文和英文两种语言
- *
- */
+export const getLocale = () => locale;
+
 export const i18n = (key: string, defaultValue = key) => {
   return get(locale, [lang, key], defaultValue);
 };
diff --git a/packages/s2-core/src/interaction/base-interaction/click/data-cell-click.ts b/packages/s2-core/src/interaction/base-interaction/click/data-cell-click.ts
@@ -7,7 +7,7 @@ import {
   InteractionStateName,
   InterceptType,
   S2Event,
-  TOOLTIP_OPERATOR_TREND_MENU,
+  getTooltipOperatorTrendMenu,
 } from '@/common/constant';
 import {
   CellAppendInfo,
@@ -59,6 +59,7 @@ export class DataCellClick extends BaseEvent implements BaseEventImplement {
     event: CanvasEvent,
     meta: ViewMeta,
   ): TooltipOperatorOptions {
+    const TOOLTIP_OPERATOR_TREND_MENU = getTooltipOperatorTrendMenu();
     const cell = this.spreadsheet.getCell(event.target);
     const { operation } = getTooltipOptions(this.spreadsheet, event);
     const trendMenu = operation.trend && {

diff --git a/packages/s2-core/src/interaction/base-interaction/click/row-column-click.ts b/packages/s2-core/src/interaction/base-interaction/click/row-column-click.ts
@@ -10,7 +10,7 @@ import {
   S2Event,
   InterceptType,
   CellTypes,
-  TOOLTIP_OPERATOR_HIDDEN_COLUMNS_MENU,
+  getTooltipOperatorHiddenColumnsMenu,
 } from '@/common/constant';
 import {
   TooltipOperation,
@@ -114,6 +114,9 @@ export class RowColumnClick extends BaseEvent implements BaseEventImplement {
     const isOnlyOneLeafColumn =
       this.spreadsheet.getColumnLeafNodes().length === 1;
 
+    const TOOLTIP_OPERATOR_HIDDEN_COLUMNS_MENU =
+      getTooltipOperatorHiddenColumnsMenu();
+
     const enableHiddenColumnOperator =
       isColCell &&
       !isOnlyOneLeafColumn &&

diff --git a/packages/s2-core/src/sheet-type/pivot-sheet.ts b/packages/s2-core/src/sheet-type/pivot-sheet.ts
@@ -7,7 +7,7 @@ import {
   EXTRA_FIELD,
   InterceptType,
   S2Event,
-  TOOLTIP_OPERATOR_SORT_MENUS,
+  getTooltipOperatorTableSortMenus,
 } from '@/common/constant';
 import {
   S2Options,
@@ -196,6 +196,8 @@ export class PivotSheet extends SpreadSheet {
   public handleGroupSort(event: CanvasEvent, meta: Node) {
     event.stopPropagation();
     this.interaction.addIntercepts([InterceptType.HOVER]);
+
+    const TOOLTIP_OPERATOR_SORT_MENUS = getTooltipOperatorTableSortMenus();
     const operator: TooltipOperatorOptions = {
       onClick: ({ key }) => {
         this.groupSortByMethod(key as unknown as SortMethod, meta);

diff --git a/packages/s2-core/src/sheet-type/table-sheet.ts b/packages/s2-core/src/sheet-type/table-sheet.ts
@@ -13,7 +13,7 @@ import {
   KEY_GROUP_PANEL_FROZEN_TRAILING_ROW,
   PANEL_GROUP_FROZEN_GROUP_Z_INDEX,
   S2Event,
-  TOOLTIP_OPERATOR_TABLE_SORT_MENUS,
+  getTooltipOperatorSortMenus,
 } from '@/common/constant';
 import {
   S2Options,
@@ -168,6 +168,8 @@ export class TableSheet extends SpreadSheet {
   public handleGroupSort(event: CanvasEvent, meta: Node) {
     event.stopPropagation();
     this.interaction.addIntercepts([InterceptType.HOVER]);
+
+    const TOOLTIP_OPERATOR_TABLE_SORT_MENUS = getTooltipOperatorSortMenus();
     const operator: TooltipOperatorOptions = {
       onClick: (params: { key: string }) =>
         this.onSortTooltipClick(params, meta),

diff --git a/packages/s2-react/playground/index.tsx b/packages/s2-react/playground/index.tsx
@@ -32,6 +32,8 @@ import {
   DataType,
   generatePalette,
   getPalette,
+  getLang,
+  setLang,
 } from '@antv/s2';
 import corePkg from '@antv/s2/package.json';
 import { debounce, forEach, random } from 'lodash';
@@ -57,6 +59,8 @@ import { SheetComponent, PartDrillDown, PartDrillDownInfo } from '@/index';
 import './index.less';
 import 'antd/dist/antd.min.css';
 
+// setLang('en_US');
+
 const { TabPane } = Tabs;
 
 const fieldMap = {
@@ -841,6 +845,9 @@ function MainLayout() {
                     <span>
                       {corePkg.name}: <Tag>{corePkg.version}</Tag>
                     </span>
+                    <span>
+                      lang: <Tag>{getLang()}</Tag>
+                    </span>
                   </Space>
                 ),
                 switcherCfg: { open: true },

diff --git a/packages/s2-react/src/common/constant/index.ts b/packages/s2-react/src/common/constant/index.ts
@@ -1,2 +1 @@
 export * from './options';
-export * from './sort';
diff --git a/packages/s2-react/src/components/advanced-sort/custom-sort.tsx b/packages/s2-react/src/components/advanced-sort/custom-sort.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Card } from 'antd';
+import { ADVANCED_SORT_PRE_CLS } from '@antv/s2-shared';
 import { HtmlIcon } from '@/common/icons';
-import { ADVANCED_PRE_CLS } from '@/common/constant';
 
 export interface CustomSortProps {
   splitOrders: string[];
@@ -38,23 +38,23 @@ export const CustomSort: React.FC<CustomSortProps> = (props) => {
       <>
         <span className="split-text">{value}</span>
         <span
-          className={`${ADVANCED_PRE_CLS}-split-icon`}
+          className={`${ADVANCED_SORT_PRE_CLS}-split-icon`}
           onClick={() => {
             upHandler(value);
           }}
         >
           <HtmlIcon name="groupAsc" />
         </span>
         <span
-          className={`${ADVANCED_PRE_CLS}-split-icon`}
+          className={`${ADVANCED_SORT_PRE_CLS}-split-icon`}
           onClick={() => {
             downHandler(value);
           }}
         >
           <HtmlIcon name="groupDesc" />
         </span>
         <span
-          className={`${ADVANCED_PRE_CLS}-split-icon`}
+          className={`${ADVANCED_SORT_PRE_CLS}-split-icon`}
           onClick={() => {
             toTopHandler(value);
           }}
@@ -66,11 +66,11 @@ export const CustomSort: React.FC<CustomSortProps> = (props) => {
   };
 
   return (
-    <Card className={`${ADVANCED_PRE_CLS}-card-content`}>
+    <Card className={`${ADVANCED_SORT_PRE_CLS}-card-content`}>
       {splitOrders.map((value) => (
         <li
           key={value}
-          className={`${ADVANCED_PRE_CLS}-split-value`}
+          className={`${ADVANCED_SORT_PRE_CLS}-split-value`}
           title={value}
         >
           {renderItem(value)}

diff --git a/packages/s2-react/src/components/advanced-sort/index.tsx b/packages/s2-react/src/components/advanced-sort/index.tsx
@@ -20,9 +20,13 @@ import {
   SortMethod,
   TOTAL_VALUE,
 } from '@antv/s2';
+import {
+  ADVANCED_SORT_PRE_CLS,
+  getSortRuleOptions,
+  getSortMethod,
+} from '@antv/s2-shared';
 import { SortIcon } from '../icons';
 import { CustomSort } from './custom-sort';
-import { SORT_METHOD, RULE_OPTIONS, ADVANCED_PRE_CLS } from '@/common/constant';
 import './index.less';
 
 const { Sider, Content } = Layout;
@@ -86,6 +90,9 @@ export const AdvancedSort: React.FC<AdvancedSortProps> = ({
   const [currentDimension, setCurrentDimension] = useState<Dimension>();
   const [form] = Form.useForm();
 
+  const SORT_RULE_OPTIONS = React.useMemo(getSortRuleOptions, []);
+  const SORT_METHOD = React.useMemo(getSortMethod, []);
+
   const handleModal = () => {
     setIsModalVisible(!isSortVisible);
   };
@@ -203,7 +210,7 @@ export const AdvancedSort: React.FC<AdvancedSortProps> = ({
     if (ruleOptions) {
       return ruleOptions;
     }
-    return map(RULE_OPTIONS, (item) => {
+    return map(SORT_RULE_OPTIONS, (item) => {
       if (item.value === 'sortByMeasure') {
         const { values } = sheet.dataCfg.fields || {};
         item.children = map(values, (vi) => {
@@ -242,13 +249,15 @@ export const AdvancedSort: React.FC<AdvancedSortProps> = ({
 
   const renderSide = () => {
     return (
-      <Sider width={120} className={`${ADVANCED_PRE_CLS}-sider-layout`}>
-        <div className={`${ADVANCED_PRE_CLS}-title`}>{i18n('可选字段')}</div>
+      <Sider width={120} className={`${ADVANCED_SORT_PRE_CLS}-sider-layout`}>
+        <div className={`${ADVANCED_SORT_PRE_CLS}-title`}>
+          {i18n('可选字段')}
+        </div>
         <div>
           {map(dimensionList, (item) => {
             return (
               <div
-                className={`${ADVANCED_PRE_CLS}-dimension-item`}
+                className={`${ADVANCED_SORT_PRE_CLS}-dimension-item`}
                 key={item.field}
                 onClick={() => {
                   handleDimension(item);
@@ -264,14 +273,14 @@ export const AdvancedSort: React.FC<AdvancedSortProps> = ({
   };
   const renderContent = () => {
     return (
-      <Content className={`${ADVANCED_PRE_CLS}-content-layout`}>
-        <div className={`${ADVANCED_PRE_CLS}-title`}>
+      <Content className={`${ADVANCED_SORT_PRE_CLS}-content-layout`}>
+        <div className={`${ADVANCED_SORT_PRE_CLS}-title`}>
           {ruleText || i18n('按以下规则进行排序（优先级由低到高）')}
         </div>
         <Form
           form={form}
           name="form"
-          className={`${ADVANCED_PRE_CLS}-custom-form`}
+          className={`${ADVANCED_SORT_PRE_CLS}-custom-form`}
         >
           {map(ruleList, (item) => {
             const {
@@ -285,11 +294,11 @@ export const AdvancedSort: React.FC<AdvancedSortProps> = ({
               <Form.Item name={field} key={field}>
                 <Form.Item name={[field, 'name']} initialValue={name} noStyle>
                   <Select
-                    className={`${ADVANCED_PRE_CLS}-select`}
+                    className={`${ADVANCED_SORT_PRE_CLS}-select`}
                     size="small"
                   />
                 </Form.Item>
-                <span className={`${ADVANCED_PRE_CLS}-field-prefix`}>
+                <span className={`${ADVANCED_SORT_PRE_CLS}-field-prefix`}>
                   {i18n('按')}
                 </span>
                 <Form.Item
@@ -315,7 +324,9 @@ export const AdvancedSort: React.FC<AdvancedSortProps> = ({
                         name={[field, 'sortMethod']}
                         initialValue={toUpper(sortMethod) || 'ASC'}
                       >
-                        <Radio.Group className={`${ADVANCED_PRE_CLS}-rule-end`}>
+                        <Radio.Group
+                          className={`${ADVANCED_SORT_PRE_CLS}-rule-end`}
+                        >
                           {map(SORT_METHOD, (i) => {
                             return (
                               <Radio value={i.value} key={i.value}>
@@ -328,7 +339,7 @@ export const AdvancedSort: React.FC<AdvancedSortProps> = ({
                     ) : (
                       <>
                         <a
-                          className={`${ADVANCED_PRE_CLS}-rule-end`}
+                          className={`${ADVANCED_SORT_PRE_CLS}-rule-end`}
                           onClick={() => {
                             handleCustomSort(item, currentSortBy);
                           }}
@@ -345,7 +356,7 @@ export const AdvancedSort: React.FC<AdvancedSortProps> = ({
                   }}
                 </Form.Item>
                 <DeleteOutlined
-                  className={`${ADVANCED_PRE_CLS}-rule-end-delete`}
+                  className={`${ADVANCED_SORT_PRE_CLS}-rule-end-delete`}
                   onClick={() => {
                     deleteRule(item);
                   }}
@@ -372,12 +383,12 @@ export const AdvancedSort: React.FC<AdvancedSortProps> = ({
   }, [isSortVisible]);
 
   return (
-    <div className={cx(ADVANCED_PRE_CLS, className)}>
+    <div className={cx(ADVANCED_SORT_PRE_CLS, className)}>
       <Button
         onClick={sortClick}
         icon={icon || <SortIcon />}
         size="small"
-        className={`${ADVANCED_PRE_CLS}-btn`}
+        className={`${ADVANCED_SORT_PRE_CLS}-btn`}
       >
         {text || i18n('高级排序')}
       </Button>
@@ -389,7 +400,7 @@ export const AdvancedSort: React.FC<AdvancedSortProps> = ({
         okText={i18n('确定')}
         cancelText={i18n('取消')}
         destroyOnClose
-        className={`${ADVANCED_PRE_CLS}-modal`}
+        className={`${ADVANCED_SORT_PRE_CLS}-modal`}
       >
         <Layout>
           {renderSide()}
@@ -404,7 +415,7 @@ export const AdvancedSort: React.FC<AdvancedSortProps> = ({
         okText={i18n('确定')}
         cancelText={i18n('取消')}
         destroyOnClose
-        className={`${ADVANCED_PRE_CLS}-custom-modal`}
+        className={`${ADVANCED_SORT_PRE_CLS}-custom-modal`}
       >
         <CustomSort splitOrders={sortBy} setSplitOrders={setSortBy} />
       </Modal>
Original file line number	Diff line number	Diff line change
		@@ -1,2 +1 @@
		export * from './options';
		export * from './sort';