@flowerforce/flower-react 3.1.2-beta.5 → 3.1.2-beta.7

package/dist/index.cjs.js

@@ -48,7 +48,7 @@ const getDataFromState = (name, id) => reselect.createSelector(getDataByFlow(nam
 const makeSelectNodeErrors = (name, currentNodeId) => reselect.createSelector(selectFlowerFormNode(name, currentNodeId), flowerCore.Selectors.makeSelectNodeErrors);
 const makeSelectNodeFieldTouched = (name, currentNodeId, fieldId) => reselect.createSelector(selectFlowerFormNode(name, currentNodeId), flowerCore.Selectors.makeSelectNodeFormFieldTouched(fieldId));
 const makeSelectNodeFieldDirty = (name, currentNodeId, fieldId) => reselect.createSelector(selectFlowerFormNode(name, currentNodeId), flowerCore.Selectors.makeSelectNodeFormFieldDirty(fieldId));
-const makeSelectNodeFormTouched = (name, currentNodeId) => reselect.createSelector(selectFlowerFormNode(name, currentNodeId), flowerCore.Selectors.makeSelectNodeFormTouched);
+const makeSelectNodeFormSubmitted = (name, currentNodeId) => reselect.createSelector(selectFlowerFormNode(name, currentNodeId), flowerCore.Selectors.makeSelectNodeFormSubmitted);
 const getAllData = reselect.createSelector(selectGlobal, mapData);
 const selectFlowerFormCurrentNode = (name) => reselect.createSelector(selectFlower(name), makeSelectCurrentNodeId(name), (data, current) => {
     return _get(data, ['form', current]);
@@ -416,7 +416,7 @@ function Wrapper$1({ Component, id, flowName, currentNode, validate, asyncDeboun
     const dirty = useSelector(makeSelectNodeFieldDirty(flowName, currentNode, id));
     const touched = useSelector(makeSelectNodeFieldTouched(flowName, currentNode, id));
     const refValue = React.useRef();
-    const touchedForm = useSelector(makeSelectNodeFormTouched(flowName, currentNode));
+    const isSubmitted = useSelector(makeSelectNodeFormSubmitted(flowName, currentNode));
     const allErrors = React.useMemo(() => [...errors, ...(customAsyncErrors || []).filter(Boolean)], [errors, customAsyncErrors]);
     const setTouched = React.useCallback((touched) => {
         dispatch({
@@ -534,7 +534,7 @@ function Wrapper$1({ Component, id, flowName, currentNode, validate, asyncDeboun
         dirty,
         hidden,
         isValidating,
-        touchedForm
+        isSubmitted
     }), [
         props,
         id,
@@ -546,7 +546,7 @@ function Wrapper$1({ Component, id, flowName, currentNode, validate, asyncDeboun
         onBlurInternal,
         hidden,
         isValidating,
-        touchedForm
+        isSubmitted
     ]);
     if (typeof Component === 'function') {
         return Component(newProps);
@@ -838,15 +838,18 @@ const component = React.memo(FlowerComponent);
  *
  * It exposes details regarding the form's state and a set of methods for reading and writing within it:
  *
- * - getData
- *
- * - setData
- *
- * - unSetData
- *
- * - replaceData
- *
- * - unTouched
+ * - isSubmitted,
+ * - isDirty,
+ * - errors,
+ * - customErrors,
+ * - isValid,
+ * - isValidating,
+ * - getData,
+ * - setData,
+ * - unsetData,
+ * - replaceData,
+ * - reset,
+ * - setCustomErrors
  *
  * @param {string} flowName - first optional parameter
  *
@@ -859,7 +862,7 @@ const useFlowerForm = ({ flowName: customFlowName, name } = {}) => {
     const store = useStore();
     const flowName = customFlowName || name || flowNameDefault || '';
     const currentNode = useSelector(makeSelectCurrentNodeId(flowName));
-    const { errors, customErrors, isValid, touched, isValidating } = useSelector(makeSelectNodeErrors(flowName, currentNode));
+    const { errors, customErrors, isValid, isSubmitted, isDirty, isValidating } = useSelector(makeSelectNodeErrors(flowName, currentNode));
     const getData = React.useCallback((path) => {
         const { flowNameFromPath = flowName, path: newpath } = flowerCore.CoreUtils.getPath(path);
         return _get(store.getState(), [
@@ -869,19 +872,23 @@ const useFlowerForm = ({ flowName: customFlowName, name } = {}) => {
             ...newpath
         ]);
     }, [store, flowName]);
+    const setDataField = React.useCallback((id, val) => {
+        const { flowNameFromPath = flowName } = flowerCore.CoreUtils.getPath(id);
+        dispatch(actions.addDataByPath({
+            flowName: flowNameFromPath,
+            id,
+            value: val,
+            dirty: true
+        }));
+        return;
+    }, [flowName, dispatch]);
     const setData = React.useCallback((val, id) => {
         if (id) {
-            const { flowNameFromPath = flowName } = flowerCore.CoreUtils.getPath(id);
-            dispatch(actions.addDataByPath({
-                flowName: flowNameFromPath,
-                id,
-                value: val,
-                dirty: true
-            }));
+            setDataField(id, val);
             return;
         }
         dispatch(actions.addData({ flowName, value: val }));
-    }, [flowName, dispatch]);
+    }, [flowName, setDataField, dispatch]);
     const unsetData = React.useCallback((path) => {
         const { flowNameFromPath = flowName, path: newpath } = flowerCore.CoreUtils.getPath(path);
         dispatch(actions.unsetData({ flowName: flowNameFromPath, id: newpath }));
@@ -904,13 +911,15 @@ const useFlowerForm = ({ flowName: customFlowName, name } = {}) => {
         });
     }, [flowName, currentNode, dispatch]);
     return {
-        touched,
+        isSubmitted,
+        isDirty,
         errors,
         customErrors,
         isValid,
         isValidating,
         getData,
         setData,
+        setDataField,
         unsetData,
         replaceData,
         reset,

package/dist/index.esm.js

@@ -46,7 +46,7 @@ const getDataFromState = (name, id) => createSelector(getDataByFlow(name), Selec
 const makeSelectNodeErrors = (name, currentNodeId) => createSelector(selectFlowerFormNode(name, currentNodeId), Selectors.makeSelectNodeErrors);
 const makeSelectNodeFieldTouched = (name, currentNodeId, fieldId) => createSelector(selectFlowerFormNode(name, currentNodeId), Selectors.makeSelectNodeFormFieldTouched(fieldId));
 const makeSelectNodeFieldDirty = (name, currentNodeId, fieldId) => createSelector(selectFlowerFormNode(name, currentNodeId), Selectors.makeSelectNodeFormFieldDirty(fieldId));
-const makeSelectNodeFormTouched = (name, currentNodeId) => createSelector(selectFlowerFormNode(name, currentNodeId), Selectors.makeSelectNodeFormTouched);
+const makeSelectNodeFormSubmitted = (name, currentNodeId) => createSelector(selectFlowerFormNode(name, currentNodeId), Selectors.makeSelectNodeFormSubmitted);
 const getAllData = createSelector(selectGlobal, mapData);
 const selectFlowerFormCurrentNode = (name) => createSelector(selectFlower(name), makeSelectCurrentNodeId(name), (data, current) => {
     return _get(data, ['form', current]);
@@ -414,7 +414,7 @@ function Wrapper$1({ Component, id, flowName, currentNode, validate, asyncDeboun
     const dirty = useSelector(makeSelectNodeFieldDirty(flowName, currentNode, id));
     const touched = useSelector(makeSelectNodeFieldTouched(flowName, currentNode, id));
     const refValue = useRef();
-    const touchedForm = useSelector(makeSelectNodeFormTouched(flowName, currentNode));
+    const isSubmitted = useSelector(makeSelectNodeFormSubmitted(flowName, currentNode));
     const allErrors = useMemo(() => [...errors, ...(customAsyncErrors || []).filter(Boolean)], [errors, customAsyncErrors]);
     const setTouched = useCallback((touched) => {
         dispatch({
@@ -532,7 +532,7 @@ function Wrapper$1({ Component, id, flowName, currentNode, validate, asyncDeboun
         dirty,
         hidden,
         isValidating,
-        touchedForm
+        isSubmitted
     }), [
         props,
         id,
@@ -544,7 +544,7 @@ function Wrapper$1({ Component, id, flowName, currentNode, validate, asyncDeboun
         onBlurInternal,
         hidden,
         isValidating,
-        touchedForm
+        isSubmitted
     ]);
     if (typeof Component === 'function') {
         return Component(newProps);
@@ -836,15 +836,18 @@ const component = memo(FlowerComponent);
  *
  * It exposes details regarding the form's state and a set of methods for reading and writing within it:
  *
- * - getData
- *
- * - setData
- *
- * - unSetData
- *
- * - replaceData
- *
- * - unTouched
+ * - isSubmitted,
+ * - isDirty,
+ * - errors,
+ * - customErrors,
+ * - isValid,
+ * - isValidating,
+ * - getData,
+ * - setData,
+ * - unsetData,
+ * - replaceData,
+ * - reset,
+ * - setCustomErrors
  *
  * @param {string} flowName - first optional parameter
  *
@@ -857,7 +860,7 @@ const useFlowerForm = ({ flowName: customFlowName, name } = {}) => {
     const store = useStore();
     const flowName = customFlowName || name || flowNameDefault || '';
     const currentNode = useSelector(makeSelectCurrentNodeId(flowName));
-    const { errors, customErrors, isValid, touched, isValidating } = useSelector(makeSelectNodeErrors(flowName, currentNode));
+    const { errors, customErrors, isValid, isSubmitted, isDirty, isValidating } = useSelector(makeSelectNodeErrors(flowName, currentNode));
     const getData = useCallback((path) => {
         const { flowNameFromPath = flowName, path: newpath } = CoreUtils.getPath(path);
         return _get(store.getState(), [
@@ -867,19 +870,23 @@ const useFlowerForm = ({ flowName: customFlowName, name } = {}) => {
             ...newpath
         ]);
     }, [store, flowName]);
+    const setDataField = useCallback((id, val) => {
+        const { flowNameFromPath = flowName } = CoreUtils.getPath(id);
+        dispatch(actions.addDataByPath({
+            flowName: flowNameFromPath,
+            id,
+            value: val,
+            dirty: true
+        }));
+        return;
+    }, [flowName, dispatch]);
     const setData = useCallback((val, id) => {
         if (id) {
-            const { flowNameFromPath = flowName } = CoreUtils.getPath(id);
-            dispatch(actions.addDataByPath({
-                flowName: flowNameFromPath,
-                id,
-                value: val,
-                dirty: true
-            }));
+            setDataField(id, val);
             return;
         }
         dispatch(actions.addData({ flowName, value: val }));
-    }, [flowName, dispatch]);
+    }, [flowName, setDataField, dispatch]);
     const unsetData = useCallback((path) => {
         const { flowNameFromPath = flowName, path: newpath } = CoreUtils.getPath(path);
         dispatch(actions.unsetData({ flowName: flowNameFromPath, id: newpath }));
@@ -902,13 +909,15 @@ const useFlowerForm = ({ flowName: customFlowName, name } = {}) => {
         });
     }, [flowName, currentNode, dispatch]);
     return {
-        touched,
+        isSubmitted,
+        isDirty,
         errors,
         customErrors,
         isValid,
         isValidating,
         getData,
         setData,
+        setDataField,
         unsetData,
         replaceData,
         reset,

package/dist/src/components/types/FlowerField.d.ts

@@ -31,11 +31,11 @@ export type FlowerFieldProps<T extends Record<string, any> = Record<string, any>
         onChange: (props: any) => void;
         /** The function executed to test all the validation rules*/
         onBlur: () => void;
-        /** This parameter will notify you whether the form field has been touched */
-        touchedForm: boolean;
+        /** This value is set to true when the form has been submitted at least once or a next invoked */
+        isSubmitted: boolean;
         /** This parameter will notify you whether the form field has been touched */
         touched: boolean;
-        /** This parameter will notify you whether the form field has been touched */
+        /** This parameter will notify you if the form field is filled in at least once */
         dirty: boolean;
         /** true when some of the display rules are not satisfied, and you have passed true to the "alwaysDisplay" FlowerField's prop*/
         hidden: boolean;

package/dist/src/components/types/FlowerHooks.d.ts

@@ -3,8 +3,10 @@ export type UseFlowerProps = {
     [x in 'name' | 'flowName']?: string;
 };
 export type UseFlowerForm = (options?: UseFlowerProps) => {
-    /**  This value is set to true when the form has been touched at least once. */
-    touched: boolean;
+    /**  This value is set to true when the form has been submitted at least once or a next invoked. */
+    isSubmitted: boolean;
+    /**  This value is set to true when at least once field is dirted. */
+    isDirty: boolean;
     /** An object containing all the form errors */
     errors: Record<string, any>;
     /** An object containing all the form custom errors */
@@ -21,6 +23,12 @@ export type UseFlowerForm = (options?: UseFlowerProps) => {
     value: any, 
     /** Specify the target path to set the value*/
     path?: string) => void;
+    /** Use this function to set value in the flow's field data. */
+    setDataField: (
+    /** Specify the target path to set the value*/
+    path: string, 
+    /** The value that you want to set */
+    value: any) => void;
     /** Use this function to unset values in the flow's data. */
     unsetData: (
     /** Specify the target path to the value tha you want to unset*/

package/dist/src/components/useFlowerForm.d.ts

@@ -3,15 +3,18 @@ import { UseFlowerForm } from './types/FlowerHooks';
  *
  * It exposes details regarding the form's state and a set of methods for reading and writing within it:
  *
- * - getData
- *
- * - setData
- *
- * - unSetData
- *
- * - replaceData
- *
- * - unTouched
+ * - isSubmitted,
+ * - isDirty,
+ * - errors,
+ * - customErrors,
+ * - isValid,
+ * - isValidating,
+ * - getData,
+ * - setData,
+ * - unsetData,
+ * - replaceData,
+ * - reset,
+ * - setCustomErrors
  *
  * @param {string} flowName - first optional parameter
  *

package/dist/src/selectors.d.ts

@@ -928,7 +928,8 @@ declare const makeSelectNodeErrors: (name: string, currentNodeId: string) => ((s
         [x: string]: import("@flowerforce/flower-core").Flower<Record<string, any>>;
     };
 }) => {
-    touched: boolean;
+    isSubmitted: boolean;
+    isDirty: boolean;
     errors: any;
     customErrors: any;
     isValid: boolean;
@@ -939,14 +940,16 @@ declare const makeSelectNodeErrors: (name: string, currentNodeId: string) => ((s
     resetResultsCount: () => void;
 } & {
     resultFunc: (resultFuncArgs_0: import("@flowerforce/flower-core").Form<Record<string, any>>) => {
-        touched: boolean;
+        isSubmitted: boolean;
+        isDirty: boolean;
         errors: any;
         customErrors: any;
         isValid: boolean;
         isValidating?: boolean | undefined;
     };
     memoizedResultFunc: ((resultFuncArgs_0: import("@flowerforce/flower-core").Form<Record<string, any>>) => {
-        touched: boolean;
+        isSubmitted: boolean;
+        isDirty: boolean;
         errors: any;
         customErrors: any;
         isValid: boolean;
@@ -957,7 +960,8 @@ declare const makeSelectNodeErrors: (name: string, currentNodeId: string) => ((s
         resetResultsCount: () => void;
     };
     lastResult: () => {
-        touched: boolean;
+        isSubmitted: boolean;
+        isDirty: boolean;
         errors: any;
         customErrors: any;
         isValid: boolean;
@@ -1196,7 +1200,7 @@ declare const makeSelectNodeFieldDirty: (name: string, currentNodeId: string, fi
     argsMemoize: typeof import("reselect").weakMapMemoize;
     memoize: typeof import("reselect").weakMapMemoize;
 };
-declare const makeSelectNodeFormTouched: (name: string, currentNodeId: string) => ((state: {
+declare const makeSelectNodeFormSubmitted: (name: string, currentNodeId: string) => ((state: {
     flower: {
         [x: string]: import("@flowerforce/flower-core").Flower<Record<string, any>>;
     };
@@ -1557,14 +1561,16 @@ export declare const selectorRulesDisabled: (id: string, rules: RulesObject<any>
     resetResultsCount: () => void;
 } & {
     resultFunc: (resultFuncArgs_0: Record<string, any> | undefined, resultFuncArgs_1: {
-        touched: boolean;
+        isSubmitted: boolean;
+        isDirty: boolean;
         errors: any;
         customErrors: any;
         isValid: boolean;
         isValidating?: boolean | undefined;
     }) => boolean;
     memoizedResultFunc: ((resultFuncArgs_0: Record<string, any> | undefined, resultFuncArgs_1: {
-        touched: boolean;
+        isSubmitted: boolean;
+        isDirty: boolean;
         errors: any;
         customErrors: any;
         isValid: boolean;
@@ -1614,7 +1620,8 @@ export declare const selectorRulesDisabled: (id: string, rules: RulesObject<any>
             [x: string]: import("@flowerforce/flower-core").Flower<Record<string, any>>;
         };
     }) => {
-        touched: boolean;
+        isSubmitted: boolean;
+        isDirty: boolean;
         errors: any;
         customErrors: any;
         isValid: boolean;
@@ -1625,14 +1632,16 @@ export declare const selectorRulesDisabled: (id: string, rules: RulesObject<any>
         resetResultsCount: () => void;
     } & {
         resultFunc: (resultFuncArgs_0: import("@flowerforce/flower-core").Form<Record<string, any>>) => {
-            touched: boolean;
+            isSubmitted: boolean;
+            isDirty: boolean;
             errors: any;
             customErrors: any;
             isValid: boolean;
             isValidating?: boolean | undefined;
         };
         memoizedResultFunc: ((resultFuncArgs_0: import("@flowerforce/flower-core").Form<Record<string, any>>) => {
-            touched: boolean;
+            isSubmitted: boolean;
+            isDirty: boolean;
             errors: any;
             customErrors: any;
             isValid: boolean;
@@ -1643,7 +1652,8 @@ export declare const selectorRulesDisabled: (id: string, rules: RulesObject<any>
             resetResultsCount: () => void;
         };
         lastResult: () => {
-            touched: boolean;
+            isSubmitted: boolean;
+            isDirty: boolean;
             errors: any;
             customErrors: any;
             isValid: boolean;
@@ -1724,4 +1734,4 @@ export declare const selectorRulesDisabled: (id: string, rules: RulesObject<any>
     argsMemoize: typeof import("reselect").weakMapMemoize;
     memoize: typeof import("reselect").weakMapMemoize;
 };
-export { selectFlowerHistory, makeSelectNodesIds, makeSelectCurrentNodeId, makeSelectStartNodeId, makeSelectCurrentNodeDisabled, getAllData, getDataByFlow, getDataFromState, makeSelectNodeErrors, makeSelectNodeFieldTouched, makeSelectNodeFieldDirty, makeSelectFieldError, makeSelectNodeFormTouched, makeSelectPrevNodeRetain };
+export { selectFlowerHistory, makeSelectNodesIds, makeSelectCurrentNodeId, makeSelectStartNodeId, makeSelectCurrentNodeDisabled, getAllData, getDataByFlow, getDataFromState, makeSelectNodeErrors, makeSelectNodeFieldTouched, makeSelectNodeFieldDirty, makeSelectFieldError, makeSelectNodeFormSubmitted, makeSelectPrevNodeRetain };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowerforce/flower-react",
-  "version": "3.1.2-beta.5",
+  "version": "3.1.2-beta.7",
   "description": "FlowerJS components, hooks and utils for React.",
   "repository": {
     "type": "git",
@@ -34,7 +34,7 @@
     "typescript": "^5.4.5"
   },
   "dependencies": {
-    "@flowerforce/flower-core": "3.1.2-beta.5",
+    "@flowerforce/flower-core": "3.1.2-beta.7",
     "@reduxjs/toolkit": "^2.2.4",
     "lodash": "^4.17.21",
     "react-redux": "^9.1.2",