feat: add intl (#45)

ant-design · Dec 26, 2019 · 2bfe34d · 2bfe34d
1 parent 1fda02e
commit 2bfe34d
Show file tree

Hide file tree

Showing 11 changed files with 263 additions and 73 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,3 +1,4 @@
 module.exports = {
   extends: [require.resolve('@umijs/fabric/dist/eslint')],
+  rules: { 'import/no-extraneous-dependencies': 0 },
 };
diff --git a/docs/demo/single.tsx b/docs/demo/single.tsx
@@ -1,7 +1,13 @@
 import React, { useRef, useState } from 'react';
 import { Button, Drawer, Icon, Tag } from 'antd';
 // eslint-disable-next-line import/no-unresolved
-import ProTable, { ProColumns, TableDropdown, ActionType } from '@ant-design/pro-table';
+import ProTable, {
+  ProColumns,
+  TableDropdown,
+  IntlProvider,
+  enUSIntl,
+  ActionType,
+} from '@ant-design/pro-table';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import request from 'umi-request';
 
@@ -162,47 +168,49 @@ export default () => {
           重置
         </Button>
       </Drawer>
-      <ProTable<GithubIssueItem>
-        columns={columns}
-        actionRef={actionRef}
-        request={async (params = {}) => {
-          const data = await request<GithubIssueItem[]>(
-            'https://api.github.com/repos/ant-design/ant-design-pro/issues',
-            {
-              params: {
-                ...params,
-                page: params.current,
-                per_page: params.pageSize,
+      <IntlProvider value={enUSIntl}>
+        <ProTable<GithubIssueItem>
+          columns={columns}
+          actionRef={actionRef}
+          request={async (params = {}) => {
+            const data = await request<GithubIssueItem[]>(
+              'https://api.github.com/repos/ant-design/ant-design-pro/issues',
+              {
+                params: {
+                  ...params,
+                  page: params.current,
+                  per_page: params.pageSize,
+                },
               },
-            },
-          );
-          const totalObj = await request(
-            'https://api.github.com/repos/ant-design/ant-design-pro/issues?per_page=1',
-            {
-              params,
-            },
-          );
-          return {
-            data,
-            page: params.current,
-            success: true,
-            total: ((totalObj[0] || { number: 0 }).number - 56) as number,
-          };
-        }}
-        rowKey="id"
-        pagination={{
-          showSizeChanger: true,
-        }}
-        dateFormatter="string"
-        headerTitle="基础 Table"
-        params={{ state: 'all' }}
-        toolBarRender={() => [
-          <Button key="3" type="primary" onClick={() => setVisible(true)}>
-            <Icon type="plus" />
-            新建
-          </Button>,
-        ]}
-      />
+            );
+            const totalObj = await request(
+              'https://api.github.com/repos/ant-design/ant-design-pro/issues?per_page=1',
+              {
+                params,
+              },
+            );
+            return {
+              data,
+              page: params.current,
+              success: true,
+              total: ((totalObj[0] || { number: 0 }).number - 56) as number,
+            };
+          }}
+          rowKey="id"
+          pagination={{
+            showSizeChanger: true,
+          }}
+          dateFormatter="string"
+          headerTitle="基础 Table"
+          params={{ state: 'all' }}
+          toolBarRender={() => [
+            <Button key="3" type="primary" onClick={() => setVisible(true)}>
+              <Icon type="plus" />
+              新建
+            </Button>,
+          ]}
+        />
+      </IntlProvider>
     </>
   );
 };
diff --git a/src/Form/index.tsx b/src/Form/index.tsx
@@ -6,6 +6,7 @@ import RcResizeObserver from 'rc-resize-observer';
 import { FormComponentProps } from 'antd/lib/form';
 import { ConfigConsumer, ConfigConsumerProps } from 'antd/lib/config-provider';
 import { parsingValueEnumToArray, useDeepCompareEffect, useMedia } from '../component/util';
+import { useIntl, IntlType } from '../component/intlContext';
 import Container from '../container';
 import { ProColumns } from '../index';
 import './index.less';
@@ -50,6 +51,7 @@ const FromInputRender: React.FC<{
   value?: any;
   onChange?: (value: any) => void;
 }> = React.forwardRef(({ item, ...rest }, ref: any) => {
+  const intl = useIntl();
   /**
    * 自定义 render
    */
@@ -60,7 +62,12 @@ const FromInputRender: React.FC<{
     const { valueEnum } = item;
     if (valueEnum) {
       return (
-        <Select placeholder="请选择" ref={ref} {...rest} {...item.formItemProps}>
+        <Select
+          placeholder={intl.getMessage('tableFrom.selectPlaceholder', '请选择')}
+          ref={ref}
+          {...rest}
+          {...item.formItemProps}
+        >
           {parsingValueEnumToArray(valueEnum).map(({ value, text }) => (
             <Select.Option key={value} value={value}>
               {text}
@@ -69,13 +76,19 @@ const FromInputRender: React.FC<{
         </Select>
       );
     }
-    return <Input placeholder="请输入" {...rest} {...item.formItemProps} />;
+    return (
+      <Input
+        placeholder={intl.getMessage('tableFrom.inputPlaceholder', '请输入')}
+        {...rest}
+        {...item.formItemProps}
+      />
+    );
   }
   if (item.valueType === 'date') {
     return (
       <DatePicker
         ref={ref}
-        placeholder="请选择"
+        placeholder={intl.getMessage('tableFrom.selectPlaceholder', '请选择')}
         style={{
           width: '100%',
         }}
@@ -89,7 +102,7 @@ const FromInputRender: React.FC<{
       <DatePicker
         showTime
         ref={ref}
-        placeholder="请选择"
+        placeholder={intl.getMessage('tableFrom.selectPlaceholder', '请选择')}
         style={{
           width: '100%',
         }}
@@ -102,7 +115,7 @@ const FromInputRender: React.FC<{
     return (
       <TimePicker
         ref={ref}
-        placeholder="请选择"
+        placeholder={intl.getMessage('tableFrom.selectPlaceholder', '请选择')}
         style={{
           width: '100%',
         }}
@@ -123,7 +136,7 @@ const FromInputRender: React.FC<{
           return '';
         }}
         parser={value => (value ? value.replace(/\$\s?|(,*)/g, '') : '')}
-        placeholder="请输入"
+        placeholder={intl.getMessage('tableFrom.selectPlaceholder', '请选择')}
         precision={2}
         style={{
           width: '100%',
@@ -166,11 +179,26 @@ const genValue = (value: any, dateFormatter?: string | boolean, proColumnsMap?:
   return tmpValue;
 };
 
-const getDefaultSearch = (search?: boolean | SearchConfig): Required<SearchConfig> => {
+const getDefaultSearch = (
+  search: boolean | SearchConfig | undefined,
+  intl: IntlType,
+): Required<SearchConfig> => {
+  const config = {
+    collapseRender: (collapsed: boolean) => {
+      if (collapsed) {
+        return intl.getMessage('tableFrom.collapsed', '展开');
+      }
+      return intl.getMessage('tableFrom.expand', '收起');
+    },
+    searchText: intl.getMessage('tableFrom.search', defaultSearch.searchText),
+    resetText: intl.getMessage('tableFrom.reset', defaultSearch.resetText),
+    span: defaultColConfig,
+  };
+
   if (search === undefined || search === true) {
-    return defaultSearch;
+    return config;
   }
-  return { ...defaultSearch, ...search } as Required<SearchConfig>;
+  return { ...config, ...search } as Required<SearchConfig>;
 };
 
 const getSpanConfig = (
@@ -193,7 +221,8 @@ const FormSearch = <T, U = {}>({
   dateFormatter = 'string',
   search: propsSearch,
 }: FormItem<T>) => {
-  const searchConfig = getDefaultSearch(propsSearch);
+  const intl = useIntl();
+  const searchConfig = getDefaultSearch(propsSearch, intl);
   const { span, searchText, resetText, collapseRender } = searchConfig;
 
   const counter = Container.useContainer();

diff --git a/src/Table.tsx b/src/Table.tsx
@@ -6,6 +6,8 @@ import classNames from 'classnames';
 import useMergeValue from 'use-merge-value';
 import moment from 'moment';
 import { ColumnProps, PaginationConfig, TableProps, TableRowSelection } from 'antd/es/table';
+import { ConfigConsumer, ConfigConsumerProps } from 'antd/lib/config-provider';
+import { IntlProvider, IntlConsumer } from './component/intlContext';
 import useFetchData, { UseFetchDataAction, RequestData } from './useFetchData';
 import Container, { ColumnsMapItem } from './container';
 import IndexColumn from './component/indexColumn';
@@ -443,7 +445,11 @@ const genColumnList = <T, U = {}>(
  * 更快 更好 更方便
  * @param props
  */
-const ProTable = <T, U = {}>(props: ProTableProps<T>) => {
+const ProTable = <T, U = {}>(
+  props: ProTableProps<T> & {
+    defaultClassName: string;
+  },
+) => {
   const {
     request,
     className: propsClassName,
@@ -465,6 +471,7 @@ const ProTable = <T, U = {}>(props: ProTableProps<T>) => {
     rowSelection: propsRowSelection = false,
     beforeSearchSubmit = (searchParams: any) => searchParams,
     tableAlertRender,
+    defaultClassName,
     ...reset
   } = props;
 
@@ -629,7 +636,7 @@ const ProTable = <T, U = {}>(props: ProTableProps<T>) => {
     return <Empty />;
   }
 
-  const className = classNames('ant-pro-table', propsClassName);
+  const className = classNames(defaultClassName, propsClassName);
 
   return (
     <div className={className} id="ant-design-pro-table" style={style} ref={rootRef}>
@@ -711,7 +718,17 @@ const ProTable = <T, U = {}>(props: ProTableProps<T>) => {
  */
 const ProviderWarp = <T, U = {}>(props: ProTableProps<T>) => (
   <Container.Provider>
-    <ProTable {...props} />
+    <ConfigConsumer>
+      {({ getPrefixCls }: ConfigConsumerProps) => (
+        <IntlConsumer>
+          {value => (
+            <IntlProvider value={value}>
+              <ProTable defaultClassName={getPrefixCls('pro-table')} {...props} />
+            </IntlProvider>
+          )}
+        </IntlConsumer>
+      )}
+    </ConfigConsumer>
   </Container.Provider>
 );