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

CarwowTheme.Inputs

Helpers for user input elements.

Checkbox

checkbox : String -> List (Html.Html msg) -> Bool -> (Bool -> msg) -> List (Html.Html msg)

Checkbox atom

Select

type alias SelectSettings msg = { id : String , options : List ( String, String ) , selectedOption : Maybe String , disabled : Bool , onChange : String -> msg }

Select atom

selectSettings : String -> List ( String, String ) -> (String -> msg) -> SelectSettings msg

Required select settings: id, possible options, onchange message

select : SelectSettings msg -> Html.Html msg

Render a select

setSelectedOption : String -> SelectSettings msg -> SelectSettings msg

Define the selected option for the select

disableSelect : SelectSettings msg -> SelectSettings msg

Disable a select

module CarwowTheme.Inputs
    exposing
        ( checkbox
        , select
        , selectSettings
        , disableSelect
        , setSelectedOption
        , SelectSettings
        )

{-| Helpers for user input elements.


# Checkbox

@docs checkbox


# Select

@docs SelectSettings

@docs selectSettings

@docs select

@docs setSelectedOption

@docs disableSelect

-}

import Html exposing (Html, input, label, text, div, select)
import Html.Attributes exposing (id, type_, class, for, disabled)
import Html.Events exposing (onCheck, onInput, targetValue)
import Json.Decode exposing (float, map, map2, succeed)


{-| Checkbox atom
-}
checkbox :
    String
    -> List (Html.Html msg)
    -> Bool
    -> (Bool -> msg)
    -> List (Html.Html msg)
checkbox id label value msg =
    [ Html.input
        [ Html.Attributes.id id
        , Html.Attributes.type_ "checkbox"
        , Html.Events.onCheck msg
        , Html.Attributes.checked value
        ]
        []
    , Html.label [ Html.Attributes.for id ]
        label
    ]


{-| Select atom
-}
type alias SelectSettings msg =
    { id : String
    , options : List ( String, String )
    , selectedOption : Maybe String
    , disabled : Bool
    , onChange : String -> msg
    }


{-| Required select settings: id, possible options, onchange message
-}
selectSettings : String -> List ( String, String ) -> (String -> msg) -> SelectSettings msg
selectSettings id options msg =
    { id = id
    , options = options
    , onChange = msg
    , selectedOption = Nothing
    , disabled = False
    }


{-| Disable a select
-}
disableSelect : SelectSettings msg -> SelectSettings msg
disableSelect settings =
    { settings | disabled = True }


{-| Define the selected option for the select
-}
setSelectedOption : String -> SelectSettings msg -> SelectSettings msg
setSelectedOption option settings =
    { settings | selectedOption = Just option }


{-| Render a select
-}
select : SelectSettings msg -> Html.Html msg
select settings =
    let
        selected : String -> Maybe String -> Bool
        selected name selectedName =
            selectedName == Just name

        makeOption : Maybe String -> ( String, String ) -> Html.Html msg
        makeOption selectedName ( name, label ) =
            Html.option
                [ Html.Attributes.value name
                , Html.Attributes.selected (selected name selectedName)
                ]
                [ Html.text label ]

        options =
            List.map (makeOption settings.selectedOption) settings.options
    in
        Html.div [ Html.Attributes.class "select" ]
            [ Html.select
                [ Html.Attributes.id settings.id
                , Html.Events.on "change" (map settings.onChange Html.Events.targetValue)
                , disabled settings.disabled
                ]
                options
            ]