react-form-manage 1.0.8-beta.26 → 1.0.8-beta.27

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.0.8-beta.27] - 2026-02-04
+
+### Features
+- Add `useWatchNormalize` hook for watching and normalizing form data
+- Support custom normalization functions for automatic value transformation
+- Simplifies data format conversion during form value watching
+
 ## [1.0.8-beta.25] - 2026-02-04
 
 ### Changes

package/dist/providers/Form.d.ts

@@ -22,6 +22,7 @@ declare namespace Form {
     var useForm: typeof import("./Form").useForm;
     var Item: typeof FormItem;
     var useWatch: typeof import("./Form").useWatch;
+    var useWatchNormalized: typeof import("./Form").useWatchNormalized;
     var useSubmitDataWatch: typeof import("./Form").useSubmitDataWatch;
     var useFormStateWatch: <T = any>(formNameOrFormInstance?: string | PublicFormInstance<T>) => any;
     var useFormItemStateWatch: <T = any>(nameOrFormItemId: string, formNameOrFormInstance?: string | PublicFormInstance<T>) => UseFormItemStateWatchReturn;
@@ -30,6 +31,11 @@ export default Form;
 export declare function useFormContext(): any;
 export declare function useForm<T = any>(formNameOrFormInstance?: string | PublicFormInstance<T>): PublicFormInstance<T>[];
 export declare function useWatch<T = any>(name: keyof T & string, formNameOrFormInstance?: string | PublicFormInstance<T>): T[keyof T] | undefined;
+export declare function useWatchNormalized<T, TFn extends (v: any) => any>({ name, normalizeFn, formNameOrFormInstance, }: {
+    name: keyof T & string;
+    normalizeFn: TFn;
+    formNameOrFormInstance?: string | PublicFormInstance<T>;
+}): ReturnType<TFn>;
 export declare function useSubmitDataWatch<T = any>({ formNameOrFormInstance, triggerWhenChange, mapFn, }: {
     formNameOrFormInstance?: string | PublicFormInstance<T>;
     triggerWhenChange?: boolean;

package/dist/providers/Form.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cloneDeep, filter, get, isEqual, isNil, isPlainObject, last, set, uniqBy } from "lodash";
 import { useTask } from "minh-custom-hooks-release";
-import { createContext, useContext, useEffect, useState } from "react";
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
 import { flushSync } from "react-dom";
 import { useShallow } from "zustand/react/shallow";
 import FormItem from "../components/Form/FormItem";
@@ -333,6 +333,17 @@ function useWatch(name, formNameOrFormInstance) {
   });
   return value;
 }
