Form updates (#131)

* input checkbox

* export checkbox

* checkbox alignment

* checkbox with description

* inputPlaceholderText_

* textarea_

* cleanup + fix export

* code review

* WIP checkbox title/subtitle alignment

* readonly

* readonly code review

* arthurxavierx: Align label in checkbox form builder

* cleanup

Author: kimispencer

docs/Examples/Form.example.purs

@@ -2,6 +2,7 @@ module Lumi.Components.Examples.Form where
 
 import Prelude
 
+import Color (cssStringHSLA)
 import Control.Coroutine.Aff (close, emit, produceAff)
 import Control.MonadZero (guard)
 import Data.Array as Array
@@ -22,6 +23,7 @@ import Effect.Class (liftEffect)
 import Effect.Random (randomRange)
 import Effect.Unsafe (unsafePerformEffect)
 import Lumi.Components.Button as Button
+import Lumi.Components.Color (colors)
 import Lumi.Components.Column (column, column_)
 import Lumi.Components.Example (example)
 import Lumi.Components.Form (FormBuilder, Validated)
@@ -33,6 +35,8 @@ import Lumi.Components.LabeledField (RequiredField(..))
 import Lumi.Components.Modal (dialog)
 import Lumi.Components.Row (row)
 import Lumi.Components.Size (Size(..))
+import Lumi.Components.Text as T
+import Lumi.Components.Textarea as Textarea
 import Lumi.Components.Upload (FileId(..))
 import Lumi.Components.Upload as Upload
 import React.Basic.DOM (css)
@@ -193,6 +197,8 @@ type User =
       , password2 :: Validated String
       }
   , admin :: Boolean
+  , checkbox :: Boolean
+  , descriptiveCheckbox :: Boolean
   , height :: Validated String
   , addresses :: Validated (Array Address)
   , pets :: Validated (Array Pet)
@@ -206,6 +212,8 @@ type ValidatedUser =
   , lastName :: NonEmptyString
   , password :: NonEmptyString
   , admin :: Boolean
+  , checkbox :: Boolean
+  , descriptiveCheckbox :: Boolean
   , height :: Maybe Number
   , addresses :: Array ValidatedAddress
   , pets :: Array ValidatedPet
@@ -248,7 +256,7 @@ userForm = ado
           (pure "First name should be longer than two characters (but it doesn't have to be).")
       )
     $ F.validated (F.nonEmpty "First name")
-    $ F.textbox
+    $ F.inputBox $ Input.text_ { placeholder = "First name" }
   lastName <-
     F.indent "Last Name" Required
     $ F.focus (prop (SProxy :: SProxy "lastName"))
@@ -272,6 +280,23 @@ userForm = ado
     F.indent "Admin?" Neither
     $ F.focus (prop (SProxy :: SProxy "admin"))
     $ F.switch
+  checkbox <-
+    F.indent "Checked?" Neither
+    $ F.focus (prop (SProxy :: SProxy "checkbox"))
+    $ F.checkbox
+  descriptiveCheckbox <-
+    F.focus (prop (SProxy :: SProxy "descriptiveCheckbox"))
+    $ F.labeledCheckbox
+    $ column
+        { style: R.css { maxWidth: "300px" }
+        , children:
+            [ T.body_ "This is a right aligned description"
+            , T.text T.subtext
+                { style = R.css { color: cssStringHSLA colors.black1 }
+                , children = [ R.text "with a sublabel that reads \"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"" ]
+                }
+            ]
+        }
 
   F.section "Personal data"
   height <-
@@ -306,6 +331,10 @@ userForm = ado
     F.indent "Notes" Optional
     $ F.focus (prop (SProxy :: SProxy "notes"))
     $ F.textarea
+  notes <-
+    F.indent "Notes (with placeholder)" Optional
+    $ F.focus (prop (SProxy :: SProxy "notes"))
+    $ F.textarea_ $ Textarea.defaults { placeholder = "Placeholder text..." }
 
   F.section "Pets"
   pets <-
@@ -418,6 +447,8 @@ userForm = ado
     , lastName
     , password
     , admin
+    , checkbox
+    , descriptiveCheckbox
     , height
     , pets
     , leastFavoriteColors
@@ -523,4 +554,3 @@ addressForm = ado
           { label: un State state
           , value: state
           }
-

src/Lumi/Components/Form.purs

@@ -14,7 +14,10 @@ module Lumi.Components.Form
   , textbox
   , passwordBox
   , textarea
+  , textarea_
   , switch
+  , checkbox
+  , labeledCheckbox
   , radioGroup
   , file
   , genericSelect
@@ -352,6 +355,23 @@ passwordBox
        String
 passwordBox = inputBox Input.password
 
+-- | A configurable textarea box makes a `FormBuilder` for strings
+textarea_
+  :: forall props
+   . Textarea.TextareaProps
+  -> FormBuilder
+       { readonly :: Boolean | props }
+       String
+       String
+textarea_ textareaProps = formBuilder_ \{ readonly } s onChange ->
+  if readonly
+    then Input.alignToInput $ R.text s
+    else Textarea.textarea textareaProps
+           { value = s
+           , onChange = capture targetValue (traverse_ onChange)
+           , style = R.css { width: "100%" }
+           }
+
 -- | A simple text box makes a `FormBuilder` for strings
 textarea
   :: forall props
@@ -383,6 +403,44 @@ switch = formBuilder_ \{ readonly } b onChange ->
            , onChange = Events.handler (stopPropagation >>> targetChecked) (traverse_ onChange)
            }
 
+-- | A `checkbox` is an editor for booleans which displays checked or not checked.
+checkbox :: forall props. FormBuilder { readonly :: Boolean | props } Boolean Boolean
+checkbox = labeledCheckbox mempty
+
+-- | A `labeledCheckbox` is an editor that behaves exactly like `checkbox` but
+-- | also accepts a JSX displayed as a label to its right.
+labeledCheckbox
+  :: forall props
+  . JSX
+  -> FormBuilder { readonly :: Boolean | props } Boolean Boolean
+labeledCheckbox label =
+  formBuilder_ \{ readonly } value onChange ->
+    Input.label
+      { style: R.css
+          { flexDirection: "row"
+          , alignSelf: "stretch"
+          , alignItems: "baseline"
+          }
+      , for: null
+      , children:
+          [ Input.input Input.checkbox
+              { style = R.css { marginBottom: "0", alignSelf: "baseline" }
+              , checked = if value then Input.On else Input.Off
+              , disabled = if readonly then true else false
+              , onChange =
+                  if readonly
+                    then Events.handler Events.syntheticEvent \_ -> pure unit
+                    else Events.handler (stopPropagation >>> targetChecked) (traverse_ onChange)
+              }
+          , lumiAlignToInput
+              { style: { flex: "1", marginLeft: "8px" }
+              , children: label
+              }
+          ]
+      }
+  where
+    lumiAlignToInput = element (R.unsafeCreateDOMComponent "lumi-align-to-input")
+    
 -- | A form that edits an optional structure represented by group of radio
 -- | buttons, visually oriented in either horizontal or vertical fashion.
 -- |

src/Lumi/Components/Input.purs

@@ -372,14 +372,20 @@ styles = jss
                       , lineHeight: "1"
                       }
                   }
+              , "&::before":
+                  { content: "'•'"
+                  , visibility: "hidden"
+                  }
               , "&:checked":
                   { "&::before":
                       { content: "'✓'"
+                      , visibility: "visible"
                       }
                   }
               , "&:indeterminate":
                   { "&::before":
                       { content: "'⎻'"
+                      , visibility: "visible"
                       }
                   }
               , "&:disabled":