Better Select focus behavior and keyboard navigation (#172)

maddie927 · web-flow · commit e81af39d29e4 · 2020-07-14T11:17:46.000-07:00
* Better Select focus behavior and keyboard navigation

* Fix placeholder overflow
diff --git a/docs/Examples/Form.example.purs b/docs/Examples/Form.example.purs
@@ -11,7 +11,7 @@ import Data.Foldable (foldMap)
 import Data.Int as Int
 import Data.Lens (iso)
 import Data.Lens.Record (prop)
-import Data.Maybe (Maybe(..), maybe)
+import Data.Maybe (Maybe(..), isNothing, maybe)
 import Data.Monoid as Monoid
 import Data.Newtype (class Newtype, un)
 import Data.Nullable as Nullable
@@ -225,7 +225,7 @@ type Pet =
   , lastName :: Validated String
   , animal :: Validated (Maybe String)
   , age :: Validated String
-  , color :: Maybe String
+  , color :: Validated (Maybe String)
   }
 
 type ValidatedPet =
@@ -314,9 +314,9 @@ userForm = ado
         , editor: addressForm
         }
   leastFavoriteColors <-
-    F.indent "Least Favorite Colors" Neither
+    F.indent "Least Favorite Colors" Required
     $ F.focus (prop (SProxy :: SProxy "leastFavoriteColors"))