+function useWatchNormalized({ name, normalizeFn, formNameOrFormInstance }) {
+  const [formInstance] = useForm(formNameOrFormInstance);
+  const rawValue = useFormStore((state) => {
+    var _a;
+    return state.getFormItemValue((_a = formInstance == null ? void 0 : formInstance.formName) != null ? _a : formNameOrFormInstance, name);
+  });
+  const normalizedValue = useMemo(() => {
+    return normalizeFn(rawValue);
+  }, [rawValue, normalizeFn]);
+  return normalizedValue;
+}
 function useSubmitDataWatch({ formNameOrFormInstance, triggerWhenChange = false, mapFn }) {
   const [formInstance] = useForm(formNameOrFormInstance);
   const value = useFormStore((state) => {
@@ -368,6 +379,7 @@ const useFormItemStateWatch = (nameOrFormItemId, formNameOrFormInstance) => {
 Form.useForm = useForm;
 Form.Item = FormItem;
 Form.useWatch = useWatch;
+Form.useWatchNormalized = useWatchNormalized;
 Form.useSubmitDataWatch = useSubmitDataWatch;
 Form.useFormStateWatch = useFormStateWatch;
 Form.useFormItemStateWatch = useFormItemStateWatch;
@@ -379,5 +391,6 @@ export {
   useFormItemStateWatch,
   useFormStateWatch,
   useSubmitDataWatch,
-  useWatch
+  useWatch,
+  useWatchNormalized
 };

package/dist/test/TestWatchNormalize.d.ts

@@ -0,0 +1,3 @@
+type Props = {};
+declare function TestWatchNormalize({}: Props): import("react/jsx-runtime").JSX.Element;
+export default TestWatchNormalize;

package/dist/test/TestWatchNormalize.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Input } from "antd";
+import React from "react";
+import Form from "../providers/Form";
+function TestWatchNormalize({}) {
+  const normalizeData = Form.useWatchNormalized({
+    name: "normalizeItem",
+    formNameOrFormInstance: "testNormalize",
+    normalizeFn: (value) => {
+      if (typeof value === "string") {
+        return value.toUpperCase();
+      }
+      return value;
+    }
+  });
+  React.useEffect(() => {
+  }, [normalizeData]);
+  return _jsxs(Form, { formName: "testNormalize", children: ["Test Watch Normalize", _jsx(Form.Item, { name: "normalizeItem", children: _jsx(Input, {}) })] });
+}
+var stdin_default = TestWatchNormalize;
+export {
+  stdin_default as default
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-form-manage",
-  "version": "1.0.8-beta.26",
+  "version": "1.0.8-beta.27",
   "description": "Lightweight React form management with list and listener support.",
   "license": "MIT",
   "type": "module",

package/src/App.tsx

@@ -1,11 +1,11 @@
 import { Input } from "antd";
 import { motion } from "framer-motion";
 import Form from "./providers/Form";
-import CommonTest from "./test/CommonTest";
 import TestListener from "./test/TestListener";
 import TestWrapperFormItem from "./test/TestWrapperFormItem";
 
 import { Form as AntdForm } from "antd";
+import TestWatchNormalize from "./test/TestWatchNormalize";
 
 function TestFormWatch() {
   const watchValue = Form.useWatch("numericCode");
@@ -30,11 +30,13 @@ const App = () => {
       </AntdForm>
 
       {/* Hidden Test */}
-      <CommonTest />
+      {/* <CommonTest /> */}
       {/* <Form formName="TestDialog" >
        <TestDialog />
      </Form> */}
 
+      <TestWatchNormalize />
+
       <TestListener />
       <TestWrapperFormItem />
     </div>

package/src/providers/Form.tsx

@@ -11,7 +11,7 @@ import {
 } from "lodash";
 import { useTask } from "minh-custom-hooks-release";
 import type { ComponentType, FormHTMLAttributes, ReactNode } from "react";
-import { createContext, useContext, useEffect, useState } from "react";
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
 import { flushSync } from "react-dom";
 import { useShallow } from "zustand/react/shallow"; // Import useShallow
 import FormItem from "../components/Form/FormItem";
@@ -537,6 +537,30 @@ export function useWatch<T = any>(
   return value as T[keyof T] | undefined;
 }
 
+export function useWatchNormalized<T, TFn extends (v: any) => any>({
+  name,
+  normalizeFn,
+  formNameOrFormInstance,
+}: {
+  name: keyof T & string;
+  normalizeFn: TFn;
+  formNameOrFormInstance?: string | PublicFormInstance<T>;
+}) {
+  const [formInstance] = useForm<T>(formNameOrFormInstance as any);
+  const rawValue = useFormStore((state) => {
+    return state.getFormItemValue(
+      formInstance?.formName ?? (formNameOrFormInstance as any),
+      name as string,
+    );
+  });
+
+  const normalizedValue = useMemo(() => {
+    return normalizeFn(rawValue);
+  }, [rawValue, normalizeFn]);
+
+  return normalizedValue as ReturnType<TFn>;
+}
+
 export function useSubmitDataWatch<T = any>({
   formNameOrFormInstance,
   triggerWhenChange = false,
@@ -605,6 +629,7 @@ export const useFormItemStateWatch = <T = any,>(
 Form.useForm = useForm;
 Form.Item = FormItem;
 Form.useWatch = useWatch;
+Form.useWatchNormalized = useWatchNormalized;
 Form.useSubmitDataWatch = useSubmitDataWatch;
 Form.useFormStateWatch = useFormStateWatch;
 Form.useFormItemStateWatch = useFormItemStateWatch;

package/src/test/TestWatchNormalize.tsx

@@ -0,0 +1,32 @@
+import { Input } from "antd";
+import React from "react";
+import Form from "../providers/Form";
+
+type Props = {};
+
+function TestWatchNormalize({}: Props) {
+  const normalizeData = Form.useWatchNormalized({
+    name: "normalizeItem",
+    formNameOrFormInstance: "testNormalize",
+    normalizeFn: (value) => {
+      if (typeof value === "string") {
+        return value.toUpperCase();
+      }
+      return value;
+    },
+  });
+
+  React.useEffect(() => {
+    console.log("Normalized Data: ", normalizeData);
+  }, [normalizeData]);
+  return (
+    <Form formName="testNormalize">
+      Test Watch Normalize
+      <Form.Item name="normalizeItem">
+        <Input />
+      </Form.Item>
+    </Form>
+  );
+}
+
+export default TestWatchNormalize;