Lumi.Components.Form.Internal

data Tree

Constructors

• Child { child :: JSX, key :: Maybe String }
• Wrapper { children :: Forest, key :: Maybe String, wrap :: Array JSX -> JSX }
• Node { children :: Forest, key :: Maybe String, label :: JSX, required :: RequiredField, validationError :: Maybe ValidationMessage }

Instances

• (Warn (Above (Text "The `Parallel` instance to `FormBuilder` is deprecated.") (Text "Prefer using `Form.parallel` and `Form.sequential` instead."))) => Parallel (FormBuilder' (Array Tree) props unvalidated) (SeqFormBuilder' (Array Tree) props unvalidated)

type Forest = Array Tree

pruneTree :: Tree -> Maybe Tree

Traverse a tree bottom-up, removing all "internal" nodes (i.e. Wrapper or Node constructors) which have empty children arrays. In the case where there's nothing left in the tree after pruning, we return Nothing.

We need to perform the traversal bottom-up because, for example, a subtree such as

let
  w children = Wrapper { key: Nothing, children }
in
  w [w []]

should be pruned, but a top-down operation would not be able to identify such a subtree as prunable.

newtype FormBuilder' ui props unvalidated result

An applicative functor which can be used to build forms. Forms can be turned into components using the build function.

Constructors

• FormBuilder (props -> unvalidated -> { edit :: ((unvalidated -> unvalidated) -> Effect Unit) -> ui, validate :: Maybe result })

Instances

• Newtype (FormBuilder' ui props unvalidated result) _
• Functor (FormBuilder' ui props unvalidated)
• (Semigroup ui) => Apply (FormBuilder' ui props unvalidated)
• (Monoid ui) => Applicative (FormBuilder' ui props unvalidated)
• (Warn (Above (Text "The `Parallel` instance to `FormBuilder` is deprecated.") (Text "Prefer using `Form.parallel` and `Form.sequential` instead."))) => Parallel (FormBuilder' (Array Tree) props unvalidated) (SeqFormBuilder' (Array Tree) props unvalidated)

type FormBuilder props unvalidated result = FormBuilder' Forest props unvalidated result

parallel :: forall props value. String -> (SeqFormBuilder props value) ~> (FormBuilder props value)

sequential :: forall props value. String -> (FormBuilder props value) ~> (SeqFormBuilder props value)

newtype SeqFormBuilder' ui props unvalidated result

A form builder where each field depends on the validity of the previous ones. That is, every field is only displayed if all the previous ones are valid. Forms can be turned into components using the build function.

Constructors

• SeqFormBuilder (FormBuilder' ui props unvalidated result)

Instances

• (Warn (Above (Text "The `Parallel` instance to `FormBuilder` is deprecated.") (Text "Prefer using `Form.parallel` and `Form.sequential` instead."))) => Parallel (FormBuilder' (Array Tree) props unvalidated) (SeqFormBuilder' (Array Tree) props unvalidated)
• Newtype (SeqFormBuilder' ui props unvalidated result) _
• Functor (SeqFormBuilder' ui props unvalidated)
• (Monoid ui) => Apply (SeqFormBuilder' ui props unvalidated)
• (Monoid ui) => Applicative (SeqFormBuilder' ui props unvalidated)
• (Monoid ui) => Bind (SeqFormBuilder' ui props unvalidated)
• (Monoid ui) => Monad (SeqFormBuilder' ui props unvalidated)
• (Monoid ui) => Alt (SeqFormBuilder' ui props unvalidated)
• (Monoid ui) => Plus (SeqFormBuilder' ui props unvalidated)
• (Monoid ui) => Alternative (SeqFormBuilder' ui props unvalidated)

type SeqFormBuilder props unvalidated result = SeqFormBuilder' Forest props unvalidated result

formBuilder :: forall props unvalidated a. (props -> unvalidated -> { edit :: ((unvalidated -> unvalidated) -> Effect Unit) -> JSX, validate :: Maybe a }) -> FormBuilder props unvalidated a

Create a FormBuilder from a function which produces a form element as JSX and a validated result.

formBuilder_ :: forall props a. (props -> a -> (a -> Effect Unit) -> JSX) -> FormBuilder props a a

The simplest way to create a FormBuilder. Create a FormBuilder provided a function that, given the current value and a change callback, renders a form element as JSX.

invalidate :: forall ui props unvalidated a b. FormBuilder' ui props unvalidated a -> FormBuilder' ui props unvalidated b

Invalidate a form, keeping its user interface but discarding the result and possibly changing its type.

revalidate :: forall ui props unvalidated result. FormBuilder' ui props unvalidated result -> props -> unvalidated -> Maybe result

Revalidate the form, in order to display error messages or create a validated result.

listen :: forall ui props unvalidated result. (unvalidated -> Aff (unvalidated -> unvalidated)) -> FormBuilder' ui props unvalidated result -> FormBuilder' ui props unvalidated result

Listens for changes in a form's state and allows for performing asynchronous effects and additional state changes.

The asynchronous effect is fired on every state change. Note that from a UI perspective, the effect is not observably asynchronous: the asynchronous action is executed in the background, but the wrapped form's UI is not responsive to the user until the action completes. To use this function effectively, the supplied callback must return promptly. Setting some React state in the callback would be appropriate but making network calls should be done judiciously. Network calls can be justified if they are in response to infrequent updates (e.g. selecting an item in a dropdown that causes loading of data specific to that selection) but if the calls are in response to every digit typed into a number input field for example, a user may experience delays with their inputs and the backend will be hit excessively.