-
Notifications
You must be signed in to change notification settings - Fork 0
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 ComponentMapper to allow plugging in custom compoment implementations #119
base: refactor/StreamlitApp
Are you sure you want to change the base?
Conversation
* limitations under the License. | ||
*/ | ||
|
||
type ElementType = |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this is copied from the .proto file since I couldn't figure out how to import it
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
import {Element as ElementProto } from 'path/to/proto'
type ElementType = Exclude<ElementProto["type"], undefined>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nice!
toast: MappingNotYetDefined | ||
vegaLiteChart: MappingNotYetDefined | ||
video: MappingNotYetDefined | ||
heading: (props: { value: string }) => React.ReactElement |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this is an example of how to type the plumbed properties
switch (node.element.type) { | ||
case "heading": | ||
return componentFunc({ | ||
value: node.element.heading?.body, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
here's the transform from protobuf element to the properties to pass to the custom "heading" component
@@ -1241,7 +1241,17 @@ export class Dashboard extends Component { | |||
<div className="col-md-8 grid-margin stretch-card"> | |||
<div className="card"> | |||
<div className="card-body"> | |||
<StreamlitView /> | |||
<StreamlitView | |||
componentMapper={{ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
example of using the componentMapper to modify how "heading" gets rendered
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You should make it red or something to prove that it's really doing something :)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I made it really big 🙃
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Found an typing tip, but looks great
* limitations under the License. | ||
*/ | ||
|
||
type ElementType = |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
import {Element as ElementProto } from 'path/to/proto'
type ElementType = Exclude<ElementProto["type"], undefined>
Describe your changes
Add a "ComponentMapper" which allows overriding the default component implementations with custom ones. This allows plugging in custom component implementations (e.g. core-ui, chakra, other component libraries, or custom rolled). There's a mapping from the protobuf element type e.g.
heading
to what component should be rendered. This mapping also transforms props from the protobuf. Those are not yet defined (I just implementedvalue
forheading
as an example how to do this).GitHub Issue Link (if applicable)
Testing Plan
Contribution License Agreement
By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.