-
-
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
Merged
thomashoneyman
merged 6 commits into
thomashoneyman:main
from
chiroptical:add-submit-prevent-default
Nov 18, 2021
Merged
Changes from all commits
Commits
Show all changes
6 commits
Select commit
Hold shift + click to select a range
343bdc4
Initial commit
chiroptical fc3b891
Remove circular and redundant imports
chiroptical f9c28ba
Update docs on submitPreventDefault
chiroptical ea25265
Update documentation for readme component and submit
chiroptical a10c953
Recursively call submit
chiroptical 6e81b4b
Fix spacing
chiroptical File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,112 @@ | ||
-- | 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 "The form from the readme" ] | ||
, HH.slot F._formless unit (F.component (const input) spec) unit HandleDogForm | ||
] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.
Use
submitPreventDefault
in the readme example to avoid confusionThere 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 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 comment
The 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