Open
Description
Based on discussion in #56 (comment). I might need some clarification because I'm not sure I understand everything. The following is my interpretation.
Definitions
Using the following function/component and types:
function CustomInput({inputUsageType, keyPath, depth, name, originalValue, dataType}) {
switch (dataType) {
case DataType.Boolean:
return <input type="checkbox" />
default:
return <input type="text" />
}
}
<JsonTree inputElement={CustomInput} />
type InputElementProps = {
inputUsageType: InputUsageType;
keyPath: string[];
depth: number;
name: string;
originalValue: unknown;
dataType: DataType;
};
Options
Use a render prop
type Props = {
inputElement: (InputElementProps) => React.Component;
};
function JsonValue({ inputElement }: Props) {
// ...
return (
<div style={styles.container}>
{inputElement({ inputUsageType, keyPath, depth, name, originalValue, dataType })}
</div>
)
}
Pass a component
type Props = {
inputElement: React.Component<InputElementProps>;
};
function JsonValue({ inputElement: InputElement }: Props) {
// ...
return (
<div style={styles.container}>
<InputElement {...{ inputUsageType, keyPath, depth, name, originalValue, dataType }} />
</div>
)
}