createField: Uses "assertValue" as the default value for "shouldValidateOnMount"

Author: kettanaito

cypress/integration/custom-fields/BirthDate.spec.js

@@ -1,23 +1,40 @@
 import { messages } from '@examples/custom-fields/BirthDate'
 
+const assertError = (fieldName, errorText) => {
+  return cy
+    .getField(fieldName)
+    .parent()
+    .hasError(errorText)
+}
+
 describe('BirthDate', function() {
   before(() => {
     cy.loadStory(['Advanced', 'Custom fields', 'BirthDate'])
   })
 
-  it('Applies validation messages properly', () => {
-    const assertError = (errorText) => {
-      return cy
-        .getField('birthDate')
-        .parent()
-        .hasError(errorText)
-    }
+  it('Inherits "assertValue" for mount validation', () => {
+    cy.getField('birthDateTwo')
+      .eq(0)
+      .valid()
+
+    cy.getField('birthDateTwo')
+      .eq(1)
+      .valid()
 
+    cy.getField('birthDateTwo')
+      .eq(2)
+      .valid()
+
+    assertError('birthDateTwo', false)
+  })
+
+  it('Applies validation messages properly', () => {
     /* Invaid day */
     cy.getField('birthDate')
       .eq(0)
       .typeIn('90')
     assertError(
+      'birthDate',
       messages.name.birthDate.rule.year +
         messages.name.birthDate.rule.month +
         messages.name.birthDate.rule.day,
@@ -29,6 +46,7 @@ describe('BirthDate', function() {
       .clear()
       .typeIn('24')
     assertError(
+      'birthDate',
       messages.name.birthDate.rule.year + messages.name.birthDate.rule.month,
     )
 
@@ -37,6 +55,7 @@ describe('BirthDate', function() {
       .eq(1)
       .typeIn('13')
     assertError(
+      'birthDate',
       messages.name.birthDate.rule.year + messages.name.birthDate.rule.month,
     )
 
@@ -45,19 +64,19 @@ describe('BirthDate', function() {
       .eq(1)
       .clear()
       .typeIn('12')
-    assertError(messages.name.birthDate.rule.year)
+    assertError('birthDate', messages.name.birthDate.rule.year)
 
     /* Invalid year */
     cy.getField('birthDate')
       .eq(2)
       .typeIn('900')
-    assertError(messages.name.birthDate.rule.year)
+    assertError('birthDate', messages.name.birthDate.rule.year)
 
     /* Valid year */
     cy.getField('birthDate')
       .eq(2)
       .clear()
       .typeIn('2018')
-    assertError(false)
+    assertError('birthDate', false)
   })
 })

examples/custom-fields/BirthDate.jsx

@@ -2,13 +2,16 @@ import React from 'react'
 import { Form } from 'react-advanced-form'
 import { BirthDate } from '@examples/fields'
 
+const birthDateRules = {
+  year: ({ date }) => date.year.length === 4,
+  month: ({ date }) => date.month >= 1 && date.month <= 12,
+  day: ({ date }) => date.day >= 1 && date.day <= 31,
+}
+
 const rules = {
   name: {
-    birthDate: {
-      year: ({ date }) => date.year.length === 4,
-      month: ({ date }) => date.month >= 1 && date.month <= 12,
-      day: ({ date }) => date.day >= 1 && date.day <= 31,
-    },
+    birthDate: birthDateRules,
+    birthDateTwo: birthDateRules,
   },
 }
 
@@ -30,9 +33,18 @@ export const messages = {
 export default class BirthDateExample extends React.Component {
   render() {
     return (
-      <Form rules={rules} messages={messages}>
-        <BirthDate name="birthDate" label="Birth date" />
-      </Form>
+      <React.Fragment>
+        <h1>BirthDate</h1>
+
+        <Form rules={rules} messages={messages}>
+          <BirthDate name="birthDate" label="Birth date" />
+          <BirthDate
+            name="birthDateTwo"
+            label="Birth date (initial value)"
+            date="1999-12-10"
+          />
+        </Form>
+      </React.Fragment>
     )
   }
 }

examples/fields/BirthDate.jsx

@@ -68,15 +68,25 @@ class BirthDate extends React.Component {
 }
 
 export default createField({
+  /**
+   * Allow multiple instances of a field with the same name
+   * because "birthDate" contains three children input fields.
+   */
   allowMultiple: true,
   valuePropName: 'date',
+  /**
+   * Modifies the field's state to include custom type.
+   * This prevents children inputs to listen to "type: text"
+   * validation rules.
+   */
   mapPropsToField: ({ fieldRecord }) => ({
     ...fieldRecord,
-    type: 'birth-date',
+    type: 'birthDate',
   }),
-  shouldValidateOnMount: ({ date }) => {
-    return date.year || date.month || date.day
-  },
+  /**
+   * Execute mapping function each time a "raw" value ("1999-12-10")
+   * comes into the field. Has no effect over internal field value handling.
+   */
   mapValue(value) {
     const parsedDate = value.split('-')
     return {
@@ -85,9 +95,18 @@ export default createField({
       day: parsedDate[2] || '',
     }
   },
+  /**
+   * A predicate function that describes when the field has value.
+   * Useful for the fields with complex internal value instance,
+   * like this one, where the value is stored as an Object.
+   */
   assertValue(date) {
     return date.year || date.month || date.day
   },
+  /**
+   * Custom serialization function that executes upon the
+   * field's serialization. Joins Object values into a string.
+   */
   serialize(date) {
     return [date.year, date.month, date.day].join('-')
   },

src/components/createField.jsx

@@ -18,18 +18,17 @@ import {
 
 /* Default options for `connectField()` HOC */
 const defaultOptions = {
+  allowMultiple: false,
   valuePropName: 'value',
   initialValue: '',
-  allowMultiple: false,
   mapPropsToField({ fieldRecord }) {
     return fieldRecord
   },
   beforeRegister({ fieldProps }) {
     return fieldProps
   },
   shouldValidateOnMount({ valuePropName, fieldRecord }) {
-    const fieldValue = fieldRecord[valuePropName]
-    return isset(fieldValue) && fieldValue !== ''
+    return this.assertValue(fieldRecord[valuePropName])
   },
   shouldUpdateRecord({ prevValue, nextValue }) {
     return prevValue !== nextValue