Chandu - CssPager

CssPager.scala

import japgolly.scalajs.react._, vdom.prefix_<^._, ScalazReact._
import japgolly.scalacss.Defaults._
import japgolly.scalacss.ScalaCssReact._
import shapeless.syntax.singleton._

object CssPager {

  type CLICKEVENT = Int => Unit

  object Style extends StyleSheet.Inline {
    import dsl._

    val pager = styleC {
      val outer = styleS(margin(20.px))
      val prev = styleS(float.left)
      val next = styleS(float.right)
      outer.named('outer) :*: prev.named('prev) :*: next.named('next)
    }

    val button = boolStyle(hide =>
      styleS(
        if (hide) display.none else display.block,
        padding(5.px, 14.px),
        backgroundColor("#EF5350"),
        border(1 px, 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.nextClick(newOffset)
    }
  }

  val component = ReactComponentB[Props]("Pager")
    .stateless
    .backend(new Backend(_))
    .render((P, S, B) =>
      Style.pager('outer)(o => _('prev)(p => _('next)(n =>
      <.div(o,
        <.a(p, ^.onClick --> B.handlePrevious)("← Previous", Style.button(P.offset == 0)),
        <.a(n, ^.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))
  }
}