@maif/react-forms 1.1.2 → 1.1.3

package/lib/esm/index.js

@@ -1,14 +1,15 @@
 import * as yup from 'yup';
 import * as React from 'react';
-import React__default, { useState, useRef, useEffect, useImperativeHandle } from 'react';
+import React__default, { useState, useRef, useEffect, useCallback, useImperativeHandle } from 'react';
 import { yupResolver } from '@hookform/resolvers/yup';
 import classNames from 'classnames';
 import deepEqual from 'fast-deep-equal';
 import { Eye, EyeOff, PlusCircle, MinusCircle, Trash2, ChevronDown, ChevronUp, HelpCircle, Loader, Upload } from 'react-feather';
-import { useFormContext, useController, useForm, FormProvider, Controller, useFieldArray, useWatch } from 'react-hook-form';
+import { useFormContext, useController, useWatch, useForm, FormProvider, Controller, useFieldArray } from 'react-hook-form';
 import { DatePicker } from 'react-rainbow-components';
 import ReactToolTip from 'react-tooltip';
 import { v4 } from 'uuid';
+import debounce from 'lodash.debounce';
 import CreatableSelect from 'react-select/creatable';
 import Select from 'react-select';
 import hash$1 from 'object-hash';
@@ -278,7 +279,7 @@ const useHashEffect = (func, deps) => {
         const depsHash = cleanHash(deps);
         const prevDepsHash = cleanHash(prevDeps.current);
         if (depsHash !== prevDepsHash) {
-            prevDeps.current = deps;
+            prevDeps.current = Object.assign({}, deps);
             func();
         }
     }, deps); /* FIXME deps or [deps] ? */
@@ -28107,16 +28108,18 @@ const validate = (flow, schema, value) => {
         abortEarly: false
     });
 };
