supermacro / elm-antd / Ant.Alert

Alert component

This component has a stateless and a stateful API

https://ant.design/components/alert/

Alerts inform your users of relevant information.


type Alert msg

An Alert is what is returned when you create an alert component

You can customize alerts.

To turn an Alert into Html msg call toHtml


type AlertType
    = Success
    | Info
    | Warning
    | Error

The kind of alert. Determines the colors used for background and border.

Stateless API

The following functions allow you to simply plop in an alert that never emits Msgs. If you want to control their visibility, you would have to do so on your own.

alert : String -> Alert msg

Create an alert.

alert "Hello, world!"

withType : AlertType -> Alert msg -> Alert msg

Change the type of the alert. By default, alerts are Success types.

alert "Error! Something went wrong!"
    |> withType Error
    |> toHtml

withDescription : String -> Alert msg -> Alert msg

Provide a descriptive label / header to your alert, which will be rendered in bigger / emphasized text.

alert "Very long alert that may require a more succinct label / summary"
    |> withDescription "Invalid Password"
    |> toHtml

toHtml : Alert msg -> Html msg

Convert an Alert into a Html msg

alert "Hellow, world!"
    |> toHtml

Stateful API

If you want to render interactive alerts, you will have to create a "stack" of stateful alerts, which can contain between 0 and n Alerts. Every alert inside this stack is interactive - the user can close them at will. In other words, the alerts in this stack produce Msg values that you must handle.

There are 3 things you must do in order to properly manage your stateful stack of alerts:

  1. initialize the stack with initAlertStack and save this stack in your model.
  2. Create a Msg value that contains a Alert.Msg
  3. Handle Alert.Msg values with updateAlertStack

A alert stack is nothing more than just a List (Alert msg) (with some internal mutations done to them), so to show them in your view, all you need to do is call List.map toHtml statefulAlerts

Example:

type Msg
    = AlertMsg Alert.Msg

model : Model
model =
    { statefulAlertStack =
        initAlertStack AlertMsg
            [ alert "Hey there, you can close me :)"
            ]
    }

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        AlertMsg alertMsg ->
            let
                ( alertModel, alertCmd ) =
                    updateAlertStack AlertMsg alertMsg model.statefulAlertStack
            in
            ( { closeableAlerts = alertModel }
            , alertCmd
            )

view : Model -> Html msg
view { statefulAlertStack } =
    div [] <|
        stackToHtml statefulAlertStack


type Msg

Messages emitted by closeable alerts


type CloseableAlertStack msg

Represents the state of closeable alerts

initAlertStack : (Msg -> msg) -> List (Alert msg) -> CloseableAlertStack msg

THIS API IS UNSTABLE AND ALSO VISUALLY UNAPPEALING. DO NOT USE STATEFUL ALERTS YET.

Takes a set of stateless alerts that don't ever emit messages and turns them into Alerts that a user can interact with (i.e. close them).

See the example above to see the usage of initAlertStack.

This alert stack must be saved in your model in order for it's state to be tracked and altered.

Every time a user clicks on the close icon, the alert will emit a msg.

updateAlertStack : (Msg -> msg) -> Msg -> CloseableAlertStack msg -> ( CloseableAlertStack msg, Platform.Cmd.Cmd msg )

Update a stack of closeable alerts. This function should be hooked up to your update function.

stackToHtml : CloseableAlertStack msg -> Html msg

Render a stack of closeable alerts into your view.