A button component that can be checked or unchecked (demo).
CheckButton.Css
exposes a function to generate CSS
in a manner of elm-css
.
An opaque type representing a check button state. To construct an actual value of this type, use constructors and modifiers bellow.
Example usage.
button = defaultModel "red" "Red" |> setChecked |> setDisabled
A constructor for a check button. By providing a value and a label name, you can construct an unchecked active button.
Set the state of a check button to be checked.
Set the state of a check button to be unchecked.
Modify the state of a check button to be checked/unchecked.
setChecked = setIsChecked True setUnchecked = setIsChecked False
Set the state of a check button to be active.
Set the state of a check button to be disabled.
Set a check button label name.
Get if a check button is checked.
Get if a check button is active.
Get value of a button.
Get label name of a button.
A renderer for check button.
The first argument is a name space for elm-css. It is supposed to be a unique value.
The second argument is called if a user checked/unchecked a check button.
An alias for readability
An alias for readability
module CheckButton
exposing
( Model
, Namespace
, Value
, defaultModel
, setChecked
, setUnchecked
, setIsChecked
, setActive
, setDisabled
, setLabel
, getIsChecked
, getIsActive
, getValue
, getLabel
, view
)
{-| A button component that can be checked or unchecked ([demo](https://arowm.github.io/elm-check-button/)).
`CheckButton.Css` exposes a function to generate CSS
in a manner of [`elm-css`](https://github.com/rtfeldman/elm-css).
# Model
@docs Model
## Constructors
@docs defaultModel
## Setters
@docs setChecked
@docs setUnchecked
@docs setIsChecked
@docs setActive
@docs setDisabled
@docs setLabel
## Getters
@docs getIsChecked
@docs getIsActive
@docs getValue
@docs getLabel
# Renderers
@docs view
# Aliases
@docs Namespace
@docs Value
-}
import Html exposing (..)
import Html.Attributes as Attributes exposing (..)
import Html.CssHelpers as CssHelpers exposing (withNamespace)
import Html.Events exposing (..)
import CheckButton.Css as MyCss exposing (CssClasses(..))
-- Exposed aliases
{-| An alias for readability
-}
type alias Namespace =
String
{-| An alias for readability
-}
type alias Value =
String
-- Model
{-| An opaque type representing a check button state.
To construct an actual value of this type, use constructors and modifiers bellow.
Example usage.
button =
defaultModel "red" "Red"
|> setChecked
|> setDisabled
-}
type Model
= CheckButton
{ value : Value
, label : String
, isChecked : Bool
, isActive : Bool
}
-- Constructors
{-| A constructor for a check button.
By providing a value and a label name, you can construct an unchecked active button.
-}
defaultModel : Value -> String -> Model
defaultModel value label =
CheckButton
{ value = value
, label = label
, isChecked = False
, isActive = True
}
{-| Set the state of a check button to be checked.
-}
setChecked : Model -> Model
setChecked =
setIsChecked True
{-| Set the state of a check button to be unchecked.
-}
setUnchecked : Model -> Model
setUnchecked =
setIsChecked False
{-| Modify the state of a check button to be checked/unchecked.
setChecked = setIsChecked True
setUnchecked = setIsChecked False
-}
setIsChecked : Bool -> Model -> Model
setIsChecked isChecked (CheckButton button) =
CheckButton
{ button
| isChecked = isChecked
}
{-| Set the state of a check button to be active.
-}
setActive : Model -> Model
setActive =
setIsActive True
{-| Set the state of a check button to be disabled.
-}
setDisabled : Model -> Model
setDisabled =
setIsActive False
{-| Modify the state of a check button to be active/disabled.
This is an inner function.
setActive = setIsActive True
setDisabled = setIsActive False
-}
setIsActive : Bool -> Model -> Model
setIsActive isActive (CheckButton button) =
CheckButton
{ button
| isActive = isActive
}
{-| Set a check button label name.
-}
setLabel : String -> Model -> Model
setLabel label (CheckButton button) =
CheckButton
{ button
| label = label
}
-- Getters
{-| Get if a check button is checked.
-}
getIsChecked : Model -> Bool
getIsChecked (CheckButton { isChecked }) =
isChecked
{-| Get if a check button is active.
-}
getIsActive : Model -> Bool
getIsActive (CheckButton { isActive }) =
isActive
{-| Get value of a button.
-}
getValue : Model -> Value
getValue (CheckButton { value }) =
value
{-| Get label name of a button.
-}
getLabel : Model -> String
getLabel (CheckButton { label }) =
label
-- View
{-| A renderer for check button.
The first argument is a name space for
[elm-css](https://github.com/rtfeldman/elm-css).
It is supposed to be a unique value.
The second argument is called if a user checked/unchecked a check button.
-}
view : Namespace -> (Bool -> msg) -> Model -> Html msg
view namespace onToggle (CheckButton checkButton) =
let
{ id, class, classList } =
withNamespace namespace
{ value, isChecked } =
checkButton
uniqueId =
namespace ++ "-" ++ value
in
div
[ class [ CheckButtonWrapper ]
]
[ input
[ type_ "checkbox"
, id uniqueId
, class [ CheckButtonCore ]
, name namespace
, checked isChecked
, onCheck onToggle
, Attributes.value value
]
[]
, label
[ for uniqueId
, class [ CheckButtonLabel ]
]
[ text checkButton.label
]
]