Support rest of form components in pc.form (#1070)

pynecone/.templates/web/utils/state.js

@@ -289,3 +289,16 @@ export const preventDefault = (event) => {
     event.preventDefault();
   }
 };
+
+/**
+ * Get the value from a ref.
+ * @param ref The ref to get the value from.
+ * @returns The value.
+ */
+export const getRefValue = (ref) => {
+  if (ref.current.type == "checkbox") {
+    return ref.current.checked;
+  } else {
+    return ref.current.value;
+  }
+}

pynecone/compiler/compiler.py

@@ -28,6 +28,7 @@ DEFAULT_IMPORTS: imports.ImportDict = {
         ImportVar(tag="isTrue"),
         ImportVar(tag="preventDefault"),
         ImportVar(tag="refs"),
+        ImportVar(tag="getRefValue"),
     },
     "": {ImportVar(tag="focus-visible/dist/focus-visible")},
     "@chakra-ui/react": {ImportVar(tag=constants.USE_COLOR_MODE)},

pynecone/components/forms/__init__.py

@@ -4,7 +4,7 @@ from .button import Button, ButtonGroup
 from .checkbox import Checkbox, CheckboxGroup
 from .copytoclipboard import CopyToClipboard
 from .editable import Editable, EditableInput, EditablePreview, EditableTextarea
-from .formcontrol import Form, FormControl, FormErrorMessage, FormHelperText, FormLabel
+from .form import Form, FormControl, FormErrorMessage, FormHelperText, FormLabel
 from .iconbutton import IconButton
 from .input import Input, InputGroup, InputLeftAddon, InputRightAddon
 from .numberinput import (

pynecone/components/forms/form.py

@@ -23,7 +23,7 @@ class Form(ChakraComponent):
         # Send all the input refs to the handler.
         return {
             "on_submit": {
-                ref[4:]: Var.create(f"{ref}.current.value", is_local=False)
+                ref[4:]: Var.create(f"getRefValue({ref})", is_local=False)
                 for ref in self.get_refs()
             }
         }