allow for null children so conditional rendering is possible

Author: baseten

package-lock.json

@@ -12,7 +12,7 @@ export default class Transform2d extends React.Component {
     translate: PropTypes.oneOfType([vec2GlMatrix, vec2Obj]),
     scale: PropTypes.oneOfType([vec2GlMatrix, vec2Obj, PropTypes.number]),
     rotate: PropTypes.number,
-    children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+    children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   };
 
   static defaultProps = {
@@ -29,6 +29,10 @@ export default class Transform2d extends React.Component {
     const { children, parentMatrixWorld, multiplicationOrder, translate, scale, rotate } = this.props;
     const { matrix, matrixWorld, vTranslation, vScale } = this;
 
+    if (!children) {
+      return null;
+    }
+
     const theta = typeof rotate === 'number' ? rotate : 0;
 
     mat2d.identity(matrix);
@@ -61,6 +65,10 @@ export default class Transform2d extends React.Component {
   }
 
   renderChild = child => {
+    if (!child) {
+      return null;
+    }
+
     const { multiplicationOrder } = this.props;
     const { matrixWorld } = this;
 

src/Transform2d.js

@@ -13,7 +13,7 @@ export default class Transform3d extends React.Component {
     scale: PropTypes.oneOfType([vec3GlMatrix, vec3Obj, PropTypes.number]),
     rotate: PropTypes.number,
     rotateAxis: PropTypes.oneOfType([vec3GlMatrix, vec3Obj]),
-    children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+    children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   };
 
   static defaultProps = {
@@ -36,6 +36,10 @@ export default class Transform3d extends React.Component {
     const { children, parentMatrixWorld, multiplicationOrder, translate, rotate, rotateAxis, scale } = this.props;
     const { matrix, matrixWorld, vTranslation, vScale, vRotationAxis } = this;
 
+    if (!children) {
+      return null;
+    }
+
     const theta = typeof rotate === 'number' ? rotate : 0;
 
     mat4.identity(matrix);
@@ -69,6 +73,10 @@ export default class Transform3d extends React.Component {
   }
 
   renderChild = child => {
+    if (!child) {
+      return null;
+    }
+
     const { multiplicationOrder } = this.props;
     const { matrixWorld } = this;
 

src/Transform3d.js

@@ -79,6 +79,23 @@ describe('<Transform2d />', () => {
       expect(instance.matrixWorld[4]).toBeCloseTo(0, 6);
       expect(instance.matrixWorld[5]).toBeCloseTo(10, 6);
     });
+
+    it('renders null when no children passed through', () => {
+      const wrapper = shallow(<Transform2d {...props} />);
+      expect(wrapper.get(0)).toBe(null);
+    });
+
+    it('renders null for a child which returns false', () => {
+      // we're mainly testing this doesn't break rendering :)
+      const wrapper = shallow(
+        <Transform2d {...props}>
+          <div />
+          {false && <div />}
+        </Transform2d>
+      );
+
+      expect(wrapper.length).toBe(1);
+    });
   });
 
   function runSharedTests() {

test/Transform2d.test.js

@@ -123,6 +123,23 @@ describe('<Transform3d />', () => {
       expect(instance.matrixWorld[14]).toBeCloseTo(20, 6);
       expect(instance.matrixWorld[15]).toBeCloseTo(1, 6);
     });
+
+    it('renders null when no children passed through', () => {
+      const wrapper = shallow(<Transform3d {...props} />);
+      expect(wrapper.get(0)).toBe(null);
+    });
+
+    it('renders null for a child which returns false', () => {
+      // we're mainly testing this doesn't break rendering :)
+      const wrapper = shallow(
+        <Transform3d {...props}>
+          <div />
+          {false && <div />}
+        </Transform3d>
+      );
+
+      expect(wrapper.length).toBe(1);
+    });
   });
 
   function runSharedTests() {