remix-forms - npm Package Compare versions

Comparing version 0.13.2 to 0.14.0

lib/Form.d.ts

@@ -7,3 +7,3 @@ import React from 'react';
 import { FieldProps, FieldType } from './createField';
-import { Fetcher } from '@remix-run/react/transition';
+import { Fetcher, Transition } from '@remix-run/react/transition';
 export declare type Field<SchemaType> = {
@@ -39,2 +39,9 @@ shape: ZodTypeAny;
 } & UseFormReturn<z.infer<Schema>, any>) => React.ReactNode;
+declare type OnTransition<Schema extends SomeZodObject> = (helpers: {
+    transition: (Fetcher<any> & {
+        Form: any;
+        submit: any;
+        load: (href: string) => void;
+    }) | Transition;
+} & UseFormReturn<z.infer<Schema>, any>) => void;
 export declare type FormProps<Schema extends SomeZodObject> = {
@@ -71,5 +78,6 @@ component?: React.ForwardRefExoticComponent<AllRemixFormProps>;
     beforeChildren?: React.ReactNode;
+    onTransition?: OnTransition<Schema>;
     children?: Children<Schema>;
 } & Omit<AllRemixFormProps, 'method' | 'children'>;
-export declare function Form<Schema extends SomeZodObject>({ component, fetcher, mode, renderField, fieldComponent, globalErrorsComponent: Errors, errorComponent: Error, fieldErrorsComponent, labelComponent, inputComponent, multilineComponent, selectComponent, checkboxComponent, checkboxWrapperComponent, buttonComponent: Button, buttonLabel, method, schema, beforeChildren, children: childrenFn, labels, placeholders, options, hiddenFields, multiline, errors: errorsProp, values: valuesProp, ...props }: FormProps<Schema>): JSX.Element;
+export declare function Form<Schema extends SomeZodObject>({ component, fetcher, mode, renderField, fieldComponent, globalErrorsComponent: Errors, errorComponent: Error, fieldErrorsComponent, labelComponent, inputComponent, multilineComponent, selectComponent, checkboxComponent, checkboxWrapperComponent, buttonComponent: Button, buttonLabel, method, schema, beforeChildren, onTransition, children: childrenFn, labels, placeholders, options, hiddenFields, multiline, errors: errorsProp, values: valuesProp, ...props }: FormProps<Schema>): JSX.Element;
 export {};

lib/Form.js

@@ -44,3 +44,3 @@ "use strict";
 };
-function Form({ component = react_2.Form, fetcher, mode = 'onSubmit', renderField = defaultRenderField_1.default, fieldComponent, globalErrorsComponent: Errors = 'div', errorComponent: Error = 'div', fieldErrorsComponent, labelComponent, inputComponent, multilineComponent, selectComponent, checkboxComponent, checkboxWrapperComponent, buttonComponent: Button = 'button', buttonLabel = 'OK', method = 'post', schema, beforeChildren, children: childrenFn, labels, placeholders, options, hiddenFields, multiline, errors: errorsProp, values: valuesProp, ...props }) {
+function Form({ component = react_2.Form, fetcher, mode = 'onSubmit', renderField = defaultRenderField_1.default, fieldComponent, globalErrorsComponent: Errors = 'div', errorComponent: Error = 'div', fieldErrorsComponent, labelComponent, inputComponent, multilineComponent, selectComponent, checkboxComponent, checkboxWrapperComponent, buttonComponent: Button = 'button', buttonLabel = 'OK', method = 'post', schema, beforeChildren, onTransition, children: childrenFn, labels, placeholders, options, hiddenFields, multiline, errors: errorsProp, values: valuesProp, ...props }) {
     var _a;
@@ -57,10 +57,14 @@ const Component = fetcher ? fetcher.Form : component;
     form.watch();
-    const { errors: formErrors } = form.formState;
+    const { formState } = form;
+    const { errors: formErrors, isValid } = formState;
     const [disabled, setDisabled] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => {
         const shouldDisable = mode === 'onChange' || mode === 'all'
-            ? transition.state === 'submitting' || !form.formState.isValid
+            ? transition.state === 'submitting' || !isValid
             : transition.state === 'submitting';
         setDisabled(shouldDisable);
-    }, [transition.state, form.formState.isValid]);
+    }, [transition.state, formState]);
+    (0, react_1.useEffect)(() => {
+        onTransition && onTransition({ transition, ...form });
+    }, [transition.state]);
     const onSubmit = (event) => {
@@ -67,0 +71,0 @@ form.handleSubmit(() => submit(event.target, { replace: true }))(event);

package.json

 {
   "name": "remix-forms",
-  "version": "0.13.2",
+  "version": "0.14.0",
   "description": "Magically create forms + actions in Remix!",
@@ -5,0 +5,0 @@ "main": "./lib/index.js",

No alert changes

Improved metrics

Total package byte prevSize

49453

increased by0.96%

Lines of code

849

increased by1.56%

No dependency changes