-
-
Notifications
You must be signed in to change notification settings - Fork 356
/
flow.go
161 lines (129 loc) · 2.91 KB
/
flow.go
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
package app
import (
"net/url"
"strconv"
"github.com/google/uuid"
"github.com/maxence-charriere/go-app/v7/pkg/errors"
)
const (
flowItemBaseWidth = 300
)
// UIFlow is the interface that describes a container that displays its items as
// a flow.
//
// EXPERIMENTAL WIDGET.
type UIFlow interface {
UI
// The HTML Class.
Class(c string) UIFlow
// Content sets the content with the given UI elements.
Content(elems ...UI) UIFlow
// ItemsBaseWidth sets the items base width in px. Items size is adjusted to
// fit the space in the container. Default is 300px.
ItemsBaseWidth(px int) UIFlow
// StrechtOnSingleRow makes the items to occupy all the available space when
// the flow spreads on a single row.
StrechtOnSingleRow() UIFlow
}
// Flow creates a container that displays its items as a flow.
//
// EXPERIMENTAL WIDGET.
func Flow() UIFlow {
return &flow{
IitemsBaseWitdh: flowItemBaseWidth,
}
}
type flow struct {
Compo
IitemsBaseWitdh int
Iclass string
Icontent []UI
IstrechOnSingleRow bool
id string
width int
itemWidth int
contentLen int
}
func (f *flow) Class(c string) UIFlow {
if f.Iclass != "" {
f.Iclass += " "
}
f.Iclass += c
return f
}
func (f *flow) Content(elems ...UI) UIFlow {
f.Icontent = FilterUIElems(elems...)
return f
}
func (f *flow) ItemsBaseWidth(px int) UIFlow {
f.IitemsBaseWitdh = px
return f
}
func (f *flow) StrechtOnSingleRow() UIFlow {
f.IstrechOnSingleRow = true
return f
}
func (f *flow) OnMount(ctx Context) {
f.id = "app-flow-" + uuid.New().String()
f.Update()
f.refreshLayout()
}
func (f *flow) OnNav(ctx Context, u *url.URL) {
f.refreshLayout()
}
func (f *flow) OnAppResize(ctx Context) {
f.refreshLayout()
}
func (f *flow) Render() UI {
if contentLen := len(f.Icontent); f.Mounted() && contentLen != f.contentLen {
f.contentLen = contentLen
f.refreshLayout()
}
return Div().
ID(f.id).
Class("goapp-flow").
Class(f.Iclass).
Body(
Range(f.Icontent).Slice(func(i int) UI {
item := f.Icontent[i]
baseWidth := strconv.Itoa(f.itemWidth) + "px"
return Div().
Class("goapp-flow-item").
Style("flex-basis", baseWidth).
Body(item)
}),
)
}
func (f *flow) mounted() bool {
return f.id != ""
}
func (f *flow) refreshLayout() {
Dispatch(f.adjustItemSizes)
}
func (f *flow) adjustItemSizes() {
if !f.mounted() || f.IitemsBaseWitdh == 0 || len(f.Icontent) == 0 {
return
}
elem := Window().GetElementByID(f.id)
if !elem.Truthy() {
Log("%s", errors.New("flow not found").Tag("id", f.id))
return
}
width := elem.Get("clientWidth").Int()
if width == 0 {
return
}
f.width = width
defer f.Update()
itemWidth := f.IitemsBaseWitdh
itemsPerRow := width / itemWidth
if itemsPerRow <= 1 {
f.itemWidth = width
return
}
itemWidth = width / itemsPerRow
if l := len(f.Icontent); l < itemsPerRow && f.IstrechOnSingleRow {
itemWidth = width / l
}
f.itemWidth = itemWidth
}