revdev-components 0.101.0 → 0.103.0

package/build/form/index.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { FormInstance } from "antd/lib/form";
 import { FieldData } from "../interfaces";
+type onValuesChangeType<T> = (changedValues: Partial<T>, values: T) => void;
 export interface FormOptions {
     valid: boolean;
 }
@@ -8,11 +9,12 @@ export interface AppFormProps<T = any> {
     children?: React.ReactNode | ((options: FormOptions) => React.ReactNode);
     className?: string;
     onFinish?: (values: T) => void;
-    onValuesChange?: (changedValues: Partial<T>, values: T) => void;
+    onValuesChange?: onValuesChangeType<T>;
     onFieldsChange?: (changedFields: FieldData[], allFields: FieldData[]) => void;
     form?: FormInstance;
     onValid?: (valid: boolean) => void;
     initialValues?: Partial<T>;
     debug?: boolean;
 }
-export declare function AppForm<T = any>({ form: propForm, children, className, onFinish, onValuesChange, onFieldsChange, onValid, initialValues, debug, }: AppFormProps<T>): React.ReactElement<AppFormProps<T>>;
+export declare function AppForm<T extends object = any>({ form: propForm, children, className, onFinish, onValuesChange, onFieldsChange, onValid, initialValues, debug, }: AppFormProps<T>): React.ReactElement<AppFormProps<T>>;
+export {};

package/build/index.js

