Skip to content

Instantly share code, notes, and snippets.

@chandu0101
Created April 17, 2015 13:48
Show Gist options
  • Save chandu0101/e2df8be3df4cf6a3455f to your computer and use it in GitHub Desktop.
Save chandu0101/e2df8be3df4cf6a3455f to your computer and use it in GitHub Desktop.
object ReactListView {
class Style extends StyleSheet.Inline {
import dsl._
val listGroup = style(marginBottom(20.px),
paddingLeft.`0`,
&.firstChild.lastChild(borderBottomLeftRadius(4 px),
borderBottomRightRadius(4 px))
)
val listItem = boolStyle(selected => styleS(position.relative,
display.block,
padding(v = 10.px, h = 15.px),
border :=! "1px solid #ecf0f1",
cursor.pointer,
mixinIfElse(selected)(color.white,
fontWeight._500,
backgroundColor("#146699".color))(
backgroundColor.white,
&.hover(color("#555555".color),
backgroundColor("#ecf0f1".color)))
))
}
case class State(filterText: String = "", selectedItem: String = "", hoverIndex: Int = -1)
class Backend(t: BackendScope[Props, State]) {
def onTextChange(text: String) = {
t.modState(_.copy(filterText = text))
}
def onItemSelect(value: String) = {
t.modState(_.copy(selectedItem = value, hoverIndex = -1))
if (t.props.onItemSelect != null) t.props.onItemSelect(value)
}
}
val component = ReactComponentB[Props]("ReactListView")
.initialState(State())
.backend(new Backend(_))
.render((P, S, B) => {
val fItems = P.items.filter(item => item.toString.toLowerCase.contains(S.filterText.toLowerCase))
div(
P.showSearchBox ?= ReactSearchBox(onTextChange = B.onTextChange),
ul(P.style.listGroup)(
fItems.map(item => {
val selected = item.toString == S.selectedItem
li(P.style.listItem(selected), onClick --> B.onItemSelect(item.toString), item)
})
)
)
})
.build
case class Props(items: List[String], onItemSelect: StringUnit, showSearchBox: Boolean, style: Style)
def apply(items: List[String], onItemSelect: StringUnit = null, showSearchBox: Boolean = false, style: Style = new Style, ref: js.UndefOr[String] = "", key: js.Any = {}) = component.set(key, ref)(Props(items, onItemSelect, showSearchBox, style))
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment