Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support method for Function as Child Component Pattern #235

Conversation

subroh0508
Copy link
Contributor

@subroh0508 subroh0508 commented Apr 19, 2020

relates #130

Several functions have been added to support the Function as Child Component Pattern.

For example, by JSX

const ParentComponent = (props) => {
  return (
    <div>
      { props.parentText }
      { props.children("Child") }
    </div>
  )
}

const ChildComponent = (props) => {
  return (
    <div>
      { props.childText }
    </div>
  )
}

const App = () => (
  <ParentComponent parentText="Parent">
    { (text) => (<ChildComponent childText={ text }>) }
  </ParentComponent>
)

/* [Result]
 * <div>
 *   Parent
 *   <div>Child</div>
 *  </div>
 */

On this Pull Request, for example

external interface ParentProps : RProps {
    var parentText: String
}

external interface ChildProps : RProps {
    var childText: String
}

// Functional Component
val FunctionalParentComponent = functionalComponent<ParentProps> { props ->
    div {
        +props.parentText
        props.children("Child")
    }
}

val FunctionalChildComponent = functionalComponent<ChildProps> { props ->
    div {
        +props.childText
    }
}

fun RBuilder.app() = childFunction(FunctionalParentComponent, {
    attrs.parentText = "Parent"
}, { text: String ->
    child(FunctionalChildComponent) { attrs.childText = text }
})

// Class Component
class ParentComponent : RComponent<ParentProps, RState>() {
    override fun RBuilder.render() {
        div {
            +props.parentText
            props.children("Child")
        }
    }
}

class ChildComponent : RComponent<ChildProps, RState>() {
    override fun RBuilder.render() {
        div {
            +props.childText
        }
    }
}


fun RBuilder.app() = childFunction(ParentComponent::class, {
    attrs.parentText = "Parent"
}, { text: String ->
    child(ChildComponent::class) { attrs.childText = text }
})

@Leonya Leonya requested a review from Skolotsky April 19, 2020 15:42
@Leonya Leonya merged commit 4ab5ab2 into JetBrains:master Apr 20, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants