v1.5.0

Author: danieloprado

HOW_TO_USE.md

@@ -4,31 +4,32 @@
 
 Component Base to create a form field.
 
-| Props             | Required | Type                   | Description                                                            |
-|-------------------|----------|------------------------|------------------------------------------------------------------------|
-| name              | false    | string                 |                                                                        |
-| value             | false    | any                    |                                                                        |
-| submitted         | false    | boolean                | flag to set if form was submited (also can be set by setFormSubmitted) |
-| validation        | false    | string                 | rules of validation                                                    |
-| validationContext | false    | object { prop: value } | extra fields for validation bind (ex. required_if)                     |
-| errorMessage      | false    | string                 | custom error message from external validation                          |
+| Props                    | Required | Type                   | Description                                                            |
+|--------------------------|----------|------------------------|------------------------------------------------------------------------|
+| name                     | false    | string                 |                                                                        |
+| value                    | false    | any                    |                                                                        |
+| submitted                | false    | boolean                | flag to set if form was submited (also can be set by setFormSubmitted) |
+| validation               | false    | string                 | rules of validation                                                    |
+| validationContext        | false    | object { prop: value } | extra fields for validation bind (ex. required_if)                     |
+| validationAttributeNames | false    | object { prop: value } | see: https://github.com/skaterdav85/validatorjs#custom-attribute-names |
+| errorMessage             | false    | string                 | custom error message from external validation                          |
 
 ### How to Create a Form Field
 
 ```tsx
 import FieldCoreBase, { IPropsFieldBase, IStateFieldBase } from '@react-form-fields/core/components/FieldCoreBase';
 
-interface IState extends IStateFieldBase {
+interface IState extends IStateFieldBase { //<-- extends
   //your state props
 }
 
-interface IProps extends IPropsFieldBase {
+interface IProps extends IPropsFieldBase { //<-- extends
   // your props
   onChange: (value: string) => void;
 }
 
 class MyComponentField extends FieldCoreBase<IProps, IState> {
-  //If you need getDerivedStateFromProps dont forget to call super 
+  //[optional] If you need getDerivedStateFromProps dont forget to call super 
   static getDerivedStateFromProps(props: IProps, currentState: IState): IState {
     const state = super.getDerivedStateFromProps(props, currentState);
     // your logic....

README.md

@@ -29,5 +29,8 @@ See [HOW_TO_USE.md](https://github.com/react-form-fields/core/blob/master/HOW_TO
 * zipcode
 * phone
 * document (CNPJ/CPF)
+* cnpj
 * cpf
-* cnpj
+* cpf
+* cnpj
+* money

components/FieldCoreBase.tsx

@@ -16,6 +16,7 @@ export interface IPropsFieldBase {
   value?: any;
   validation?: string;
   validationContext?: Object;
+  validationAttributeNames?: Object;
   errorMessage?: string;
   submitted?: boolean;
   mask?: string;
@@ -58,7 +59,7 @@ export default abstract class FieldCoreBase<
     return this.mask.apply(this.props.value);
   }
 
-  static getDerivedStateFromProps({ name, value, validation, validationContext, children, submitted }: IPropsFieldBase, currentState: IStateFieldBase): IStateFieldBase {
+  static getDerivedStateFromProps({ name, value, validation, validationContext, validationAttributeNames, children, submitted }: IPropsFieldBase, currentState: IStateFieldBase): IStateFieldBase {
     const customMessages = React.Children
       .toArray(children)
       .reduce<ErrorMessages>((acc, child: any) => {
@@ -71,7 +72,7 @@ export default abstract class FieldCoreBase<
         return acc;
       }, {});
 
-    const error = validate(name, value, validation, validationContext, customMessages);
+    const error = validate(name, value, validation, validationContext, validationAttributeNames, customMessages);
 
     return {
       ...currentState,

config/builder.ts

@@ -1,4 +1,5 @@
-import { ErrorMessages } from 'validatorjs';
+import { AttributeFormatter, ErrorMessages, RegisterAsyncCallback, RegisterCallback } from 'validatorjs';
+import Validator = require('validatorjs');
 
 import { IConfig } from '.';
 import { IMask } from '../mask';
@@ -20,6 +21,21 @@ export default class ConfigBuilder {
     return this;
   }
 
+  public addValidator(name: string, callback: RegisterCallback, errorMessage: string) {
+    Validator.register(name, callback, errorMessage);
+    return this;
+  }
+
+  public addValidatorAsync(name: string, callback: RegisterAsyncCallback, errorMessage: string) {
+    Validator.registerAsync(name, callback, errorMessage);
+    return this;
+  }
+
+  public setValidatorAttributeFormatter(func: AttributeFormatter) {
+    Validator.setAttributeFormatter(func);
+    return this;
+  }
+
   public addCustomMessages(lang: string, customMessages: ErrorMessages) {
     this.config.validation = { lang, customMessages };
     return this;

package.json

@@ -9,7 +9,7 @@
     "validation",
     "material"
   ],
-  "version": "1.4.9",
+  "version": "1.5.0",
   "main": "./index.js",
   "types": "./index.d.ts",
   "license": "MIT",

validator/index.ts

@@ -1,11 +1,22 @@
 import * as validator from 'validatorjs';
 
-export function validate(fieldName: string, value: any, rules: string, context: any = {}, customMessages: validator.ErrorMessages = null): { valid: boolean, message?: string } {
+export function validate(
+  fieldName: string,
+  value: any,
+  rules: string,
+  context: any = {},
+  attributeNames: any = {},
+  customMessages: validator.ErrorMessages = null)
+  : { valid: boolean, message?: string } {
   if (!rules) return { valid: true };
 
   fieldName = fieldName || 'value';
   const result = new validator({ [fieldName]: value, ...context }, { [fieldName]: rules }, customMessages);
 
+  if (attributeNames) {
+    result.setAttributeNames(attributeNames);
+  }
+
   if (result.passes()) {
     return { valid: true };
   }