@flowerforce/flower-react 3.5.0 → 3.5.1-beta.1

package/dist/index.cjs.js

@@ -408,9 +408,9 @@ 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(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));
@@ -420,7 +420,7 @@ function Wrapper$1({ Component, id, flowName, currentNode, validate, asyncDeboun
     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',
@@ -480,20 +480,22 @@ function Wrapper$1({ Component, id, flowName, currentNode, validate, asyncDeboun
         onFocus && onFocus(e);
     }, [onFocus, setFocus]);
     React.useEffect(() => {
+        if (hidden)
+            return;
         if (asyncValidate) {
             if (refValue.current === value)
                 return;
             refValue.current = value;
             const hasValue = !flowerCore.MatchRules.utils.isEmpty(value);
             if (!hasValue) {
-                setCustomAsyncErrors([asyncInitialError]);
+                setCustomAsyncErrors(asyncInitialError && [asyncInitialError]);
                 setIsValidating(false);
                 return;
             }
             setTouched(true);
             debouncedValidation(value);
         }
-    }, [asyncValidate, asyncInitialError, value, debouncedValidation, setTouched]);
+    }, [asyncValidate, asyncInitialError, value, debouncedValidation, setTouched, hidden]);
     React.useEffect(() => {
         if (onUpdate) {
             onUpdate(value);
@@ -539,6 +541,24 @@ function Wrapper$1({ Component, id, flowName, currentNode, validate, asyncDeboun
             });
         };
     }, [destroyValue, id, flowNameFromPath, path, currentNode]);
+    React.useEffect(() => {
+        if (hidden) {
+            if (destroyOnHide) {
+                dispatch({
+                    type: `flower/unsetData`,
+                    payload: { flowName: flowNameFromPath, id: path }
+                });
+            }
+            dispatch({
+                type: 'flower/formRemoveErrors',
+                payload: {
+                    name: flowName,
+                    id,
+                    currentNode
+                }
+            });
+        }
+    }, [destroyOnHide, hidden, id, flowNameFromPath, path, currentNode]);
     React.useEffect(() => {
         if (defaultValue && !dirty && !isEqual(value, defaultValue)) {
             onChange(defaultValue);
@@ -584,11 +604,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,9 +406,9 @@ 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(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));
@@ -418,7 +418,7 @@ function Wrapper$1({ Component, id, flowName, currentNode, validate, asyncDeboun
     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',
@@ -478,20 +478,22 @@ function Wrapper$1({ Component, id, flowName, currentNode, validate, asyncDeboun
         onFocus && onFocus(e);
     }, [onFocus, setFocus]);
     useEffect(() => {
+        if (hidden)
+            return;
         if (asyncValidate) {
             if (refValue.current === value)
                 return;
             refValue.current = value;
             const hasValue = !MatchRules.utils.isEmpty(value);
             if (!hasValue) {
-                setCustomAsyncErrors([asyncInitialError]);
+                setCustomAsyncErrors(asyncInitialError && [asyncInitialError]);
                 setIsValidating(false);
                 return;
             }
             setTouched(true);
             debouncedValidation(value);
         }
-    }, [asyncValidate, asyncInitialError, value, debouncedValidation, setTouched]);
+    }, [asyncValidate, asyncInitialError, value, debouncedValidation, setTouched, hidden]);
     useEffect(() => {
         if (onUpdate) {
             onUpdate(value);
@@ -537,6 +539,24 @@ function Wrapper$1({ Component, id, flowName, currentNode, validate, asyncDeboun
             });
         };
     }, [destroyValue, id, flowNameFromPath, path, currentNode]);
+    useEffect(() => {
+        if (hidden) {
+            if (destroyOnHide) {
+                dispatch({
+                    type: `flower/unsetData`,
+                    payload: { flowName: flowNameFromPath, id: path }
+                });
+            }
+            dispatch({
+                type: 'flower/formRemoveErrors',
+                payload: {
+                    name: flowName,
+                    id,
+                    currentNode
+                }
+            });
+        }
+    }, [destroyOnHide, hidden, id, flowNameFromPath, path, currentNode]);
     useEffect(() => {
         if (defaultValue && !dirty && !isEqual(value, defaultValue)) {
             onChange(defaultValue);
@@ -582,11 +602,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.0",
+  "version": "3.5.1-beta.1",
   "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.0",
+    "@flowerforce/flower-core": "3.3.1-beta.1",
     "@reduxjs/toolkit": "^2.2.4",
     "lodash": "^4.17.21",
     "react-redux": "^9.1.2",