Allow dropdown buttons to close themselves, fixes #63 (#119)

hdgarrood · web-flow · commit d440c19fecca · 2020-01-14T14:38:26.000Z
* Allow dropdown buttons to close themselves, fixes #63 Fixes #63 by using the approach described in the original issue: add a callback to the `content` prop which allows the parent component to tell the dropdown button when it should close. * Code review feedback
diff --git a/docs/Examples/DropdownButton.example.purs b/docs/Examples/DropdownButton.example.purs
@@ -6,6 +6,7 @@ import Color (cssStringHSLA)
 import Data.Maybe (Maybe(..))
 import Data.Nullable (toNullable)
 import Effect.Console (log)
+import Effect.Uncurried (mkEffectFn1)
 import Lumi.Components.Button (button, defaults, secondary)
 import Lumi.Components.Color (colors)
 import Lumi.Components.Column (column, column_)
@@ -25,20 +26,23 @@ docs =
     , example $
         dropdownButton dropdownButtonDefaults
           { label = "Dropdown Button"
-          , content = R.div
+          , content = \closeSelf -> R.div
               { style: R.css { width: "328px", padding: "12px" }
               , children:
                 [ button secondary
                   { title = "I can be any element"
                   , style = R.css { width: "100%", marginBottom: "8px" }
+                  , onPress = mkEffectFn1 \_ -> closeSelf
                   }
                 , button secondary
                   { title = "I can be any element"
                   , style = R.css { width: "100%", marginBottom: "8px" }
+                  , onPress = mkEffectFn1 \_ -> closeSelf
                   }
                 , button defaults
                   { title = "I can be any element"
                   , style = R.css { width: "100%" }
+                  , onPress = mkEffectFn1 \_ -> closeSelf
                   }
                 ]
               }
@@ -49,20 +53,23 @@ docs =
         dropdownButton dropdownButtonDefaults
           { label = "Dropdown Button"
           , alignment = toNullable (Just "right")
-          , content = R.div
+          , content = \closeSelf -> R.div
               { style: R.css { width: "328px", padding: "12px" }
               , children:
                 [ button secondary
                   { title = "I can be any element"
                   , style = R.css { width: "100%", marginBottom: "8px" }
+                  , onPress = mkEffectFn1 \_ -> closeSelf
                   }
                 , button secondary
                   { title = "I can be any element"
                   , style = R.css { width: "100%", marginBottom: "8px" }
+                  , onPress = mkEffectFn1 \_ -> closeSelf
                   }
                 , button defaults
                   { title = "I can be any element"
                   , style = R.css { width: "100%" }
+                  , onPress = mkEffectFn1 \_ -> closeSelf
                   }
                 ]
               }
@@ -77,20 +84,23 @@ docs =
                 { children:
                   [ dropdownButton dropdownButtonDefaults
                     { label = "Dropdown Button"
-                    , content = R.div
+                    , content = \closeSelf -> R.div
                         { style: R.css { width: "328px", padding: "12px" }
                         , children:
                           [ button secondary
                             { title = "I can be any element"
                             , style = R.css { width: "100%", marginBottom: "8px" }
+                            , onPress = mkEffectFn1 \_ -> closeSelf
                             }
                           , button secondary
                             { title = "I can be any element"
                             , style = R.css { width: "100%", marginBottom: "8px" }
+                            , onPress = mkEffectFn1 \_ -> closeSelf
                             }
                           , button defaults
                             { title = "I can be any element"
                             , style = R.css { width: "100%" }
+                            , onPress = mkEffectFn1 \_ -> closeSelf
                             }
                           ]
                         }
@@ -102,20 +112,23 @@ docs =
                 { children:
                   [ dropdownButton dropdownButtonDefaults
                     { label = "Dropdown Button"
-                    , content = R.div
+                    , content = \closeSelf -> R.div
                         { style: R.css { width: "328px", padding: "12px" }
                         , children:
                           [ button secondary
                             { title = "I can be any element"
                             , style = R.css { width: "100%", marginBottom: "8px" }
+                            , onPress = mkEffectFn1 \_ -> closeSelf
                             }
                           , button secondary
                             { title = "I can be any element"
                             , style = R.css { width: "100%", marginBottom: "8px" }
+                            , onPress = mkEffectFn1 \_ -> closeSelf
                             }
                           , button defaults
                             { title = "I can be any element"
                             , style = R.css { width: "100%" }
+                            , onPress = mkEffectFn1 \_ -> closeSelf
                             }
                           ]
                         }
@@ -201,20 +214,23 @@ docs =
     , h2_ "using an arbitrary icon in place of the button"
     , example $
         dropdownIcon dropdownIconDefaults
-          { content = R.div
+          { content = \closeSelf -> R.div
               { style: R.css { width: "328px", padding: "12px" }
               , children:
                 [ button secondary
                   { title = "I can be any element"
                   , style = R.css { width: "100%", marginBottom: "8px" }
+                  , onPress = mkEffectFn1 \_ -> closeSelf
                   }
                 , button secondary
                   { title = "I can be any element"
                   , style = R.css { width: "100%", marginBottom: "8px" }
+                  , onPress = mkEffectFn1 \_ -> closeSelf
                   }
                 , button defaults
                   { title = "I can be any element"
                   , style = R.css { width: "100%" }
+                  , onPress = mkEffectFn1 \_ -> closeSelf
                   }
                 ]
               }
diff --git a/docs/Examples/EditableTable.example.purs b/docs/Examples/EditableTable.example.purs
@@ -154,19 +154,23 @@ docs = unit # make component
             [ hspace S16
             , dropdownIcon dropdownIconDefaults
                 { alignment = Nullable.notNull "right"
-                , content = R.div
+                , content = \closeSelf -> R.div
                     { style: R.css { width: "328px", padding: "12px" }
                     , children:
                         [ Link.link Link.defaults
                             { className = pure "lumi-dropdown-menu-item"
                             , text = p_ "Do something with this row"
-                            , navigate = pure $ log $ "Did something: " <> show row
+                            , navigate = Just do
+                                closeSelf
+                                log $ "Did something: " <> show row
                             }
                         , onRemove # Array.foldMap \onRemove' ->
                             Link.link Link.defaults
                               { className = pure "lumi-dropdown-menu-item"
                               , text = p_ "Remove this row"
-                              , navigate = pure $ onRemove' row
+                              , navigate = Just do
+                                  closeSelf
+                                  onRemove' row
                               }
                         ]
                     }
diff --git a/docs/Examples/InputGroup.example.purs b/docs/Examples/InputGroup.example.purs
@@ -4,6 +4,7 @@ import Prelude
 
 import Data.Maybe (Maybe(..))
 import Data.Nullable (toNullable)
+import Effect.Uncurried (mkEffectFn1)
 import Lumi.Components.Button (ButtonState(..), button, defaults, secondary)
 import Lumi.Components.Column (column_)
 import Lumi.Components.Input (input, text_)
@@ -44,20 +45,23 @@ docs =
                   { children:
                     [ dropdownButton dropdownButtonDefaults
                       { label = "Dropdown Button"
-                      , content = R.div
+                      , content = \closeSelf -> R.div
                           { style: R.css { width: "328px", padding: "12px" }
                           , children:
                             [ button secondary
                               { title = "I can be any element"
                               , style = R.css { width: "100%", marginBottom: "8px" }
+                              , onPress = mkEffectFn1 \_ -> closeSelf
                               }
                             , button secondary
                               { title = "I can be any element"
                               , style = R.css { width: "100%", marginBottom: "8px" }
+                              , onPress = mkEffectFn1 \_ -> closeSelf
                               }
                             , button defaults
                               { title = "I can be any element"
                               , style = R.css { width: "100%" }
+                              , onPress = mkEffectFn1 \_ -> closeSelf
                               }
                             ]
                           }
@@ -69,20 +73,23 @@ docs =
                   { children:
                     [ dropdownButton dropdownButtonDefaults
                       { label = "Dropdown Button"
-                      , content = R.div
+                      , content = \closeSelf -> R.div
                           { style: R.css { width: "328px", padding: "12px" }
                           , children:
                             [ button secondary
                               { title = "I can be any element"
                               , style = R.css { width: "100%", marginBottom: "8px" }
+                              , onPress = mkEffectFn1 \_ -> closeSelf
                               }
                             , button secondary
                               { title = "I can be any element"
                               , style = R.css { width: "100%", marginBottom: "8px" }
+                              , onPress = mkEffectFn1 \_ -> closeSelf
                               }
                             , button defaults
                               { title = "I can be any element"
                               , style = R.css { width: "100%" }
+                              , onPress = mkEffectFn1 \_ -> closeSelf
                               }
                             ]
                           }
diff --git a/package.json b/package.json
@@ -15,8 +15,8 @@
     "watch": "run-p watch:js watch:purs",
     "watch:js": "webpack-dev-server -wd --port 3000 --host 0.0.0.0",
     "watch:purs": "pulp -w build -I docs",
-    "prebuild": "run-s clean eslint",
-    "build": "run-s build:eslint build:purs build:js",
+    "prebuild": "run-s eslint",
+    "build": "run-s build:purs build:js",
     "build:js": "webpack -p",
     "build:purs": "pulp build -I docs",
     "eslint": "eslint --ext .js,.jsx src docs webpack.config.js",
diff --git a/src/Lumi/Components/DropdownButton.purs b/src/Lumi/Components/DropdownButton.purs
@@ -41,9 +41,12 @@ import Web.HTML.HTMLElement (HTMLElement, fromNode, getBoundingClientRect, toNod
 import Web.HTML.Window (document, innerWidth, scrollX, scrollY) as HTML
 import Web.HTML.Window (requestAnimationFrame)
 
+-- | Props for a DropdownButton component. The argument to the `content` field
+-- | is a callback which may be called to inform the dropdown button that it
+-- | should close itself.
 type DropdownButtonProps =
  { label :: String
- , content :: JSX
+ , content :: Effect Unit -> JSX
  , className :: String
  , onOpen :: Effect Unit
  , alignment :: Nullable String
@@ -153,7 +156,7 @@ dropdownButton =
                                       R.css { left: show (state.position.left - 1.0) <> "px" }
                                   ]
                               , onClick: handler stopPropagation mempty
-                              , children: [ props.content ]
+                              , children: [ props.content (close self) ]
                               }
                     ]
               ]
@@ -204,14 +207,14 @@ dropdownMenu = makeStateless dropdownMenuComponent render where
       , className: "lumi-dropdown-menu " <> className
       , alignment: alignment
       , onOpen: pure unit
-      , content:
+      , content: \closeSelf ->
           let
             fromItems xs =
               column_ $ xs <#> \item ->
                 Link.link Link.defaults
                   { className = pure "lumi-dropdown-menu-item"
                   , text = p_ item.label
-                  , navigate = pure $ item.action
+                  , navigate = pure $ closeSelf *> item.action
                   }
           in
             fragment [ intercalate divider_ (map fromItems items) ]
@@ -236,7 +239,7 @@ dropdownMenuDefaults =
 
 type DropdownIconProps =
  { icon :: JSX
- , content :: JSX
+ , content :: Effect Unit -> JSX
  , onOpen :: Effect Unit
  , alignment :: Nullable String
  }

Original file line number	Diff line number	Diff line change
`@@ -6,6 +6,7 @@ import Color (cssStringHSLA)`
`6`	`6`	`import Data.Maybe (Maybe(..))`
`7`	`7`	`import Data.Nullable (toNullable)`
`8`	`8`	`import Effect.Console (log)`
	`9`	`+import Effect.Uncurried (mkEffectFn1)`
`9`	`10`	`import Lumi.Components.Button (button, defaults, secondary)`
`10`	`11`	`import Lumi.Components.Color (colors)`
`11`	`12`	`import Lumi.Components.Column (column, column_)`
`@@ -25,20 +26,23 @@ docs =`
`25`	`26`	`, example $`
`26`	`27`	`dropdownButton dropdownButtonDefaults`
`27`	`28`	`{ label = "Dropdown Button"`
`28`		`- , content = R.div`
	`29`	`+ , content = \closeSelf -> R.div`
`29`	`30`	`{ style: R.css { width: "328px", padding: "12px" }`
`30`	`31`	`, children:`
`31`	`32`	`[ button secondary`
`32`	`33`	`{ title = "I can be any element"`
`33`	`34`	`, style = R.css { width: "100%", marginBottom: "8px" }`
	`35`	`+ , onPress = mkEffectFn1 \_ -> closeSelf`
`34`	`36`	`}`
`35`	`37`	`, button secondary`
`36`	`38`	`{ title = "I can be any element"`
`37`	`39`	`, style = R.css { width: "100%", marginBottom: "8px" }`
	`40`	`+ , onPress = mkEffectFn1 \_ -> closeSelf`
`38`	`41`	`}`
`39`	`42`	`, button defaults`
`40`	`43`	`{ title = "I can be any element"`
`41`	`44`	`, style = R.css { width: "100%" }`
	`45`	`+ , onPress = mkEffectFn1 \_ -> closeSelf`
`42`	`46`	`}`
`43`	`47`	`]`
`44`	`48`	`}`
`@@ -49,20 +53,23 @@ docs =`
`49`	`53`	`dropdownButton dropdownButtonDefaults`
`50`	`54`	`{ label = "Dropdown Button"`
`51`	`55`	`, alignment = toNullable (Just "right")`
`52`		`- , content = R.div`
	`56`	`+ , content = \closeSelf -> R.div`
`53`	`57`	`{ style: R.css { width: "328px", padding: "12px" }`
`54`	`58`	`, children:`
`55`	`59`	`[ button secondary`
`56`	`60`	`{ title = "I can be any element"`
`57`	`61`	`, style = R.css { width: "100%", marginBottom: "8px" }`
	`62`	`+ , onPress = mkEffectFn1 \_ -> closeSelf`
`58`	`63`	`}`
`59`	`64`	`, button secondary`
`60`	`65`	`{ title = "I can be any element"`
`61`	`66`	`, style = R.css { width: "100%", marginBottom: "8px" }`
	`67`	`+ , onPress = mkEffectFn1 \_ -> closeSelf`
`62`	`68`	`}`
`63`	`69`	`, button defaults`
`64`	`70`	`{ title = "I can be any element"`
`65`	`71`	`, style = R.css { width: "100%" }`
	`72`	`+ , onPress = mkEffectFn1 \_ -> closeSelf`
`66`	`73`	`}`
`67`	`74`	`]`
`68`	`75`	`}`
`@@ -77,20 +84,23 @@ docs =`
`77`	`84`	`{ children:`
`78`	`85`	`[ dropdownButton dropdownButtonDefaults`
`79`	`86`	`{ label = "Dropdown Button"`
`80`		`- , content = R.div`
	`87`	`+ , content = \closeSelf -> R.div`
`81`	`88`	`{ style: R.css { width: "328px", padding: "12px" }`
`82`	`89`	`, children:`
`83`	`90`	`[ button secondary`
`84`	`91`	`{ title = "I can be any element"`
`85`	`92`	`, style = R.css { width: "100%", marginBottom: "8px" }`
	`93`	`+ , onPress = mkEffectFn1 \_ -> closeSelf`
`86`	`94`	`}`
`87`	`95`	`, button secondary`
`88`	`96`	`{ title = "I can be any element"`
`89`	`97`	`, style = R.css { width: "100%", marginBottom: "8px" }`
	`98`	`+ , onPress = mkEffectFn1 \_ -> closeSelf`
`90`	`99`	`}`
`91`	`100`	`, button defaults`
`92`	`101`	`{ title = "I can be any element"`
`93`	`102`	`, style = R.css { width: "100%" }`
	`103`	`+ , onPress = mkEffectFn1 \_ -> closeSelf`
`94`	`104`	`}`
`95`	`105`	`]`
`96`	`106`	`}`
`@@ -102,20 +112,23 @@ docs =`
`102`	`112`	`{ children:`
`103`	`113`	`[ dropdownButton dropdownButtonDefaults`
`104`	`114`	`{ label = "Dropdown Button"`
`105`		`- , content = R.div`
	`115`	`+ , content = \closeSelf -> R.div`
`106`	`116`	`{ style: R.css { width: "328px", padding: "12px" }`
`107`	`117`	`, children:`
`108`	`118`	`[ button secondary`
`109`	`119`	`{ title = "I can be any element"`
`110`	`120`	`, style = R.css { width: "100%", marginBottom: "8px" }`
	`121`	`+ , onPress = mkEffectFn1 \_ -> closeSelf`
`111`	`122`	`}`
`112`	`123`	`, button secondary`
`113`	`124`	`{ title = "I can be any element"`
`114`	`125`	`, style = R.css { width: "100%", marginBottom: "8px" }`
	`126`	`+ , onPress = mkEffectFn1 \_ -> closeSelf`
`115`	`127`	`}`
`116`	`128`	`, button defaults`
`117`	`129`	`{ title = "I can be any element"`
`118`	`130`	`, style = R.css { width: "100%" }`
	`131`	`+ , onPress = mkEffectFn1 \_ -> closeSelf`
`119`	`132`	`}`
`120`	`133`	`]`
`121`	`134`	`}`
`@@ -201,20 +214,23 @@ docs =`
`201`	`214`	`, h2_ "using an arbitrary icon in place of the button"`
`202`	`215`	`, example $`
`203`	`216`	`dropdownIcon dropdownIconDefaults`
`204`		`- { content = R.div`
	`217`	`+ { content = \closeSelf -> R.div`
`205`	`218`	`{ style: R.css { width: "328px", padding: "12px" }`
`206`	`219`	`, children:`
`207`	`220`	`[ button secondary`
`208`	`221`	`{ title = "I can be any element"`
`209`	`222`	`, style = R.css { width: "100%", marginBottom: "8px" }`
	`223`	`+ , onPress = mkEffectFn1 \_ -> closeSelf`
`210`	`224`	`}`
`211`	`225`	`, button secondary`
`212`	`226`	`{ title = "I can be any element"`
`213`	`227`	`, style = R.css { width: "100%", marginBottom: "8px" }`
	`228`	`+ , onPress = mkEffectFn1 \_ -> closeSelf`
`214`	`229`	`}`
`215`	`230`	`, button defaults`
`216`	`231`	`{ title = "I can be any element"`
`217`	`232`	`, style = R.css { width: "100%" }`
	`233`	`+ , onPress = mkEffectFn1 \_ -> closeSelf`
`218`	`234`	`}`
`219`	`235`	`]`
`220`	`236`	`}`