From 50416b3a7b6e7c42ec7c944389eacd3722da503d Mon Sep 17 00:00:00 2001
From: Tom Xu <ycxzhkx@gmail.com>
Date: Sat, 18 Apr 2020 13:18:51 +0800
Subject: [PATCH] improvement: Form default locale (#23165)

* improve: Form default locale

* fix lint

* fix lint

* improve form doc

* add test case

* improve form validate messages
---
 .../config-provider/__tests__/locale.test.js  | 43 +++++++++++++++
 components/config-provider/index.tsx          | 13 +++--
 components/locale-provider/index.tsx          |  4 ++
 components/locale/zh_CN.tsx                   | 52 +++++++++++++++++++
 4 files changed, 109 insertions(+), 3 deletions(-)

diff --git a/components/config-provider/__tests__/locale.test.js b/components/config-provider/__tests__/locale.test.js
index 880eb4ef15..2aaea237f8 100644
--- a/components/config-provider/__tests__/locale.test.js
+++ b/components/config-provider/__tests__/locale.test.js
@@ -6,6 +6,12 @@ import zhCN from '../../locale/zh_CN';
 import enUS from '../../locale/en_US';
 import TimePicker from '../../time-picker';
 import Modal from '../../modal';
+import Form from '../../form';
+
+const delay = (timeout = 0) =>
+  new Promise(resolve => {
+    setTimeout(resolve, timeout);
+  });
 
 describe('ConfigProvider.Locale', () => {
   function $$(className) {
@@ -104,4 +110,41 @@ describe('ConfigProvider.Locale', () => {
       testLocale(wrapper);
     });
   });
+
+  describe('form validateMessages', () => {
+    const wrapperComponent = ({ validateMessages }) =>
+      mount(
+        <ConfigProvider locale={zhCN} form={{ validateMessages }}>
+          <Form initialValues={{ age: 18 }}>
+            <Form.Item name="test" label="姓名" rules={[{ required: true }]}>
+              <input />
+            </Form.Item>
+            <Form.Item name="age" label="年龄" rules={[{ type: 'number', len: 17 }]}>
+              <input />
+            </Form.Item>
+          </Form>
+        </ConfigProvider>,
+      );
+
+    it('set locale zhCN', async () => {
+      const wrapper = wrapperComponent({});
+
+      wrapper.find('form').simulate('submit');
+      await delay(50);
+      wrapper.update();
+
+      expect(wrapper.find('.ant-form-item-explain').first().text()).toEqual('请输入姓名');
+    });
+
+    it('set locale zhCN and set form validateMessages one item, other use default message', async () => {
+      const wrapper = wrapperComponent({ validateMessages: { required: '必须' } });
+
+      wrapper.find('form').simulate('submit');
+      await delay(50);
+      wrapper.update();
+
+      expect(wrapper.find('.ant-form-item-explain').first().text()).toEqual('必须');
+      expect(wrapper.find('.ant-form-item-explain').last().text()).toEqual('年龄必须等于17');
+    });
+  });
 });
diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx
index d5d06d85a4..bb77deb6c8 100644
--- a/components/config-provider/index.tsx
+++ b/components/config-provider/index.tsx
@@ -93,10 +93,17 @@ class ConfigProvider extends React.Component<ConfigProviderProps> {
     let childNode = children;
 
     // Additional Form provider
+    let validateMessages: ValidateMessages = {};
+
+    if (locale && locale.Form && locale.Form.defaultValidateMessages) {
+      validateMessages = locale.Form.defaultValidateMessages;
+    }
     if (form && form.validateMessages) {
-      childNode = (
-        <RcFormProvider validateMessages={form.validateMessages}>{children}</RcFormProvider>
-      );
+      validateMessages = { ...validateMessages, ...form.validateMessages };
+    }
+
+    if (Object.keys(validateMessages).length > 0) {
+      childNode = <RcFormProvider validateMessages={validateMessages}>{children}</RcFormProvider>;
     }
 
     return (
diff --git a/components/locale-provider/index.tsx b/components/locale-provider/index.tsx
index 574596e388..2de4b9e889 100644
--- a/components/locale-provider/index.tsx
+++ b/components/locale-provider/index.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { ValidateMessages } from 'rc-field-form/lib/interface';
 import warning from '../_util/warning';
 
 import { ModalLocale, changeConfirmLocale } from '../modal/locale';
@@ -30,6 +31,9 @@ export interface Locale {
   PageHeader?: Object;
   Icon?: Object;
   Text?: Object;
+  Form?: {
+    defaultValidateMessages: ValidateMessages;
+  };
 }
 
 export interface LocaleProviderProps {
diff --git a/components/locale/zh_CN.tsx b/components/locale/zh_CN.tsx
index d49ec6012e..a7d4c9061f 100644
--- a/components/locale/zh_CN.tsx
+++ b/components/locale/zh_CN.tsx
@@ -1,9 +1,12 @@
+/* eslint-disable no-template-curly-in-string */
 import Pagination from 'rc-pagination/lib/locale/zh_CN';
 import DatePicker from '../date-picker/locale/zh_CN';
 import TimePicker from '../time-picker/locale/zh_CN';
 import Calendar from '../calendar/locale/zh_CN';
 import { Locale } from '../locale-provider';
 
+const typeTemplate = '${label}不是一个有效的${type}';
+
 const localeValues: Locale = {
   locale: 'zh-cn',
   Pagination,
@@ -64,6 +67,55 @@ const localeValues: Locale = {
   PageHeader: {
     back: '返回',
   },
+  Form: {
+    defaultValidateMessages: {
+      default: '字段验证错误${label}',
+      required: '请输入${label}',
+      enum: '${label}必须是其中一个[${enum}]',
+      whitespace: '${label}不能为空字符',
+      date: {
+        format: '${label}日期格式无效',
+        parse: '${label}不能转换为日期',
+        invalid: '${label}是一个无效日期',
+      },
+      types: {
+        string: typeTemplate,
+        method: typeTemplate,
+        array: typeTemplate,
+        object: typeTemplate,
+        number: typeTemplate,
+        date: typeTemplate,
+        boolean: typeTemplate,
+        integer: typeTemplate,
+        float: typeTemplate,
+        regexp: typeTemplate,
+        email: typeTemplate,
+        url: typeTemplate,
+        hex: typeTemplate,
+      },
+      string: {
+        len: '${label}须为${len}个字符',
+        min: '${label}最少${min}个字符',
+        max: '${label}最多${max}个字符',
+        range: '${label}须在${min}-${max}字符之间',
+      },
+      number: {
+        len: '${label}必须等于${len}',
+        min: '${label}最小值为${min}',
+        max: '${label}最大值为${max}',
+        range: '${label}须在${min}-${max}之间',
+      },
+      array: {
+        len: '须为${len}个${label}',
+        min: '最少${min}个${label}',
+        max: '最多${max}个${label}',
+        range: '${label}数量须在${min}-${max}之间',
+      },
+      pattern: {
+        mismatch: '${label}与模式不匹配${pattern}',
+      },
+    },
+  },
 };
 
 export default localeValues;