toddler.notifications
Main component in this namespace is Store component. It should be mounted as close to your mounted component as possible.
It will create div element that will be fixed positioned on screen and that will control lifecycle of notifications that you wan’t to show.
Notifications are read from notification-channel and displayed by render multimethod.
Default implementation exists for notifications of type:
- ::positive
- ::negative
- ::neutral
- ::warning
-hide-timeout-
Hide context that is used to control if component will autohide or not
-new-timeout-
New notification context that specifies how long will notification have class new after it is added in notification store
add
(add type message)(add type message options)(add type message options autohide)Function that will put message of type onto notification channel. Utility function that allows you to specify type of message, :message content, options as additional data that will be merged to notification and autohide period.
negative
(negative message)(negative message autohide)Show negative message
neutral
(neutral message)(neutral message autohide)Show neutral message
Notification
Component that is used by notification store to control notification lifecycle. This component is wrapper around render function that is responsible for rendering notifications.
It will use dispatch for reducer and send events that will change notification Store state for notifications that have appeared or are going to hide
notification-channel
Channel that notifications are sent to. Store component will read from this channel and render notifications.
notification-reducer
(notification-reducer {:keys [notifications], :as state} {event-type :type, {:keys [id]} :notification, :as event})Reducer that notification store uses to control rendering lifecycle.
positive
(positive message)(positive message autohide)Show positive message
render
multimethod
Multimethod that will dispatch on message :type. It is used by Store to render notifications of :type.
If you are in need to display custom messages in notification store, than use this function and render custom notifications using standard helix functional components
Store
Returns component that will render notifications that are sent to notification-channel.
:frame - used to position notification store and style it :notifications - if some init notifications are available :opened? - parameter that you can use to open notification and view notification history
:new-timeout - how long will notification receive :adding? true :hide-timeout - how long will notification receive :hidding? true
IMPORTANT: Put Store as close as posible to your mounted component. Preferable just after you have initialized UI component.
warning
(warning message)(warning message autohide)Show warning message
wrap-store
(wrap-store component store-props)Wrapper that will use Store component to encapsulate component