diff --git a/client/coral-framework/components/IfSlotIsEmpty.js b/client/coral-framework/components/IfSlotIsEmpty.js index 557ee3b3d..72dc8c988 100644 --- a/client/coral-framework/components/IfSlotIsEmpty.js +++ b/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 ( - - {this.isSlotEmpty() ? children : null} - - ); + const {children} = this.props; + return this.isSlotEmpty() ? Children.only(children) : null; } } IfSlotIsEmpty.propTypes = { slot: PropTypes.string, - className: PropTypes.string, }; const mapStateToProps = (state) => ({ diff --git a/client/coral-framework/components/IfSlotIsNotEmpty.js b/client/coral-framework/components/IfSlotIsNotEmpty.js index 4e3abfae4..46e68fe60 100644 --- a/client/coral-framework/components/IfSlotIsNotEmpty.js +++ b/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 ( - - {this.isSlotEmpty() ? null : children} - - ); + const {children} = this.props; + return this.isSlotEmpty() ? null : Children.only(children); } } IfSlotIsNotEmpty.propTypes = { slot: PropTypes.string, - className: PropTypes.string, }; const mapStateToProps = (state) => ({ diff --git a/plugins/talk-plugin-viewing-options/client/components/Category.js b/plugins/talk-plugin-viewing-options/client/components/Category.js index 184b5cadc..caa3904ff 100644 --- a/plugins/talk-plugin-viewing-options/client/components/Category.js +++ b/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) =>
  • {child}
  • ; const ViewingOptions = ({slot, title, data, asset, root}) => { return ( - +
    {title}
    { data={data} queryData={{asset, root}} /> - +
    ); }; diff --git a/plugins/talk-plugin-viewing-options/client/components/Menu.js b/plugins/talk-plugin-viewing-options/client/components/Menu.js index 68afe4b3b..18186eccc 100644 --- a/plugins/talk-plugin-viewing-options/client/components/Menu.js +++ b/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 {
    { Object.keys(this.categories).map((category) => - + + + ) }