Merge pull request #3 from anigenero/localization

Localization

Author: anigenero

.npmignore

@@ -1,3 +1,4 @@
+.idea/
 src/
 node_modules/
 

README.md

@@ -11,6 +11,21 @@ Easy-to-use React hook for validating forms with the [class-validator](https://g
 npm install --save react-class-validator
 ```
 
+```typescript
+
+const validatorOptions: ValidatorContextOptions = {
+    onErrorMessage: (error): string => {
+        // custom error message handling (localization, etc)
+    }
+}
+
+render((
+    <ValidatorContext options={validatorOptions}>
+        <MyComponent />
+    </ValidatorContext>
+), document.getElementById('root'))
+```
+
 ## Usage
 
 ```typescript
@@ -32,7 +47,7 @@ class LoginValidation {
 ```
 
 ```typescript jsx
-const LoginForm = () => {
+const MyComponent = () => {
 
     const [username, setUsername] = useState('');
     const [password, setPassword] = useState('');
@@ -58,7 +73,7 @@ const LoginForm = () => {
             {/* show error */}
             {errors.username && (
                 <div className="error">
-                    {errors.username}
+                    {errors.username.map((message) => <strong>message</strong>)}
                 </div>
             )}
 

package-lock.json

@@ -0,0 +1,20 @@
+import {ValidationError} from "class-validator";
+import React, {createContext, FunctionComponent} from "react";
+
+export type OnErrorMessageHandler = (error: ValidationError) => string[];
+export type ValidatorContextOptions = {
+    onErrorMessage: OnErrorMessageHandler;
+};
+
+const _getDefaultContextOptions = (): ValidatorContextOptions => ({
+    onErrorMessage: (error) => Object.keys(error.constraints).map((key) => error.constraints[key])
+});
+
+export const ValidatorContext = createContext<ValidatorContextOptions>(null);
+
+export const ValidatorProvider: FunctionComponent<{ options?: ValidatorContextOptions }> =
+    ({options = _getDefaultContextOptions(), children}) => (
+        <ValidatorContext.Provider value={options}>
+            {children}
+        </ValidatorContext.Provider>
+    );

src/context.tsx

@@ -1,17 +1,22 @@
 import {validate} from 'class-validator';
-import {useState} from 'react';
+import {useContext, useState} from 'react';
+import {ValidatorContext} from "./context";
+
+export {ValidatorProvider, ValidatorContextOptions, OnErrorMessageHandler} from './context';
 
 type Newable<T> = {
     new(): T;
 } | Function;
 
-type ValidationErrorMap<T, K extends keyof T> = { [key in K]?: string };
+type ValidationErrorMap<T, K extends keyof T> = { [key in K]?: string[] };
 type ValidationPayload<T, K extends keyof T> = { [key in K]?: T[K] };
 type ValidationFunction<T, K extends keyof T> = (payload: ValidationPayload<T, K>, filter?: K[]) => Promise<boolean>;
 type UseValidationResult<T, K extends keyof T> = [ValidationFunction<T, K>, ValidationErrorMap<T, K>];
 
 export const useValidation = <T, K extends keyof T>(validationClass: Newable<T>): UseValidationResult<T, K> => {
 
+    const {onErrorMessage} = useContext(ValidatorContext);
+
     const [validationErrors, setErrors] = useState<ValidationErrorMap<T, K>>({});
 
     const validateCallback: ValidationFunction<T, K> = async (payload, filter: K[] = []) => {
@@ -34,7 +39,7 @@ export const useValidation = <T, K extends keyof T>(validationClass: Newable<T>)
             const validation: ValidationErrorMap<T, K> = errors.reduce(
                 (acc, value) => ({
                     ...acc,
-                    [value.property as K]: Object.keys(value.constraints).map((key) => value.constraints[key])[0]
+                    [value.property as K]: onErrorMessage(value)
                 }),
                 {} as ValidationErrorMap<T, K>
             );

src/index.ts

@@ -26,7 +26,7 @@
     "/**/*.spec.tsx"
   ],
   "include": [
-    "./src/**/*"
+    "./src/index.ts"
   ]
 }