NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-12-20 04:01:40 +03:00
Code Issues Packages Projects Releases Wiki Activity

Update docs to use the new API in the example

Browse Source
This commit is contained in:
Juan Edi 2020-09-08 15:06:13 -03:00
parent ad1bfb6672
commit a81fb3617a
1 changed files with 32 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/Nri/Ui/Modal/V11.elm
View File

@ -19,8 +19,9 @@ module Nri.Ui.Modal.V11 exposing
- tab and tabback events stop propagation and prevent default
```
import Browser exposing (Program, element)
import Browser exposing (element)
import Browser.Dom as Dom
import Css exposing (padding, px)
import Html.Styled exposing (..)
import Html.Styled.Attributes exposing (id)
import Html.Styled.Events as Events
@ -28,12 +29,13 @@ import Nri.Ui.FocusTrap.V1 as FocusTrap exposing (FocusTrap)
import Nri.Ui.Modal.V11 as Modal
import Task
main : Program flags model msg
main : Program () Model Msg
main =
Browser.element
{ init = \_ -> init
, view = view
, view = toUnstyled << view
, update = update
, subscriptions = \model -> Modal.subscriptions model.modalState
, subscriptions = \model -> Sub.map ModalMsg (Modal.subscriptions model.modalState)
}
type ModalKind
@ -45,7 +47,7 @@ type alias Model =
, modalState : Modal.Model
}
init : Model
init : ( Model, Cmd Msg )
init =
let
( modalState, cmd ) =
@ -71,7 +73,7 @@ type Msg
| Focus String
| Focused (Result Dom.Error ())
update : Msg -> Model -> ( Modal, Cmd Msg )
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
OpenModal modalKind returnFocusTo ->
@ -133,23 +135,26 @@ view model =
Modal.view
{ title = "First kind of modal"
, wrapMsg = ModalMsg
, content =
[ Modal.closeButton CloseModal <|
FocusTrap.first { focusLastId = Focus "last-element-id" }
, text "Modal Content"
]
, focus = Focus
, content = [ text "Modal Content" ]
, footer =
[ button
(Events.onClick CloseModal
:: id "last-element-id"
:: FocusTrap.last { focusFirstElement = Focus Modal.closeButtonId }
)
[ Events.onClick CloseModal
, id "last-element-id"
]
[ text "Close" ]
]
}
[ Modal.hideTitle
, Modal.css [ padding (px 10) ]
, Modal.custom [ id "first-modal" ]
, Modal.closeButton
, Modal.focusTrap
(FocusTrap.FocusTrap
{ firstId = Modal.closeButtonId
, lastId = "last-element-id"
}
)
]
model.modalState
@ -157,14 +162,18 @@ view model =
Modal.view
{ title = "Second kind of modal"
, wrapMsg = ModalMsg
, content =
[ Modal.closeButton CloseModal <|
FocusTrap.only { focusSelf = Focus Modal.closeButtonId }
, text "Modal Content"
]
, focus = Focus
, content = [ text "Modal Content" ]
, footer = []
}
[ Modal.warning
, Modal.closeButton
, Modal.focusTrap
(FocusTrap.FocusTrap
{ firstId = Modal.closeButtonId
, lastId = Modal.closeButtonId
}
)
]
model.modalState
]