Humpie

HoveringCard.kt

Feb 1st, 2020
239
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import com.ccfraser.muirwik.components.card.MCardProps
  2. import com.ccfraser.muirwik.components.card.mCard
  3. import delegates.ReactPropAndStateDelegates.stateDelegateOf
  4. import kotlinx.html.js.onMouseOutFunction
  5. import kotlinx.html.js.onMouseOverFunction
  6. import org.w3c.dom.events.Event
  7. import react.RBuilder
  8. import react.RComponent
  9. import react.RState
  10. import react.dom.div
  11. import styled.StyledHandler
  12.  
  13. interface HoveringCardProps : MCardProps {
  14.     var runOnCard: StyledHandler<MCardProps>?
  15. }
  16.  
  17. interface HoveringCardState : RState {
  18.     var raised: Boolean
  19. }
  20.  
  21. class HoveringCard(prps: HoveringCardProps) : RComponent<HoveringCardProps, HoveringCardState>(prps) {
  22.  
  23.     override fun HoveringCardState.init(prps: HoveringCardProps) {
  24.         raised = false
  25.     }
  26.     var raised by stateDelegateOf(HoveringCardState::raised)
  27.  
  28.     private val onMouseOver: (Event?) -> Unit = {
  29.         raised = true
  30.     }
  31.  
  32.     private val onMouseOut: (Event?) -> Unit = {
  33.         raised = false
  34.     }
  35.  
  36.     override fun RBuilder.render() {
  37.         div {
  38.             attrs {
  39.                 onMouseOverFunction = onMouseOver
  40.                 onMouseOutFunction = onMouseOut
  41.             }
  42.             mCard(raised = raised, handler = props.runOnCard)
  43.         }
  44.     }
  45. }
  46.  
  47. fun RBuilder.hoveringCard(handler: StyledHandler<MCardProps>? = null) =
  48.     child(HoveringCard::class) {
  49.         attrs.runOnCard = handler
  50.     }
RAW Paste Data