diff --git a/packages/flower-demo/src/Examples/Example11.tsx b/packages/flower-demo/src/Examples/Example11.tsx
index 8af6f1b..de94be0 100644
--- a/packages/flower-demo/src/Examples/Example11.tsx
+++ b/packages/flower-demo/src/Examples/Example11.tsx
@@ -36,7 +36,7 @@ export function Example11() {
onChange(e.target.checked)}
onBlur={onBlur}
/>
@@ -52,8 +52,9 @@ export function Example11() {
message: 'Field is required'
}
]}
+ destroyValue
alwaysDisplay
- destroyOnHide
+ // destroyOnHide
>
{({ onChange, value = '', errors, onBlur, hidden }) => (
@@ -72,7 +73,7 @@ export function Example11() {
)}
-
['Async field error']}
@@ -96,7 +97,7 @@ export function Example11() {
{errors && {errors.join(', ')}
}
)}
-
+ */}
{touches && touches: {touches.join(', ')}
}
diff --git a/packages/flower-react/src/components/FlowerField.tsx b/packages/flower-react/src/components/FlowerField.tsx
index eef3bca..f62ae39 100644
--- a/packages/flower-react/src/components/FlowerField.tsx
+++ b/packages/flower-react/src/components/FlowerField.tsx
@@ -43,6 +43,7 @@ function Wrapper({
asyncWaitingError,
destroyValue,
destroyOnHide,
+ hiddenAndDestroyValue,
onBlur,
onFocus,
hidden,
@@ -259,17 +260,17 @@ function Wrapper({
}
}, [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 (destroyOnHide || (hidden && destroyValue)) {
+ dispatch({
+ type: `flower/unsetData`,
+ payload: { flowName: flowNameFromPath, id: path }
+ })
+ resetField()
+ }
+ }, [destroyOnHide, destroyValue, flowNameFromPath, path, resetField])
+
+
useEffect(() => {
if (defaultValue && !dirty && !isEqual(value, defaultValue)) {
@@ -312,6 +313,8 @@ function Wrapper({
]
)
+ if(hiddenAndDestroyValue) return null
+
if (typeof Component === 'function') {
return Component(newProps)
}
@@ -350,27 +353,27 @@ const FlowerField = ({
return (
- {({ hidden }) => (
+ {({ ...rest }) => (
)}
@@ -387,14 +390,14 @@ const FlowerField = ({
- {({ hidden }) => (
+ {({ ...rest }) => (
)}
diff --git a/packages/flower-react/src/components/FlowerRule.tsx b/packages/flower-react/src/components/FlowerRule.tsx
index 86cd58d..184b66e 100644
--- a/packages/flower-react/src/components/FlowerRule.tsx
+++ b/packages/flower-react/src/components/FlowerRule.tsx
@@ -12,6 +12,7 @@ const FlowerRule = ({
alwaysDisplay,
flowName,
id,
+ destroyOnHide,
onUpdate
}: FlowerRuleProps) => {
const { flowName: flowNameContext, currentNode } = useContext(context)
@@ -41,6 +42,15 @@ const FlowerRule = ({
if (alwaysDisplay && hidden) {
return children({ hidden })
}
+
+ if (destroyOnHide && hidden) {
+ return children({
+ hidden,
+ hiddenAndDestroyValue: true,
+ destroyOnHide: true
+ })
+ }
+
if (hidden) {
return undefined
}
diff --git a/packages/flower-react/src/components/types/FlowerRule.ts b/packages/flower-react/src/components/types/FlowerRule.ts
index f97123b..cfe3305 100644
--- a/packages/flower-react/src/components/types/FlowerRule.ts
+++ b/packages/flower-react/src/components/types/FlowerRule.ts
@@ -27,6 +27,8 @@ export type FlowerRuleProps = {
* The FlowerRule returns the boolean variable "hidden" to notify you if the conditions are satisfied or not
*/
alwaysDisplay?: boolean
+ destroyOnHide?: boolean
+ destroyValue?: boolean
/** The function executed when the value found at the path passed to the "id" prop changes */
onUpdate?: (hidden: boolean) => void
/** The children of the FlowerRule*/
@@ -34,5 +36,7 @@ export type FlowerRuleProps = {
| React.ReactNode
| ((props: {
hidden?: boolean
+ hiddenAndDestroyValue?: boolean
+ destroyOnHide?: boolean
}) => React.ReactNode | React.ReactElement | undefined)
}