Skip to content

Instantly share code, notes, and snippets.

@ochrons
Created August 13, 2016 18:13
Show Gist options
  • Save ochrons/1e21dc7c2b83ec829742ed07e77fdd5d to your computer and use it in GitHub Desktop.
Save ochrons/1e21dc7c2b83ec829742ed07e77fdd5d to your computer and use it in GitHub Desktop.
import japgolly.scalajs.react._
import org.scalajs.dom
import org.scalajs.dom.raw.{HTMLElement, MouseEvent}
object Dropdown {
import japgolly.scalajs.react.vdom.all._
case class State(isOpen: Boolean = false)
case class Props(classes: String, content: ReactNode)
case class Backend($: BackendScope[Props, State]) {
def render(props: Props, state: State, children: PropsChildren) = {
div(cls := s"ui dropdown ${props.classes} ${if(state.isOpen) "active visible" else ""}", onClick ==> { (e: ReactEventH) => dropdownClicked(e, state.isOpen) })(
props.content,
div(cls := "menu", if(state.isOpen) display.block else display.none)(children)
)
}
def dropdownClicked(e: ReactEventH, isOpen: Boolean): Callback = {
if (!isOpen) {
Callback {
dom.document.addEventListener("click", closeDropdown _)
} >> $.modState(s => s.copy(isOpen = true))
} else {
Callback.empty
}
}
def closeDropdown(e: MouseEvent): Unit = {
if($.accessDirect.state.isOpen && !$.getDOMNode().asInstanceOf[HTMLElement].contains(e.target.asInstanceOf[HTMLElement])) {
dom.document.removeEventListener("click", closeDropdown _)
$.modState(s => s.copy(isOpen = false)).runNow()
}
}
}
val component = ReactComponentB[Props]("FiddleEditor")
.initialState_P(props => State())
.renderBackend[Backend]
.build
def apply(classes: String, content: ReactNode)(children: ReactNode*) = component(Props(classes, content), children: _*)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment