feat: Field support messageVariables (#80)

* support messageVariables

* add test case

Author: zombieJ

examples/validate-perf.tsx

@@ -8,7 +8,7 @@ import { ValidateMessages } from '../src/interface';
 
 const myMessages: ValidateMessages = {
   default: '${name} 看起来怪怪的……',
-  required: '你需要一个 ${name}',
+  required: '你需要一个 ${displayName}',
   types: {
     number: '嗨，这个 ${name} 不是一个合格的 ${type}',
   },
@@ -46,13 +46,18 @@ export default class Demo extends React.Component {
           validateMessages={myMessages}
           initialValues={{ remember: true }}
         >
-          <LabelField name="password" rules={[{ required: true }]}>
+          <LabelField
+            name="password"
+            messageVariables={{ displayName: '密码' }}
+            rules={[{ required: true }]}
+          >
             <Input placeholder="password" />
           </LabelField>
 
           <LabelField
             name="password2"
             dependencies={['password']}
+            messageVariables={{ displayName: '密码2' }}
             rules={[
               { required: true },
               ({ getFieldValue }) => ({
@@ -71,6 +76,7 @@ export default class Demo extends React.Component {
           <LabelField
             name="field"
             label="Full of rules"
+            messageVariables={{ displayName: '字段' }}
             rules={[
               { required: true },
               { required: true, message: <h1>我是 ReactNode</h1> },

src/Field.tsx

@@ -68,6 +68,7 @@ export interface FieldProps {
   validateTrigger?: string | string[] | false;
   validateFirst?: boolean;
   valuePropName?: string;
+  messageVariables?: Record<string, string>;
   onReset?: () => void;
 }
 
@@ -268,7 +269,7 @@ class Field extends React.Component<FieldProps, FieldState> implements FieldEnti
   };
 
   public validateRules = (options?: ValidateOptions) => {
-    const { validateFirst } = this.props;
+    const { validateFirst = false, messageVariables } = this.props;
     const { triggerName } = (options || {}) as ValidateOptions;
     const namePath = this.getNamePath();
 
@@ -284,7 +285,14 @@ class Field extends React.Component<FieldProps, FieldState> implements FieldEnti
       });
     }
 
-    const promise = validateRules(namePath, this.getValue(), filteredRules, options, validateFirst);
+    const promise = validateRules(
+      namePath,
+      this.getValue(),
+      filteredRules,
+      options,
+      validateFirst,
+      messageVariables,
+    );
     this.validatePromise = promise;
     this.errors = [];
 

src/utils/validateUtil.ts

@@ -33,6 +33,7 @@ function convertMessages(
   messages: ValidateMessages,
   name: string,
   rule: RuleObject,
+  messageVariables?: Record<string, string>,
 ): ValidateMessages {
   const kv = {
     ...(rule as Record<string, string | number>),
@@ -48,7 +49,7 @@ function convertMessages(
     Object.keys(source).forEach(ruleName => {
       const value = source[ruleName];
       if (typeof value === 'string') {
-        target[ruleName] = replaceFunc(value);
+        target[ruleName] = replaceFunc(value, messageVariables);
       } else if (value && typeof value === 'object') {
         target[ruleName] = {};
         fillTemplate(value, target[ruleName]);
@@ -69,6 +70,7 @@ async function validateRule(
   value: StoreValue,
   rule: RuleObject,
   options: ValidateOptions,
+  messageVariables?: Record<string, string>,
 ): Promise<string[]> {
   const cloneRule = { ...rule };
   // We should special handle array validate
@@ -82,7 +84,12 @@ async function validateRule(
     [name]: [cloneRule],
   });
 
-  const messages: ValidateMessages = convertMessages(options.validateMessages, name, cloneRule);
+  const messages: ValidateMessages = convertMessages(
+    options.validateMessages,
+    name,
+    cloneRule,
+    messageVariables,
+  );
   validator.messages(messages);
 
   let result = [];
@@ -106,7 +113,7 @@ async function validateRule(
   if (!result.length && subRuleField) {
     const subResults: string[][] = await Promise.all(
       (value as StoreValue[]).map((subValue: StoreValue, i: number) =>
-        validateRule(`${name}.${i}`, subValue, subRuleField, options),
+        validateRule(`${name}.${i}`, subValue, subRuleField, options, messageVariables),
       ),
     );
 
@@ -125,7 +132,8 @@ export function validateRules(
   value: StoreValue,
   rules: RuleObject[],
   options: ValidateOptions,
-  validateFirst?: boolean,
+  validateFirst: boolean,
+  messageVariables?: Record<string, string>,
 ) {
   const name = namePath.join('.');
 
@@ -180,7 +188,9 @@ export function validateRules(
     };
   });
 
-  const rulePromises = filledRules.map(rule => validateRule(name, value, rule, options));
+  const rulePromises = filledRules.map(rule =>
+    validateRule(name, value, rule, options, messageVariables),
+  );
 
   const summaryPromise: Promise<string[]> = (validateFirst
     ? finishOnFirstFailed(rulePromises)

tests/validate.test.js

@@ -45,10 +45,10 @@ describe('Form.Validate', () => {
   });
 
   describe('validateMessages', () => {
-    function renderForm(messages) {
+    function renderForm(messages, fieldProps = {}) {
       return mount(
         <Form validateMessages={messages}>
-          <InfoField name="username" rules={[{ required: true }]} />
+          <InfoField name="username" rules={[{ required: true }]} {...fieldProps} />
         </Form>,
       );
     }
@@ -66,6 +66,20 @@ describe('Form.Validate', () => {
       await changeValue(wrapper, '');
       matchError(wrapper, 'Bamboo & Light');
     });
+
+    it('messageVariables', async () => {
+      const wrapper = renderForm(
+        { required: "You miss '${label}'!" },
+        {
+          messageVariables: {
+            label: 'Light&Bamboo',
+          },
+        },
+      );
+
+      await changeValue(wrapper, '');
+      matchError(wrapper, "You miss 'Light&Bamboo'!");
+    });
   });
 
   describe('customize validator', () => {