-const Watcher = ({ options, control, schema, onSubmit, handleSubmit }) => {
+const Watcher = React__default.memo(({ options, control, schema, onSubmit, handleSubmit }) => {
     const data = useWatch({ control });
+    const realSubmit = (d) => handleSubmit(() => {
+        onSubmit(d);
+    })();
+    const debouncedSubmit = useCallback(debounce(realSubmit, 250, { leading: true }), []);
     useHashEffect(() => {
-        if (options.autosubmit) {
-            handleSubmit(() => {
-                onSubmit(cleanOutputArray(data, schema));
-            })();
+        if (options === null || options === void 0 ? void 0 : options.autosubmit) {
+            debouncedSubmit(data);
         }
     }, [data]);
-    if (options.watch) {
+    if (options === null || options === void 0 ? void 0 : options.watch) {
         if (typeof options.watch === 'function') {
             options.watch(cleanOutputArray(data, schema));
         }
@@ -28127,7 +28130,9 @@ const Watcher = ({ options, control, schema, onSubmit, handleSubmit }) => {
         }
     }
     return null;
-};
+}, () => {
+    return true;
+});
 const Form = React__default.forwardRef(function Form({ schema, flow, value, inputWrapper, onSubmit, onError = () => { }, footer, style = {}, className, options = {}, nostyle }, ref) {
     const formFlow = flow || Object.keys(schema);
     const maybeCustomHttpClient = (url, method) => {

package/lib/index.d.ts

@@ -138,7 +138,7 @@ declare type SelectOption = {
 declare const SelectInput: <T extends {
     [x: string]: any;
 }>(props: {
-    possibleValues: T[];
+    possibleValues?: T[] | undefined;
     transformer?: {
         label: string;
         value: string;
@@ -146,10 +146,10 @@ declare const SelectInput: <T extends {
     value?: any;
     defaultValue?: any;
     isMulti?: boolean | undefined;
-    optionsFrom: string | Promise<T[]> | ((param: {
+    optionsFrom?: string | Promise<T[]> | ((param: {
         rawValues: object;
         value: any;
-    }) => string | Promise<T[]>);
+    }) => string | Promise<T[]>) | undefined;
     fetchCondition?: (() => boolean) | undefined;
     id?: string | undefined;
     httpClient?: ((url: string, method: string) => Promise<Response>) | undefined;
@@ -302,24 +302,24 @@ interface SchemaEntry {
     className?: string;
     style?: object;
     onChange?: (param: object) => void;
-    render: SchemaRenderType;
+    render?: SchemaRenderType;
     itemRender?: SchemaRenderType;
-    props: object;
-    options: Array<any | {
+    props?: object;
+    options?: Array<any | {
         label: string;
         value: any;
     }>;
-    optionsFrom: string;
-    transformer: ((v: any) => SelectOption) | {
+    optionsFrom?: string;
+    transformer?: ((v: any) => SelectOption) | {
         label: string;
         value: string;
     };
-    conditionalSchema: ConditionnalSchema;
-    constraints: Array<Constraint | {
+    conditionalSchema?: ConditionnalSchema;
+    constraints?: Array<Constraint | {
         type: TConstraintType;
         message?: string;
     }>;
-    flow: Array<string | FlowObject>;
+    flow?: Array<string | FlowObject>;
     onAfterChange?: (obj: {
         entry: string;
         value: object;
@@ -331,7 +331,7 @@ interface SchemaEntry {
         informations?: Informations;
     }) => void;
     visibleOnCollapse?: boolean;
-    addableDefaultValue: any;
+    addableDefaultValue?: any;
     collapsed?: boolean;
     collapsable?: boolean;
 }
@@ -354,7 +354,10 @@ declare const Form: React.ForwardRefExoticComponent<{
     inputWrapper?: ((props: object) => JSX.Element) | undefined;
     onSubmit: (obj: object) => void;
     onError?: (() => void) | undefined;
-    footer?: ((props: object) => JSX.Element) | undefined;
+    footer?: ((props: {
+        reset: () => void;
+        valid: () => void;
+    }) => JSX.Element) | undefined;
     style?: object | undefined;
     className?: string | undefined;
     options?: Option | undefined;

package/lib/index.js

@@ -12,6 +12,7 @@ var reactHookForm = require('react-hook-form');
 var reactRainbowComponents = require('react-rainbow-components');
 var ReactToolTip = require('react-tooltip');
 var uuid$1 = require('uuid');
+var debounce = require('lodash.debounce');
 var CreatableSelect = require('react-select/creatable');
 var Select = require('react-select');
 var hash$1 = require('object-hash');
@@ -46,6 +47,7 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 var deepEqual__default = /*#__PURE__*/_interopDefaultLegacy(deepEqual);
 var ReactToolTip__default = /*#__PURE__*/_interopDefaultLegacy(ReactToolTip);
+var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 var CreatableSelect__default = /*#__PURE__*/_interopDefaultLegacy(CreatableSelect);
 var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
 var hash__default = /*#__PURE__*/_interopDefaultLegacy(hash$1);
@@ -313,7 +315,7 @@ const useHashEffect = (func, deps) => {
         const depsHash = cleanHash(deps);
         const prevDepsHash = cleanHash(prevDeps.current);
         if (depsHash !== prevDepsHash) {
-            prevDeps.current = deps;
+            prevDeps.current = Object.assign({}, deps);
             func();
         }
     }, deps); /* FIXME deps or [deps] ? */
@@ -28142,16 +28144,18 @@ const validate = (flow, schema, value) => {
         abortEarly: false
     });
 };
-const Watcher = ({ options, control, schema, onSubmit, handleSubmit }) => {
+const Watcher = React__default["default"].memo(({ options, control, schema, onSubmit, handleSubmit }) => {
     const data = reactHookForm.useWatch({ control });
+    const realSubmit = (d) => handleSubmit(() => {
+        onSubmit(d);
+    })();
+    const debouncedSubmit = React.useCallback(debounce__default["default"](realSubmit, 250, { leading: true }), []);
     useHashEffect(() => {
-        if (options.autosubmit) {
-            handleSubmit(() => {
-                onSubmit(cleanOutputArray(data, schema));
-            })();
+        if (options === null || options === void 0 ? void 0 : options.autosubmit) {
+            debouncedSubmit(data);
         }
     }, [data]);
-    if (options.watch) {
+    if (options === null || options === void 0 ? void 0 : options.watch) {
         if (typeof options.watch === 'function') {
             options.watch(cleanOutputArray(data, schema));
         }
@@ -28162,7 +28166,9 @@ const Watcher = ({ options, control, schema, onSubmit, handleSubmit }) => {
         }
     }
     return null;
-};
+}, () => {
+    return true;
+});
 const Form = React__default["default"].forwardRef(function Form({ schema, flow, value, inputWrapper, onSubmit, onError = () => { }, footer, style = {}, className, options = {}, nostyle }, ref) {
     const formFlow = flow || Object.keys(schema);
     const maybeCustomHttpClient = (url, method) => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maif/react-forms",
   "description": "Build react safe forms as fast as possible",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "main": "lib/index.js",
   "module": "lib/esm/index.js",
   "types": "lib/index.d.ts",
@@ -72,6 +72,7 @@
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "@types/jest": "^26.0.24",
+    "@types/lodash.debounce": "4.0.7",
     "@types/node": "^16.3.0",
     "@types/react": "^17.0.14",
     "@types/react-dom": "^17.0.9",
@@ -118,6 +119,7 @@
     "classnames": "2.3.0",
     "fast-deep-equal": "^3.1.3",
     "highlight.js": "^11.5.1",
+    "lodash.debounce": "4.0.8",
     "moment": "2.29.1",
     "object-hash": "3.0.0",
     "react-feather": "2.0.9",