Feat(useForm): export setDirty method

wellyshen · Jan 12, 2021 · facc86e · facc86e
1 parent d90a477
commit facc86e
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 18 deletions.
diff --git a/.changeset/few-ligers-sniff.md b/.changeset/few-ligers-sniff.md
@@ -0,0 +1,5 @@
+---
+"react-cool-form": patch
+---
+
+Feat(useForm): export `setDirty` method
diff --git a/docs/api-reference/use-form.md b/docs/api-reference/use-form.md
@@ -250,6 +250,25 @@ We can clear the touched of a field by the following way:
 setTouched("fieldName", false); // The touched will be unset: { fieldName: true } → {}
 ```
 
+### setDirty
+
+`(name: string, isDirty?: boolean) => void`
+
+This method allows us to manually set/clear the dirty of a field. Useful for creating custom field dirty handlers.
+
+```js
+const { setDirty } = useForm();
+
+// Common use case
+setDirty("fieldName");
+```
+
+We can clear the dirty of a field by the following way:
+
+```js
+setDirty("fieldName", false); // The dirty will be unset: { fieldName: true } → {}
+```
+
 ### setError
 
 `(name: string, error: any | Function) => void`

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -71,6 +71,7 @@ interface Options<V> {
  formState: FormState<V>;
  setValue: SetValue;
  setTouched: SetTouched;
+ setDirty: SetDirty;
  setError: SetError;
  clearErrors: ClearErrors;
  runValidation: RunValidation;
@@ -148,6 +149,10 @@ export interface SetTouched {
  (name: string, isTouched?: boolean, shouldValidate?: boolean): void;
 }
 
+export interface SetDirty {
+ (name: string, isDirty?: boolean): void;
+}
+
 export interface SetError {
  (name: string, error?: any | ((previousError?: any) => any)): void;
 }
@@ -231,6 +236,7 @@ export interface Return<V> {
  getState: GetState;
  setValue: SetValue;
  setTouched: SetTouched;
+ setDirty: SetDirty;
  setError: SetError;
  clearErrors: ClearErrors;
  runValidation: RunValidation;

diff --git a/src/types/react-cool-form.d.ts b/src/types/react-cool-form.d.ts
@@ -9,6 +9,7 @@ declare module "react-cool-form" {
  formState: FormState<V>;
  setValue: SetValue;
  setTouched: SetTouched;
+ setDirty: SetDirty;
  setError: SetError;
  clearErrors: ClearErrors;
  runValidation: RunValidation;
@@ -41,6 +42,10 @@ declare module "react-cool-form" {
  (name: string, isTouched?: boolean, shouldValidate?: boolean): void;
  }
 
+ interface SetDirty {
+ (name: string, isDirty?: boolean): void;
+ }
+
  interface SetError {
  (name: string, error: any | PreviousErrorFn): void;
  }
@@ -200,6 +205,7 @@ declare module "react-cool-form" {
  getState: GetState;
  setValue: SetValue;
  setTouched: SetTouched;
+ setDirty: SetDirty;
  setError: SetError;
  clearErrors: ClearErrors;
  runValidation: RunValidation;

diff --git a/src/useForm.ts b/src/useForm.ts
@@ -20,6 +20,7 @@ import {
  Reset,
  Return,
  RunValidation,
+ SetDirty,
  SetError,
  SetTouched,
  SetValue,
@@ -544,20 +545,6 @@ export default <V extends FormValues = FormValues>({
  [validateField, validateForm]
  );
 
- const setDirty = useCallback(
- (name: string) => {
- if (
- get(stateRef.current.values, name) !==
- get(initialStateRef.current.values, name)
- ) {
- setStateRef(`dirty.${name}`, true);
- } else {
- handleUnset("dirty", `dirty.${name}`, stateRef.current.dirty, name);
- }
- },
- [handleUnset, setStateRef, stateRef]
- );
-
  const setTouched = useCallback<SetTouched>(
  (name, isTouched = true, shouldValidate = validateOnBlur) => {
  if (isTouched) {
@@ -592,6 +579,27 @@ export default <V extends FormValues = FormValues>({
  [setTouched, validateOnChange]
  );
 
+ const setDirty = useCallback<SetDirty>(
+ (name, isDirty = true) => {
+ if (isDirty) {
+ setStateRef(`dirty.${name}`, true);
+ } else {
+ handleUnset("dirty", `dirty.${name}`, stateRef.current.dirty, name);
+ }
+ },
+ [handleUnset, setStateRef, stateRef]
+ );
+
+ const setDirtyIfNeeded = useCallback(
+ (name: string) =>
+ setDirty(
+ name,
+ get(stateRef.current.values, name) !==
+ get(initialStateRef.current.values, name)
+ ),
+ [setDirty, stateRef]
+ );
+
  const setValue = useCallback<SetValue>(
  (
  name,
@@ -614,12 +622,12 @@ export default <V extends FormValues = FormValues>({
  setNodeValue(name, value);
 
  if (shouldTouched) setTouched(name, true, false);
- if (shouldDirty) setDirty(name);
+ if (shouldDirty) setDirtyIfNeeded(name);
  if (shouldValidate) validateFieldWithLowPriority(name);
  },
  [
  handleUnset,
- setDirty,
+ setDirtyIfNeeded,
  setNodeValue,
  setStateRef,
  setTouched,
@@ -634,6 +642,7 @@ export default <V extends FormValues = FormValues>({
  formState: stateRef.current,
  setValue,
  setTouched,
+ setDirty,
  setError,
  clearErrors,
  runValidation,
@@ -645,6 +654,7 @@ export default <V extends FormValues = FormValues>({
  // @ts-expect-error
  reset,
  runValidation,
+ setDirty,
  setError,
  setTouched,
  setValue,
@@ -728,11 +738,16 @@ export default <V extends FormValues = FormValues>({
  const handleChangeEvent = useCallback(
  (name: string, value: any) => {
  setStateRef(`values.${name}`, value);
- setDirty(name);
+ setDirtyIfNeeded(name);
 
  if (validateOnChange) validateFieldWithLowPriority(name);
  },
- [setDirty, setStateRef, validateFieldWithLowPriority, validateOnChange]
+ [
+ setDirtyIfNeeded,
+ setStateRef,
+ validateFieldWithLowPriority,
+ validateOnChange,
+ ]
  );
 
  const controller = useCallback<Controller<V>>(
@@ -926,6 +941,7 @@ export default <V extends FormValues = FormValues>({
  getState,
  setValue,
  setTouched,
+ setDirty,
  setError,
  clearErrors,
  runValidation,