128 lines
3.6 KiB
Nim
128 lines
3.6 KiB
Nim
import vdom, kdom, vstyles, karax, karaxdsl, jdict, jstrutils
|
|
|
|
type TextInput* = ref object of VComponent
|
|
value: cstring
|
|
isActive: bool
|
|
|
|
proc render(x: VComponent): VNode =
|
|
let self = TextInput(x)
|
|
|
|
let style = style(
|
|
(StyleAttr.position, cstring"relative"),
|
|
(StyleAttr.paddingLeft, cstring"10px"),
|
|
(StyleAttr.paddingRight, cstring"5px"),
|
|
(StyleAttr.height, cstring"30px"),
|
|
(StyleAttr.lineHeight, cstring"30px"),
|
|
(StyleAttr.border, cstring"solid 1px " & (if self.isActive: cstring"red" else: cstring"black")),
|
|
(StyleAttr.fontSize, cstring"12px"),
|
|
(StyleAttr.fontWeight, cstring"600")
|
|
).merge(self.style)
|
|
|
|
let inputStyle = style.merge(style(
|
|
(StyleAttr.color, cstring"inherit"),
|
|
(StyleAttr.fontSize, cstring"inherit"),
|
|
(StyleAttr.fontWeight, cstring"inherit"),
|
|
(StyleAttr.fontFamily, cstring"inherit"),
|
|
(StyleAttr.position, cstring"absolute"),
|
|
(StyleAttr.top, cstring"0"),
|
|
(StyleAttr.left, cstring"0"),
|
|
(StyleAttr.height, cstring"100%"),
|
|
(StyleAttr.width, cstring"100%"),
|
|
(StyleAttr.border, cstring"none"),
|
|
(StyleAttr.backgroundColor, cstring"transparent"),
|
|
))
|
|
|
|
proc flip(ev: Event; n: VNode) =
|
|
self.isActive = not self.isActive
|
|
echo "flip! ", self.isActive, " id: ", self.debugId, " version ", self.version
|
|
markDirty(self)
|
|
|
|
result = buildHtml(tdiv(style=style)):
|
|
input(style=inputStyle, value=self.value, onblur=flip, onfocus=flip,
|
|
events=self.events)
|
|
|
|
proc update(current, next: VComponent) =
|
|
let current = TextInput(current)
|
|
let next = TextInput(next)
|
|
current.value = next.value
|
|
current.key = next.key
|
|
|
|
proc changed(current, next: VComponent): bool = true
|
|
|
|
proc newTextInput*(style: VStyle = VStyle(); key: cstring;
|
|
value = cstring""): TextInput =
|
|
result = newComponent(TextInput, render, changed=changed, updated=update)
|
|
result.style = style
|
|
result.value = value
|
|
#result.key = key
|
|
|
|
when false:
|
|
type
|
|
Combined = ref object of VComponent
|
|
a, b: TextInput
|
|
|
|
proc renderComb(self: VComponent): VNode =
|
|
let self = Combined(self)
|
|
|
|
proc bu(ev: Event; n: VNode) =
|
|
self.a.value = ""
|
|
self.b.value = ""
|
|
markDirty(self.a)
|
|
markDirty(self.b)
|
|
|
|
result = buildHtml(tdiv(style=self.style)):
|
|
self.a
|
|
self.b
|
|
button(onclick=bu):
|
|
text "reset"
|
|
|
|
proc changed(self: VComponent): bool =
|
|
let self = Combined(self)
|
|
result = self.a.changedImpl(self.a) or self.b.changedImpl(self.b)
|
|
|
|
proc newCombined*(style: VStyle = VStyle()): Combined =
|
|
result = newComponent(Combined, renderComb, changed=changed)
|
|
result.a = newTextInput(style, "AAA")
|
|
result.b = newTextInput(style, "BBB")
|
|
|
|
|
|
var
|
|
persons: seq[cstring] = @[cstring"Karax", "Abathur", "Fenix"]
|
|
errmsg = cstring""
|
|
|
|
proc renderPerson(text: cstring, index: int): VNode =
|
|
result = buildHtml(tdiv):
|
|
newTextInput(VStyle(), &index, text):
|
|
proc onkeyuplater(ev: Event; n: VNode) =
|
|
let v = n.value
|
|
if v.len > 0:
|
|
persons[index] = v
|
|
errmsg = ""
|
|
else:
|
|
errmsg = "name must not be empty"
|
|
button:
|
|
proc onclick(ev: Event; n: VNode) =
|
|
persons.delete(index)
|
|
errmsg = ""
|
|
echo persons
|
|
text "(x)"
|
|
|
|
|
|
proc createDom(): VNode =
|
|
result = buildHtml(tdiv):
|
|
tdiv:
|
|
for index, text in persons.pairs:
|
|
renderPerson(text, index)
|
|
tdiv:
|
|
newTextInput(VStyle(), &persons.len, ""):
|
|
proc onkeyupenter(ev: Event; n: VNode) =
|
|
let v = n.value
|
|
if v.len > 0:
|
|
persons.add v
|
|
errmsg = ""
|
|
else:
|
|
errmsg = "name must not be empty"
|
|
tdiv:
|
|
text errmsg
|
|
|
|
setRenderer createDom
|