Skip to content

Commit adf03e4

Browse files
shockeyshockey
authored
Merge pull request #4060 from shockey/master
Refactor `specPath` to Immutable.js data structures to avoid waste renders
2 parents ccc3b10 + 9bad35e commit adf03e4

File tree

16 files changed

+60
-39
lines changed

16 files changed

+60
-39
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@
6767
"react-height": "^2.0.0",
6868
"react-hot-loader": "1.3.1",
6969
"react-immutable-proptypes": "2.1.0",
70+
"react-immutable-pure-component": "^1.1.1",
7071
"react-markdown": "^2.5.0",
7172
"react-motion": "^0.5.2",
7273
"react-object-inspector": "0.2.1",

‎src/core/components/array-model.jsx‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { Component } from "react"
22
import PropTypes from "prop-types"
3+
import ImPropTypes from "react-immutable-proptypes"
34

45
const propStyle = { color: "#999", fontStyle: "italic" }
56

@@ -12,7 +13,7 @@ export default class ArrayModel extends Component {
1213
name: PropTypes.string,
1314
required: PropTypes.bool,
1415
expandDepth: PropTypes.number,
15-
specPath: PropTypes.array.isRequired,
16+
specPath: ImPropTypes.list.isRequired,
1617
depth: PropTypes.number
1718
}
1819

@@ -48,7 +49,17 @@ export default class ArrayModel extends Component {
4849
!description ? null :
4950
<Markdown source={ description } />
5051
}
51-
<span><Model { ...this.props } getConfigs={ getConfigs } specPath={[...specPath, "items"]} name={null} schema={ items } required={ false } depth={ depth + 1 } /></span>
52+
<span>
53+
<Model
54+
{ ...this.props }
55+
getConfigs={ getConfigs }
56+
specPath={specPath.push("items")}
57+
name={null}
58+
schema={ items }
59+
required={ false }
60+
depth={ depth + 1 }
61+
/>
62+
</span>
5263
]
5364
</ModelCollapse>
5465
</span>

‎src/core/components/model-example.jsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from "react"
22
import PropTypes from "prop-types"
3+
import ImPropTypes from "react-immutable-proptypes"
34

