feat: destroy on hide

packages/flower-demo/src/Examples/Example11.tsx

@@ -36,7 +36,7 @@ export function Example11() {
                 <input
                   type="checkbox"
                   id="disabled"
-                  checked={value}
+                  checked={!!value}
                   onChange={(e) => 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 }) => (
                 <div className="input-container">
@@ -72,7 +73,7 @@ export function Example11() {
               )}
             </FlowerField>
 
-            <FlowerField
+            {/* <FlowerField
               id="async"
               rules={{ $and: [{ check: { $eq: true } }] }}
               asyncValidate={() => ['Async field error']}
@@ -96,7 +97,7 @@ export function Example11() {
                   {errors && <div className="error">{errors.join(', ')}</div>}
                 </div>
               )}
-            </FlowerField>
+            </FlowerField> */}
           </div>
 
           {touches && <div>touches: {touches.join(', ')}</div>}

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 (
       <FlowerRule
         alwaysDisplay={alwaysDisplay}
+        destroyOnHide={destroyOnHide}
         rules={rules}
         value={value}
         flowName={name}
         id={id}
       >
-        {({ hidden }) => (
+        {({ ...rest }) => (
           <Wrapper
-            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}
+          id={id}
+          Component={children}
+          flowName={name}
+          currentNode={currentNode}
+          validate={validate}
+          asyncValidate={asyncValidate}
+          asyncDebounce={asyncDebounce}
+          asyncInitialError={asyncInitialError}
+          asyncWaitingError={asyncWaitingError}
+          destroyValue={destroyValue}
+          onUpdate={onUpdate}
+          defaultValue={defaultValue}
+          {...rest}
           />
         )}
       </FlowerRule>
@@ -387,14 +390,14 @@ const FlowerField = ({
       <FlowerRule
         key={i}
         alwaysDisplay={alwaysDisplay}
+        destroyOnHide={destroyOnHide}
         rules={rules}
         value={value}
         flowName={name}
       >
-        {({ hidden }) => (
+        {({ ...rest }) => (
           <Wrapper
             {...props}
-            hidden={hidden}
             id={id}
             Component={Component}
             flowName={name}
@@ -407,6 +410,7 @@ const FlowerField = ({
             destroyValue={destroyValue}
             onUpdate={onUpdate}
             defaultValue={defaultValue}
+            {...rest}
           />
         )}
       </FlowerRule>

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
     }

packages/flower-react/src/components/types/FlowerRule.ts

@@ -27,12 +27,16 @@ 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*/
   children?:
     | React.ReactNode
     | ((props: {
         hidden?: boolean
+        hiddenAndDestroyValue?: boolean
+        destroyOnHide?: boolean
       }) => React.ReactNode | React.ReactElement | undefined)
 }