mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-12-19 19:51:37 +03:00
c1ff19f0d0
* make html.styled versions of remaining widgets * upgrade all the examples * change license name
187 lines
6.6 KiB
Elm
187 lines
6.6 KiB
Elm
module Examples.TextArea exposing (Msg, State, example, init, update)
|
|
|
|
{-|
|
|
|
|
@docs Msg, State, example, init, update
|
|
|
|
-}
|
|
|
|
import Dict exposing (Dict)
|
|
import Html.Styled as Html
|
|
import ModuleExample as ModuleExample exposing (Category(..), ModuleExample)
|
|
import Nri.Ui.AssetPath exposing (Asset(..))
|
|
import Nri.Ui.Checkbox.V3 as Checkbox
|
|
import Nri.Ui.Text.V2 as Text
|
|
import Nri.Ui.TextArea.V3 as TextArea
|
|
|
|
|
|
{-| -}
|
|
type Msg
|
|
= InputGiven Id String
|
|
| ToggleLabel Bool
|
|
| ToggleAutoResize Bool
|
|
| ToggleErrorState Bool
|
|
| NoOp
|
|
|
|
|
|
{-| -}
|
|
type alias State =
|
|
{ textValues : Dict Int String
|
|
, showLabel : Checkbox.IsSelected
|
|
, isInError : Checkbox.IsSelected
|
|
, autoResize : Checkbox.IsSelected
|
|
}
|
|
|
|
|
|
{-| -}
|
|
example : (Msg -> msg) -> State -> ModuleExample msg
|
|
example parentMessage state =
|
|
{ filename = "Nri.Ui.TextArea.V3"
|
|
, category = Inputs
|
|
, content =
|
|
[ Text.heading [ Html.text "Textarea controls" ]
|
|
, Html.div []
|
|
[ Checkbox.viewWithLabel assets
|
|
{ identifier = "show-textarea-label"
|
|
, label = "Show Label"
|
|
, setterMsg = ToggleLabel
|
|
, selected = state.showLabel
|
|
, disabled = False
|
|
, theme = Checkbox.Square
|
|
, noOpMsg = NoOp
|
|
}
|
|
, Checkbox.viewWithLabel assets
|
|
{ identifier = "textarea-autoresize"
|
|
, label = "Autoresize"
|
|
, setterMsg = ToggleAutoResize
|
|
, selected = state.autoResize
|
|
, disabled = False
|
|
, theme = Checkbox.Square
|
|
, noOpMsg = NoOp
|
|
}
|
|
, Checkbox.viewWithLabel assets
|
|
{ identifier = "textarea-isInError"
|
|
, label = "Show Error State"
|
|
, setterMsg = ToggleErrorState
|
|
, selected = state.isInError
|
|
, disabled = False
|
|
, theme = Checkbox.Square
|
|
, noOpMsg = NoOp
|
|
}
|
|
]
|
|
, TextArea.view
|
|
{ value = Maybe.withDefault "" <| Dict.get 1 state.textValues
|
|
, autofocus = False
|
|
, onInput = InputGiven 1
|
|
, isInError = state.isInError == Checkbox.Selected
|
|
, label = "TextArea.view"
|
|
, height =
|
|
if state.autoResize == Checkbox.Selected then
|
|
TextArea.AutoResize TextArea.SingleLine
|
|
|
|
else
|
|
TextArea.Fixed
|
|
, placeholder = "Placeholder"
|
|
, showLabel = state.showLabel == Checkbox.Selected
|
|
}
|
|
, TextArea.writing
|
|
{ value = Maybe.withDefault "" <| Dict.get 2 state.textValues
|
|
, autofocus = False
|
|
, onInput = InputGiven 2
|
|
, isInError = state.isInError == Checkbox.Selected
|
|
, label = "TextArea.writing"
|
|
, height =
|
|
if state.autoResize == Checkbox.Selected then
|
|
TextArea.AutoResize TextArea.DefaultHeight
|
|
|
|
else
|
|
TextArea.Fixed
|
|
, placeholder = "Placeholder"
|
|
, showLabel = state.showLabel == Checkbox.Selected
|
|
}
|
|
, TextArea.contentCreation
|
|
{ value = Maybe.withDefault "" <| Dict.get 3 state.textValues
|
|
, autofocus = False
|
|
, onInput = InputGiven 3
|
|
, isInError = state.isInError == Checkbox.Selected
|
|
, label = "TextArea.contentCreation"
|
|
, height =
|
|
if state.autoResize == Checkbox.Selected then
|
|
TextArea.AutoResize TextArea.DefaultHeight
|
|
|
|
else
|
|
TextArea.Fixed
|
|
, placeholder = "Placeholder"
|
|
, showLabel = state.showLabel == Checkbox.Selected
|
|
}
|
|
]
|
|
|> List.map (Html.map parentMessage)
|
|
}
|
|
|
|
|
|
{-| -}
|
|
init : State
|
|
init =
|
|
{ textValues = Dict.empty
|
|
, showLabel = Checkbox.Selected
|
|
, isInError = Checkbox.NotSelected
|
|
, autoResize = Checkbox.NotSelected
|
|
}
|
|
|
|
|
|
{-| -}
|
|
update : Msg -> State -> ( State, Cmd Msg )
|
|
update msg state =
|
|
let
|
|
toggle bool =
|
|
if bool then
|
|
Checkbox.Selected
|
|
|
|
else
|
|
Checkbox.NotSelected
|
|
in
|
|
case msg of
|
|
InputGiven id newValue ->
|
|
( { state | textValues = Dict.insert id newValue state.textValues }
|
|
, Cmd.none
|
|
)
|
|
|
|
ToggleLabel bool ->
|
|
( { state | showLabel = toggle bool }
|
|
, Cmd.none
|
|
)
|
|
|
|
ToggleErrorState bool ->
|
|
( { state | isInError = toggle bool }
|
|
, Cmd.none
|
|
)
|
|
|
|
ToggleAutoResize bool ->
|
|
( { state | autoResize = toggle bool }
|
|
, Cmd.none
|
|
)
|
|
|
|
NoOp ->
|
|
( state, Cmd.none )
|
|
|
|
|
|
|
|
-- INTERNAL
|
|
|
|
|
|
type alias Id =
|
|
Int
|
|
|
|
|
|
assets : { iconPremiumFlag_svg : Asset, iconPremiumKey_png : Asset, iconPremiumLocked_png : Asset, iconPremiumUnlocked_png : Asset, checkboxCheckedPartially_svg : Asset, checkboxChecked_svg : Asset, checkboxLockOnInside_svg : Asset, checkboxUnchecked_svg : Asset }
|
|
assets =
|
|
{ checkboxUnchecked_svg = Asset "checkboxUnchecked_svg"
|
|
, checkboxChecked_svg = Asset "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAb1BMVEX///9DoEc2nDt1tXcoly601bU5nD1nr2o/n0Pw9vAzmzhAn0QxmjYumTMqmDAsmTK92r6UxJacyJ1YqFu52LvC3MOQwpIZlCGLwI3M4s2u0q+q0KueyaCkzKX1+fXq8+rh7uHW6NeDvIVztHVssW4Cx6cUAAACZUlEQVR4nO3Zi1LTYBRF4dOSQkqt4AURL6Di+z+jQWVsadJcen5z9pm1HiDZ3yQzSSZmRERERERERERERERERERERERERERERERElKj7uQeUbrVdzz2hbKuqrlMTV9VikZr4BExN/ANMTHwGpiX+AyYl7gJTEveBCYkvgemIh8BkxDZgKmI7sCEuH+ae5lMXcLF8nHuaT93As7mn+QRQPYDqAVQPoHoA1QOoHkD1AKoHUD2A6gFUD6B6ANUDqB5A9QCqB1A9gOoBVA+gegDVA6geQPUAqgfw/3Rd7MhRgLcXhY4cBHhTLc7LEIMA755mFCFGAhYhBgF+f57hTowGdCcGAX672jm1KzEI8GG7WZQhRgFebvZP70YMAlwvNy8HOBGjAOsDoBMxCPB+U7eNcCAGAa7bgQ7EIECzi/OOIScSwwBLEQMByxBDAUsQgwHNfjoTwwG9iQGBDXHpRwwJ9CQGBZo9OhHDAr2IgYFmZw7E0EAPYnDg6cTwwFOJAsDTiBJAsx+TiSLAhng5jSgDnEoUAk4jSgGnEMWA44lywLFEQaDZxxFESeAYoiiwIb4aRpQFDiUKA80+DCBKA4cQxYFmb3qI8sCGuD1GTAA8TkwBPEKs33U9MbWAZm+7iC3/xiWBR4hZgCOJikCzL1f9MmngCKIq0Ozr6+TAhjjkKioDBxG1gWaf+25UdWAvUR/YQ8wANPvU9aqdBXiEmAXYScwD7PjozQRsJeYCthCzAQ+I+YBm76vkwD1iTuAOMSvQ7LpKDvxLzAz8TcwNNLu5TQ40u5t7ABERERERERERERERERFN7hdTvSHAHrHcMgAAAABJRU5ErkJggg=="
|
|
, checkboxCheckedPartially_svg = Asset "checkboxCheckedPartially_svg"
|
|
, iconPremiumUnlocked_png = Asset "iconPremiumUnlocked_png"
|
|
, iconPremiumLocked_png = Asset "iconPremiumLocked_png"
|
|
, checkboxLockOnInside_svg = Asset "checkboxLockOnInside_svg"
|
|
, iconPremiumKey_png = Asset "iconPremiumKey_png"
|
|
, iconPremiumFlag_svg = Asset "iconPremiumFlag_svg"
|
|
}
|