Skip to content

Commit 023147e

Browse files
committed
allow for null children so conditional rendering is possible
1 parent 504f141 commit 023147e

File tree

5 files changed

+53
-3
lines changed

5 files changed

+53
-3
lines changed

package-lock.json

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

src/Transform2d.js

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default class Transform2d extends React.Component {
1212
translate: PropTypes.oneOfType([vec2GlMatrix, vec2Obj]),
1313
scale: PropTypes.oneOfType([vec2GlMatrix, vec2Obj, PropTypes.number]),
1414
rotate: PropTypes.number,
15-
children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
15+
children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
1616
};
1717

1818
static defaultProps = {
@@ -29,6 +29,10 @@ export default class Transform2d extends React.Component {
2929
const { children, parentMatrixWorld, multiplicationOrder, translate, scale, rotate } = this.props;
3030
const { matrix, matrixWorld, vTranslation, vScale } = this;
3131

32+
if (!children) {
33+
return null;
34+
}
35+
3236
const theta = typeof rotate === 'number' ? rotate : 0;
3337

3438
mat2d.identity(matrix);
@@ -61,6 +65,10 @@ export default class Transform2d extends React.Component {
6165
}
6266

6367
renderChild = child => {
68+
if (!child) {
69+
return null;
70+
}
71+
6472
const { multiplicationOrder } = this.props;
6573
const { matrixWorld } = this;
6674

src/Transform3d.js

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export default class Transform3d extends React.Component {
1313
scale: PropTypes.oneOfType([vec3GlMatrix, vec3Obj, PropTypes.number]),
1414
rotate: PropTypes.number,
1515
rotateAxis: PropTypes.oneOfType([vec3GlMatrix, vec3Obj]),
16-
children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
16+
children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
1717
};
1818

1919
static defaultProps = {
@@ -36,6 +36,10 @@ export default class Transform3d extends React.Component {
3636
const { children, parentMatrixWorld, multiplicationOrder, translate, rotate, rotateAxis, scale } = this.props;
3737
const { matrix, matrixWorld, vTranslation, vScale, vRotationAxis } = this;
3838

39+
if (!children) {
40+
return null;
41+
}
42+
3943
const theta = typeof rotate === 'number' ? rotate : 0;
4044

4145
mat4.identity(matrix);
@@ -69,6 +73,10 @@ export default class Transform3d extends React.Component {
6973
}
7074

7175
renderChild = child => {
76+
if (!child) {
77+
return null;
78+
}
79+
7280
const { multiplicationOrder } = this.props;
7381
const { matrixWorld } = this;
7482

test/Transform2d.test.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,23 @@ describe('<Transform2d />', () => {
7979
expect(instance.matrixWorld[4]).toBeCloseTo(0, 6);
8080
expect(instance.matrixWorld[5]).toBeCloseTo(10, 6);
8181
});
82+
83+
it('renders null when no children passed through', () => {
84+
const wrapper = shallow(<Transform2d {...props} />);
85+
expect(wrapper.get(0)).toBe(null);
86+
});
87+
88+
it('renders null for a child which returns false', () => {
89+
// we're mainly testing this doesn't break rendering :)
90+
const wrapper = shallow(
91+
<Transform2d {...props}>
92+
<div />
93+
{false && <div />}
94+
</Transform2d>
95+
);
96+
97+
expect(wrapper.length).toBe(1);
98+
});
8299
});
83100

84101
function runSharedTests() {

test/Transform3d.test.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,23 @@ describe('<Transform3d />', () => {
123123
expect(instance.matrixWorld[14]).toBeCloseTo(20, 6);
124124
expect(instance.matrixWorld[15]).toBeCloseTo(1, 6);
125125
});
126+
127+
it('renders null when no children passed through', () => {
128+
const wrapper = shallow(<Transform3d {...props} />);
129+
expect(wrapper.get(0)).toBe(null);
130+
});
131+
132+
it('renders null for a child which returns false', () => {
133+
// we're mainly testing this doesn't break rendering :)
134+
const wrapper = shallow(
135+
<Transform3d {...props}>
136+
<div />
137+
{false && <div />}
138+
</Transform3d>
139+
);
140+
141+
expect(wrapper.length).toBe(1);
142+
});
126143
});
127144

128145
function runSharedTests() {

0 commit comments

Comments
 (0)