Ausblenden einer Komponente beim Klicken außerhalb von

Question

Was wäre der richtige Weg, um einen Klick außerhalb einer einzelnen Komponente zu behandeln, der diese Komponente verbergen soll?

Beispiel für eine solche Komponente könnte ein Dropdown-Menü, ein Datepicker und dergleichen sein. Wir erwarten normalerweise, dass sie sich verstecken, wenn wir nach draußen klicken. Aber dazu müssen wir einige "unreine" Hacks spielen, von denen ich nicht weiß, wie sie im FRP-Stil vermieden werden können.

Ich suchte nach relevanten React Beispiele für Ideen und gefunden this, aber sie alle scheinen darauf angewiesen Callbacks an globale Objekte anhängen, die dann den Zustand der internen Komponente ändern.

Answer 1

Das folgende Beispiel, das etwas ähnlich wie Sie beschreibt.

modal mit einer Adresse präsentiert wird, um die aktuellen Fensterabmessungen und ELM-html Html Komponente (was die Sache, wie ein Datumsauswahl oder eine Form zu fokussiert) (a ‚entlassen‘ Ereignis zu senden).

Wir fügen einen Click-Handler an das umgebende Element an; Nachdem wir ihm eine passende ID gegeben haben, können wir herausfinden, ob empfangene Klicks auf ihn oder das Kind zutreffen, und diese entsprechend weiterleiten. Das einzige wirklich clevere Bit ist die Bereitstellung von customDecoder, um Klicks auf das untergeordnete Element herauszufiltern.

Anderswo ändert sich unser Modellzustand bei Empfang des 'entlassen' -Ereignisses so, dass wir nicht mehr modal anrufen müssen.

Dies ist eine recht große Codebeispiel, das die Verwendung eines fairen paar Ulme Pakete macht so fragen Sie bitte, ob alles weitere Erklärung erfordert

import Styles exposing (..) 

import Html exposing (Attribute, Html, button, div, text) 
import Html.Attributes as Attr exposing (style) 
import Html.Events exposing (on, onWithOptions, Options) 
import Json.Decode as J exposing (Decoder, (:=)) 
import Result 
import Signal exposing (Message) 


modal : (Signal.Address()) -> (Int, Int) -> Html -> Html 
modal addr size content = 
    let modalId = "modal" 
     cancel = targetWithId (\_ -> Signal.message addr()) "click" modalId 
     flexCss = [ ("display", "flex") 
        , ("align-items", "center") 
        , ("justify-content", "center") 
        , ("text-align", "center") 
        ] 
    in div (
      cancel :: (Attr.id modalId) :: [style (flexCss ++ absolute ++ dimensions size)] 
      ) [content] 

targetId : Decoder String 
targetId = ("target" := ("id" := J.string))   

isTargetId : String -> Decoder Bool 
isTargetId id = J.customDecoder targetId (\eyed -> if eyed == id then  Result.Ok True else Result.Err "nope!") 

targetWithId : (Bool -> Message) -> String -> String -> Attribute 
targetWithId msg event id = onWithOptions event stopEverything (isTargetId id) msg 

stopEverything = (Options True True) 

Answer 2

Die bestehende Antwort funktioniert nicht in Ulme V0.18 (Signal wurde in 0.17 entfernt), also wollte ich es updaten. Die Idee ist, einen transparenten Hintergrund auf oberster Ebene hinter dem Dropdown-Menü hinzuzufügen. Dies hat den Bonuseffekt, dass Sie alles hinter dem Menü verdunkeln können, wenn Sie möchten.

Dieses Beispielmodell hat eine Liste von Wörtern, und jedes Wort kann ein offenes Dropdown (und einige zugehörige Informationen) haben, also übergebe ich sie, um zu sehen, ob einige von ihnen offen sind. In diesem Fall zeige ich das Hintergrund-div vor allem anderen:

Es gibt eine Kulisse in der Hauptansicht Funktion:

update : Msg -> Model -> (Model, Cmd Msg) 
update msg model = 
    case msg of 
     CloseDropdowns -> 
      let 
       newWords = List.map (\word -> { word | menuMaybe = Nothing }) model.words 
      in 
       ({model | words = newWords}, Cmd.none) 

:

view : Model -> Html Msg 
view model = 
    div [] <| 
     [ viewWords model 
     ] ++ backdropForDropdowns model 

backdropForDropdowns : Model -> List (Html Msg) 
backdropForDropdowns model = 
    let 
     dropdownIsOpen model_ = 
      List.any (isJust << .menuMaybe) model.words 
     isJust m = 
      case m of 
       Just _ -> True 
       Nothing -> False 
    in 
     if dropdownIsOpen model then 
      [div [class "backdrop", onClick CloseDropdowns] []] 
     else 
      [] 

CloseDropdowns in der App-Top-Level-Update-Funktion behandelt wird

Und die Dinge mit SCSS gestylt:

.popup { 
    z-index: 100; 
    position: absolute; 
    box-shadow: 0px 2px 3px 2px rgba(0, 0, 0, .2); 
} 

.backdrop { 
    z-index: 50; 
    position: absolute; 
    background-color: rgba(0, 0, 0, .4); 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
}