mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-12-23 21:52:05 +03:00
243 lines
7.6 KiB
Elm
243 lines
7.6 KiB
Elm
module Examples.TextInput exposing (Msg, State, example)
|
|
|
|
{-|
|
|
|
|
@docs Msg, State, example
|
|
|
|
-}
|
|
|
|
import Accessibility.Styled as Html exposing (..)
|
|
import Accessibility.Styled.Key as Key
|
|
import Category exposing (Category(..))
|
|
import Css exposing (..)
|
|
import Debug.Control as Control exposing (Control)
|
|
import Debug.Control.Extra as ControlExtra
|
|
import Dict exposing (Dict)
|
|
import Example exposing (Example)
|
|
import Html.Styled.Attributes exposing (css)
|
|
import KeyboardSupport exposing (Direction(..), Key(..))
|
|
import Nri.Ui.Colors.V1 as Colors
|
|
import Nri.Ui.Heading.V2 as Heading
|
|
import Nri.Ui.Message.V3 as Message
|
|
import Nri.Ui.TextInput.V7 as TextInput
|
|
import ViewHelpers exposing (viewExamples)
|
|
|
|
|
|
{-| -}
|
|
example : Example State Msg
|
|
example =
|
|
{ name = "TextInput"
|
|
, version = 7
|
|
, categories = [ Inputs ]
|
|
, keyboardSupport = []
|
|
, state = init
|
|
, update = update
|
|
, subscriptions = \_ -> Sub.none
|
|
, preview =
|
|
[ TextInput.view "Text Input"
|
|
[ TextInput.custom [ Key.tabbable False ]
|
|
]
|
|
, TextInput.view "Errored"
|
|
[ TextInput.value "invalid content"
|
|
, TextInput.errorIf True
|
|
, TextInput.custom [ Key.tabbable False ]
|
|
]
|
|
]
|
|
, view =
|
|
\state ->
|
|
[ Control.view UpdateControl state.control
|
|
|> Html.fromUnstyled
|
|
, viewExamples <|
|
|
( "readOnlyText"
|
|
, TextInput.view "Shareable Assignment Link"
|
|
[ TextInput.readOnlyText
|
|
, TextInput.value "noredink.com/s/blueprint-code"
|
|
]
|
|
)
|
|
:: customizableExamples state
|
|
]
|
|
}
|
|
|
|
|
|
customizableExamples : State -> List ( String, Html Msg )
|
|
customizableExamples state =
|
|
let
|
|
exampleConfig =
|
|
Control.currentValue state.control
|
|
|
|
toExample { name, toString, inputType, onFocus, onBlur, onEnter } index =
|
|
( name
|
|
, TextInput.view exampleConfig.label
|
|
(exampleConfig.attributes
|
|
++ [ TextInput.id ("text-input__" ++ name ++ "-example")
|
|
, inputType (toString >> SetInput index)
|
|
|> TextInput.map toString identity
|
|
, TextInput.value (Maybe.withDefault "" (Dict.get index state.inputValues))
|
|
]
|
|
++ List.filterMap identity
|
|
[ if exampleConfig.onFocus then
|
|
Just (TextInput.onFocus (SetInput index onFocus))
|
|
|
|
else
|
|
Nothing
|
|
, if exampleConfig.onBlur then
|
|
Just (TextInput.onBlur (SetInput index onBlur))
|
|
|
|
else
|
|
Nothing
|
|
, if exampleConfig.onEnter then
|
|
Just (TextInput.onEnter (SetInput index onEnter))
|
|
|
|
else
|
|
Nothing
|
|
]
|
|
)
|
|
)
|
|
in
|
|
List.indexedMap (\i toView -> toView i)
|
|
[ toExample
|
|
{ name = "text"
|
|
, toString = identity
|
|
, inputType = TextInput.text
|
|
, onFocus = "Focused!!!"
|
|
, onBlur = "Blurred!!!"
|
|
, onEnter = "Entered!!!"
|
|
}
|
|
, toExample
|
|
{ name = "number"
|
|
, toString = Maybe.map String.fromInt >> Maybe.withDefault ""
|
|
, inputType = TextInput.number
|
|
, onFocus = "1234"
|
|
, onBlur = "10000000"
|
|
, onEnter = "20000000"
|
|
}
|
|
, toExample
|
|
{ name = "float"
|
|
, toString = Maybe.map String.fromFloat >> Maybe.withDefault ""
|
|
, inputType = TextInput.float
|
|
, onFocus = "123"
|
|
, onBlur = "1.00000001"
|
|
, onEnter = "100000001.1"
|
|
}
|
|
, toExample
|
|
{ name = "newPassword"
|
|
, toString = identity
|
|
, inputType =
|
|
\onInput ->
|
|
TextInput.newPassword
|
|
{ onInput = onInput
|
|
, showPassword = state.showPassword
|
|
, setShowPassword = SetShowPassword
|
|
}
|
|
, onFocus = "Focused!!!"
|
|
, onBlur = "Blurred!!!"
|
|
, onEnter = "Entered!!!"
|
|
}
|
|
, toExample
|
|
{ name = "email"
|
|
, toString = identity
|
|
, inputType = TextInput.email
|
|
, onFocus = "Focused!!!"
|
|
, onBlur = "Blurred!!!"
|
|
, onEnter = "Entered!!!"
|
|
}
|
|
, toExample
|
|
{ name = "search"
|
|
, toString = identity
|
|
, inputType = TextInput.search
|
|
, onFocus = "Focused!!!"
|
|
, onBlur = "Blurred!!!"
|
|
, onEnter = "Entered!!!"
|
|
}
|
|
]
|
|
|
|
|
|
{-| -}
|
|
type alias State =
|
|
{ inputValues : Dict Int String
|
|
, showPassword : Bool
|
|
, control : Control ExampleConfig
|
|
}
|
|
|
|
|
|
{-| -}
|
|
init : State
|
|
init =
|
|
{ inputValues = Dict.empty
|
|
, showPassword = False
|
|
, control = initControl
|
|
}
|
|
|
|
|
|
type alias ExampleConfig =
|
|
{ label : String
|
|
, attributes : List (TextInput.Attribute String Msg)
|
|
, onFocus : Bool
|
|
, onBlur : Bool
|
|
, onEnter : Bool
|
|
}
|
|
|
|
|
|
initControl : Control ExampleConfig
|
|
initControl =
|
|
Control.record ExampleConfig
|
|
|> Control.field "label" (Control.string "Assignment name")
|
|
|> Control.field "attributes" controlAttributes
|
|
|> Control.field "onFocus" (Control.bool False)
|
|
|> Control.field "onBlur" (Control.bool False)
|
|
|> Control.field "onEnter" (Control.bool False)
|
|
|
|
|
|
controlAttributes : Control (List (TextInput.Attribute value msg))
|
|
controlAttributes =
|
|
ControlExtra.list
|
|
|> ControlExtra.optionalListItem "placeholder"
|
|
(Control.map TextInput.placeholder <|
|
|
Control.string "Learning with commas"
|
|
)
|
|
|> ControlExtra.optionalListItem "hiddenLabel"
|
|
(Control.value TextInput.hiddenLabel)
|
|
|> ControlExtra.optionalListItem "errorIf"
|
|
(Control.map TextInput.errorIf <| Control.bool True)
|
|
|> ControlExtra.optionalListItem "errorMessage"
|
|
(Control.map (Just >> TextInput.errorMessage) <| Control.string "The statement must be true.")
|
|
|> ControlExtra.optionalListItem "guidance"
|
|
(Control.map TextInput.guidance <| Control.string "The statement must be true.")
|
|
|> ControlExtra.optionalListItem "disabled"
|
|
(Control.value TextInput.disabled)
|
|
|> ControlExtra.optionalListItem "loading"
|
|
(Control.value TextInput.loading)
|
|
|> ControlExtra.optionalListItem "writing"
|
|
(Control.value TextInput.writing)
|
|
|> ControlExtra.listItem "noMargin"
|
|
(Control.map TextInput.noMargin (Control.bool False))
|
|
|> ControlExtra.optionalListItem "css"
|
|
(Control.value (TextInput.css [ Css.backgroundColor Colors.azure ]))
|
|
|
|
|
|
{-| -}
|
|
type Msg
|
|
= SetInput Int String
|
|
| SetShowPassword Bool
|
|
| UpdateControl (Control ExampleConfig)
|
|
|
|
|
|
{-| -}
|
|
update : Msg -> State -> ( State, Cmd Msg )
|
|
update msg state =
|
|
case msg of
|
|
SetInput id string ->
|
|
( { state | inputValues = Dict.insert id string state.inputValues }
|
|
, Cmd.none
|
|
)
|
|
|
|
SetShowPassword showPassword ->
|
|
( { state | showPassword = showPassword }
|
|
, Cmd.none
|
|
)
|
|
|
|
UpdateControl newControl ->
|
|
( { state | control = newControl }
|
|
, Cmd.none
|
|
)
|