Skip to content

Commit cf50a92

Browse files
16021602
committed
Multiline text input
1 parent b149f20 commit cf50a92

File tree

13 files changed

+138
-83
lines changed

13 files changed

+138
-83
lines changed

‎elm-package.json‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,19 @@
44
"repository": "https://github.com/1602/json-form.git",
55
"license": "BSD3",
66
"source-directories": [
7-
"src"
7+
"src",
8+
"../json-schema/src"
89
],
910
"exposed-modules": [],
1011
"dependencies": {
1112
"1602/elm-feather": "2.2.0 <= v < 3.0.0",
12-
"1602/json-schema": "4.1.0 <= v < 5.0.0",
1313
"1602/json-value": "3.0.2 <= v < 3.0.3",
14+
"NoRedInk/elm-decode-pipeline": "3.0.0 <= v < 4.0.0",
1415
"elm-lang/core": "5.0.0 <= v < 6.0.0",
1516
"elm-lang/dom": "1.1.1 <= v < 2.0.0",
1617
"elm-lang/html": "2.0.0 <= v < 3.0.0",
17-
"elm-lang/svg": "2.0.0 <= v < 3.0.0"
18+
"elm-lang/svg": "2.0.0 <= v < 3.0.0",
19+
"zwilias/elm-utf-tools": "1.0.1 <= v < 2.0.0"
1820
},
1921
"elm-version": "0.18.0 <= v < 0.19.0"
2022
}

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88
"author": "Anatoliy <mail@anatoliy.in>",
99
"license": "GNU GENERAL PUBLIC LICENSE v3",
1010
"scripts": {
11-
"start": "npm run dev",
1211
"dev": "webpack-dev-server --hot --port 4000 --colors",
1312
"build": "webpack",
1413
"deploy": "gh-pages -d dist",

‎src/Demo.elm‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,14 +22,18 @@ type alias Model =
2222

2323
initialShowcase : Snippet
2424
initialShowcase =
25-
Rules
25+
SimpleField
2626

2727

2828
init : ( Model, Cmd Msg )
2929
init =
30+
let
31+
form =
32+
Json.Form.init Json.Form.Config.defaultConfig (getSnippet initialShowcase) Nothing
33+
in
3034
{ showcase = initialShowcase
31-
, form = Json.Form.init Json.Form.Config.defaultConfig (getSnippet initialShowcase) Nothing
32-
, editedValue = Nothing
35+
, form = form
36+
, editedValue = form.value
3337
, expandedNodes = [ [] ]
3438
}
3539
! []

‎src/Json/Form/Config.elm‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
module Json.Form.Config exposing (Config, TextFieldStyle(..), decoder, defaultConfig)
22

3-
import Json.Decode as Decode exposing (Decoder, bool, fail, field, string, succeed)
3+
import Json.Decode as Decode exposing (Decoder, bool, fail, field, maybe, string, succeed)
44

55

66
type alias Config =
@@ -16,8 +16,8 @@ type TextFieldStyle
1616

1717
defaultConfig : Config
1818
defaultConfig =
19-
{ textFieldStyle = Filled
20-
, dense = False
19+
{ textFieldStyle = Outlined
20+
, dense = True
2121
}
2222

2323

@@ -39,4 +39,4 @@ decoder =
3939
<|
4040
string
4141
)
42-
(field "dense" bool)
42+
(field "dense" bool |> maybe |> Decode.map (Maybe.withDefault False))

‎src/Json/Form/Definitions.elm‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ init config schema v =
2626
let
2727
someValue =
2828
v
29-
|> Maybe.withDefault JsonValue.NullValue
29+
|> Maybe.withDefault (JsonValue.ObjectValue [])
3030
|> JsonValue.encode
3131

3232
( value, errors ) =
@@ -49,7 +49,7 @@ init config schema v =
4949
, focused = Nothing
5050
, config = config
5151
, value = value
52-
, errors = Dict.empty
52+
, errors = errors
5353
, beingEdited = []
5454
, editedNumber = ""
5555
, showPassword = False

‎src/Json/Form/TextField.elm‎

Lines changed: 70 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,9 @@ view model schema isRequired isDisabled path =
3535
isPassword =
3636
uiSpec.widgetType == Just PasswordField
3737

38+
isMultiline =
39+
uiSpec.widgetType == Just MultilineTextField
40+
3841
( disabled, hidden ) =
3942
applyRule model.value path uiSpec.rule
4043

@@ -54,23 +57,8 @@ view model schema isRequired isDisabled path =
5457

5558
else
5659
text ""
57-
in
58-
div
59-
[ classList
60-
[ ( "jf-textfield", True )
61-
, ( "jf-textfield--outlined", model.config.textFieldStyle == Outlined )
62-
, ( "jf-textfield--dense", model.config.dense )
63-
, ( "jf-textfield--focused", model.focused |> Maybe.map ((==) path) |> Maybe.withDefault False )
64-
, ( "jf-textfield--empty", editedValue == "" )
65-
, ( "jf-textfield--invalid", hasError )
66-
, ( "jf-textfield--disabled", actuallyDisabled )
67-
, ( "jf-textfield--hidden", hidden )
68-
]
6960

70-
-- , onFocus <| FocusTextInput path
71-
-- , Html.Attributes.tabindex -1
72-
]
73-
[ input
61+
baseAttributes =
7462
[ class "jf-textfield__input"
7563
, onFocus <| FocusInput (Just path)
7664
, onBlur <| FocusInput Nothing
@@ -80,16 +68,47 @@ view model schema isRequired isDisabled path =
8068
, Html.Attributes.name id
8169
, Html.Attributes.autocomplete False
8270
, Html.Attributes.disabled actuallyDisabled
83-
, if isPassword && not model.showPassword then
84-
type_ "password"
71+
]
72+
73+
textInput =
74+
if isMultiline then
75+
textarea baseAttributes []
8576

86-
else
87-
type_ "text"
77+
else
78+
input
79+
(baseAttributes
80+
++ [ if isPassword && not model.showPassword then
81+
type_ "password"
82+
83+
else
84+
type_ "text"
85+
]
86+
)
87+
[]
88+
in
89+
div
90+
[ classList [ ( "jf-element", True ), ( "jf-element--hidden", hidden ) ]
91+
]
92+
[ div
93+
[ classList
94+
[ ( "jf-textfield", True )
95+
, ( "jf-textfield--outlined", model.config.textFieldStyle == Outlined )
96+
, ( "jf-textfield--dense", model.config.dense )
97+
, ( "jf-textfield--focused", model.focused |> Maybe.map ((==) path) |> Maybe.withDefault False )
98+
, ( "jf-textfield--empty", editedValue == "" )
99+
, ( "jf-textfield--invalid", hasError )
100+
, ( "jf-textfield--disabled", actuallyDisabled )
101+
, ( "jf-textfield--multiline", isMultiline )
102+
]
103+
104+
-- , onFocus <| FocusTextInput path
105+
-- , Html.Attributes.tabindex -1
106+
]
107+
[ textInput
108+
, icon
109+
, label [ class "jf-textfield__label" ] [ schema |> getTitle isRequired |> text ]
88110
]
89-
[]
90-
, icon
91-
, label [ class "jf-textfield__label" ] [ schema |> getTitle isRequired |> text ]
92-
, div [ class "jf-textfield__helper-text" ] [ helperText ]
111+
, div [ class "jf-helper-text" ] [ helperText ]
93112
]
94113

95114

@@ -128,29 +147,33 @@ viewNumeric model schema isRequired isDisabled path =
128147
isDisabled || disabled
129148
in
130149
div
131-
[ classList
132-
[ ( "jf-textfield", True )
133-
, ( "jf-textfield--outlined", model.config.textFieldStyle == Outlined )
134-
, ( "jf-textfield--dense", model.config.dense )
135-
, ( "jf-textfield--focused", isFocused )
136-
, ( "jf-textfield--empty", editedValue == "" )
137-
, ( "jf-textfield--invalid", hasError )
138-
, ( "jf-textfield--disabled", actuallyDisabled )
139-
, ( "jf-textfield--hidden", hidden )
140-
]
150+
[ classList [ ( "jf-element", True ), ( "jf-element--hidden", hidden ) ]
141151
]
142-
[ input
143-
[ class "jf-textfield__input"
144-
, onFocus <| FocusNumericInput (Just path)
145-
, onBlur <| FocusNumericInput Nothing
146-
, onInput <| EditNumber
147-
, Html.Attributes.id id
148-
, Html.Attributes.name id
149-
, value <| editedValue
150-
, type_ "number"
151-
, Html.Attributes.disabled actuallyDisabled
152+
[ div
153+
[ classList
154+
[ ( "jf-textfield", True )
155+
, ( "jf-textfield--outlined", model.config.textFieldStyle == Outlined )
156+
, ( "jf-textfield--dense", model.config.dense )
157+
, ( "jf-textfield--focused", isFocused )
158+
, ( "jf-textfield--empty", editedValue == "" )
159+
, ( "jf-textfield--invalid", hasError )
160+
, ( "jf-textfield--disabled", actuallyDisabled )
161+
, ( "jf-textfield--hidden", hidden )
162+
]
163+
]
164+
[ input
165+
[ class "jf-textfield__input"
166+
, onFocus <| FocusNumericInput (Just path)
167+
, onBlur <| FocusNumericInput Nothing
168+
, onInput <| EditNumber
169+
, Html.Attributes.id id
170+
, Html.Attributes.name id
171+
, value <| editedValue
172+
, type_ "number"
173+
, Html.Attributes.disabled actuallyDisabled
174+
]
175+
[]
176+
, label [ class "jf-textfield__label" ] [ schema |> getTitle isRequired |> text ]
152177
]
153-
[]
154-
, label [ class "jf-textfield__label" ] [ schema |> getTitle isRequired |> text ]
155-
, div [ class "jf-textfield__helper-text" ] [ helperText ]
178+
, div [ class "jf-helper-text" ] [ helperText ]
156179
]

‎src/Json/Form/UiSpec.elm‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ type alias UiSpec =
1616
type WidgetType
1717
= PasswordField
1818
| Switch
19+
| MultilineTextField
1920

2021

2122
type Rule
@@ -44,6 +45,9 @@ decoder =
4445
else if widget == "switch" then
4546
succeed <| Switch
4647

48+
else if widget == "multiline" then
49+
succeed <| MultilineTextField
50+
4751
else
4852
fail ""
4953
)

‎src/Snippets.elm‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -46,12 +46,14 @@ getSnippet : Snippet -> Schema
4646
getSnippet ds =
4747
case ds of
4848
SimpleField ->
49-
ObjectSchema
50-
{ blankSubSchema
51-
| type_ = SingleType StringType
52-
, title = Just "First name"
53-
, description = Just "First (given) name of a travelling person"
54-
}
49+
buildSchema
50+
|> withType "string"
51+
|> withTitle "Text field"
52+
|> withDescription "Helper text"
53+
|> withCustomKeyword "ui" (Encode.object [ ( "widget", string "multiline" ) ])
54+
|> toSchema
55+
|> Result.mapError (Debug.log "SimpleField")
56+
|> Result.withDefault blankSchema
5557

5658
FlatObject ->
5759
buildSchema
@@ -154,7 +156,7 @@ getSnippet ds =
154156
[ ( "enabled"
155157
, buildSchema
156158
|> withType "boolean"
157-
-- |> withDefault (Encode.bool True)
159+
|> withDefault (Encode.bool False)
158160
|> withTitle "enable"
159161
|> withDescription "Enable editing"
160162
|> withCustomKeyword "ui" (Encode.object [ ( "widget", string "switch" ) ])

‎stylesheets/checkbox.css‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -139,10 +139,6 @@
139139
opacity: 0;
140140
}
141141

142-
.jf-checkbox--hidden {
143-
display: none;
144-
}
145-
146142
.jf-checkbox--disabled {
147143
opacity: 0.54;
148144
}

‎stylesheets/json-form-element.css‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
.jf-element {
2+
display: flex;
3+
flex-direction: column;
4+
margin-top: 16px;
5+
margin-left: 16px;
6+
margin-bottom: 16px;
7+
}
8+
9+
.jf-element--hidden {
10+
display: none;
11+
}
12+
13+
.jf-helper-text {
14+
margin-top: 8px;
15+
margin-left: 12px;
16+
}

0 commit comments

Comments
 (0)