@file:JsModule("react-bootstrap")
@file:JsNonModule

import react.*

@JsName("Dropdown")
external val Dropdown: RClass<DropDownProps>

external interface DropDownProps : RProps {
    var bsClass: String?
    var componentClass: Any?
    var disabled: Boolean?
    var dropup: Boolean?
    var id: String
    var onClose: Function<*>?
    var onSelect: Any?
    var onToggle: ((isOpen: Boolean) -> Unit)?
    var open: Boolean?
    var pullRight: Boolean?
    var role: String?
}

@JsName("DropdownMenu")
external val DropdownMenu: RClass<DropdownMenuProps>

external interface DropdownMenuProps : RProps {
    var labelledBy: dynamic /* String | Number */
    var onClose: Function<*>?
    var onSelect: Any?
    var open: Boolean?
    var pullRight: Boolean?

}

@JsName("DropdownItem")
external val DropdownItem: RClass<DropDownItemProps>

external interface DropDownItemProps : RProps {
    var eventKey: String
    var href: String
}

class GroupList: RComponent<GroupListProps, RState>() {
    override fun RBuilder.render() {

        console.log("Dropdown",Dropdown)
        console.log("Dropdown menu is",DropdownMenu)
        console.log("Dropdown item",DropdownItem)
       
        Dropdown {
            DropdownMenu {
                props.groups.forEach {
                    DropdownItem {
                        attrs.eventKey = it.id
                        +it.description
                    }
                }
            }
        }
    }
}

DevTools failed to load SourceMap: Could not load content for <chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/include.preload.js.map>: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
GroupList.kt?2322:20 Dropdown {$$typeof: Symbol(react.forward_ref), displayName: "Dropdown", defaultProps: {…}, Toggle: {…}, render: ƒ, …}
GroupList.kt?2322:21 Dropdown menu undefined
GroupList.kt?2322:22 Dropdown item {$$typeof: Symbol(react.forward_ref), displayName: "DropdownItem", defaultProps: {…}, render: ƒ}
react.development.js?6008:315 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `GroupList`.
    in GroupList (created by App)
    in div (created by styled.div)
    in styled.div (created by App)
    in App

forwardRef

val LoginContext = createContext<LoginContextData>()

When accessing module declarations from UMD, they must be marked by both @JsModule and @JsNonModule

cloneElement

cloneElement<Button.Props>(el) {
    // nothing here
}

Cannot define property kotlinHashCodeValue$, object is not extensible

cloneElement

ReactElement

styled

child(Button::class.rClass, buttonProps) {
    attrs {
        onClick = this@ButtonGroup::buttonClicked
        active = index in state.activeButtons
     }
}

buttonProps

checked = state.active == true

onChange

val target = event.target as HTMLInputElement

setState {
    active = target.checked
}

react_devtools_backend.js:6 Warning: A component is changing an uncontrolled input of type checkbox to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: <https://fb.me/react-controlled-components>

useState

var

child()

class listMsg : RComponent<msgListProps, msgListState>() {
        override fun RBuilder.render() {
            props.msg.forEachIndexed { index, msg ->
                when(msg.type){
                    "log" -> itemLog //Dont work
                    else ->  li {
                        attrs.key = index.toString()
                        div(classes = "receivedMessages") {
                            span(classes = "filledInitials") {
                                +getInitials(msg.nickName)
                            }
                            span(classes = "chatMessage") {
                                +msg.msg
                            }
                        }
                    }
                }
            }
        }
}

val itemLog = functionalComponent<itemLogProps>{ props ->
            li(classes = "log") {
                p {
                    +props.msg
                }
            }
}

onSendMessageClicked()

val chatWindowComponent = functionalComponent<ChatMsgListProps>{ props ->
        val (mensajes,setMensajes) = useState(arrayOf<ReactElement>())

        div(classes = "chatWindow") {
                div {
                    button(classes = "sendMessageButton") {
                        +"Send Message"
                        attrs.type = ButtonType.button
                        attrs.onClickFunction = onSendMessageClicked()
                    }
                }
        }

        fun onSendMessageClicked(): (Event) -> Unit {
            return {
                //Code
            }
        }
    }

onSendMessageClicked()

setState

fun onSendMessageClicked(setMsg: RSetState<Array<ReactElement>>): (Event) -> Unit {
            return {
                //Something(setMsg)
            }
}

external interface DumbProps {
   var name: String
}

val DumbComp = functionalComponent<DumbProps> {
    div { +"Hi, I am ${it.name}" }
}

fun RBuilder.DumbComp(props: DumbProps,handler:RHandler<DumbProps>) = child(DumbComp,props,handler)

class RBuilder{
  . . .
  operator fun <P : RProps> FunctionalComponent<P>.invoke(
    props: P = jsObject(),
    handler: RBuilder.(P) -> Unit
  ) = child(this, props, handler)
  . . .
}

DumbComp {
   attrs.name = "Andy" 
}

fun main(args: Array<String>) {
    render(document.getElementById("root")) {
        child(App)
    }
}

val SomeContext = createContext(1)

val App = functionalComponent<RProps> {
    SomeContext.Provider(5) {
        typographyH1 {
            +useContext(SomeContext).toString() // Actually shows '1'
        }
    }
}

implementation(npm("react-router-dom", "4.3.1"))

implementation(npm("@jetbrains/kotlin-react-router-dom", "4.3.1-pre.91"))

sample

styledDiv

RBuilder

audio {
    attrs {
        src="sounds/time.mp3"
    }
}