45
export default class ModelExample extends React.Component {
56
static propTypes = {
@@ -9,7 +10,7 @@ export default class ModelExample extends React.Component {
910
example: PropTypes.any.isRequired,
1011
isExecute: PropTypes.bool,
1112
getConfigs: PropTypes.func.isRequired,
12-
specPath: PropTypes.array.isRequired,
13+
specPath: ImPropTypes.list.isRequired,
1314
}
1415

1516
constructor(props, context) {

‎src/core/components/model.jsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import React, { PureComponent } from "react"
1+
import React from "react"
2+
import ImmutablePureComponent from "react-immutable-pure-component"
23
import ImPropTypes from "react-immutable-proptypes"
34
import PropTypes from "prop-types"
45

5-
export default class Model extends PureComponent {
6+
export default class Model extends ImmutablePureComponent {
67
static propTypes = {
78
schema: ImPropTypes.orderedMap.isRequired,
89
getComponent: PropTypes.func.isRequired,
@@ -13,7 +14,7 @@ export default class Model extends PureComponent {
1314
required: PropTypes.bool,
1415
expandDepth: PropTypes.number,
1516
depth: PropTypes.number,
16-
specPath: PropTypes.array.isRequired,
17+
specPath: ImPropTypes.list.isRequired,
1718
}
1819

1920
getModelName =( ref )=> {

‎src/core/components/models.jsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { Component } from "react"
2+
import Im from "immutable"
23
import PropTypes from "prop-types"
34

45
export default class Models extends Component {
@@ -20,7 +21,7 @@ export default class Models extends Component {
2021
const specPathBase = specSelectors.isOAS3() ? ["components", "schemas"] : ["definitions"]
2122

2223
const ModelWrapper = getComponent("ModelWrapper")
23-
const Collapse = getComponent("Collapse")
24+
const Collapse = getComponent("Collapse")
2425

2526
return <section className={ showModels ? "models is-open" : "models"}>
2627
<h4 onClick={() => layoutActions.show("models", !showModels)}>
@@ -37,7 +38,7 @@ export default class Models extends Component {
3738
<ModelWrapper name={ name }
3839
expandDepth={ defaultModelsExpandDepth }
3940
schema={ model }
40-
specPath={[...specPathBase, name]}
41+
specPath={Im.List([...specPathBase, name])}
4142
getComponent={ getComponent }
4243
specSelectors={ specSelectors }
4344
getConfigs = {getConfigs}

‎src/core/components/object-model.jsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { Component, } from "react"
22
import PropTypes from "prop-types"
33
import { List } from "immutable"
4+
import ImPropTypes from "react-immutable-proptypes"
45

56
const braceOpen = "{"
67
const braceClose = "}"
@@ -17,7 +18,7 @@ export default class ObjectModel extends Component {
1718
isRef: PropTypes.bool,
1819
expandDepth: PropTypes.number,
1920
depth: PropTypes.number,
20-
specPath: PropTypes.object.isRequired
21+
specPath: ImPropTypes.list.isRequired
2122
}
2223

2324
render(){
@@ -102,7 +103,7 @@ export default class ObjectModel extends Component {
102103
<Model key={ `object-${name}-${key}_${value}` } { ...otherProps }
103104
required={ isRequired }
104105
getComponent={ getComponent }
105-
specPath={[...specPath, "properties", key]}
106+
specPath={specPath.push("properties", key)}
106107
getConfigs={ getConfigs }
107108
schema={ value }
108109
depth={ depth + 1 } />
@@ -141,7 +142,7 @@ export default class ObjectModel extends Component {
141142
<td>
142143
<Model { ...otherProps } required={ false }
143144
getComponent={ getComponent }
144-
specPath={[...specPath, "additionalProperties"]}
145+
specPath={specPath.push("additionalProperties")}
145146
getConfigs={ getConfigs }
146147
schema={ additionalProperties }
147148
depth={ depth + 1 } />
@@ -156,7 +157,7 @@ export default class ObjectModel extends Component {
156157
{anyOf.map((schema, k) => {
157158
return <div key={k}><Model { ...otherProps } required={ false }
158159
getComponent={ getComponent }
159-
specPath={[...specPath, "anyOf", k]}
160+
specPath={specPath.push("anyOf", k)}
160161
getConfigs={ getConfigs }
161162
schema={ schema }
162163
depth={ depth + 1 } /></div>
@@ -172,7 +173,7 @@ export default class ObjectModel extends Component {
172173
{oneOf.map((schema, k) => {
173174
return <div key={k}><Model { ...otherProps } required={ false }
174175
getComponent={ getComponent }
175-
specPath={[...specPath, "oneOf", k]}
176+
specPath={specPath.push("oneOf", k)}
176177
getConfigs={ getConfigs }
177178
schema={ schema }
178179
depth={ depth + 1 } /></div>
@@ -189,7 +190,7 @@ export default class ObjectModel extends Component {
189190
<Model { ...otherProps }
190191
required={ false }
191192
getComponent={ getComponent }
192-
specPath={[...specPath, "not"]}
193+
specPath={specPath.push("not")}
193194
getConfigs={ getConfigs }
194195
schema={ not }
195196
depth={ depth + 1 } />

‎src/core/components/operation.jsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,12 @@ import React, { PureComponent } from "react"
22
import PropTypes from "prop-types"
33
import { getList } from "core/utils"
44
import { getExtensions, sanitizeUrl } from "core/utils"
5-
import { Iterable } from "immutable"
5+
import { Iterable, List } from "immutable"
6+
import ImPropTypes from "react-immutable-proptypes"
67

78
export default class Operation extends PureComponent {
89
static propTypes = {
9-
specPath: PropTypes.array.isRequired,
10+
specPath: ImPropTypes.list.isRequired,
1011
operation: PropTypes.instanceOf(Iterable).isRequired,
1112
response: PropTypes.instanceOf(Iterable),
1213
request: PropTypes.instanceOf(Iterable),
@@ -33,7 +34,7 @@ export default class Operation extends PureComponent {
3334
operation: null,
3435
response: null,
3536
request: null,
36-
specPath: []
37+
specPath: List()
3738
}
3839

3940
render() {
@@ -174,7 +175,7 @@ export default class Operation extends PureComponent {
174175

175176
<Parameters
176177
parameters={parameters}
177-
specPath={[...specPath, "parameters"]}
178+
specPath={specPath.push("parameters")}
178179
operation={operation}
179180
onChangeKey={onChangeKey}
180181
onTryoutClick = { onTryoutClick }
@@ -248,7 +249,7 @@ export default class Operation extends PureComponent {
248249
specActions={ specActions }
249250
produces={ produces }
250251
producesValue={ operation.get("produces_value") }
251-
specPath={[...specPath, "responses"]}
252+
specPath={specPath.push("responses")}
252253
path={ path }
253254
method={ method }
254255
displayRequestDuration={ displayRequestDuration }

‎src/core/components/operations.jsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from "react"
22
import PropTypes from "prop-types"
3+
import Im from "immutable"
34
import { createDeepLinkPath, sanitizeUrl } from "core/utils"
45

56
const SWAGGER2_OPERATION_METHODS = [
@@ -119,7 +120,7 @@ export default class Operations extends React.Component {
119120
operations.map( op => {
120121
const path = op.get("path")
121122
const method = op.get("method")
122-
const specPath = ["paths", path, method]
123+
const specPath = Im.List(["paths", path, method])
123124

124125

125126
// FIXME: (someday) this logic should probably be in a selector,

‎src/core/components/parameter-row.jsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { Component } from "react"
22
import { Map } from "immutable"
33
import PropTypes from "prop-types"
4+
import ImPropTypes from "react-immutable-proptypes"
45
import win from "core/window"
56
import { getExtensions } from "core/utils"
67

@@ -15,7 +16,7 @@ export default class ParameterRow extends Component {
1516
specSelectors: PropTypes.object.isRequired,
1617
pathMethod: PropTypes.array.isRequired,
1718
getConfigs: PropTypes.func.isRequired,
18-
specPath: PropTypes.array.isRequired,
19+
specPath: ImPropTypes.list.isRequired
1920
}
2021

2122
constructor(props, context) {
@@ -139,7 +140,7 @@ export default class ParameterRow extends Component {
139140

140141
{
141142
bodyParam && schema ? <ModelExample getComponent={ getComponent }
142-
specPath={[...specPath, "schema"]}
143+
specPath={specPath.push("schema")}
143144
getConfigs={ getConfigs }
144145
isExecute={ isExecute }
145146
specSelectors={ specSelectors }

‎src/core/components/parameters.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export default class Parameters extends Component {
2121
onChangeKey: PropTypes.array,
2222
pathMethod: PropTypes.array.isRequired,
2323
getConfigs: PropTypes.func.isRequired,
24-
specPath: PropTypes.array.isRequired,
24+
specPath: ImPropTypes.list.isRequired,
2525
}
2626

2727

@@ -98,7 +98,7 @@ export default class Parameters extends Component {
9898
eachMap(parameters, (parameter, i) => (
9999
<ParameterRow
100100
fn={ fn }
101-
specPath={[...specPath, i]}
101+
specPath={specPath.push(i.toString())}
102102
getComponent={ getComponent }
103103
getConfigs={ getConfigs }
104104
param={ parameter }

0 commit comments

Comments
 (0)