View.Key

The implementation was based on the .key block.

View Options

type alias ViewOptions msg =
    { style : Style
    , key : Key
    , onClick : Key -> msg
    }


type Style
    = Default
    | Primary
    | Secondary

The Style Block Modifiers

The Style custom type is used to determine when to apply the .key--primary and .key--secondary block modifiers.

The Logical Representation of a Key

This module provides a visual representation of a key but I also needed a logical representation which I implemented in Data.Key, Data.Digit, and Data.Operator.

Data.Key

type Key
    = AC
    | Dot
    | Equal
    | Digit Digit
    | Operator Operator


toString : Key -> String
toString key =
    case key of
        AC ->
            "AC"

        Dot ->
            "."

        Equal ->
            "="

        Digit digit ->
            Digit.toString digit

        Operator operator ->
            Operator.toString operator

Data.Digit

type Digit
    = Zero
    | One
    | Two
    | Three
    | Four
    | Five
    | Six
    | Seven
    | Eight
    | Nine


toInt : Digit -> Int
toInt digit =
    case digit of
        Zero ->
            0

        One ->
            1

        Two ->
            2

        Three ->
            3

        Four ->
            4

        Five ->
            5

        Six ->
            6

        Seven ->
            7

        Eight ->
            8

        Nine ->
            9


toString : Digit -> String
toString digit =
    case digit of
        Zero ->
            "0"

        One ->
            "1"

        Two ->
            "2"

        Three ->
            "3"

        Four ->
            "4"

        Five ->
            "5"

        Six ->
            "6"

        Seven ->
            "7"

        Eight ->
            "8"

        Nine ->
            "9"

Data.Operator

type Operator
    = Add
    | Sub
    | Mul
    | Div


toString : Operator -> String
toString operator =
    case operator of
        Add ->
            "+"

        Sub ->
            "-"

        Mul ->
            "×"

        Div ->
            "÷"

View Function

view : ViewOptions msg -> H.Html msg
view { style, key, onClick } =
    H.button
        [ HA.class "key"
        , HA.class <|
            case style of
                Default ->
                    ""

                Primary ->
                    "key--primary"

                Secondary ->
                    "key--secondary"
        , HA.type_ "button"
        , HE.onClick <| onClick key
        ]
        [ H.text <| Key.toString key ]

Source Code