Skip to content

Commit 41ed7d3

Browse files
shanejonasshanejonas
authored
Merge pull request #217 from open-rpc/fix/add-transition-props-upgrade-react
Fix/add transition props upgrade react
2 parents c2eb04e + 9ca42c1 commit 41ed7d3

File tree

12 files changed

+731
-742
lines changed

12 files changed

+731
-742
lines changed

‎package-lock.json‎

Lines changed: 628 additions & 708 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,15 @@
1111
"author": "",
1212
"license": "Apache-2.0",
1313
"dependencies": {
14-
"@material-ui/core": "^3.9.2",
15-
"@material-ui/icons": "^3.0.2",
14+
"@material-ui/core": "^4.7.1",
15+
"@material-ui/icons": "^4.5.1",
16+
"@material-ui/styles": "^4.7.1",
1617
"@open-rpc/examples": "^1.3.3",
1718
"hash-color-material": "^1.1.3",
1819
"json-schema": "^0.2.3",
1920
"lodash": "^4.17.15",
20-
"react": "^16.8.4",
21-
"react-dom": "^16.8.4",
21+
"react": "^16.12.0",
22+
"react-dom": "^16.12.0",
2223
"react-json-view": "^1.19.1",
2324
"react-markdown": "^4.0.6"
2425
},

‎src/Errors/Errors.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { ErrorObject } from "@open-rpc/meta-schema";
1313

1414
const styles = (theme: Theme) => ({
1515
code: {
16-
marginLeft: theme.spacing.unit,
16+
marginLeft: theme.spacing(2),
1717
},
1818
});
1919

