You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

74 lines
2.2 KiB
Plaintext

listRow = config \
color = (config.selected | True \ "rgba(255,255,255,0.2)" | False \ "transparent");
Clickable {
event = config.onClick,
child = Stack {
children = [
Rect { w = config.w, h = config.h, color = color },
centerV config.h (
Positioned {
x = 10,
y = 10,
child = Text { content = config.child, color = "white" }
}
)
]
}
};
palette = config \
focusedIndex = 0;
windowHeight = 400;
windowWidth = 600;
results = take 10 (config.search config.state.query);
padding = 0;
textInputHeight = 40;
contentWidth = windowWidth - (padding * 2);
contentHeight = windowHeight - (padding * 2);
listHeight = contentHeight - 40;
Positioned {
x = (config.viewport.width - windowWidth) / 2,
y = (config.viewport.height - windowHeight) / 2,
child = Stack {
children = [
Rect { w = windowWidth, h = windowHeight, color = "#063351", radius = 0, strokeWidth = 1, strokeColor = "#1A5F80" },
Padding {
amount = padding,
child = Column {
gap = 0,
children = [
textInput {
key = "query",
initialValue = config.state.query,
initialFocus = True,
color = "white",
backgroundColor = "rgba(0,0,0,0.2)",
w = contentWidth,
h = textInputHeight,
onChange = text \ Batch [config.state.query := text, config.state.focusedIndex := 0],
onKeyDown = key \ key
| ArrowUp \ config.state.focusedIndex := max 0 (config.state.focusedIndex - 1)
| ArrowDown \ config.state.focusedIndex := (config.state.focusedIndex + 1)
| _ \ NoOp
},
Clip {
w = contentWidth,
h = listHeight,
child = Column {
gap = 1,
children = mapWithIndex (t i \ listRow { child = t, w = contentWidth, h = textInputHeight, selected = (config.state.focusedIndex == i), onClick = NoOp }) results
}
}
]
}
}
]
}
};