Add custom prop type validator childrenOfTypesOnly

Author: Josh Habdas

src/collections/Table/Table.js

@@ -1,23 +1,13 @@
 import _ from 'lodash';
 import React, {Children, Component, PropTypes} from 'react';
 import classNames from 'classnames';
-import TableColumn from './TableColumn';
+import {childrenOfTypesOnly} from '../../utils/customPropTypes';
 import META from 'src/utils/Meta';
 
 export default class Table extends Component {
   static propTypes = {
     basic: PropTypes.bool,
-    children: (props, propName, componentName) => {
-      let isValid = true;
-      Children.forEach(props.children, (child) => {
-        if (child.type !== TableColumn) {
-          isValid = false;
-        }
-      });
-      if (!isValid) {
-        return new Error('`Table` must only have `TableColumn` children.');
-      }
-    },
+    children: childrenOfTypesOnly(['TableColumn']),
     className: PropTypes.string,
     data: PropTypes.array,
   };

src/elements/Segment/Segments.js

@@ -1,10 +1,11 @@
 import React, {Component, PropTypes} from 'react';
 import classNames from 'classnames';
 import META from 'src/utils/Meta';
+import {childrenOfTypesOnly} from '../../utils/customPropTypes';
 
 export default class Segments extends Component {
   static propTypes = {
-    children: PropTypes.node,
+    children: childrenOfTypesOnly(['Segment', 'Segments']),
     className: PropTypes.string,
   };
 

src/utils/customPropTypes.js

@@ -1,6 +1,31 @@
+import {Children} from 'react';
 import _ from 'lodash';
 
 const customPropTypes = {
+  /*
+   * Ensures children are of a certain type
+   * Similar to `oneOfType` built-in validator
+   * @param {Array<string>} allowedTypes Collection of allowed types
+   * @returns {Array} containing children of the specified type
+   */
+  childrenOfTypesOnly: (allowedTypes) => {
+    return (props, propName, componentName) => {
+      const {children} = props;
+      const disallowed = Children.map(children, child => {
+        return _.includes(allowedTypes, _.get(child, 'type._meta.name')) ? null : child;
+      });
+      if (disallowed && disallowed.length !== 0) {
+        throw new Error(
+          `\`${componentName}\` should only have children of type \`${allowedTypes}\`.`);
+      }
+    };
+  },
+  /*
+   * Verifies exclusivity of a given prop type
+   * @param {string} exclusives property used in exclusivity check
+   * @throws {Error} if props not mutually exclusive
+   * @returns no-op
+   */
   mutuallyExclusive: exclusives => {
     return (props, propName, componentName) => {
       _.forEach(exclusives, exclusiveProp => {

test/specs/elements/Segment/Segments-test.js

@@ -31,8 +31,4 @@ describe('Segments', () => {
       component.querySelectorAll('.sd-segment').length
     ).to.equal(3);
   });
-
-  it('only allows children of type Segment', () => {
-
-  });
 });