‎src/ExamplePairing/ExamplePairing.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ class ExamplePairing extends Component<IProps, {}> {
3232
return null;
3333
}
3434
return (
35-
<Grid container spacing={24}>
35+
<Grid container spacing={10}>
3636
<Grid item xs={12}>
3737
<ReactMarkdown source={example.description} className={classes.description}/>
3838
</Grid>

‎src/ExamplePairings/ExamplePairings.test.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,18 +20,22 @@ it("renders empty with no example", () => {
2020

2121
it("renders empty with empty example", () => {
2222
const div = document.createElement("div");
23-
ReactDOM.render(<ExamplePairings examples={[]}/>, div);
23+
ReactDOM.render(<ExamplePairings examples={[]} />, div);
2424
expect(div.innerHTML).toBe("");
2525
ReactDOM.unmountComponentAtNode(div);
2626
});
2727

2828
it("renders examples", async () => {
2929
const div = document.createElement("div");
3030
const simpleMath = await refParser.dereference(examples.simpleMath) as OpenRPC;
31-
ReactDOM.render(<ExamplePairings examples={simpleMath.methods[0].examples as ExamplePairingObject[]} />, div);
31+
ReactDOM.render(
32+
<ExamplePairings
33+
method={simpleMath.methods[0]}
34+
examples={simpleMath.methods[0].examples as ExamplePairingObject[]
35+
} />
36+
, div);
3237
expect(div.innerHTML.includes("simpleMathAdditionTwo")).toBe(true);
3338
expect(div.innerHTML.includes("2")).toBe(true);
3439
expect(div.innerHTML.includes("4")).toBe(true);
35-
expect(div.innerHTML.includes("8")).toBe(true);
3640
ReactDOM.unmountComponentAtNode(div);
3741
});

‎src/ExpansionTable/ExpansionTable.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ const styles = (theme: Theme) => ({
1616
fontSize: theme.typography.pxToRem(15),
1717
},
1818
root: {
19-
marginBottom: theme.spacing.unit,
20-
marginTop: theme.spacing.unit * 3,
19+
marginBottom: theme.spacing(2),
20+
marginTop: theme.spacing(6),
2121
width: "100%",
2222
},
2323
secondaryHeading: {

‎src/Info/Info.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,14 @@ import { OpenRPC } from "@open-rpc/meta-schema";
88

99
const styles = (theme: Theme) => ({
1010
button: {
11-
margin: theme.spacing.unit,
11+
margin: theme.spacing(2),
1212
},
1313
chip: {
14-
margin: theme.spacing.unit,
14+
margin: theme.spacing(2),
1515
},
1616
description: {
1717
color: theme.palette.text.primary,
18-
padding: `${theme.spacing.unit}px 0 ${theme.spacing.unit}px 0`,
18+
padding: `${theme.spacing(2)}px 0 ${theme.spacing(2)}px 0`,
1919
},
2020
});
2121

‎src/Links/Links.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ const styles = (theme: Theme) => ({
2626
fontSize: theme.typography.pxToRem(15),
2727
},
2828
paramsMargin: {
29-
marginTop: theme.spacing.unit,
29+
marginTop: theme.spacing(2),
3030
},
3131
secondaryHeading: {
3232
alignSelf: "end",

‎src/Methods/Methods.test.tsx‎

Lines changed: 68 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -18,14 +18,14 @@ it("renders empty with no schema", () => {
1818

1919
it("renders empty with empty schema", () => {
2020
const div = document.createElement("div");
21-
ReactDOM.render(<Methods schema={{} as any}/>, div);
21+
ReactDOM.render(<Methods schema={{} as any} />, div);
2222
expect(div.innerHTML).toBe("");
2323
ReactDOM.unmountComponentAtNode(div);
2424
});
2525

2626
it("renders empty with empty schema methods", () => {
2727
const div = document.createElement("div");
28-
ReactDOM.render(<Methods schema={{ methods: [] } as any}/>, div);
28+
ReactDOM.render(<Methods schema={{ methods: [] } as any} />, div);
2929
expect(div.innerHTML).toBe("");
3030
ReactDOM.unmountComponentAtNode(div);
3131
});
@@ -39,11 +39,68 @@ it("renders schema methods name", () => {
3939
},
4040
],
4141
};
42-
ReactDOM.render(<Methods schema={schema as any}/>, div);
42+
ReactDOM.render(<Methods schema={schema as any} disableTransitionProps={true} />, div);
4343
expect(div.innerHTML.includes("get_pet")).toBe(true);
4444
ReactDOM.unmountComponentAtNode(div);
4545
});
4646

47+
it("doesnt render collapsed contents", () => {
48+
const div = document.createElement("div");
49+
const schema = {
50+
methods: [
51+
{
52+
params: [{
53+
name: "foobarz",
54+
}],
55+
},
56+
],
57+
};
58+
ReactDOM.render(<Methods schema={schema as any} />, div);
59+
expect(div.innerHTML.includes("foobarz")).toBe(false);
60+
ReactDOM.unmountComponentAtNode(div);
61+
});
62+
63+
it("renders collapsed contents with defaultExpanded from uiSchema", () => {
64+
const div = document.createElement("div");
65+
const schema = {
66+
methods: [
67+
{
68+
params: [{
69+
name: "foobarz",
70+
}],
71+
},
72+
],
73+
};
74+
const uiSchema = {
75+
links: {
76+
},
77+
methods: {
78+
"ui:defaultExpanded": true,
79+
},
80+
params: {
81+
},
82+
};
83+
ReactDOM.render(<Methods uiSchema={uiSchema} schema={schema as any} disableTransitionProps={true} />, div);
84+
expect(div.innerHTML.includes("aria-expanded=\"true\"")).toBe(true);
85+
ReactDOM.unmountComponentAtNode(div);
86+
});
87+
88+
it("renders collapsed contents with disableTransitionProps", () => {
89+
const div = document.createElement("div");
90+
const schema = {
91+
methods: [
92+
{
93+
params: [{
94+
name: "foobarz",
95+
}],
96+
},
97+
],
98+
};
99+
ReactDOM.render(<Methods schema={schema as any} disableTransitionProps={true} />, div);
100+
expect(div.innerHTML.includes("foobarz")).toBe(true);
101+
ReactDOM.unmountComponentAtNode(div);
102+
});
103+
47104
it("renders schema plugin", () => {
48105
const div = document.createElement("div");
49106
const schema = {
@@ -61,7 +118,9 @@ it("renders schema plugin", () => {
61118
);
62119
};
63120

64-
ReactDOM.render(<Methods schema={schema as any} methodPlugins={[TestComponent]}/>, div);
121+
ReactDOM.render(
122+
<Methods schema={schema as any} methodPlugins={[TestComponent]} disableTransitionProps={true} />
123+
, div);
65124
expect(div.innerHTML.includes("get_pet")).toBe(true);
66125
expect(div.innerHTML.includes("Plugin Test")).toBe(true);
67126
ReactDOM.unmountComponentAtNode(div);
@@ -79,7 +138,7 @@ it("renders schema methods summary", () => {
79138
},
80139
],
81140
};
82-
ReactDOM.render(<Methods schema={schema as any}/>, div);
141+
ReactDOM.render(<Methods schema={schema as any} disableTransitionProps={true} />, div);
83142
expect(div.innerHTML.includes("a short summary")).toBe(true);
84143
ReactDOM.unmountComponentAtNode(div);
85144
});
@@ -93,7 +152,7 @@ it("renders schema methods description", () => {
93152
},
94153
],
95154
} as OpenRPC;
96-
ReactDOM.render(<Methods schema={schema}/>, div);
155+
ReactDOM.render(<Methods schema={schema} disableTransitionProps={true} />, div);
97156
expect(div.innerHTML.includes("verbose get_pet description")).toBe(true);
98157
ReactDOM.unmountComponentAtNode(div);
99158
});
@@ -109,7 +168,7 @@ it("renders schema methods params", () => {
109168
},
110169
],
111170
};
112-
ReactDOM.render(<Methods schema={schema as any}/>, div);
171+
ReactDOM.render(<Methods schema={schema as any} disableTransitionProps={true} />, div);
113172
expect(div.innerHTML.includes("foobarz")).toBe(true);
114173
ReactDOM.unmountComponentAtNode(div);
115174
});
@@ -141,7 +200,7 @@ it("renders schema methods result", () => {
141200
},
142201
],
143202
};
144-
ReactDOM.render(<Methods schema={schema as any}/>, div);
203+
ReactDOM.render(<Methods schema={schema as any} disableTransitionProps={true} />, div);
145204
expect(div.innerHTML.includes("name")).toBe(true);
146205
expect(div.innerHTML.includes("tag")).toBe(true);
147206
expect(div.innerHTML.includes("id")).toBe(true);
@@ -213,7 +272,7 @@ it("renders schema methods tags", () => {
213272
},
214273
],
215274
};
216-
ReactDOM.render(<Methods schema={schema as any}/>, div);
275+
ReactDOM.render(<Methods schema={schema as any} disableTransitionProps={true} />, div);
217276
expect(div.innerHTML.includes("tag3")).toBe(true);
218277
expect(div.innerHTML.includes("tag4")).toBe(true);
219278
expect(div.innerHTML.includes("salad")).toBe(true);

‎src/Methods/Methods.tsx‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,8 @@ const styles = (theme: Theme) => ({
3131
fontSize: theme.typography.pxToRem(15),
3232
},
3333
root: {
34-
marginBottom: theme.spacing.unit,
35-
marginTop: theme.spacing.unit * 3,
34+
marginBottom: theme.spacing(2),
35+
marginTop: theme.spacing(3),
3636
width: "100%",
3737
},
3838
secondaryHeading: {
@@ -50,11 +50,12 @@ interface IProps extends WithStyles<typeof styles> {
5050
uiSchema?: any;
5151
reactJsonOptions?: object;
5252
methodPlugins?: Array<React.FC<IMethodPluginProps>>;
53+
disableTransitionProps?: boolean;
5354
}
5455

5556
class Methods extends Component<IProps> {
5657
public render() {
57-
const { schema, classes, uiSchema } = this.props;
58+
const { schema, classes, uiSchema, disableTransitionProps } = this.props;
5859
if (!schema) {
5960
return null;
6061
}
@@ -65,7 +66,11 @@ class Methods extends Component<IProps> {
6566
<div className={classes.root}>
6667
<Typography variant="h3" gutterBottom>Methods</Typography>
6768
{schema.methods.map((method, i) => (
68-
<ExpansionPanel key={i + method.name} defaultExpanded={uiSchema && uiSchema.methods["ui:defaultExpanded"]}>
69+
<ExpansionPanel
70+
key={i + method.name}
71+
TransitionProps={{unmountOnExit: disableTransitionProps ? false : true}}
72+
defaultExpanded={uiSchema && uiSchema.methods["ui:defaultExpanded"]}
73+
>
6974
<ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
7075
<Typography key={method.name} className={classes.heading}>{method.name}</Typography>
7176
<Typography key={method.summary} className={classes.secondaryHeading}>{method.summary}</Typography>
@@ -78,7 +83,7 @@ class Methods extends Component<IProps> {
7883
}
7984
{method.description &&
8085
<ExpansionPanelDetails key="description">
81-
<ReactMarkdown source={method.description} className={classes.description}/>
86+
<ReactMarkdown source={method.description} className={classes.description} />
8287
</ExpansionPanelDetails>
8388
}
8489
{method.params && method.params.length > 0 &&

0 commit comments

Comments
 (0)