noredink-ui/styleguide-app/Examples/TextArea.elm

187 lines
5.4 KiB
Elm
Raw Normal View History

2018-03-01 02:51:49 +03:00
module Examples.TextArea exposing (Msg, State, example, init, update)
{-|
2018-09-26 17:02:10 +03:00
@docs Msg, State, example, init, update
2018-03-01 02:51:49 +03:00
-}
import Category exposing (Category(..))
2018-03-01 02:51:49 +03:00
import Dict exposing (Dict)
import Html.Styled as Html
import ModuleExample exposing (ModuleExample)
2018-06-20 02:36:09 +03:00
import Nri.Ui.AssetPath exposing (Asset(..))
import Nri.Ui.Checkbox.V5 as Checkbox
import Nri.Ui.Heading.V2 as Heading
import Nri.Ui.TextArea.V4 as TextArea
2018-03-01 02:51:49 +03:00
{-| -}
type Msg
= InputGiven Id String
| ToggleLabel Bool
| ToggleAutoResize Bool
| ToggleErrorState Bool
{-| -}
type alias State =
{ textValues : Dict Int String
2018-06-20 02:36:09 +03:00
, showLabel : Checkbox.IsSelected
, isInError : Checkbox.IsSelected
, autoResize : Checkbox.IsSelected
2018-03-01 02:51:49 +03:00
}
{-| -}
example : (Msg -> msg) -> State -> ModuleExample msg
example parentMessage state =
2019-05-03 19:56:43 +03:00
{ name = "Nri.Ui.TextArea.V4"
2018-03-01 02:51:49 +03:00
, category = Inputs
, content =
[ Heading.h1 [] [ Html.text "Textarea controls" ]
2018-03-01 02:51:49 +03:00
, Html.div []
[ Checkbox.viewWithLabel
2018-03-01 02:51:49 +03:00
{ identifier = "show-textarea-label"
, label = "Show Label"
, setterMsg = ToggleLabel
2018-06-20 02:36:09 +03:00
, selected = state.showLabel
2018-03-01 02:51:49 +03:00
, disabled = False
2018-06-20 20:52:02 +03:00
, theme = Checkbox.Square
2018-03-01 02:51:49 +03:00
}
, Checkbox.viewWithLabel
2018-03-01 02:51:49 +03:00
{ identifier = "textarea-autoresize"
, label = "Autoresize"
, setterMsg = ToggleAutoResize
2018-06-20 02:36:09 +03:00
, selected = state.autoResize
2018-03-01 02:51:49 +03:00
, disabled = False
2018-06-20 20:52:02 +03:00
, theme = Checkbox.Square
2018-03-01 02:51:49 +03:00
}
, Checkbox.viewWithLabel
2018-03-01 02:51:49 +03:00
{ identifier = "textarea-isInError"
, label = "Show Error State"
, setterMsg = ToggleErrorState
2018-06-20 02:36:09 +03:00
, selected = state.isInError
2018-03-01 02:51:49 +03:00
, disabled = False
2018-06-20 20:52:02 +03:00
, theme = Checkbox.Square
2018-03-01 02:51:49 +03:00
}
]
, TextArea.view
{ value = Maybe.withDefault "" <| Dict.get 1 state.textValues
, autofocus = False
, onInput = InputGiven 1
, onBlur = Nothing
2018-06-20 02:36:09 +03:00
, isInError = state.isInError == Checkbox.Selected
2018-03-01 02:51:49 +03:00
, label = "TextArea.view"
, height =
2018-06-20 02:36:09 +03:00
if state.autoResize == Checkbox.Selected then
TextArea.AutoResize TextArea.SingleLine
2018-09-26 17:02:10 +03:00
else
TextArea.Fixed
2018-03-01 02:51:49 +03:00
, placeholder = "Placeholder"
2018-06-20 02:36:09 +03:00
, showLabel = state.showLabel == Checkbox.Selected
2018-03-01 02:51:49 +03:00
}
, TextArea.writing
{ value = Maybe.withDefault "" <| Dict.get 2 state.textValues
, autofocus = False
, onInput = InputGiven 2
, onBlur = Nothing
2018-06-20 02:36:09 +03:00
, isInError = state.isInError == Checkbox.Selected
2018-03-01 02:51:49 +03:00
, label = "TextArea.writing"
, height =
2018-06-20 02:36:09 +03:00
if state.autoResize == Checkbox.Selected then
TextArea.AutoResize TextArea.DefaultHeight
2018-09-26 17:02:10 +03:00
else
TextArea.Fixed
2018-03-01 02:51:49 +03:00
, placeholder = "Placeholder"
2018-06-20 02:36:09 +03:00
, showLabel = state.showLabel == Checkbox.Selected
2018-03-01 02:51:49 +03:00
}
, TextArea.contentCreation
{ value = Maybe.withDefault "" <| Dict.get 3 state.textValues
, autofocus = False
, onInput = InputGiven 3
, onBlur = Nothing
2018-06-20 02:36:09 +03:00
, isInError = state.isInError == Checkbox.Selected
, label = "TextArea.contentCreation"
, height =
2018-06-20 02:36:09 +03:00
if state.autoResize == Checkbox.Selected then
TextArea.AutoResize TextArea.DefaultHeight
2018-09-26 17:02:10 +03:00
else
TextArea.Fixed
, placeholder = "Placeholder"
2018-06-20 02:36:09 +03:00
, showLabel = state.showLabel == Checkbox.Selected
}
, TextArea.writing
{ value = Maybe.withDefault "" <| Dict.get 4 state.textValues
, autofocus = False
, onInput = InputGiven 4
, onBlur = Just (InputGiven 4 "Neener neener Blur happened")
, isInError = state.isInError == Checkbox.Selected
, label = "TextArea.writing onBlur demonstration"
, height =
if state.autoResize == Checkbox.Selected then
TextArea.AutoResize TextArea.DefaultHeight
else
TextArea.Fixed
, placeholder = "Placeholder"
, showLabel = state.showLabel == Checkbox.Selected
}
2018-03-01 02:51:49 +03:00
]
|> List.map (Html.map parentMessage)
}
{-| -}
init : State
init =
{ textValues = Dict.empty
2018-06-20 02:36:09 +03:00
, showLabel = Checkbox.Selected
, isInError = Checkbox.NotSelected
, autoResize = Checkbox.NotSelected
2018-03-01 02:51:49 +03:00
}
{-| -}
update : Msg -> State -> ( State, Cmd Msg )
update msg state =
2018-06-20 02:36:09 +03:00
let
toggle bool =
if bool then
Checkbox.Selected
2018-09-26 17:02:10 +03:00
2018-06-20 02:36:09 +03:00
else
Checkbox.NotSelected
in
2018-03-01 02:51:49 +03:00
case msg of
InputGiven id newValue ->
( { state | textValues = Dict.insert id newValue state.textValues }
, Cmd.none
)
ToggleLabel bool ->
2018-06-20 02:36:09 +03:00
( { state | showLabel = toggle bool }
2018-03-01 02:51:49 +03:00
, Cmd.none
)
ToggleErrorState bool ->
2018-06-20 02:36:09 +03:00
( { state | isInError = toggle bool }
2018-03-01 02:51:49 +03:00
, Cmd.none
)
ToggleAutoResize bool ->
2018-06-20 02:36:09 +03:00
( { state | autoResize = toggle bool }
2018-03-01 02:51:49 +03:00
, Cmd.none
)
-- INTERNAL
type alias Id =
Int