Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 213461f

Browse files
committed
Ability to expand/collapse sections
1 parent 0db5e54 commit 213461f

File tree

6 files changed

+111
-12
lines changed

6 files changed

+111
-12
lines changed

‎src/Json/Form.elm

Lines changed: 54 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import Browser.Dom
1212
import Dict exposing (Dict)
1313
import ErrorMessages exposing (stringifyError)
1414
import Html exposing (..)
15-
import Html.Attributes exposing (class)
15+
import Html.Attributes exposing (class, classList)
1616
import Html.Events exposing (onClick)
1717
import Json.Decode as Decode exposing (decodeValue)
1818
import Json.Encode as Encode
@@ -26,6 +26,7 @@ import Json.Schema.Definitions exposing (..)
2626
import Json.Schema.Validation exposing (Error)
2727
import Json.Value as JsonValue exposing (JsonValue(..))
2828
import JsonFormUtil as Util exposing (getTitle, getUiSpec, jsonValueToString)
29+
import Set
2930
import Task
3031

3132

@@ -206,6 +207,14 @@ viewObject model schema properties isRequired isDisabled path =
206207
|> .rule
207208
|> applyRule model.value path
208209

210+
isExpandable =
211+
schema
212+
|> getUiSpec
213+
|> .expandable
214+
215+
isExpanded =
216+
model.expandedNodes |> Set.member path
217+
209218
required =
210219
case schema of
211220
ObjectSchema os ->
@@ -222,10 +231,36 @@ viewObject model schema properties isRequired isDisabled path =
222231

223232
else
224233
div [ class "jf-nested-object" ]
225-
[ Html.h3 [] [ text title ]
226-
, properties
227-
|> iterateOverSchemata
228-
|> div []
234+
[ if title /= "" then
235+
div
236+
([ classList
237+
[ ( "jf-heading", True )
238+
, ( "jf-heading--expandable", isExpandable )
239+
, ( "jf-heading--expanded", isExpandable && isExpanded )
240+
]
241+
]
242+
++ (if isExpandable then
243+
[ onClick <| ToggleNode path ]
244+
245+
else
246+
[]
247+
)
248+
)
249+
[ text title ]
250+
251+
else
252+
text ""
253+
, if isExpanded || not isExpandable then
254+
properties
255+
|> iterateOverSchemata
256+
|> div
257+
[ classList
258+
[ ( "jf-section--expandable", isExpandable )
259+
]
260+
]
261+
262+
else
263+
text ""
229264
]
230265

231266

@@ -387,6 +422,19 @@ update msg model =
387422
)
388423
|> withExMsg None
389424

425+
ToggleNode path ->
426+
( { model
427+
| expandedNodes =
428+
if model.expandedNodes |> Set.member path then
429+
model.expandedNodes |> Set.remove path
430+
431+
else
432+
model.expandedNodes |> Set.insert path
433+
}
434+
, Cmd.none
435+
)
436+
|> withExMsg None
437+
390438

391439
touch : Maybe Path -> Maybe Path -> List Path -> List Path
392440
touch path focused beingEdited =
@@ -523,6 +571,7 @@ init config schema v =
523571
, editedJson = ""
524572
, showPassword = False
525573
, fieldHeights = Dict.empty
574+
, expandedNodes = Set.empty
526575
}
527576
, multilineFieldsPaths
528577
|> List.map (\path -> Browser.Dom.getViewportOf (config.name ++ "_" ++ String.join "_" path) |> Task.attempt (GetViewport path))

‎src/Json/Form/Definitions.elm

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import Json.Schema
99
import Json.Schema.Definitions exposing (..)
1010
import Json.Schema.Validation exposing (Error)
1111
import Json.Value as JsonValue exposing (JsonValue)
12+
import Set exposing (Set)
1213
import Task
1314

1415

@@ -22,6 +23,7 @@ type alias Model =
2223
, editedJson : String
2324
, showPassword : Bool
2425
, fieldHeights : Dict Path Float
26+
, expandedNodes : Set Path
2527
}
2628

2729

