reflex 0.3.2__py3-none-any.whl → 0.3.3a1__py3-none-any.whl

reflex/components/forms/button.py

@@ -56,6 +56,9 @@ class Button(ChakraComponent):
     # Components that are not allowed as children.
     invalid_children: List[str] = ["Button", "MenuButton"]
 
+    # The name of the form field
+    name: Var[str]
+
 
 class ButtonGroup(ChakraComponent):
     """A group of buttons."""

reflex/components/forms/checkbox.py

@@ -50,6 +50,9 @@ class Checkbox(ChakraComponent):
     # The name of the input field in a checkbox (Useful for form submission).
     name: Var[str]
 
+    # The value of the input field when checked (use is_checked prop for a bool)
+    value: Var[str] = Var.create(True)  # type: ignore
+
     # The spacing between the checkbox and its label text (0.5rem)
     spacing: Var[str]
 

reflex/components/forms/form.py

@@ -1,13 +1,36 @@
 """Form components."""
 from __future__ import annotations
 
-from typing import Any, Callable, Dict, List
+from typing import Any, Dict
+
+from jinja2 import Environment
 
 from reflex.components.component import Component
 from reflex.components.libs.chakra import ChakraComponent
+from reflex.components.tags import Tag
 from reflex.constants import EventTriggers
-from reflex.event import EventChain, EventHandler, EventSpec
-from reflex.vars import Var
+from reflex.event import EventChain
+from reflex.utils import imports
+from reflex.utils.format import format_event_chain, to_camel_case
+from reflex.utils.serializers import serialize
+from reflex.vars import BaseVar, Var, get_unique_variable_name
+
+FORM_DATA = Var.create("form_data")
+HANDLE_SUBMIT_JS_JINJA2 = Environment().from_string(
+    """
+    const handleSubmit{{ handle_submit_unique_name }} = useCallback((ev) => {
+        const $form = ev.target
+        ev.preventDefault()
+        const {{ form_data }} = {...Object.fromEntries(new FormData($form).entries()), ...{{ field_ref_mapping }}}
+
+        {{ on_submit_event_chain }}
+
+        if ({{ reset_on_submit }}) {
+            $form.reset()
+        }
+    })
+    """
+)
 
 
 class Form(ChakraComponent):
@@ -18,35 +41,68 @@ class Form(ChakraComponent):
     # What the form renders to.
     as_: Var[str] = "form"  # type: ignore
 
-    def _create_event_chain(
-        self,
-        event_trigger: str,
-        value: Var
-        | EventHandler
-        | EventSpec
-        | List[EventHandler | EventSpec]
-        | Callable[..., Any],
-    ) -> EventChain | Var:
-        """Override the event chain creation to preventDefault for on_submit.
+    # If true, the form will be cleared after submit.
+    reset_on_submit: Var[bool] = False  # type: ignore
 
-        Args:
-            event_trigger: The event trigger.
-            value: The value of the event trigger.
+    # The name used to make this form's submit handler function unique
+    handle_submit_unique_name: Var[str]
 
-        Returns:
-            The event chain.
-        """
-        chain = super()._create_event_chain(event_trigger, value)
-        if event_trigger == EventTriggers.ON_SUBMIT and isinstance(chain, EventChain):
-            return chain.prevent_default
-        return chain
+    @classmethod
+    def create(cls, *children, **props) -> Component:
+        """Create a form component.
 
-    def get_event_triggers(self) -> Dict[str, Any]:
-        """Get the event triggers that pass the component's value to the handler.
+        Args:
+            *children: The children of the form.
+            **props: The properties of the form.
 
         Returns:
-            A dict mapping the event trigger to the var that is passed to the handler.
+            The form component.
         """
+        if "handle_submit_unique_name" not in props:
+            props["handle_submit_unique_name"] = get_unique_variable_name()
+        return super().create(*children, **props)
+
+    def _get_imports(self) -> imports.ImportDict:
+        return imports.merge_imports(
+            super()._get_imports(),
+            {"react": {imports.ImportVar(tag="useCallback")}},
+        )
+
+    def _get_hooks(self) -> str | None:
+        if EventTriggers.ON_SUBMIT not in self.event_triggers:
+            return
+        return HANDLE_SUBMIT_JS_JINJA2.render(
+            handle_submit_unique_name=self.handle_submit_unique_name,
+            form_data=FORM_DATA,
+            field_ref_mapping=serialize(self._get_form_refs()),
+            on_submit_event_chain=format_event_chain(
+                self.event_triggers[EventTriggers.ON_SUBMIT]
+            ),
+            reset_on_submit=self.reset_on_submit,
+        )
+
+    def _render(self) -> Tag:
+        render_tag = (
+            super()
+            ._render()
+            .remove_props(
+                "reset_on_submit",
+                "handle_submit_unique_name",
+                to_camel_case(EventTriggers.ON_SUBMIT),
+            )
+        )
+        if EventTriggers.ON_SUBMIT in self.event_triggers:
+            render_tag.add_props(
+                **{
+                    EventTriggers.ON_SUBMIT: BaseVar(
+                        _var_name=f"handleSubmit{self.handle_submit_unique_name}",
+                        _var_type=EventChain,
+                    )
+                }
+            )
+        return render_tag
+
+    def _get_form_refs(self) -> Dict[str, Any]:
         # Send all the input refs to the handler.
         form_refs = {}
         for ref in self.get_refs():
@@ -60,10 +116,17 @@ class Form(ChakraComponent):
                 form_refs[ref[4:]] = Var.create(
                     f"getRefValue({ref})", _var_is_local=False
                 )
+        return form_refs
 
+    def get_event_triggers(self) -> Dict[str, Any]:
+        """Get the event triggers that pass the component's value to the handler.
+
+        Returns:
+            A dict mapping the event trigger to the var that is passed to the handler.
+        """
         return {
             **super().get_event_triggers(),
-            EventTriggers.ON_SUBMIT: lambda e0: [form_refs],
+            EventTriggers.ON_SUBMIT: lambda e0: [FORM_DATA],
         }
 
 

reflex/components/forms/input.py

@@ -55,6 +55,9 @@ class Input(ChakraComponent):
     # "lg" | "md" | "sm" | "xs"
     size: Var[LiteralButtonSize]
 
+    # The name of the form field
+    name: Var[str]
+
     def _get_imports(self) -> imports.ImportDict:
         return imports.merge_imports(
             super()._get_imports(),

reflex/components/forms/numberinput.py

@@ -68,6 +68,9 @@ class NumberInput(ChakraComponent):
     # "outline" | "filled" | "flushed" | "unstyled"
     variant: Var[LiteralInputVariant]
 
+    # The name of the form field
+    name: Var[str]
+
     def get_event_triggers(self) -> Dict[str, Any]:
         """Get the event triggers that pass the component's value to the handler.
 

reflex/components/forms/pininput.py

@@ -4,10 +4,11 @@ from __future__ import annotations
 from typing import Any, Optional, Union
 
 from reflex.components.component import Component
-from reflex.components.layout import Foreach
 from reflex.components.libs.chakra import ChakraComponent, LiteralInputVariant
+from reflex.components.tags.tag import Tag
 from reflex.constants import EventTriggers
 from reflex.utils import format
+from reflex.utils.imports import ImportDict, merge_imports
 from reflex.vars import Var
 
 
@@ -58,6 +59,20 @@ class PinInput(ChakraComponent):
     # "outline" | "flushed" | "filled" | "unstyled"
     variant: Var[LiteralInputVariant]
 
+    # The name of the form field
+    name: Var[str]
+
+    def _get_imports(self) -> ImportDict:
+        """Include PinInputField explicitly because it may not be a child component at compile time.
+
+        Returns:
+            The merged import dict.
+        """
+        return merge_imports(
+            super()._get_imports(),
+            PinInputField().get_imports(),  # type: ignore
+        )
+
     def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
         """Get the event triggers that pass the component's value to the handler.
 
@@ -70,13 +85,24 @@ class PinInput(ChakraComponent):
             EventTriggers.ON_COMPLETE: lambda e0: [e0],
         }
 
-    def get_ref(self):
-        """Return a reference because we actually attached the ref to the PinInputFields.
+    def get_ref(self) -> str | None:
+        """Override ref handling to handle array refs.
+
+        PinInputFields may be created dynamically, so it's not possible
+        to compute their ref at compile time, so we return a cheating
+        guess if the id is specified.
+
+        The `ref` for this outer component will always be stripped off, so what
+        is returned here only matters for form ref collection purposes.
 
         Returns:
             None.
         """
-        return None
+        if any(isinstance(c, PinInputField) for c in self.children):
+            return None
+        if self.id:
+            return format.format_array_ref(self.id, idx=self.length)
+        return super().get_ref()
 
     def _get_ref_hook(self) -> Optional[str]:
         """Override the base _get_ref_hook to handle array refs.
@@ -86,10 +112,22 @@ class PinInput(ChakraComponent):
         """
         if self.id:
             ref = format.format_array_ref(self.id, None)
+            refs_declaration = Var.range(self.length).foreach(
+                lambda: Var.create_safe("useRef(null)", _var_is_string=False),
+            )
+            refs_declaration._var_is_local = True
             if ref:
-                return f"const {ref} = Array.from({{length:{self.length}}}, () => useRef(null));"
+                return f"const {ref} = {refs_declaration}"
             return super()._get_ref_hook()
 
+    def _render(self) -> Tag:
+        """Override the base _render to remove the fake get_ref.
+
+        Returns:
+            The rendered component.
+        """
+        return super()._render().remove_props("ref")
+
     @classmethod
     def create(cls, *children, **props) -> Component:
         """Create a pin input component.
@@ -104,22 +142,17 @@ class PinInput(ChakraComponent):
         Returns:
             The pin input component.
         """
-        if not children and "length" in props:
-            _id = props.get("id", None)
-            length = props["length"]
-            if _id:
-                children = [
-                    Foreach.create(
-                        list(range(length)),  # type: ignore
-                        lambda ref, i: PinInputField.create(
-                            key=i,
-                            id=_id,
-                            index=i,
-                        ),
-                    )
-                ]
-            else:
-                children = [PinInputField()] * length
+        if children:
+            props.pop("length", None)
+        elif "length" in props:
+            field_props = {}
+            if "id" in props:
+                field_props["id"] = props["id"]
+            if "name" in props:
+                field_props["name"] = props["name"]
+            children = [
+                PinInputField.for_length(props["length"], **field_props),
+            ]
         return super().create(*children, **props)
 
 
@@ -132,6 +165,29 @@ class PinInputField(ChakraComponent):
     # Default to None because it is assigned by PinInput when created.
     index: Optional[Var[int]] = None
 
+    # The name of the form field
+    name: Var[str]
+
+    @classmethod
+    def for_length(cls, length: Var | int, **props) -> Var:
+        """Create a PinInputField for a PinInput with a given length.
+
+        Args:
+            length: The length of the PinInput.
+            props: The props of each PinInputField (name will become indexed).
+
+        Returns:
+            The PinInputField.
+        """
+        name = props.get("name")
+
+        def _create(i):
+            if name is not None:
+                props["name"] = f"{name}-{i}"
+            return PinInputField.create(**props, index=i, key=i)
+
+        return Var.range(length).foreach(_create)  # type: ignore
+
     def _get_ref_hook(self) -> Optional[str]:
         return None
 

reflex/components/forms/radio.py

@@ -23,6 +23,9 @@ class RadioGroup(ChakraComponent):
     # The default value.
     default_value: Var[Any]
 
+    # The name of the form field
+    name: Var[str]
+
     def get_event_triggers(self) -> Dict[str, Union[Var, Any]]:
         """Get the event triggers that pass the component's value to the handler.
 

reflex/components/forms/rangeslider.py

@@ -45,6 +45,9 @@ class RangeSlider(ChakraComponent):
     # The minimum distance between slider thumbs. Useful for preventing the thumbs from being too close together.
     min_steps_between_thumbs: Var[int]
 
+    # The name of the form field
+    name: Var[str]
+
     def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
         """Get the event triggers that pass the component's value to the handler.
 

reflex/components/forms/select.py

@@ -46,6 +46,9 @@ class Select(ChakraComponent):
     # The size of the select.
     size: Var[str]
 
+    # The name of the form field
+    name: Var[str]
+
     def get_event_triggers(self) -> Dict[str, Union[Var, Any]]:
         """Get the event triggers that pass the component's value to the handler.
 

reflex/components/forms/slider.py

@@ -66,6 +66,9 @@ class Slider(ChakraComponent):
     # Maximum width of the slider.
     max_w: Var[str]
 
+    # The name of the form field
+    name: Var[str]
+
     def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
         """Get the event triggers that pass the component's value to the handler.
 

reflex/components/forms/switch.py

@@ -34,6 +34,9 @@ class Switch(ChakraComponent):
     # The name of the input field in a switch (Useful for form submission).
     name: Var[str]
 
+    # The value of the input field when checked (use is_checked prop for a bool)
+    value: Var[str] = Var.create(True)  # type: ignore
+
     # The spacing between the switch and its label text (0.5rem)
     spacing: Var[str]
 

reflex/components/forms/textarea.py

@@ -45,6 +45,9 @@ class TextArea(ChakraComponent):
     # "outline" | "filled" | "flushed" | "unstyled"
     variant: Var[LiteralInputVariant]
 
+    # The name of the form field
+    name: Var[str]
+
     def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
         """Get the event triggers that pass the component's value to the handler.
 

reflex/components/libs/chakra.py

@@ -122,6 +122,8 @@ LiteralColorScheme = Literal[
 LiteralVariant = Literal["solid", "subtle", "outline"]
 LiteralDividerVariant = Literal["solid", "dashed"]
 LiteralTheme = Literal["light", "dark"]
+
+
 LiteralTagColorScheme = Literal[
     "gray",
     "red",