formact - npm Package Compare versions

Comparing version 3.0.5 to 3.0.6

dist/index.d.ts

 import React from 'react';
-declare type ObjectRecord = Record<string, any>;
-export declare type FormSubmitPayload = {
+declare type GenericObject = Record<string, any>;
+export declare type GenericFormType = GenericObject;
+declare type FieldValue = string | boolean | number | GenericObject | Date | null | undefined;
+declare type FormValues = Record<string, FieldValue>;
+declare type ErrorValues = Record<string, string | null | undefined>;
+export declare type FormSubmitPayload<T extends FormValues> = {
     valid: boolean;
-    values: ObjectRecord;
-    errors: ObjectRecord;
+    values: T;
+    errors: ErrorValues;
     onFinish: (clear?: boolean) => void;
     setError: (field: string, message: string) => void;
 };
-export declare type FormChangePayload = {
+export declare type FormChangePayload<T extends FormValues> = {
     valid: boolean;
-    values: ObjectRecord;
-    errors: ObjectRecord;
+    values: T;
+    errors: ErrorValues;
     action?: string;
@@ -18,9 +22,10 @@ };
     field: string;
-    value?: string;
+    value?: FieldValue;
 };
-export declare type ValidationFunction = (value: string, values: ObjectRecord) => string | null | undefined;
+export declare type ValidationFunction = (value: FieldValue, values: Record<string, FieldValue>) => string | null | undefined;
 export declare type Validation = ValidationFunction | Array<ValidationFunction>;
 export declare type FormContextType = {
-    errors: ObjectRecord;
-    values: ObjectRecord;
+    errors: ErrorValues;
+    values: FormValues;
+    inForm: boolean;
     valid: boolean;
@@ -31,4 +36,4 @@ submitted: boolean;
     setDirty: (field: string) => any;
-    getValue: (field: string) => string;
-    updateValue: (field: string, value: string) => any;
+    getValue: (field: string) => FieldValue;
+    updateValue: (field: string, value: FieldValue) => any;
     updateValues: (fields: Array<PayloadField>) => any;
@@ -41,3 +46,3 @@ addField: (field: string, validation?: Validation) => any;
 };
-export declare const useForm: () => FormContextType;
+export declare function useForm(): FormContextType;
 export declare type DefaultErrorMessages = {
@@ -52,13 +57,13 @@ email?: string;
     type?: string;
-    onBlur?: (event: ObjectRecord) => any;
+    onBlur?: (event: GenericObject) => any;
     defaultErrorMessages?: DefaultErrorMessages;
 };
 export declare const EMAIL_REGEX: RegExp;
-export declare const EMAIL_VALIDATION: (errorMessage?: string) => (value: string) => string;
-export declare type FieldPayload = {
-    fieldValue?: string;
-    update: (value: string) => any;
+export declare const EMAIL_VALIDATION: (errorMessage?: string) => (value: FieldValue) => string;
+export declare type FieldPayload<T> = {
+    fieldValue?: T;
+    update: (value: FieldValue) => any;
     showError: boolean;
     errorMessage?: string;
-    onBlur: (e?: ObjectRecord) => any;
+    onBlur: (e?: GenericObject) => any;
     submit: () => any;
@@ -68,15 +73,17 @@ submitting: boolean;
 };
-export declare const useField: (props: FieldProps) => FieldPayload;
-declare type Children = (JSX.Element | null)[] | (JSX.Element | null);
-export declare type FormProps = {
-    onSubmit?: (payload: FormSubmitPayload, mode?: string) => any;
-    onChange?: (payload: FormChangePayload) => any;
-    initialValues?: ObjectRecord;
+export declare function useField<T extends FieldValue>(props: FieldProps): FieldPayload<T>;
+declare type Child = JSX.Element | string | null | undefined;
+declare type Children = Child[] | Child;
+export declare type FormProps<T extends FormValues> = {
+    onSubmit?: (payload: FormSubmitPayload<T>, mode?: string) => any;
+    onChange?: (payload: FormChangePayload<T>) => any;
+    initialValues?: T;
     children: Children | ((payload: FormContextType) => Children);
 };
-declare const Form: (props: FormProps) => JSX.Element;
+export declare function Form<T extends FormValues>(props: FormProps<T>): JSX.Element;
+export declare function GenericForm(props: FormProps<GenericFormType>): JSX.Element;
 declare type SetDifference<A, B> = A extends B ? never : A;
 declare type SetComplement<A, A1 extends A> = SetDifference<A, A1>;
 declare type Subtract<T extends T1, T1 extends object> = Pick<T, SetComplement<keyof T, keyof T1>>;
-export declare const turnIntoField: <ComponentProps extends FieldPayload>(Component: React.ComponentType<ComponentProps>, defaultErrorMessages?: DefaultErrorMessages) => React.FC<Subtract<ComponentProps, FieldPayload> & FieldProps>;
+export declare function turnIntoField<ComponentProps extends FieldPayload<string>>(Component: React.ComponentType<ComponentProps>, defaultErrorMessages?: DefaultErrorMessages): React.FC<Subtract<ComponentProps, FieldPayload<string>> & FieldProps>;
 export default Form;

dist/index.js

@@ -22,3 +22,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.turnIntoField = exports.useField = exports.EMAIL_VALIDATION = exports.EMAIL_REGEX = exports.useForm = void 0;
+exports.turnIntoField = exports.GenericForm = exports.Form = exports.useField = exports.EMAIL_VALIDATION = exports.EMAIL_REGEX = exports.useForm = void 0;
 const react_1 = __importStar(require("react"));
@@ -28,2 +28,3 @@ const FormContext = (0, react_1.createContext)({
     values: {},
+    inForm: false,
     valid: true,
@@ -43,3 +44,3 @@ submitted: false,
 });
-const validate = (newstate) => {
+function validate(newstate) {
     const errors = {};
@@ -65,5 +66,6 @@ let valid = true;
     return { errors, valid };
-};
-function reducer(state, action) {
+}
+const createReducer = () => (state, action) => {
     let newState = {};
+    const currentValues = state.values;
     switch (action.type) {
@@ -76,6 +78,6 @@ case 'UPDATE':
                 });
-                newState = Object.assign(Object.assign({}, state), { values: Object.assign(Object.assign({}, state.values), values) });
+                newState = Object.assign(Object.assign({}, state), { values: Object.assign(Object.assign({}, currentValues), values) });
             }
             else {
-                newState = Object.assign(Object.assign({}, state), { values: Object.assign(Object.assign({}, state.values), { [action.payload.field]: action.payload.value }) });
+                newState = Object.assign(Object.assign({}, state), { values: Object.assign(Object.assign({}, currentValues), { [action.payload.field]: action.payload.value }) });
             }
@@ -94,6 +96,6 @@ break;
         case 'REMOVE':
-            newState = Object.assign(Object.assign({}, state), { errors: Object.assign(Object.assign({}, state.errors), { [action.payload.field]: undefined }), values: Object.assign(Object.assign({}, state.values), { [action.payload.field]: undefined }), validations: Object.assign(Object.assign({}, state.validations), { [action.payload.field]: undefined }) });
+            newState = Object.assign(Object.assign({}, state), { errors: Object.assign(Object.assign({}, state.errors), { [action.payload.field]: undefined }), values: Object.assign(Object.assign({}, currentValues), { [action.payload.field]: undefined }), validations: Object.assign(Object.assign({}, state.validations), { [action.payload.field]: undefined }) });
             break;
         case 'CLEAR':
-            newState = Object.assign(Object.assign({}, state), { errors: {}, dirty: {}, values: Object.assign({}, action.payload.initialValue) });
+            newState = Object.assign(Object.assign({}, state), { errors: {}, dirty: {}, values: Object.assign({}, action.payload.initialValues) });
             break;
@@ -115,4 +117,5 @@ case 'SET_DIRTY':
     return newState;
-}
-const useFormReducer = (initialValue = {}, onChange) => {
+};
+function useFormReducer(initialValues, onChange) {
+    const reducer = (0, react_1.useCallback)(createReducer(), []);
     const [state, action] = (0, react_1.useReducer)(reducer, {
@@ -123,7 +126,8 @@ validations: {},
         forcedErrors: {},
-        values: initialValue,
+        values: initialValues || {},
         valid: true,
     });
     const getValue = (field) => {
-        return state.values[field] || '';
+        var _a;
+        return (_a = state.values) === null || _a === void 0 ? void 0 : _a[field];
     };
@@ -169,3 +173,3 @@ const updateValue = (field, value) => {
             type: 'CLEAR',
-            payload: { initialValue },
+            payload: { initialValues },
             onChange,
@@ -204,6 +208,6 @@ });
         setError });
