Skip to content

Commit 01d6148

Browse files
committed
fix(): Adds a helpful displayName to the HOC wrapped component.
Adds a helpful displayName to the HOC wrapped component.
1 parent 554208f commit 01d6148

File tree

2 files changed

+22
-9
lines changed

2 files changed

+22
-9
lines changed

src/ComponentQueries.js

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { Component, PropTypes } from 'react';
22
import invariant from 'invariant';
33
import sizeMe from 'react-sizeme';
44
import mergeWith from './utils/mergeWith';
5+
import getDisplayName from './utils/getDisplayName';
56

67
const defaultSizeMeConfig = {
78
monitorHeight: false,
@@ -57,6 +58,15 @@ function componentQueries(...params) {
5758

5859
return function WrapComponent(WrappedComponent) {
5960
class ComponentWithComponentQueries extends Component {
61+
static displayName = `ComponentQueries(${getDisplayName(WrappedComponent)})`;
62+
63+
static propTypes = {
64+
size: PropTypes.shape({
65+
width: PropTypes.number,
66+
height: PropTypes.number,
67+
}).isRequired,
68+
};
69+
6070
state = {
6171
queryResult: {},
6272
}
@@ -97,26 +107,23 @@ function componentQueries(...params) {
97107
}
98108

99109
render() {
100-
const { size, ...otherProps } = this.props; // eslint-disable-line no-unused-vars
110+
const {
111+
size, // eslint-disable-line no-unused-vars
112+
...otherProps,
113+
} = this.props;
101114

102115
const allProps = mergeWith(
103116
this.state.queryResult,
104117
otherProps,
105-
mergeWithCustomizer);
118+
mergeWithCustomizer
119+
);
106120

107121
return (
108122
<WrappedComponent {...allProps} />
109123
);
110124
}
111125
}
112126

113-
ComponentWithComponentQueries.propTypes = {
114-
size: PropTypes.shape({
115-
width: PropTypes.number,
116-
height: PropTypes.number,
117-
}).isRequired,
118-
};
119-
120127
return sizeMe(sizeMeConfig)(ComponentWithComponentQueries);
121128
};
122129
}

src/utils/getDisplayName.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
// :: Component => String
2+
function getDisplayName(WrappedComponent) {
3+
return WrappedComponent.displayName || WrappedComponent.name || 'Component';
4+
}
5+
6+
export default getDisplayName;

0 commit comments

Comments
 (0)