Make form result available in row menu

Author: arthurxavierx

src/Lumi/Components/Form/Table.purs

@@ -21,7 +21,7 @@ import Data.Maybe (Maybe, fromMaybe, isNothing, maybe)
 import Data.Monoid (guard)
 import Data.Newtype (class Newtype, un)
 import Data.Nullable as Nullable
-import Data.Traversable (for_, traverse)
+import Data.Traversable (for_, traverse, traverse_)
 import Data.Tuple (Tuple(..))
 import Effect (Effect)
 import Effect.Aff (Aff, launchAff_)
@@ -87,7 +87,7 @@ revalidate form props row = (un TableFormBuilder form props).validate row
 editableTable
   :: forall props row result
    . { addLabel :: String
-     , addRow :: Maybe (Aff row)
+     , addRow :: Maybe (Aff (Maybe row))
      , formBuilder :: TableFormBuilder { readonly :: Boolean | props } row result
      , maxRows :: Int
        -- | Controls what is displayed in the last cell of an editable table row,
@@ -97,6 +97,7 @@ editableTable
            , update :: (row -> row) -> Effect Unit
            }
         -> row
+        -> Maybe result
         -> JSX
      , summary :: JSX
      }
@@ -127,8 +128,8 @@ editableTable { addLabel, addRow, formBuilder: builder, maxRows, rowMenu, summar
             , rows: Left $ mapWithIndex Tuple rows
             , onRowAdd:
                 for_ addRow \addRow' -> launchAff_ do
-                  row <- addRow'
-                  liftEffect $ onChange (flip Array.snoc row)
+                  rowM <- addRow'
+                  traverse_ (liftEffect <<< onChange <<< flip Array.snoc) rowM
             , onRowRemove: \(Tuple index _) ->
                 onChange \rows' -> fromMaybe rows' (Array.deleteAt index rows')
             , removeCell: \onRowRemoveM (Tuple index row) ->
@@ -137,6 +138,7 @@ editableTable { addLabel, addRow, formBuilder: builder, maxRows, rowMenu, summar
                   , update: onChange <<< ix index
                   }
                   row
+                  (validate row)
             , columns:
                 columns <#> \{ label, render } ->
                   { label
@@ -152,14 +154,15 @@ editableTable { addLabel, addRow, formBuilder: builder, maxRows, rowMenu, summar
 nonEmptyEditableTable
   :: forall props row result
    . { addLabel :: String
-     , addRow :: Maybe (Aff row)
+     , addRow :: Maybe (Aff (Maybe row))
      , formBuilder :: TableFormBuilder { readonly :: Boolean | props } row result
      , maxRows :: Int
      , rowMenu
         :: { remove :: Maybe (Effect Unit)
            , update :: (row -> row) -> Effect Unit
            }
         -> row
+        -> Maybe result
         -> JSX
      , summary :: JSX
      }
@@ -190,8 +193,8 @@ nonEmptyEditableTable { addLabel, addRow, formBuilder: builder, maxRows, rowMenu
             , rows: Right $ mapWithIndex Tuple rows
             , onRowAdd:
                 for_ addRow \addRow' -> launchAff_ do
-                  row <- addRow'
-                  liftEffect $ onChange (flip NEA.snoc row)
+                  rowM <- addRow'
+                  traverse_ (liftEffect <<< onChange <<< flip NEA.snoc) rowM
             , onRowRemove: \(Tuple index _) ->
                 onChange \rows' -> fromMaybe rows' (NEA.fromArray =<< NEA.deleteAt index rows')
             , removeCell: \onRowRemoveM (Tuple index row) ->
@@ -200,6 +203,7 @@ nonEmptyEditableTable { addLabel, addRow, formBuilder: builder, maxRows, rowMenu
                   , update: onChange <<< ix index
                   }
                   row
+                  (validate row)
             , columns:
                 columns <#> \{ label, render } ->
                   { label
@@ -213,13 +217,14 @@ nonEmptyEditableTable { addLabel, addRow, formBuilder: builder, maxRows, rowMenu
 -- | Default row menu that displays a bin icon, which, when clicked, deletes the
 -- | current row.
 defaultRowMenu
-  :: forall row
+  :: forall row result
    . { remove :: Maybe (Effect Unit)
      , update :: (row -> row) -> Effect Unit
      }
   -> row
+  -> Maybe result
   -> JSX
-defaultRowMenu { remove } row =
+defaultRowMenu { remove } row _ =
   EditableTable.defaultRemoveCell (map const remove) row
 
 -- | Convert a `FormBuilder` into a column of a table form with the specified

src/Lumi/Components/Input.purs

@@ -91,6 +91,7 @@ displayStep (Step e) = show e
 
 type InputProps =
   { "type" :: String
+  , inputMode :: String
   , autoComplete :: String
   , autoFocus :: Boolean
   , checked :: CheckboxState
@@ -125,6 +126,7 @@ input = makeStateless component $ element lumiInputElement <<< mapProps
       , "data-testid": props.testId
       , "data-variant": show props.variant
       , "type": props."type"
+      , inputMode: props.inputMode
       , autoComplete: props.autoComplete
       , autoFocus: props.autoFocus
       , checked: props.checked == On
@@ -150,6 +152,7 @@ input = makeStateless component $ element lumiInputElement <<< mapProps
 text_ :: InputProps
 text_ =
   { "type": "text"
+  , inputMode: "text"
   , autoComplete: "on"
   , autoFocus: false
   , checked: Off
@@ -181,6 +184,7 @@ username = text_
 email :: InputProps
 email = text_
   { "type" = "email"
+  , inputMode = "email"
   , autoComplete = "email"
   }
 
@@ -202,33 +206,39 @@ ccName = text_
 
 ccNumber :: InputProps
 ccNumber = text_
-  { autoComplete = "cc-number"
+  { inputMode = "numeric"
+  , autoComplete = "cc-number"
   }
 
 ccExpMonth :: InputProps
 ccExpMonth = text_
-  { autoComplete = "cc-exp-month"
+  { inputMode = "numeric"
+  , autoComplete = "cc-exp-month"
   }
 
 ccExpYear :: InputProps
 ccExpYear = text_
-  { autoComplete = "cc-exp-year"
+  { inputMode = "numeric"
+  , autoComplete = "cc-exp-year"
   }
 
 ccCode :: InputProps
 ccCode = text_
-  { autoComplete = "cc-csc"
+  { inputMode = "numeric"
+  , autoComplete = "cc-csc"
   }
 
 telephone :: InputProps
 telephone = text_
   { "type" = "tel"
+  , inputMode = "tel"
   , autoComplete = "tel"
   }
 
 search :: InputProps
 search = text_
   { "type" = "search"
+  , inputMode = "search"
   }
 
 hidden :: InputProps
@@ -244,6 +254,7 @@ date = text_
 number :: InputProps
 number = text_
   { "type" = "number"
+  , inputMode = "decimal"
   , step = notNull Any
   }