Merge pull request #1 from capdilla/3.x.x

version 3.0.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capdilla/react-d-form",
-  "version": "2.3.4",
+  "version": "3.0.0",
   "description": "React, React Native form builder",
   "main": "build/index.js",
   "scripts": {

src/helpers/getError.tsx

@@ -1,61 +1,61 @@
-import React from "react";
-import { IFormComponent } from "../types";
+import React from 'react'
+import { FormComponent } from '../index'
 
 const getErrorMessage = (validation: any, name: string) => {
   if (validation) {
     return validation[name] && validation[name].errorMessage
       ? validation[name].errorMessage
-      : "Required";
+      : 'Required'
   }
 
-  return "";
-};
+  return ''
+}
 
 const getValidation = (
   validation: any,
   name: string,
-  showValidation: boolean
+  showValidation: boolean,
 ) => {
   if (showValidation && validation) {
     if (validation[name] && !validation[name].isValid) {
-      return "error";
+      return 'error'
     } else {
-      return null;
+      return null
     }
   }
 
-  return null;
-};
+  return null
+}
 
 const getError = (
   name: string,
   showValidation: boolean,
   usedFields: any,
-  validation: any
+  validation: any,
 ) => {
   // return false
 
-  let valid = getValidation(validation, name, true);
-  const errorMessage = getErrorMessage(validation, name);
+  let valid = getValidation(validation, name, true)
+  const errorMessage = getErrorMessage(validation, name)
 
-  if (usedFields && usedFields.includes(name) && valid == "error") {
-    return { content: errorMessage };
+  if (usedFields && usedFields.includes(name) && valid == 'error') {
+    return { content: errorMessage }
   }
 
-  return showValidation && valid == "error" ? { content: errorMessage } : false;
-};
+  return showValidation && valid == 'error' ? { content: errorMessage } : false
+}
 
-export const withError = <P extends IFormComponent>(
-  Comp: React.ComponentType<P>
+export const withError = <P extends FormComponent>(
+  Comp: React.ComponentType<P>,
 ) => {
   return (props: P): any => {
     const error = getError(
       props.name,
       props.showValidation == true,
       props.usedFields,
-      props.validationForm
-    ) as { content: string } | undefined;
+      props.validationForm,
+    ) as { content: string } | undefined
 
-    return <Comp {...props} error={error} />;
-  };
-};
+    return <Comp {...props} error={error} />
+  }
+}

src/index.tsx

@@ -1,9 +1,8 @@
-import Core, { GetComponent } from "./lib/core";
-import ReactDForm from "./react-web";
-import { withError } from "./helpers/getError";
-import { IFormComponent, IFormData, IFields } from "./types";
-export type FormComponent = IFormComponent;
+import Core, { GetComponent } from './lib/core'
+import ReactDForm from './react-web'
+export * from './helpers/getError'
+export * from './types'
 
-export default Core;
+export default Core
 
-export { GetComponent, ReactDForm, withError, IFormData, IFields };
+export { GetComponent, ReactDForm }

src/lib/core.tsx

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react'
-import { Props, Ifield } from '../types'
+import { Props, Field } from '../types'
 import regex from './regex'
 
 import { get as get_ } from 'lodash'
@@ -20,7 +20,7 @@ export interface IfieldState<T> {
 }
 
 export interface IFieldsStateValidation {
-  ISFORMVALID: boolean
+  isFormValid: boolean
 }
 
 export interface IState<T> {
@@ -32,7 +32,7 @@ export interface IState<T> {
 
 export interface RowChild<T> {
   rowKey: number
-  rowFields: Ifield<T>[]
+  rowFields: Field<T>[]
 }
 
 type RowChildFn<T> = (params: RowChild<T>) => React.ReactElement
@@ -92,15 +92,15 @@ export default class Core<T> extends PureComponent<Props<T>, IState<T>> {
       fieldsState: {
         data: {} as T,
         validation: {
-          ISFORMVALID: true,
+          isFormValid: true,
         },
       },
       validationForm: {} as IValidation<T>,
       usedFields: [],
       oldState: {
         data: {} as T,
         validation: {
-          ISFORMVALID: true,
+          isFormValid: true,
         },
       },
     }
@@ -194,13 +194,13 @@ export default class Core<T> extends PureComponent<Props<T>, IState<T>> {
       { validations: {} as IValidation<T>, state: {} as T },
     )
 
-    const ISFORMVALID = this.getISFORMVALID(
+    const isFormValid = this.getISFORMVALID(
       newState.validations as IValidation<T>,
     )
 
     const newFieldsState: IfieldState<T> = {
       data: { ...newState.state },
-      validation: { ISFORMVALID },
+      validation: { isFormValid },
     }
 
     const state = {
@@ -224,7 +224,7 @@ export default class Core<T> extends PureComponent<Props<T>, IState<T>> {
     )
   }
 
-  private parseValue(field: Ifield<any>, val: any): any {
+  private parseValue(field: Field<any>, val: any): any {
     if (field.type === 'Checkbox' && !val) {
       return false
     }
@@ -252,7 +252,7 @@ export default class Core<T> extends PureComponent<Props<T>, IState<T>> {
     return val
   }
 
-  private validateField(field: Ifield<any>, val: any): Tvalidation {
+  private validateField(field: Field<any>, val: any): Tvalidation {
     if (typeof field.name !== 'string') {
       return {
         isValid: false,
@@ -303,7 +303,7 @@ export default class Core<T> extends PureComponent<Props<T>, IState<T>> {
     }
   }
 
-  onFieldsChange(field: Ifield<any>, val: any, doOnChange: boolean) {
+  onFieldsChange(field: Field<any>, val: any, doOnChange: boolean) {
     const { validationForm, usedFields, fieldsState } = this.state
 
     const value = this.parseValue(field, val)
@@ -315,7 +315,7 @@ export default class Core<T> extends PureComponent<Props<T>, IState<T>> {
       [field.name]: validationField,
     }
 
-    const ISFORMVALID = this.getISFORMVALID(newValidation)
+    const isFormValid = this.getISFORMVALID(newValidation)
 
     //use for know if the the field was used
     let newUsedFields = [...usedFields]
@@ -328,7 +328,7 @@ export default class Core<T> extends PureComponent<Props<T>, IState<T>> {
         ...fieldsState.data,
         [field.name]: val === '' ? null : val,
       },
-      validation: { ISFORMVALID },
+      validation: { isFormValid },
     }
 
     this.setState({
@@ -342,14 +342,14 @@ export default class Core<T> extends PureComponent<Props<T>, IState<T>> {
     }
   }
 
-  getDataDependsOn(field: Ifield<any>) {
+  getDataDependsOn(field: Field<any>) {
     if (field.dataDependsOn) {
       const data = get_(this.state.fieldsState, field.dataDependsOn)
       return data ? data : []
     }
   }
 
-  getValue(field: Ifield<any>) {
+  getValue(field: Field<any>) {
     const { fieldsState, oldState } = this.state
 
     if (typeof field.name !== 'string') {
@@ -385,7 +385,7 @@ export default class Core<T> extends PureComponent<Props<T>, IState<T>> {
     })
   }
 
-  fieldFn(rows: { rowFields: Ifield<T>[] }, cb: Function) {
+  fieldFn(rows: { rowFields: Field<T>[] }, cb: Function) {
     const { showValidation, executeChangeOnBlur, defaultState } = this.props
 
     const { validationForm, fieldsState, usedFields } = this.state

src/react-web/FormComponents.tsx

@@ -1,9 +1,8 @@
-import React from "react";
-import { withError } from "../helpers/getError";
-import { IFormComponent } from "../types";
+import React from 'react'
+import { FormComponent, withError } from '../index'
 
-interface Iinput extends IFormComponent {
-  onBlur: (value: any) => any;
+interface Iinput extends FormComponent {
+  onBlur: (value: any) => any
 }
 
 const Components = {
@@ -32,11 +31,11 @@ const Components = {
             {...props}
           />
 
-          {error && <label style={{ color: "red" }}>{error.content}</label>}
+          {error && <label style={{ color: 'red' }}>{error.content}</label>}
         </>
-      );
-    }
+      )
+    },
   ),
-};
+}
 
-export default Components;
+export default Components

src/types/index.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import Regexs from "../lib/regex";
 
-export interface Ifield<T> {
+export interface Field<T> {
   name: keyof T;
   label?: string;
   placeholder?: string;
@@ -28,45 +28,45 @@ export interface Ifield<T> {
     onChange: (data: any, field?: keyof T) => void,
     showValidations: boolean
   ) => React.ReactElement;
-  validation?: IValidation<T>;
+  validation?: Validation<T>;
   [key: string]: any;
 }
 
-export type TCustomResult = {
+export type CustomResult = {
   valid: boolean;
   errorMessage: string;
 };
 
-export interface IValidation<T> {
+export interface Validation<T> {
   required?: boolean;
   regexType?: keyof typeof Regexs;
   errorMessage?: string;
-  custom?: (values: T) => boolean | TCustomResult;
+  custom?: (values: T) => boolean | CustomResult;
 }
 
-export interface IFields<T> {
+export interface Fields<T> {
   div?: string;
-  fields: ((values: T) => Ifield<T>[]) | Ifield<T>[];
+  fields: ((values: T) => Field<T>[]) | Field<T>[];
 }
 
-export type TdefaultState = {
+export type DefaultState = {
   [key: string]: any;
 };
 
-export interface IFormData<T> {
+export interface FormData<T> {
   data: T;
-  validation: { ISFORMVALID: boolean };
+  validation: { isFormValid: boolean };
 }
 export interface Props<T> {
-  fields: IFields<T>[];
-  onFormChange?: (formData: IFormData<T>) => void;
+  fields: Fields<T>[];
+  onFormChange?: (formData: FormData<T>) => void;
   showValidation?: boolean;
   defaultState?: T;
   parseState?: Function;
   executeChangeOnBlur?: boolean;
 }
 
-export interface IFormComponent {
+export interface FormComponent {
   label?: string;
   value?: any;
   onChange: (value: any) => any;

stories/1-Basic.stories.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useState } from 'react'
-import { IFields, IFormData } from '../src/types'
+import { Fields, FormData } from '../src'
 
 import DForm from '../src/react-web'
 
@@ -75,7 +75,7 @@ interface FormType {
   name: string
 }
 
-const fields: IFields<FormType>[] = [
+const fields: Fields<FormType>[] = [
   {
     fields: [
       {
@@ -125,10 +125,10 @@ interface WithCustomComponentState {
   age: number
 }
 export const WithCustomComponent = () => {
-  const [state, setState] = useState<IFormData<WithCustomComponentState>>({
+  const [state, setState] = useState<FormData<WithCustomComponentState>>({
     data: { age: 0, name: 'John', surname: '' },
     validation: {
-      ISFORMVALID: true,
+      isFormValid: true,
     },
   })
 
@@ -193,10 +193,10 @@ interface WithRef {
 }
 export const WithRef = () => {
   const formRef = useRef<DForm<WithRef> | null>(null)
-  const [state, setState] = useState<IFormData<WithRef>>({
+  const [state, setState] = useState<FormData<WithRef>>({
     data: { age: 0, name: 'John', surname: '' },
     validation: {
-      ISFORMVALID: true,
+      isFormValid: true,
     },
   })
 

tsconfig.json

@@ -1,9 +1,9 @@
 {
   "compilerOptions": {
     "outDir": "build",
-    "module": "esnext",
+    "module": "commonjs",
     "target": "es5",
-    "lib": ["es6", "dom", "es2016", "es2017"],
+    "lib": ["es6", "dom"],
     "sourceMap": true,
     "allowJs": false,
     "jsx": "react",