This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.

Material.Dropdown.Item

Item

item : List (Property m) -> List (Html m) -> Model m

Construct a menu item

Listeners

onSelect : m -> Property m

Handle selection of containing item

Property

selected : Property m

Menu item displays as selected

disabled : Property m

Mark item as disabled.

divider : Property m

Render a dividing line before the item

ripple : Property m

Menu item ripples when clicked

API

type alias Property m = Options.Property (Config m) m

Menu properties

type alias Config m = Material.Internal.Item.Config m

Menu configuration

defaultConfig : Config m

Menu default configuration

Elm architecture

type alias Model m = { html : List (Html m) , options : List (Property m) }

Type of menu items

type alias Msg m = Material.Internal.Item.Msg m

Component message

view : (Msg msg -> msg) -> Store s -> ItemIndex -> Model msg -> List (Property msg) -> ( String, Html msg )

Component view

onSelect : m -> Property m

Handle selection of containing item

disabled : Property m

Mark item as disabled.

divider : Property m

Render a dividing line before the item

ripple : Property m

Menu item ripples when clicked

module Material.Dropdown.Item
    exposing
        ( Model
        , item

        , Property
        , Config
        , defaultConfig

        , onSelect
        , disabled
        , divider
        , ripple
        -- , options
        , selected

        , view
        , Msg
        )

{-|

# Item
@docs item

# Listeners
@docs onSelect

# Property
@docs selected, disabled, divider, ripple

# API
@docs Property, Config, defaultConfig

# Elm architecture
@docs Model, Msg, view

@docs onSelect, disabled, divider, ripple
-}

import Dict exposing (Dict)
import Html.Attributes exposing (property, attribute, class)
import Html.Events as Html
import Html exposing (Html)
import Html exposing (li)
import Json.Encode as Json exposing (int)
import Material.Internal.Item
import Material.Internal.Options as Options
import Material.Options exposing (Style, cs, css, when)
import Material.Internal.Item exposing (Msg(..))
import Material.Ripple as Ripple


-- MODEL


{-| Type of menu items
-}
type alias Model m =
    { html : List (Html m)
    , options : List (Property m)
    }


{-| Index of an item in the menu starting from zero.
-}
type alias ItemIndex =
    Int


{-| Construct a menu item
-}
item : List (Property m) -> List (Html m) -> Model m
item options html =
  { html = html
  , options = options
  }


{-| Component message
-}
type alias Msg m
    = Material.Internal.Item.Msg m


{-| Component store
-}
type alias Store s =
    { s | ripples : Dict ItemIndex Ripple.Model
        , index : Maybe ItemIndex
        , open : Bool
    }


{-| Component view
-}
view :
    (Msg msg -> msg)
    -> Store s
    -> ItemIndex
    -> Model msg
    -> List (Property msg)
    -> ( String, Html msg )
view lift top index model defaultOptions =
    let
        options =
            model.options

        html =
            model.html

        canSelect =
            config.enabled && config.onSelect /= Nothing

        hasRipple =
            config.ripple && canSelect

        ripple =
            top.ripples
                |> Dict.get index
                |> Maybe.withDefault Ripple.model

        fwdRipple =
            Ripple >> lift

        ({ config } as summary) =
            Options.collect defaultConfig (defaultOptions ++ options)
    in
        (,) (toString index) <|
            Options.apply summary
                li
                [ cs "mdl-menu__item"
                , when config.ripple (cs "mdl-js-ripple-effect")
                , when config.divider (cs "mdl-menu__item--full-bleed-divider")
                , when config.selected (cs "mdl-menu__item--selected")
                , css "display" "flex"
                , css "align-items" "center"
                ]
                (List.filterMap identity
                    [ if canSelect then
                        Html.onClick (Select summary.config.onSelect |> lift) |> Just
                      else
                        Nothing
                    , if not summary.config.enabled then
                        attribute "disabled" "disabled" |> Just
                      else
                        Nothing
                    , property "tabIndex" (int (-1)) |> Just
                    ]
                    ++ (if hasRipple then
                            [ Ripple.downOn_ fwdRipple "mousedown"
                            , Ripple.downOn_ fwdRipple "touchstart"
                            , Ripple.upOn_ fwdRipple "mouseup"
                            , Ripple.upOn_ fwdRipple "mouseleave"
                            , Ripple.upOn_ fwdRipple "touchend"
                            , Ripple.upOn_ fwdRipple "blur"
                            ]
                        else
                            []
                       )
                )
                (if hasRipple then
                    ((++) html
                        [ Ripple.view_ [ class "mdl-menu__item-ripple-container" ] ripple
                            |> Html.map fwdRipple
                        ]
                    )
                 else
                    html
                )


-- PROPERTIES


{-| Menu properties
-}
type alias Property m =
    Options.Property (Config m) m


{-| Menu configuration
-}
type alias Config m
    = Material.Internal.Item.Config m


{-| Menu default configuration
-}
defaultConfig : Config m
defaultConfig =
    { onSelect = Nothing
    , enabled = True
    , divider = False
    , ripple = False
    -- , options = []
    , selected = False
    }


{-| Handle selection of containing item
-}
onSelect : m -> Property m
onSelect msg =
    Options.option (\config -> { config | onSelect = Just msg })


{-| Mark item as disabled.
-}
disabled : Property m
disabled =
    Options.option (\config -> { config | enabled = False })


{-| Render a dividing line before the item
-}
divider : Property m
divider =
    Options.option (\config -> { config | divider = True })


{-| Menu item ripples when clicked
-}
ripple : Property m
ripple =
    Options.option (\config -> { config | ripple = True })


{- TODO: options?
-}
--options : List (Style m)-> Property m
--options v =
--    Options.option (\config -> { config | options = v })


{-| Menu item displays as selected
-}
selected : Property m
selected =
    Options.option (\config -> { config | selected = True })