Merge pull request #908 from coralproject/hide-empty-categories

Hide empty categories

client/coral-framework/components/IfSlotIsEmpty.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {Children} from 'react';
 import {connect} from 'react-redux';
 import PropTypes from 'prop-types';
 import omit from 'lodash/omit';
@@ -28,18 +28,13 @@ class IfSlotIsEmpty extends React.Component {
   }
 
   render() {
-    const {className, component: Component = 'div', children} = this.props;
-    return (
-      <Component className={className}>
-        {this.isSlotEmpty() ? children : null}
-      </Component>
-    );
+    const {children} = this.props;
+    return this.isSlotEmpty() ? Children.only(children) : null;
   }
 }
 
 IfSlotIsEmpty.propTypes = {
   slot: PropTypes.string,
-  className: PropTypes.string,
 };
 
 const mapStateToProps = (state) => ({

client/coral-framework/components/IfSlotIsNotEmpty.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {Children} from 'react';
 import {connect} from 'react-redux';
 import PropTypes from 'prop-types';
 import omit from 'lodash/omit';
@@ -28,18 +28,13 @@ class IfSlotIsNotEmpty extends React.Component {
   }
 
   render() {
-    const {className, component: Component = 'div', children} = this.props;
-    return (
-      <Component className={className}>
-        {this.isSlotEmpty() ? null : children}
-      </Component>
-    );
+    const {children} = this.props;
+    return this.isSlotEmpty() ? null : Children.only(children);
   }
 }
 
 IfSlotIsNotEmpty.propTypes = {
   slot: PropTypes.string,
-  className: PropTypes.string,
 };
 
 const mapStateToProps = (state) => ({

plugins/talk-plugin-viewing-options/client/components/Category.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import styles from './Category.css';
-import {Slot, IfSlotIsNotEmpty} from 'plugin-api/beta/client/components';
+import {Slot} from 'plugin-api/beta/client/components';
 
 const childFactory = (child) => <li className={styles.listItem} key={child.key}>{child}</li>;
 
 const ViewingOptions = ({slot, title, data, asset, root}) => {
   return (
-    <IfSlotIsNotEmpty slot={slot} className={styles.root}>
+    <div className={styles.root}>
       <div className={styles.title}>{title}</div>
       <Slot
         fill={slot}
@@ -16,7 +16,7 @@ const ViewingOptions = ({slot, title, data, asset, root}) => {
         data={data}
         queryData={{asset, root}}
       />
-    </IfSlotIsNotEmpty>
+    </div>
   );
 };
 

plugins/talk-plugin-viewing-options/client/components/Menu.js

@@ -2,6 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import styles from './Menu.css';
 import {capitalize} from 'plugin-api/beta/client/utils';
+import {IfSlotIsNotEmpty} from 'plugin-api/beta/client/components';
 import Category from './Category';
 import {t} from 'plugin-api/beta/client/services';
 
@@ -16,11 +17,12 @@ class Menu extends React.Component {
       <div className={cn([styles.menu, 'talk-plugin-viewing-options-menu'])}>
         {
           Object.keys(this.categories).map((category) =>
-            <Category
-              key={category}
-              slot={`viewingOptions${capitalize(category)}`}
-              title={this.categories[category]}
-            />
+            <IfSlotIsNotEmpty slot={`viewingOptions${capitalize(category)}`} key={category}>
+              <Category
+                slot={`viewingOptions${capitalize(category)}`}
+                title={this.categories[category]}
+              />
+            </IfSlotIsNotEmpty>
           )
         }
       </div>