@iwsio/forms - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

dist/FieldManager.d.ts

 import { PropsWithChildren } from 'react';
 import { ValidatedFormProps } from './ValidatedForm';
+import { FieldValues } from './types';
 export type FieldManagerProps = PropsWithChildren & {
-    fields: Record<string, any>;
+    fields: FieldValues;
     defaultValues?: Record<string, string>;
-    onValidSubmit?: (fields: Record<string, any>) => void;
+    onValidSubmit?: (fields: FieldValues) => void;
 } & Omit<ValidatedFormProps, 'onValidSubmit'>;
@@ -17,5 +18,5 @@ /**
 } & {
-    fields: Record<string, any>;
+    fields: FieldValues;
     defaultValues?: Record<string, string>;
-    onValidSubmit?: (fields: Record<string, any>) => void;
+    onValidSubmit?: (fields: FieldValues) => void;
 } & Omit<ValidatedFormProps, "onValidSubmit"> & import("react").RefAttributes<HTMLFormElement>>;

dist/FieldManagerForm.js

@@ -21,3 +21,6 @@ "use strict";
     var { children } = _a, props = __rest(_a, ["children"]);
-    const { fields, onValidSubmit } = (0, useFieldManager_1.useFieldManager)();
+    const { fields, onValidSubmit, setReportValidation } = (0, useFieldManager_1.useFieldManager)();
+    const handleLocalSubmit = () => {
+        setReportValidation(true);
+    };
     const handleLocalValidSubmit = () => {
@@ -28,3 +31,3 @@ if (onValidSubmit != null) {
     };
-    return (0, jsx_runtime_1.jsx)(ValidatedForm_1.ValidatedForm, Object.assign({ ref: ref }, props, { onValidSubmit: handleLocalValidSubmit, children: children }));
+    return (0, jsx_runtime_1.jsx)(ValidatedForm_1.ValidatedForm, Object.assign({ ref: ref }, props, { onValidSubmit: handleLocalValidSubmit, onSubmit: handleLocalSubmit, children: children }));
 });
@@ -31,0 +34,0 @@ exports.FieldManagerForm.displayName = 'FieldManagerForm';

dist/Input.js

@@ -31,2 +31,4 @@ "use strict";
             onChange(e);
+        if (!localRef.current.validity.valid)
+            localSetError(localRef.current.validationMessage);
     };
@@ -39,2 +41,6 @@ const handleInvalid = (e) => {
     (0, react_1.useEffect)(() => {
+        if (!localRef.current.validity.valid)
+            localSetError(localRef.current.validationMessage);
+    }, []);
+    (0, react_1.useEffect)(() => {
         if (fieldError !== localRef.current.validationMessage) {
@@ -41,0 +47,0 @@ localRef.current.setCustomValidity(fieldError || '');

dist/Select.js

@@ -31,2 +31,4 @@ "use strict";
             onChange(e);
+        if (!localRef.current.validity.valid)
+            localSetError(localRef.current.validationMessage);
     };
@@ -39,2 +41,6 @@ const handleInvalid = (e) => {
     (0, react_1.useEffect)(() => {
+        if (!localRef.current.validity.valid)
+            localSetError(localRef.current.validationMessage);
+    }, []);
+    (0, react_1.useEffect)(() => {
         if (fieldError !== localRef.current.validationMessage) {
@@ -41,0 +47,0 @@ localRef.current.setCustomValidity(fieldError || '');

dist/TextArea.js

@@ -31,2 +31,4 @@ "use strict";
             onChange(e);
+        if (!localRef.current.validity.valid)
+            localSetError(localRef.current.validationMessage);
     };
@@ -39,2 +41,6 @@ const handleInvalid = (e) => {
     (0, react_1.useEffect)(() => {
+        if (!localRef.current.validity.valid)
+            localSetError(localRef.current.validationMessage);
+    }, []);
+    (0, react_1.useEffect)(() => {
         if (fieldError !== localRef.current.validationMessage) {
@@ -41,0 +47,0 @@ localRef.current.setCustomValidity(fieldError || '');

dist/types.d.ts

@@ -9,2 +9,10 @@ import { ChangeEvent, Dispatch, SetStateAction } from 'react';
     /**
+     * Indicates whether InputFields within should render validation errors based on the fieldError state. This is unrelated to the native browser `reportValidity()` function.
+     */
+    reportValidation: boolean;
+    /**
+     * Set report validation manually. This reportValidation is the managed toggle that indicates whether to render validation error messages based on fieldError state. This is unrelated to the native browser `reportValidity()` function.
+     */
+    setReportValidation: Dispatch<SetStateAction<boolean>>;
+    /**
      * Reset a form's error and value states.
@@ -28,2 +36,8 @@ */
     /**
+     * Combines `reportValidation` and the `fieldErrors` state to determine if field requested should show an error.
+     * @param name Field input name.
+     * @returns Field error if it has one and should be reported.
+     */
+    checkFieldError: (name: string) => string | undefined;
+    /**
      * Set a single field's error
@@ -30,0 +44,0 @@ * @param key Field name key

dist/useFieldState.js

@@ -15,2 +15,3 @@ "use strict";
     const defaultFieldValues = defaultValues != null ? (0, defaults_1.defaults)((0, omitBy_1.omitBy)(fields, (v) => v == null || v === ''), defaultValues) : fields;
+    const [reportValidation, setReportValidation] = (0, react_1.useState)(false);
     const [fieldValues, setFieldValues] = (0, react_1.useState)(fields);
@@ -25,5 +26,11 @@ const [fieldErrors, setFieldErrors] = (0, react_1.useState)({});
     };
+    const checkFieldError = (key) => {
+        if (reportValidation && fieldErrors[key] != null && fieldErrors[key] !== '')
+            return fieldErrors[key];
+        return undefined;
+    };
     function reset() {
         setFieldErrors({});
         setFieldValues(defaultFieldValues);
+        setReportValidation(false);
     }
@@ -46,13 +53,16 @@ const handleChange = (e) => {
     return {
+        fieldErrors,
+        checkFieldError,
+        fields: fieldValues,
+        handleChange,
+        onChange: handleChange,
+        onValidSubmit: localOnValidSubmit,
+        reportValidation,
         reset,
-        fields: fieldValues,
         setField,
-        fieldErrors,
         setFieldError,
         setFieldErrors,
-        handleChange,
-        onChange: handleChange,
-        onValidSubmit: localOnValidSubmit
+        setReportValidation
     };
 }
 exports.useFieldState = useFieldState;

package.json

 {
   "name": "@iwsio/forms",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Simple library with useful React forms components and browser validation.",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -101,2 +101,5 @@ # @iwsio/forms
 
+This can be manually styled as well. Use `useFieldManager()` to get a check function `checkFieldError(fieldName: string)`. The result of this function will indicate whether there is an error and it is "reportable" (meaning the form has been submitted at least once). The real-time error is accessible using the `fieldErrors` state from the hook as well.
+
+
 Here is a quick example:
@@ -110,3 +113,3 @@
   return (
-    <FieldManager fields={{ field1: "", field2: "", field3: "" }} onValidSubmit={handleValidSubmit} className="custom-form-css">
+    <FieldManager fields={{ field1: "", field2: "", field3: "" }} onValidSubmit={handleValidSubmit} className="custom-form-css" nativeValidation>
       <InputField type="text" name="field1" required pattern="^\w+$" />
@@ -113,0 +116,0 @@ <InputField

No alert changes

Improved metrics

Total package byte prevSize

39467

increased by6.85%

Lines of code

690

increased by7.14%

Number of lines in readme file

134

increased by2.29%

No dependency changes