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
|
package reading.component.widget
import scalatags.JsDom.all._
import org.scalajs.dom.html.Input
import org.scalajs.dom.KeyboardEvent
import scalacss.Defaults._
import scalacss.ScalatagsCss._
import rx._
import reading.component.style.{ Color => C }
import reading.component.widget.style.{ Input => InputStyle }
import reading.utils.RxUtils._
object Input {
def apply(
style: StyleA,
query: Var[String],
label: String = "",
onEnter: => Unit = (),
maxLength: Option[Int] = None
)(
implicit
ctx: Ctx.Owner
): Frag = {
val inputBox = input(
InputStyle.input,
placeholder := label,
onkeyup := { (e: KeyboardEvent) =>
val input = e.target.asInstanceOf[Input]
query() = input.value
input.value = input.value
if (e.keyCode == 13) onEnter
},
maxlength := maxLength.map(_.toString).getOrElse("")
).render
query.trigger {
inputBox.value = query.now
}
div(
InputStyle.render,
InputStyle.parent,
style,
inputBox,
span(
InputStyle.clear,
Rx(if (query().nonEmpty) InputStyle.showClear else InputStyle.empty),
onclick := (() => query() = ""),
Cross(15.px, C.gray.value)
)
)
}
}
|