Skip to content

fix: handle recursive json schema #244

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.

Sign up for GitHub

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

Merged
merged 3 commits into from
Jan 16, 2020
Merged

fix: handle recursive json schema #244

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ca9ce9d
fix: handle recursive json schema
shanejonas Jan 15, 2020
cd0387d
fix: add color map for json schema types
shanejonas Jan 16, 2020
e2fb491
fix: true/false display
shanejonas Jan 16, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added open-rpc-docs-react-0.0.0-development.tgz
View file
Open in desktop
Binary file not shown.
41 changes: 30 additions & 11 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

41 changes: 1 addition & 40 deletions src/JSONSchema/JSONSchema.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import React, { Component } from "react";
import { Typography } from "@material-ui/core";
import _ from "lodash";
import JSONSchemaFields from "./fields/JSONSchemaFields";
import PrimitiveField from "./fields/JSONSchemaPrimitiveField";
import { JSONSchema4 } from "json-schema";

interface IProps {
Expand All @@ -12,44 +10,7 @@ interface IProps {
class JSONSchema extends Component<IProps> {
public render() {
const { schema } = this.props;
if (!schema) { return null; }
if (_.isEmpty(schema)) { return null; }
if (schema && !schema.properties && schema.oneOf) {
return (
<>
{schema.oneOf &&
<>
<Typography variant="body1">one of</Typography>
{schema.oneOf.map((item) => {
return (
<JSONSchema schema={item} />
);
})}
</>
}
</>
);
}
let arrayWithItems = schema && schema.type === "array" && (schema.items || schema.contains);
if (arrayWithItems) {
arrayWithItems = _.isArray(arrayWithItems) ? arrayWithItems : [arrayWithItems];
return (
<>
<Typography variant="body1">array of</Typography>
<JSONSchemaFields schema={schema} />
{arrayWithItems.map((item: JSONSchema4) => {
return (
<JSONSchema schema={item} />
);
})}
</>
);
}
if (schema && schema.properties) {
return <JSONSchemaFields schema={schema} />;
}

return <PrimitiveField schema={schema} />;
return <JSONSchemaFields schema={schema} />;
}
}

Expand Down
149 changes: 149 additions & 0 deletions src/JSONSchema/SchemaRenderer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,149 @@
import React from "react";
import { JSONSchema4 } from "json-schema";
import { TableRow, TableCell, Typography } from "@material-ui/core";
import JSONSchemaFields from "./fields/JSONSchemaFields";
import _ from "lodash";
import { grey, green, purple, yellow, blue } from "@material-ui/core/colors";

interface IProps {
schema: JSONSchema4;
required?: boolean;
name?: string;
}

const styles = {
cellWidth: {
width: "70px",
},
};

const SchemaRenderer: React.FC<IProps> = ({ schema, required, name }) => {
if (schema.anyOf) {
return (
<TableRow>
<TableCell colSpan={1} style={styles.cellWidth}>
{schema.title || name}
</TableCell>
<TableCell colSpan={1} style={styles.cellWidth}>
<Typography variant="body1" color="primary">any of</Typography>
</TableCell>
<TableCell colSpan={5}>
{schema.anyOf.map((p, i) => <JSONSchemaFields schema={p} key={i} />)}
</TableCell>
</TableRow>
);
}
if (schema.allOf) {
return (
<TableRow>
<TableCell colSpan={1} style={styles.cellWidth}>
{schema.title || name}
</TableCell>
<TableCell colSpan={1} style={styles.cellWidth}>
<Typography variant="body1" color="primary">all of</Typography>
</TableCell>
<TableCell colSpan={5}>
{schema.allOf.map((p, i) => <JSONSchemaFields schema={p} key={i} />)}
</TableCell>
</TableRow>
);
}
if (schema.oneOf) {
return (
<TableRow>
<TableCell colSpan={1} style={styles.cellWidth}>
{schema.title || name}
</TableCell>
<TableCell colSpan={1} style={styles.cellWidth}>
<Typography variant="body1" color="primary">one of</Typography>
</TableCell>
<TableCell colSpan={5}>
{schema.oneOf.map((p, i) => <JSONSchemaFields schema={p} key={i} />)}
</TableCell>
</TableRow>
);
}
if (schema.items instanceof Array) {
return (
<TableRow>
<TableCell colSpan={1} style={styles.cellWidth}>
{schema.title || name}
</TableCell>
<TableCell colSpan={1} style={styles.cellWidth}>
<Typography variant="body1" color="primary">array of</Typography>
</TableCell>
<TableCell colSpan={5}>
{schema.items.map((p, i) => <JSONSchemaFields schema={p} key={i} />)}
</TableCell>
</TableRow>
);
}
if (schema.items) {
return (
<TableRow>
<TableCell colSpan={1} style={styles.cellWidth}>
{schema.title || name}
</TableCell>
<TableCell colSpan={1} style={styles.cellWidth}>
<Typography variant="body1" color="primary">array of</Typography>
</TableCell>
<TableCell colSpan={5}>
<JSONSchemaFields schema={schema.items} />
</TableCell>
</TableRow>
);
}

if (schema.properties) {
return (
<TableRow>
<TableCell colSpan={1} style={styles.cellWidth}>
{schema.title || name}
</TableCell>
<TableCell colSpan={1} style={styles.cellWidth}>
<Typography variant="body1" color="primary">object</Typography>
</TableCell>
<TableCell colSpan={5}>
{schema.properties && Object.entries(schema.properties).map(([n, prop]: [string, JSONSchema4], i: number) => {
return (
<JSONSchemaFields
key={n}
schema={prop}
name={n}
hideHeader={i !== 0}
required={schema.required && schema.required.includes(n)}
/>
);
})}
</TableCell>
</TableRow>
);
}

const colorMap: {[k: string]: string} = {
any: grey[500],
array: blue[300],
boolean: blue[500],
integer: purple[800],
null: yellow[900],
number: purple[500],
string: green[500],
undefined: grey[500],
};
return (
<TableRow key={schema.title}>
<TableCell component="th" scope="row" style={styles.cellWidth}>
{schema.title || name}
</TableCell>
<TableCell style={{
...styles.cellWidth,
color: colorMap[schema.type as any],
}}>{schema.type}</TableCell>
<TableCell style={styles.cellWidth}>{schema.pattern}</TableCell>
<TableCell style={styles.cellWidth}>{required ? "true" : "false"}</TableCell>
<TableCell style={styles.cellWidth}>{schema.description}</TableCell>
</TableRow>
);
};

export default SchemaRenderer;
Loading