-};
-const useForm = () => {
+}
+function useForm() {
     return (0, react_1.useContext)(FormContext);
-};
+}
 exports.useForm = useForm;
@@ -224,5 +228,5 @@ const REQUIRED_VALIDATION = (errorMessage = 'Required field.') => (value) => !value ? errorMessage : '';
 exports.EMAIL_VALIDATION = EMAIL_VALIDATION;
-const useField = (props) => {
+function useField(props) {
     const { name } = props;
-    const { errors, getValue, isDirty, setDirty, updateValue, addField, removeField, submitted, submit, submitting, valid, } = (0, exports.useForm)();
+    const { errors, getValue, isDirty, setDirty, updateValue, addField, removeField, submitted, submit, submitting, valid, } = useForm();
     let validation = props.validation
@@ -280,5 +284,5 @@ ? Array.isArray(props.validation)
     return payload;
-};
+}
 exports.useField = useField;
-const Form = (props) => {
+function Form(props) {
     const reducer = useFormReducer(props.initialValues, props.onChange);
@@ -288,33 +292,39 @@ const [submitted, setSubmitted] = (0, react_1.useState)(false);
     const onSubmit = (mode) => {
+        var _a;
         setSubmitted(true);
         if (props.onSubmit) {
             setSubmitting(true);
-            props.onSubmit &&
-                props.onSubmit({
-                    valid: reducer.valid,
-                    values: reducer.values,
-                    errors: reducer.errors,
-                    onFinish: (clear) => {
-                        setSubmitting(false);
-                        if (clear) {
-                            reducer.clear();
-                            setSubmitted(false);
-                        }
-                    },
-                    setError: reducer.setError,
-                }, mode);
+            (_a = props.onSubmit) === null || _a === void 0 ? void 0 : _a.call(props, {
+                valid: reducer.valid,
+                values: reducer.values,
+                errors: reducer.errors,
+                onFinish: (clear) => {
+                    setSubmitting(false);
+                    if (clear) {
+                        reducer.clear();
+                        setSubmitted(false);
+                    }
+                },
+                setError: reducer.setError,
+            }, mode);
         }
     };
-    const value = Object.assign(Object.assign({}, reducer), { submitted, submitting, submit: onSubmit });
+    const value = Object.assign(Object.assign({}, reducer), { submitted,
+        submitting, submit: onSubmit, inForm: true });
     return (react_1.default.createElement(FormContext.Provider, { value: value }, typeof props.children === 'function'
         ? props.children(value)
         : props.children));
-};
-const turnIntoField = (Component, defaultErrorMessages) => {
+}
+exports.Form = Form;
+function GenericForm(props) {
+    return react_1.default.createElement(Form, Object.assign({}, props));
+}
+exports.GenericForm = GenericForm;
+function turnIntoField(Component, defaultErrorMessages) {
     return (props) => {
-        const fieldProps = (0, exports.useField)(Object.assign(Object.assign({}, props), { defaultErrorMessages }));
+        const fieldProps = useField(Object.assign(Object.assign({}, props), { defaultErrorMessages }));
         return react_1.default.createElement(Component, Object.assign({}, props, fieldProps));
     };
-};
+}
 exports.turnIntoField = turnIntoField;
 exports.default = Form;

package.json

 {
   "name": "formact",
-  "version": "3.0.5",
+  "version": "3.0.6",
   "description": "Context for React form components with validation",
@@ -28,3 +28,3 @@ "scripts": {
   },
-  "dependencies": {
+  "devDependencies": {
     "@types/react": "^17.0.19",
@@ -31,0 +31,0 @@ "typescript": "^4.4.2"

New alerts

No README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

15435

increased by5.83%

Dependency count

1

decreased by-66.67%

Lines of code

402

increased by4.42%

Worsened metrics

Dev dependency count

2

increased byInfinity%

Number of package files

3

decreased by-25%

Number of medium quality alerts

2

increased by100%

Number of lines in readme file

0

decreased by-100%

Dependency changes

• - Removed@types/react@^17.0.19

• - Removedtypescript@^4.4.2

• - Removed@types/prop-types@15.7.12(transitive)

• - Removed@types/react@17.0.80(transitive)

• - Removed@types/scheduler@0.16.8(transitive)

• - Removedcsstype@3.1.3(transitive)

• - Removedtypescript@4.9.5(transitive)