-
Notifications
You must be signed in to change notification settings - Fork 0
/
component_textfield.go
118 lines (107 loc) · 3.02 KB
/
component_textfield.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
package components
import (
"syscall/js"
"github.com/hexops/vecty"
"github.com/hexops/vecty/elem"
"github.com/hexops/vecty/event"
"github.com/hexops/vecty/prop"
"github.com/stas-makutin/howeve/page/core"
)
type MdcTextField struct {
vecty.Core
core.Classes
core.Keyable
ID string `vecty:"prop"`
Label string `vecty:"prop"`
Value string `vecty:"prop"`
Disabled bool `vecty:"prop"`
Invalid bool `vecty:"prop"`
inputAtributes []vecty.Applyer
changeFn func(value string)
jsObject js.Value
}
func NewMdcTextField(id, label, value string, disabled bool, invalid bool, changeFn func(value string), inputAtributes ...vecty.Applyer) (r *MdcTextField) {
r = &MdcTextField{ID: id, Label: label, Value: value, Disabled: disabled, Invalid: invalid, inputAtributes: inputAtributes, changeFn: changeFn}
return
}
func (ch *MdcTextField) Mount() {
ch.Unmount()
ch.jsObject = js.Global().Get("mdc").Get("textField").Get("MDCTextField").Call(
"attachTo", js.Global().Get("document").Call("getElementById", ch.ID),
)
if ch.Invalid {
ch.jsObject.Set("useNativeValidation", false)
ch.jsObject.Set("valid", false)
}
}
func (ch *MdcTextField) Unmount() {
core.SafeJSDestroy(&ch.jsObject, func(v *js.Value) { v.Call("destroy") })
}
func (ch *MdcTextField) WithKey(key interface{}) *MdcTextField {
ch.Keyable.WithKey(key)
return ch
}
func (ch *MdcTextField) WithClasses(classes ...string) *MdcTextField {
ch.Classes.WithClasses(classes...)
return ch
}
func (ch *MdcTextField) change(event *vecty.Event) {
ch.changeFn(event.Target.Get("value").String())
}
func (ch *MdcTextField) Copy() vecty.Component {
cpy := *ch
return &cpy
}
func (ch *MdcTextField) Render() vecty.ComponentOrHTML {
labelID := ch.ID + "---label"
return elem.Label(
vecty.Markup(
prop.ID(ch.ID),
vecty.Class("mdc-text-field", "mdc-text-field--outlined", "mdc-text-field--no-label"),
prop.Disabled(ch.Disabled),
ch.ApplyClasses(),
),
elem.Span(
vecty.Markup(
vecty.Class("mdc-notched-outline"),
),
elem.Span(
vecty.Markup(
vecty.Class("mdc-notched-outline__leading"),
),
),
vecty.If(ch.Label != "",
elem.Span(
vecty.Markup(
vecty.Class("mdc-notched-outline__notch"),
),
elem.Span(
vecty.Markup(
prop.ID(labelID),
vecty.Class("mdc-floating-label"),
),
vecty.Text(ch.Label),
),
),
),
elem.Span(
vecty.Markup(
vecty.Class("mdc-notched-outline__trailing"),
),
),
),
elem.Input(
vecty.Markup(
vecty.Class("mdc-text-field__input"),
vecty.MarkupIf(ch.Label != "", vecty.Attribute("aria-labelledby", labelID)),
vecty.MarkupIf(ch.Label == "", vecty.Attribute("aria-label", "Label")),
vecty.MarkupIf(len(ch.inputAtributes) <= 0, prop.Type(prop.TypeText)),
prop.Value(ch.Value),
event.Change(ch.change),
),
vecty.Markup(
ch.inputAtributes...,
),
),
)
}