-    $ F.validated (F.nonEmptyArray "Required")
+    $ F.validated (F.nonEmptyArray' "This is absolutely essential. Don't skip it!!")
     $ F.multiSelect show
     $ map (\x -> { label: x, value: x })
     $ [ "Beige"
@@ -348,7 +348,7 @@ userForm = ado
             , lastName: F.Fresh ""
             , animal: F.Fresh Nothing
             , age: F.Fresh "1"
-            , color: Nothing
+            , color: F.Fresh Nothing
             }
         , maxRows: top
         , rowMenu: FT.defaultRowMenu
@@ -401,6 +401,11 @@ userForm = ado
               FT.column_ "Color"
               $ F.withProps \props ->
                   F.focus (prop (SProxy :: SProxy "color"))
+                  $ F.warn (\x ->
+                      Monoid.guard
+                        (isNothing x)
+                        (pure "Your pet has no color??")
+                    )
                   $ F.asyncSelectByKey
                       (loadColor props.simulatePauses)
                       (loadColors props.simulatePauses)
diff --git a/src/Lumi/Components/Form.purs b/src/Lumi/Components/Form.purs
@@ -83,7 +83,7 @@ import Lumi.Components.FetchCache as FetchCache
 import Lumi.Components.Form.Defaults (formDefaults) as Defaults
 import Lumi.Components.Form.Internal (Forest, FormBuilder'(..), FormBuilder, SeqFormBuilder, Tree(..), formBuilder, formBuilder_, invalidate, pruneTree, sequential)
 import Lumi.Components.Form.Internal (Forest, FormBuilder', FormBuilder, SeqFormBuilder', SeqFormBuilder, Tree(..), formBuilder, formBuilder_, invalidate, listen, parallel, revalidate, sequential) as Internal
-import Lumi.Components.Form.Validation (ModifyValidated(..), Validated(..), Validator, _Validated, fromValidated, mustBe, mustEqual, nonEmpty, nonEmptyArray, nonNull, optional, setFresh, setModified, validDate, validInt, validNumber, validated, warn) as Validation
+import Lumi.Components.Form.Validation (ModifyValidated(..), Validated(..), Validator, _Validated, fromValidated, mustBe, mustEqual, nonEmpty, nonEmptyArray, nonNull, nonEmpty', nonEmptyArray', nonNull', optional, setFresh, setModified, validDate, validInt, validNumber, validDate', validInt', validNumber', validated, warn) as Validation
 import Lumi.Components.Input (alignToInput)
 import Lumi.Components.Input as Input
 import Lumi.Components.LabeledField (RequiredField(..), labeledField, labeledFieldValidationErrorStyles, labeledFieldValidationWarningStyles)
@@ -609,7 +609,7 @@ multiSelect encode opts = formBuilder_ \{ readonly } selected onChange ->
         , id: ""
         , name: ""
         , noResultsText: "No results"
-        , placeholder: "Select an option ..."
+        , placeholder: "Select an option..."
         , disabled: false
         , loading: false
         , optionRenderer: R.text <<< _.label
@@ -646,7 +646,7 @@ asyncSelect loadOptions toSelectOption optionRenderer =
         , disabled: false
         , loading: false
         , noResultsText: "No results"
-        , placeholder: "Search ..."
+        , placeholder: "Search..."
         , optionRenderer
         , optionSort: Nothing
         , toSelectOption
@@ -693,7 +693,7 @@ asyncSelectByKey getData loadOptions fromId toId toSelectOption optionRenderer =
                 , disabled: false
                 , loading: isJust value && isNothing data_
                 , noResultsText: "No results"
-                , placeholder: "Search ..."
+                , placeholder: "Search..."
                 , optionRenderer
                 , optionSort: Nothing
                 , toSelectOption
diff --git a/src/Lumi/Components/Form/Validation.purs b/src/Lumi/Components/Form/Validation.purs
@@ -1,8 +1,10 @@
 module Lumi.Components.Form.Validation
   ( Validator
   , nonEmpty, nonEmptyArray, nonNull
+  , nonEmpty', nonEmptyArray', nonNull'
   , mustEqual, mustBe
   , validNumber, validInt, validDate
+  , validNumber', validInt', validDate'
   , optional
   , Validated(..)
   , _Validated, _Fresh, _Modified
@@ -58,15 +60,27 @@ type WarningValidator result =
 
 -- | A `Validator` which verifies that an input string is non-empty.
 nonEmpty :: String -> Validator String NonEmptyString
-nonEmpty name = note (name <> " is required") <<< NES.fromString
+nonEmpty name = nonEmpty' (name <> " is required")
+
+-- | `nonEmpty`, but the argument is the entire validation message.
+nonEmpty' :: String -> Validator String NonEmptyString
+nonEmpty' msg = note msg <<< NES.fromString
 
 -- | A `Validator` which verifies that an input array is non-empty.
 nonEmptyArray :: forall a. String -> Validator (Array a) (NonEmptyArray a)
-nonEmptyArray name = note (name <> " cannot be empty") <<< NEA.fromArray
+nonEmptyArray name = nonEmptyArray' (name <> " cannot be empty")
+
+-- | `nonEmptyArray`, but the argument is the entire validation message.
+nonEmptyArray' :: forall a. String -> Validator (Array a) (NonEmptyArray a)
+nonEmptyArray' msg = note msg <<< NEA.fromArray
 
 -- | A `Validator` which verifies that an optional field is specified.
 nonNull :: forall a. String -> Validator (Maybe a) a
-nonNull name = note (name <> " is required")
+nonNull name = nonNull' (name <> " is required")
+
+-- | `nonNull`, but the argument is the entire validation message.
+nonNull' :: forall a. String -> Validator (Maybe a) a
+nonNull' msg = note msg
 
 -- | A `Validator` which verifies that its input equals some value.
 mustEqual :: forall a. Eq a => a -> String -> Validator a a
@@ -80,17 +94,30 @@ mustBe cond error value
 
 -- | A `Validator` which verifies that its input can be parsed as a number.
 validNumber :: String -> Validator String Number
-validNumber name = note (name <> " must be a number") <<< Number.fromString
+validNumber name = validNumber' (name <> " must be a number")
+
+-- | `validNumber`, but the argument is the entire validation message.
+validNumber' :: String -> Validator String Number
+validNumber' msg = note msg <<< Number.fromString
 
 -- | A `Validator` which verifies that its input can be parsed as an integer.
 validInt :: String -> Validator String Int
-validInt name = note (name <> " must be a whole number") <<< Int.fromString
+validInt name = validInt' (name <> " must be a whole number")
+
+-- | `validInt`, but the argument is the entire validation message.
+validInt' :: String -> Validator String Int
+validInt' msg = note msg <<< Int.fromString
 
 -- | A `Validator` which verifies that its input can be parsed as a date.
 -- | Dates are of the format "YYYY-MM-DD".
 validDate :: String -> Validator String Date.Date
-validDate name input =
-  note (name <> " must be a date") result
+validDate name =
+  validDate' (name <> " must be a date")
+
+-- | `validDate`, but the argument is the entire validation message.
+validDate' :: String -> Validator String Date.Date
+validDate' msg input =
+  note msg result
   where
     result = case traverse Int.fromString $ split (Pattern "-") input of
       Just [y, m, d] -> join $ Date.exactDate <$> toEnum y <*> toEnum m <*> toEnum d
diff --git a/src/Lumi/Components/Select.purs b/src/Lumi/Components/Select.purs
@@ -27,12 +27,14 @@ import Effect (Effect)
 import Effect.Aff (Aff)
 import Effect.Unsafe (unsafePerformEffect)
 import JSS (JSS, important, jss)
+import Lumi.Components (($$$))
 import Lumi.Components.Color (colors)
 import Lumi.Components.Icon as Icon
 import Lumi.Components.Input (lumiInputDisabledStyles, lumiInputFocusStyles, lumiInputHoverStyles, lumiInputStyles)
 import Lumi.Components.Loader (loader)
 import Lumi.Components.Select.Backend (SelectBackendProps, SelectOption, SelectOptions(..), selectBackend)
 import Lumi.Components.ZIndex (ziSelect)
+import Lumi.Components2.Text as T
 import React.Basic.Classic (Component, JSX, createComponent, element, elementKeyed, empty, makeStateless)
 import React.Basic.DOM (CSS, css)
 import React.Basic.DOM as R
@@ -226,7 +228,7 @@ select = makeStateless component render
                 , value: props.value
                 , render: \selectState ->
                     lumiSelectInnerElement
-                      { "data-focus": selectState.isOpen
+                      { "data-focus": selectState.isActive
                       , children:
                           [ renderInput props selectState
                           , if selectState.isOpen
@@ -262,7 +264,11 @@ select = makeStateless component render
                           then
                             [ lumiSelectInputPlaceholder
                                 { key: "lumi-select-placeholder"
-                                , children: R.text props.placeholder
+                                , title: props.placeholder
+                                , children:
+                                    T.text
+                                      $ T.truncate
+                                      $$$ props.placeholder
                                 }
                             ]
                           else
@@ -342,7 +348,7 @@ select = makeStateless component render
                 , children: R.text props.noResultsText
                 }
             ]
-          renderOptions options_ = options_ `flip Array.mapWithIndex` \index option ->
+          renderOptions options_ = options_ # Array.mapWithIndex \index option ->
             let
               { label, value } = props.toSelectOption option
             in
@@ -437,6 +443,7 @@ styles = jss
               { margin: "-2px" -- (gap)
 
               , display: "flex"
+              , position: "relative"
               , flexFlow: "row wrap"
               , flex: "1 1 auto"
               , minWidth: 0
@@ -451,6 +458,9 @@ styles = jss
               , lineHeight: "32px"
               , flex: "1 1 0%"
               , display: "block"
+              , position: "absolute"
+              , width: "100%"
+              , maxWidth: "calc(100% - " <> clearIconWidth <> ")"
               , overflow: "hidden"
               , whiteSpace: "nowrap"
               , textOverflow: "ellipsis"
@@ -502,7 +512,7 @@ styles = jss
               , fontSize: "8px"
               , cursor: "pointer"
               , height: "26px"
-              , width: "20px"
+              , width: clearIconWidth
               , flex: "0 0 auto"
               , paddingTop: "3px"
               , "@media (min-width: 860px)":
@@ -630,3 +640,5 @@ styles = jss
       , overflow: "hidden"
       , textOverflow: "ellipsis"
       }
+
+    clearIconWidth = "20px"
diff --git a/src/Lumi/Components/Select/SelectBackend.purs b/src/Lumi/Components/Select/SelectBackend.purs
diff --git a/src/Lumi/Components2/QRCode.purs b/src/Lumi/Components2/QRCode.purs
