Skip to content

Instantly share code, notes, and snippets.

@chandu0101
Last active November 10, 2015 15:22
Show Gist options
  • Save chandu0101/67c37cfbe037227f090e to your computer and use it in GitHub Desktop.
Save chandu0101/67c37cfbe037227f090e to your computer and use it in GitHub Desktop.
ReactPager using scalacss
object CssPager {
type CLICKEVENT = Int => Unit
object Style extends StyleSheet.Inline {
import dsl._
val pager = style(margin(20.px),
unsafeChild(".previous")(float.left),
unsafeChild(".next")(float.right)
)
val button = boolStyle(hide =>
styleS(
display :=! (if (hide) "none" else "block"),
padding(5.px, 14.px),
backgroundColor("#EF5350"),
border :=! "1px solid transparent",
borderRadius(2.px),
color.white,
cursor.pointer,
boxShadow := "0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24)",
&.hover(
backgroundColor("#ff1034")
),
&.focus(
backgroundColor("#ff1034")
)
)
)
}
class Backend(t: BackendScope[Props, _]) {
def handleNext = {
val newOffset = t.props.itemsPerPage + t.props.offset
t.props.nextClick(newOffset)
}
def handlePrevious = {
val newOffset = t.props.offset - t.props.itemsPerPage
t.props.previousClick(newOffset)
}
}
val component = ReactComponentB[Props]("Pager")
.stateless
.backend(new Backend(_))
.render((P, S, B) => {
div(Style.pager)(
a(cls := "previous", onClick --> B.handlePrevious)("← Previous", Style.button(P.offset == 0)),
a(cls := "next", onClick --> B.handleNext)("Next →", Style.button(P.offset + P.itemsPerPage >= P.totalItems))
)
}).build
case class Props(itemsPerPage: Int, totalItems: Int, offset: Int, nextClick: CLICKEVENT, previousClick: CLICKEVENT)
def apply(itemsPerPage: Int, totalItems: Int, offset: Int, nextClick: CLICKEVENT, previousClick: CLICKEVENT) = {
component(Props(itemsPerPage, totalItems, offset, nextClick, previousClick))
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment