-
-
Notifications
You must be signed in to change notification settings - Fork 32
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add submitPreventDefault to Formless when using forms #80
Changes from 2 commits
343bdc4
fc3b891
f9c28ba
ea25265
a10c953
6e81b4b
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,121 @@ | ||
-- | This example component shows how submitPreventDefault works in Halogen Formless | ||
module Example.Readme.Component (component) where | ||
|
||
import Prelude | ||
|
||
import Data.Either (Either(..)) | ||
import Data.Int as Int | ||
import Data.Maybe (Maybe(..)) | ||
import Data.Newtype (class Newtype, unwrap) | ||
import Effect.Aff.Class (class MonadAff) | ||
import Effect.Class.Console (logShow) | ||
import Example.App.UI.Element as UI | ||
import Example.App.Validation (class ToText) | ||
import Formless as F | ||
import Halogen as H | ||
import Halogen.HTML as HH | ||
import Halogen.HTML.Events as HE | ||
import Halogen.HTML.Properties as HP | ||
import Type.Proxy (Proxy(..)) | ||
|
||
type Dog = { name :: String, age :: Age } | ||
|
||
newtype Age = Age Int | ||
|
||
derive instance newtypeAge :: Newtype Age _ | ||
|
||
instance showAge :: Show Age where | ||
show = show <<< unwrap | ||
|
||
data AgeError = TooLow | TooHigh | InvalidInt | ||
|
||
newtype DogForm (r :: Row Type -> Type) f = DogForm (r | ||
-- error input output | ||
( name :: f Void String String | ||
, age :: f AgeError String Age | ||
)) | ||
|
||
derive instance newtypeDogForm :: Newtype (DogForm r f) _ | ||
|
||
instance ToText AgeError where | ||
toText = case _ of | ||
InvalidInt -> "Age must be an integer" | ||
TooLow -> "Age cannot be negative" | ||
TooHigh -> "No dog has lived past 30 before" | ||
|
||
input :: forall m. Monad m => F.Input' DogForm m | ||
input = | ||
{ initialInputs: Nothing -- same as: Just (F.wrapInputFields { name: "", age: "" }) | ||
, validators: DogForm | ||
{ name: F.noValidation | ||
, age: F.hoistFnE_ \str -> case Int.fromString str of | ||
Nothing -> Left InvalidInt | ||
Just n | ||
| n < 0 -> Left TooLow | ||
| n > 30 -> Left TooHigh | ||
| otherwise -> Right (Age n) | ||
} | ||
} | ||
|
||
spec :: forall input m. Monad m => F.Spec' DogForm Dog input m | ||
spec = F.defaultSpec { render = render, handleEvent = F.raiseResult } | ||
where | ||
render st@{ form } = | ||
UI.formContent_ | ||
[ HH.form | ||
[ -- Using a form forces us to deal with an event. Using '\_ -> F.submit' here | ||
-- would fire the event and cause the page to reload. Instead, we use | ||
-- 'F.submitPreventDefault' to avoid firing the event unnecessarily | ||
HE.onSubmit F.submitPreventDefault | ||
] | ||
[ UI.input | ||
{ label: "Name" | ||
, help: Right "Write your dog's name" | ||
, placeholder: "Mila" | ||
} | ||
[ HP.value $ F.getInput _name st.form | ||
, HE.onValueInput (F.setValidate _name) | ||
] | ||
, UI.input | ||
{ label: "Age" | ||
, help: UI.resultToHelp "Write your dog's age" $ F.getResult _age st.form | ||
, placeholder: "3" | ||
} | ||
[ HP.value $ F.getInput _age form | ||
, HE.onValueInput $ F.setValidate _age | ||
] | ||
, UI.buttonPrimary | ||
[] | ||
[ HH.text "Submit" ] | ||
] | ||
] | ||
where | ||
_name = Proxy :: Proxy "name" | ||
_age = Proxy :: Proxy "age" | ||
|
||
data Action = HandleDogForm Dog | ||
|
||
component :: forall q i o m. MonadAff m => H.Component q i o m | ||
component = H.mkComponent | ||
{ initialState: const unit | ||
, render: const render | ||
, eval: H.mkEval $ H.defaultEval { handleAction = handleAction } | ||
} | ||
where | ||
handleAction (HandleDogForm dog) = logShow (dog :: Dog) | ||
|
||
render = | ||
UI.section_ | ||
[ UI.h1_ [ HH.text "Formless" ] | ||
, UI.h2_ [ HH.text "A form using a default form element" ] | ||
, UI.p_ | ||
""" | ||
In formless, if you use a default form you would notice a page refresh when submitting the form. | ||
In the other examples, this is avoided by not using a form element. In this example, we use | ||
a special function F.submitPreventDefault to avoid the page refresh. | ||
|
||
You can download the examples and replace F.submitPreventDefault with | ||
\_ -> F.submit to see the difference. | ||
""" | ||
, HH.slot F._formless unit (F.component (const input) spec) unit HandleDogForm | ||
] |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -91,7 +91,9 @@ spec :: forall input m. Monad m => F.Spec' DogForm Dog input m | |
spec = F.defaultSpec { render = render, handleEvent = F.raiseResult } | ||
where | ||
render st@{ form } = | ||
HH.form_ | ||
HH.form | ||
[ HE.onSubmit F.submitPreventDefault | ||
] | ||
Comment on lines
+94
to
+96
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Use There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I can do this in a follow up PR if you'd like, but we really should switch all forms to be written this way There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I was thinking to do that follow up PR, if that's not a problem |
||
[ HH.input | ||
[ HP.value $ F.getInput _name form | ||
, HE.onValueInput $ F.set _name | ||
|
@@ -105,8 +107,7 @@ spec = F.defaultSpec { render = render, handleEvent = F.raiseResult } | |
Just InvalidInt -> "Age must be an integer" | ||
Just TooLow -> "Age cannot be negative" | ||
Just TooHigh -> "No dog has lived past 30 before" | ||
, HH.button | ||
[ HE.onClick \_ -> F.submit ] | ||
, HH.button_ | ||
[ HH.text "Submit" ] | ||
] | ||
where | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The text explaining how
submitPreventDefault
changes the behavior of them form and how to modify the example is probably worth reviewing as well.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think this can be removed, probably, as you really ought to just use forms this way in general. I think it'd be better to add documentation to
submit
that says it can be used to submit the form imperatively, but that if you want to capture the form submission event and submit your form that you should usesubmitPreventDefault
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We introduced
submitPreventDefault
to avoid the breaking change. Maybe it could be changed to work the other way around in a future major release?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yea, I’d rather have ‘submit’ and ‘submit_’ using the usual Halogen naming conventions in the future!