@@ -4712,6 +4712,75 @@ var s$s = {"root":"index-module_root__gtTIa","action":"index-module_action__pOSd
 
 var CONSOLE_COLOR = "background:rgb(28, 46, 82); color:rgb(231, 231, 231)";
 
+// export function useDebounceCallback<T extends (...args: any[]) => any>(delay: number, callback: T, deps: DependencyList = []): DebouncedFunc<T> {
+//   return useCallback(debounce(callback, delay), deps);
+// }
+var useDebounceEffect = function (delay, effect, deps) {
+    if (deps === void 0) { deps = []; }
+    React.useEffect(function () {
+        var handler = setTimeout(function () { return effect(); }, delay);
+        return function () { return clearTimeout(handler); };
+    }, __spreadArray(__spreadArray([], (deps || []), true), [delay], false));
+};
+
+function useAppFormRules() {
+    return React.useMemo(function () {
+        return {
+            required: function (message) { return ({ required: true, message: message }); },
+            email: function (message) { return ({ type: "email", message: message }); },
+            onlyNumber: function (message) { return ({ pattern: /^(\d*[.])?\d+$/i, message: message }); },
+            onlyPositiveInteger: function (message) { return ({ pattern: /^\d+$/i, message: message }); },
+            onlyKey: function (message) { return ({ pattern: /^([a-z\d]*[-])*[a-z\d]+$/i, message: message }); },
+            maxLength: function (message, length) { return ({ max: length, message: message }); },
+            minLength: function (message, length) { return ({ min: length, message: message }); },
+            length: function (message, length) { return ({ len: length, message: message }); },
+        };
+    }, []);
+}
+
+function useFormValues() {
+    var _a = React.useState({}), values = _a[0], setValues = _a[1];
+    var handleChange = React.useCallback(function (_value, allValues) {
+        setValues(allValues);
+    }, []);
+    return [values, handleChange];
+}
+function useFormValid() {
+    var _a = React.useState(false), valid = _a[0], setValid = _a[1];
+    var handleValid = React.useCallback(function (newValid) {
+        setValid(newValid);
+    }, []);
+    return [valid, handleValid];
+}
+
+function useDidMount() {
+    var _a = React.useState(false), mount = _a[0], setMount = _a[1];
+    React.useEffect(function () {
+        setMount(true);
+    }, []);
+    return mount;
+}
+function usePrevious(value) {
+    var ref = React.useRef();
+    React.useEffect(function () {
+        ref.current = value;
+    }, [value]);
+    return ref === null || ref === void 0 ? void 0 : ref.current;
+}
+
+function useRouterQuery() {
+    var query = router.useRouter().query;
+    return query;
+}
+
+function useSuccessMutation(response, successCallback) {
+    React.useEffect(function () {
+        if (response.isSuccess) {
+            successCallback();
+        }
+    }, [response.isSuccess]);
+}
+
 function useForm(form) {
     var newForm = antd.Form.useForm()[0];
     return form ? form : newForm;
@@ -4720,12 +4789,25 @@ function AppForm(_a) {
     var propForm = _a.form, children = _a.children, className = _a.className, onFinish = _a.onFinish, onValuesChange = _a.onValuesChange, onFieldsChange = _a.onFieldsChange, onValid = _a.onValid, initialValues = _a.initialValues, debug = _a.debug;
     var form = useForm(propForm);
     var _b = React.useState(false), valid = _b[0], setValid = _b[1];
-    var values = antd.Form.useWatch([], form);
+    var _c = useFormValues(), values = _c[0], setValues = _c[1];
     React.useEffect(function () {
+        if (debug) {
+            console.info("%cform", CONSOLE_COLOR, "validation", "called");
+        }
         form
-            .validateFields({ validateOnly: true })
-            .then(function () { return setValid(true); })
-            .catch(function () { return setValid(false); });
+            .validateFields({ validateOnly: true, dirty: true })
+            .then(function () {
+            if (debug) {
+                console.info("%cform", CONSOLE_COLOR, "validation", "valid");
+            }
+            setValid(true);
+        })
+            .catch(function () {
+            if (debug) {
+                console.info("%cform", CONSOLE_COLOR, "validation", "not valid");
+            }
+            setValid(false);
+        });
     }, [form, values]);
     React.useEffect(function () {
         if (debug) {
@@ -4736,7 +4818,11 @@ function AppForm(_a) {
     React.useEffect(function () {
         console.info("%cform", CONSOLE_COLOR, "values", values);
     }, [values]);
-    return (React.createElement(antd.Form, { form: form, onFinish: onFinish, className: classNames(s$s.root, className), layout: "vertical", onValuesChange: onValuesChange, onFieldsChange: onFieldsChange, initialValues: initialValues }, typeof children === "function" ? children({ valid: valid }) : children));
+    var handleValuesChange = React.useCallback(function (changedValues, values) {
+        setValues(changedValues, values);
+        onValuesChange === null || onValuesChange === void 0 ? void 0 : onValuesChange(changedValues, values);
+    }, [setValues, onValuesChange]);
+    return (React.createElement(antd.Form, { form: form, onFinish: onFinish, className: classNames(s$s.root, className), layout: "vertical", onValuesChange: handleValuesChange, onFieldsChange: onFieldsChange, initialValues: initialValues }, typeof children === "function" ? children({ valid: valid }) : children));
 }
 
 var s$r = {"root":"index-module_root__2S1Jp"};
@@ -4831,75 +4917,6 @@ var SwitchField = function (props) {
         React.createElement(SwitchFieldControl, __assign({}, controlProps))));
 };
 
-// export function useDebounceCallback<T extends (...args: any[]) => any>(delay: number, callback: T, deps: DependencyList = []): DebouncedFunc<T> {
-//   return useCallback(debounce(callback, delay), deps);
-// }
-var useDebounceEffect = function (delay, effect, deps) {
-    if (deps === void 0) { deps = []; }
-    React.useEffect(function () {
-        var handler = setTimeout(function () { return effect(); }, delay);
-        return function () { return clearTimeout(handler); };
-    }, __spreadArray(__spreadArray([], (deps || []), true), [delay], false));
-};
-
-function useAppFormRules() {
-    return React.useMemo(function () {
-        return {
-            required: function (message) { return ({ required: true, message: message }); },
-            email: function (message) { return ({ type: "email", message: message }); },
-            onlyNumber: function (message) { return ({ pattern: /^(\d*[.])?\d+$/i, message: message }); },
-            onlyPositiveInteger: function (message) { return ({ pattern: /^\d+$/i, message: message }); },
-            onlyKey: function (message) { return ({ pattern: /^([a-z\d]*[-])*[a-z\d]+$/i, message: message }); },
-            maxLength: function (message, length) { return ({ max: length, message: message }); },
-            minLength: function (message, length) { return ({ min: length, message: message }); },
-            length: function (message, length) { return ({ len: length, message: message }); },
-        };
-    }, []);
-}
-
-function useFormValues() {
-    var _a = React.useState({}), values = _a[0], setValues = _a[1];
-    var handleChange = React.useCallback(function (_value, allValues) {
-        setValues(allValues);
-    }, []);
-    return [values, handleChange];
-}
-function useFormValid() {
-    var _a = React.useState(false), valid = _a[0], setValid = _a[1];
-    var handleValid = React.useCallback(function (newValid) {
-        setValid(newValid);
-    }, []);
-    return [valid, handleValid];
-}
-
-function useDidMount() {
-    var _a = React.useState(false), mount = _a[0], setMount = _a[1];
-    React.useEffect(function () {
-        setMount(true);
-    }, []);
-    return mount;
-}
-function usePrevious(value) {
-    var ref = React.useRef();
-    React.useEffect(function () {
-        ref.current = value;
-    }, [value]);
-    return ref === null || ref === void 0 ? void 0 : ref.current;
-}
-
-function useRouterQuery() {
-    var query = router.useRouter().query;
-    return query;
-}
-
-function useSuccessMutation(response, successCallback) {
-    React.useEffect(function () {
-        if (response.isSuccess) {
-            successCallback();
-        }
-    }, [response.isSuccess]);
-}
-
 var s$n = {"root":"index-module_root__9GQDU"};
 
 var FormButton = function (_a) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "revdev-components",
-  "version": "0.101.0",
+  "version": "0.103.0",
   "main": "build/index.js",
   "module": "build/index.esm.js",
   "scripts": {