@@ -38,6 +40,7 @@ type Msg
3840
| ToggleShowPassword
3941
| DeleteProperty Path
4042
| GetViewport Path (Result Browser.Dom.Error Viewport)
43+
| ToggleNode Path
4144

4245

4346
type EditingMode

‎src/Json/Form/UiSpec.elm

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
module Json.Form.UiSpec exposing (MultilineTextFieldConfig, Rule(..), UiSpec, Widget(..), applyRule, blank, decoder, defaultMultilineTextFieldConfig)
22

3-
import Json.Decode as Decode exposing (Decoder, Value, fail, field, int, maybe, string, succeed)
3+
import Json.Decode as Decode exposing (Decoder, Value, bool, fail, field, int, maybe, string, succeed)
44
import Json.Encode as Encode
55
import Json.Schema exposing (validateValue)
66
import Json.Schema.Definitions exposing (Schema(..))
@@ -10,6 +10,7 @@ import Json.Value as JsonValue exposing (JsonValue)
1010
type alias UiSpec =
1111
{ widget : Maybe Widget
1212
, rule : Maybe Rule
13+
, expandable : Bool
1314
}
1415

1516

@@ -42,14 +43,27 @@ blank : UiSpec
4243
blank =
4344
{ widget = Nothing
4445
, rule = Nothing
46+
, expandable = False
4547
}
4648

4749

4850
decoder : Decoder UiSpec
4951
decoder =
50-
Decode.map2 UiSpec
52+
Decode.map3 UiSpec
5153
(field "widget" widgetDecoder |> maybe)
5254
(field "rule" ruleDecoder |> maybe)
55+
(field "expandable" bool
56+
|> maybe
57+
|> Decode.map
58+
(\x ->
59+
case x of
60+
Just bool ->
61+
bool
62+
63+
Nothing ->
64+
False
65+
)
66+
)
5367

5468

5569
widgetDecoder : Decoder Widget

‎src/Showcase.elm

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -325,6 +325,9 @@ flightBookingInputGeneratorSchema =
325325
"type": "object",
326326
"properties": {
327327
"payment": {
328+
"ui": {
329+
"expandable": true
330+
},
328331
"title": "Payment",
329332
"type": "object",
330333
"properties": {
@@ -429,6 +432,9 @@ flightBookingInputGeneratorSchema =
429432
}
430433
},
431434
"account": {
435+
"ui": {
436+
"expandable": true
437+
},
432438
"type": "object",
433439
"title": "Account",
434440
"properties": {
@@ -508,6 +514,9 @@ flightBookingInputGeneratorSchema =
508514
}
509515
},
510516
"passengers": {
517+
"ui": {
518+
"expandable": true
519+
},
511520
"title": "Passengers",
512521
"type": "object",
513522
"properties": {

‎stylesheets/app.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
--color-active--054: #8fd9e3;
66
box-sizing: border-box;
77
--form-background: #fafafa;
8-
--object-heading-indent: 0px;
98
--nested-object-padding: 0px;
9+
--expandable-section-padding: 0 20px;
1010
}
1111

1212
.app-topbar {

‎stylesheets/json-form.css

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,38 @@
1111
font-size: 16px;
1212
}
1313

14-
h3 + div {
15-
padding: var(--object-heading-indent);
16-
}
17-
1814
.jf-nested-object {
1915
padding: var(--nested-object-padding);
2016
}
2117

2218
.jf-json-form {
2319
background: var(--form-background);
2420
}
21+
22+
23+
24+
.jf-heading {
25+
font-size: 16px;
26+
padding: 10px 0;
27+
}
28+
29+
.jf-heading--expandable {
30+
cursor: pointer;
31+
font-size: 19px;
32+
}
33+
34+
.jf-heading--expandable:before {
35+
content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'><polyline points='9 18 15 12 9 6'></polyline></svg>");
36+
padding: 4px;
37+
}
38+
39+
.jf-heading--expandable.jf-heading--expanded {
40+
}
41+
42+
.jf-heading--expandable.jf-heading--expanded:before {
43+
content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'><polyline points='6 9 12 15 18 9'></polyline></svg>");
44+
}
45+
46+
.jf-section--expandable {
47+
padding: var(--expandable-section-padding);
48+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /