@flowerforce/flower-react 3.5.1-beta.0 → 3.5.1-beta.2

package/dist/index.cjs.js

@@ -408,19 +408,19 @@ function isIntrinsicElement$1(x) {
     return typeof x === 'string';
 }
 //TODO make types for wrapper function props
-function Wrapper$1({ Component, id, flowName, currentNode, validate, asyncDebounce = 0, asyncValidate, asyncInitialError, asyncWaitingError, destroyValue, onBlur, onFocus, hidden, onUpdate, defaultValue, ...props }) {
+function Wrapper$1({ Component, id, flowName, currentNode, validate, asyncDebounce = 0, asyncValidate, asyncInitialError, asyncWaitingError, destroyValue, destroyOnHide, onBlur, onFocus, hidden, onUpdate, defaultValue, ...props }) {
     const dispatch = useDispatch();
-    const [customAsyncErrors, setCustomAsyncErrors] = React.useState(!hidden && asyncValidate && [asyncInitialError]);
+    const [customAsyncErrors, setCustomAsyncErrors] = React.useState(asyncValidate && asyncInitialError && [asyncInitialError]);
     const [isValidating, setIsValidating] = React.useState(undefined);
     const { flowNameFromPath = flowName, path } = React.useMemo(() => flowerCore.CoreUtils.getPath(id), [id]);
     const value = useSelector(getDataFromState(flowNameFromPath, path));
-    const errors = useSelector(makeSelectFieldError(flowName, id, hidden ? [] : validate), flowerCore.CoreUtils.allEqual);
+    const errors = useSelector(makeSelectFieldError(flowName, id, validate), flowerCore.CoreUtils.allEqual);
     const dirty = useSelector(makeSelectNodeFieldDirty(flowName, currentNode, id));
     const touched = useSelector(makeSelectNodeFieldTouched(flowName, currentNode, id));
     const focused = useSelector(makeSelectNodeFieldFocused(flowName, currentNode, id));
     const refValue = React.useRef();
     const isSubmitted = useSelector(makeSelectNodeFormSubmitted(flowName, currentNode));
-    const allErrors = React.useMemo(() => [...errors, ...(customAsyncErrors || []).filter(Boolean)], [errors, customAsyncErrors]);
+    const allErrors = React.useMemo(() => hidden ? [] : [...errors, ...(customAsyncErrors || []).filter(Boolean)], [errors, hidden, customAsyncErrors]);
     const setTouched = React.useCallback((touched) => {
         dispatch({
             type: 'flower/formFieldTouch',
@@ -488,7 +488,7 @@ function Wrapper$1({ Component, id, flowName, currentNode, validate, asyncDeboun
             refValue.current = value;
             const hasValue = !flowerCore.MatchRules.utils.isEmpty(value);
             if (!hasValue) {
-                setCustomAsyncErrors([asyncInitialError]);
+                setCustomAsyncErrors(asyncInitialError && [asyncInitialError]);
                 setIsValidating(false);
                 return;
             }
@@ -522,6 +522,34 @@ function Wrapper$1({ Component, id, flowName, currentNode, validate, asyncDeboun
             }
         });
     }, [flowName, currentNode, isValidating]);
+    const resetField = React.useCallback(() => {
+        dispatch({
+            type: 'flower/formFieldTouch',
+            payload: {
+                name: flowName,
+                id,
+                currentNode,
+                touched: false
+            }
+        });
+        dispatch({
+            type: 'flower/formFieldDirty',
+            payload: {
+                name: flowName,
+                id,
+                currentNode,
+                dirty: false
+            }
+        });
+        dispatch({
+            type: 'flower/formRemoveErrors',
+            payload: {
+                name: flowName,
+                id,
+                currentNode
+            }
+        });
+    }, [currentNode, id, flowName]);
     React.useEffect(() => {
         // destroy
         return () => {
@@ -531,16 +559,20 @@ function Wrapper$1({ Component, id, flowName, currentNode, validate, asyncDeboun
                     payload: { flowName: flowNameFromPath, id: path }
                 });
             }
-            dispatch({
-                type: 'flower/formRemoveErrors',
-                payload: {
-                    name: flowName,
-                    id,
-                    currentNode
-                }
-            });
+            resetField();
         };
-    }, [destroyValue, id, flowNameFromPath, path, currentNode]);
+    }, [destroyValue, id, flowNameFromPath, path, resetField]);
+    React.useEffect(() => {
+        if (hidden) {
+            if (destroyOnHide) {
+                dispatch({
+                    type: `flower/unsetData`,
+                    payload: { flowName: flowNameFromPath, id: path }
+                });
+                resetField();
+            }
+        }
+    }, [destroyOnHide, hidden, flowNameFromPath, path, resetField]);
     React.useEffect(() => {
         if (defaultValue && !dirty && !isEqual(value, defaultValue)) {
             onChange(defaultValue);
@@ -586,11 +618,11 @@ function Wrapper$1({ Component, id, flowName, currentNode, validate, asyncDeboun
     }
     return Component && React.createElement(Component, { ...newProps });
 }
-const FlowerField = ({ id, validate, asyncValidate, asyncDebounce, asyncInitialError, asyncWaitingError, rules, alwaysDisplay, value, children, defaultValue, destroyValue, flowName, onUpdate }) => {
+const FlowerField = ({ id, validate, asyncValidate, asyncDebounce, asyncInitialError, asyncWaitingError, rules, alwaysDisplay, value, children, defaultValue, destroyOnHide, destroyValue, flowName, onUpdate }) => {
     const { flowName: flowNameContext, currentNode } = React.useContext(context);
     const name = flowName || flowNameContext;
     if (typeof children === 'function') {
-        return (React.createElement(component$5, { alwaysDisplay: alwaysDisplay, rules: rules, value: value, flowName: name, id: id }, ({ hidden }) => (React.createElement(Wrapper$1, { hidden: hidden, id: id, Component: children, flowName: name, currentNode: currentNode, validate: validate, asyncValidate: asyncValidate, asyncDebounce: asyncDebounce, asyncInitialError: asyncInitialError, asyncWaitingError: asyncWaitingError, destroyValue: destroyValue, onUpdate: onUpdate, defaultValue: defaultValue }))));
+        return (React.createElement(component$5, { alwaysDisplay: alwaysDisplay, rules: rules, value: value, flowName: name, id: id }, ({ hidden }) => (React.createElement(Wrapper$1, { hidden: hidden, id: id, Component: children, flowName: name, currentNode: currentNode, validate: validate, asyncValidate: asyncValidate, asyncDebounce: asyncDebounce, asyncInitialError: asyncInitialError, asyncWaitingError: asyncWaitingError, destroyValue: destroyValue, onUpdate: onUpdate, defaultValue: defaultValue, destroyOnHide: destroyOnHide }))));
     }
     return React.Children.map(children, (child, i) => {
         if (!React.isValidElement(child)) {

package/dist/index.esm.js

@@ -406,19 +406,19 @@ function isIntrinsicElement$1(x) {
     return typeof x === 'string';
 }
 //TODO make types for wrapper function props
-function Wrapper$1({ Component, id, flowName, currentNode, validate, asyncDebounce = 0, asyncValidate, asyncInitialError, asyncWaitingError, destroyValue, onBlur, onFocus, hidden, onUpdate, defaultValue, ...props }) {
+function Wrapper$1({ Component, id, flowName, currentNode, validate, asyncDebounce = 0, asyncValidate, asyncInitialError, asyncWaitingError, destroyValue, destroyOnHide, onBlur, onFocus, hidden, onUpdate, defaultValue, ...props }) {
     const dispatch = useDispatch();
-    const [customAsyncErrors, setCustomAsyncErrors] = useState(!hidden && asyncValidate && [asyncInitialError]);
+    const [customAsyncErrors, setCustomAsyncErrors] = useState(asyncValidate && asyncInitialError && [asyncInitialError]);
     const [isValidating, setIsValidating] = useState(undefined);
     const { flowNameFromPath = flowName, path } = useMemo(() => CoreUtils.getPath(id), [id]);
     const value = useSelector(getDataFromState(flowNameFromPath, path));
-    const errors = useSelector(makeSelectFieldError(flowName, id, hidden ? [] : validate), CoreUtils.allEqual);
+    const errors = useSelector(makeSelectFieldError(flowName, id, validate), CoreUtils.allEqual);
     const dirty = useSelector(makeSelectNodeFieldDirty(flowName, currentNode, id));
     const touched = useSelector(makeSelectNodeFieldTouched(flowName, currentNode, id));
     const focused = useSelector(makeSelectNodeFieldFocused(flowName, currentNode, id));
     const refValue = useRef();
     const isSubmitted = useSelector(makeSelectNodeFormSubmitted(flowName, currentNode));
-    const allErrors = useMemo(() => [...errors, ...(customAsyncErrors || []).filter(Boolean)], [errors, customAsyncErrors]);
+    const allErrors = useMemo(() => hidden ? [] : [...errors, ...(customAsyncErrors || []).filter(Boolean)], [errors, hidden, customAsyncErrors]);
     const setTouched = useCallback((touched) => {
         dispatch({
             type: 'flower/formFieldTouch',
@@ -486,7 +486,7 @@ function Wrapper$1({ Component, id, flowName, currentNode, validate, asyncDeboun
             refValue.current = value;
             const hasValue = !MatchRules.utils.isEmpty(value);
             if (!hasValue) {
-                setCustomAsyncErrors([asyncInitialError]);
+                setCustomAsyncErrors(asyncInitialError && [asyncInitialError]);
                 setIsValidating(false);
                 return;
             }
@@ -520,6 +520,34 @@ function Wrapper$1({ Component, id, flowName, currentNode, validate, asyncDeboun
             }
         });
     }, [flowName, currentNode, isValidating]);
+    const resetField = useCallback(() => {
+        dispatch({
+            type: 'flower/formFieldTouch',
+            payload: {
+                name: flowName,
+                id,
+                currentNode,
+                touched: false
+            }
+        });
+        dispatch({
+            type: 'flower/formFieldDirty',
+            payload: {
+                name: flowName,
+                id,
+                currentNode,
+                dirty: false
+            }
+        });
+        dispatch({
+            type: 'flower/formRemoveErrors',
+            payload: {
+                name: flowName,
+                id,
+                currentNode
+            }
+        });
+    }, [currentNode, id, flowName]);
     useEffect(() => {
         // destroy
         return () => {
@@ -529,16 +557,20 @@ function Wrapper$1({ Component, id, flowName, currentNode, validate, asyncDeboun
                     payload: { flowName: flowNameFromPath, id: path }
                 });
             }
-            dispatch({
-                type: 'flower/formRemoveErrors',
-                payload: {
-                    name: flowName,
-                    id,
-                    currentNode
-                }
-            });
+            resetField();
         };
-    }, [destroyValue, id, flowNameFromPath, path, currentNode]);
+    }, [destroyValue, id, flowNameFromPath, path, resetField]);
+    useEffect(() => {
+        if (hidden) {
+            if (destroyOnHide) {
+                dispatch({
+                    type: `flower/unsetData`,
+                    payload: { flowName: flowNameFromPath, id: path }
+                });
+                resetField();
+            }
+        }
+    }, [destroyOnHide, hidden, flowNameFromPath, path, resetField]);
     useEffect(() => {
         if (defaultValue && !dirty && !isEqual(value, defaultValue)) {
             onChange(defaultValue);
@@ -584,11 +616,11 @@ function Wrapper$1({ Component, id, flowName, currentNode, validate, asyncDeboun
     }
     return Component && React.createElement(Component, { ...newProps });
 }
-const FlowerField = ({ id, validate, asyncValidate, asyncDebounce, asyncInitialError, asyncWaitingError, rules, alwaysDisplay, value, children, defaultValue, destroyValue, flowName, onUpdate }) => {
+const FlowerField = ({ id, validate, asyncValidate, asyncDebounce, asyncInitialError, asyncWaitingError, rules, alwaysDisplay, value, children, defaultValue, destroyOnHide, destroyValue, flowName, onUpdate }) => {
     const { flowName: flowNameContext, currentNode } = useContext(context);
     const name = flowName || flowNameContext;
     if (typeof children === 'function') {
-        return (React.createElement(component$5, { alwaysDisplay: alwaysDisplay, rules: rules, value: value, flowName: name, id: id }, ({ hidden }) => (React.createElement(Wrapper$1, { hidden: hidden, id: id, Component: children, flowName: name, currentNode: currentNode, validate: validate, asyncValidate: asyncValidate, asyncDebounce: asyncDebounce, asyncInitialError: asyncInitialError, asyncWaitingError: asyncWaitingError, destroyValue: destroyValue, onUpdate: onUpdate, defaultValue: defaultValue }))));
+        return (React.createElement(component$5, { alwaysDisplay: alwaysDisplay, rules: rules, value: value, flowName: name, id: id }, ({ hidden }) => (React.createElement(Wrapper$1, { hidden: hidden, id: id, Component: children, flowName: name, currentNode: currentNode, validate: validate, asyncValidate: asyncValidate, asyncDebounce: asyncDebounce, asyncInitialError: asyncInitialError, asyncWaitingError: asyncWaitingError, destroyValue: destroyValue, onUpdate: onUpdate, defaultValue: defaultValue, destroyOnHide: destroyOnHide }))));
     }
     return React.Children.map(children, (child, i) => {
         if (!React.isValidElement(child)) {

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

@@ -1,4 +1,4 @@
 import React from 'react';
 import { FlowerFieldProps } from './types/FlowerField';
-declare const component: React.MemoExoticComponent<({ id, validate, asyncValidate, asyncDebounce, asyncInitialError, asyncWaitingError, rules, alwaysDisplay, value, children, defaultValue, destroyValue, flowName, onUpdate }: FlowerFieldProps) => React.JSX.Element | (string | number | Iterable<React.ReactNode> | React.JSX.Element)[] | null | undefined>;
+declare const component: React.MemoExoticComponent<({ id, validate, asyncValidate, asyncDebounce, asyncInitialError, asyncWaitingError, rules, alwaysDisplay, value, children, defaultValue, destroyOnHide, destroyValue, flowName, onUpdate }: FlowerFieldProps) => React.JSX.Element | (string | number | Iterable<React.ReactNode> | React.JSX.Element)[] | null | undefined>;
 export default component;

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

@@ -99,7 +99,10 @@ export type FlowerFieldProps<T extends Record<string, any> = Record<string, any>
     flowName?: string;
     /** Initial value field */
     defaultValue?: unknown;
+    /** Remove value from data on destroy element */
     destroyValue?: boolean;
+    /** Remove value from data on hide element */
+    destroyOnHide?: boolean;
     value?: any;
     /** When set to true, the children is shown even if the rules are not satisfied
      *

package/package.json

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