Pass hover props to extendable tabs in order to support firefox

client/coral-embed-stream/src/components/ExtendableTab.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import {Tab} from 'coral-ui';
+import PropTypes from 'prop-types';
+
+/**
+ *  ExtendableTab adds a hover property to its children, because
+ *  Tab is rendered as a button and under Firefox its children do
+ *  not support mouse events.
+ */
+class ExtendableTab extends React.Component {
+  state = {
+    hover: false,
+  }
+
+  handleMouseEnter = () => this.setState({hover: true});
+  handleMouseLeave = () => this.setState({hover: false});
+
+  render() {
+    return (
+      <Tab
+        {...this.props}
+        onMouseEnter={this.handleMouseEnter}
+        onMouseLeave={this.handleMouseLeave}
+      >
+        {React.cloneElement(this.props.children, {hover: this.state.hover})}
+      </Tab>
+    );
+  }
+}
+
+ExtendableTab.propTypes = {
+  children: PropTypes.node,
+};
+
+export default ExtendableTab;

client/coral-embed-stream/src/containers/ExtendableTabPanel.js

@@ -2,7 +2,8 @@ import React from 'react';
 import ExtendableTabPanel from '../components/ExtendableTabPanel';
 import {connect} from 'react-redux';
 import omit from 'lodash/omit';
-import {Tab, TabPane} from 'coral-ui';
+import {TabPane} from 'coral-ui';
+import ExtendableTab from '../components/ExtendableTab';
 import {getShallowChanges} from 'coral-framework/utils';
 import isEqual from 'lodash/isEqual';
 import PropTypes from 'prop-types';
@@ -61,9 +62,9 @@ class ExtendableTabPanelContainer extends React.Component {
   getSlotTabElements(slot) {
     return this.getSlotElements(slot).map((el) => {
       return (
-        <Tab tabId={el.type.talkPluginName} key={el.type.talkPluginName}>
+        <ExtendableTab tabId={el.type.talkPluginName} key={el.type.talkPluginName}>
           {React.cloneElement(el, {active: this.props.activeTab === el.type.talkPluginName})}
-        </Tab>
+        </ExtendableTab>
       );
     });
   }

plugins/talk-plugin-featured-comments/client/actions.js

@@ -1,9 +0,0 @@
-import {SHOW_TOOLTIP, HIDE_TOOLTIP} from './constants';
-
-export const showTooltip = () => ({
-  type: SHOW_TOOLTIP
-});
-
-export const hideTooltip = () => ({
-  type: HIDE_TOOLTIP
-});

plugins/talk-plugin-featured-comments/client/components/InfoIcon.js

@@ -3,9 +3,9 @@ import styles from './InfoIcon.css';
 import cn from 'classnames';
 import {Icon} from 'plugin-api/beta/client/components/ui';
 
-export default ({tooltip}) => (
-  <Icon 
+export default ({hover}) => (
+  <Icon
     name="info_outline"
-    className={cn(styles.infoIcon, {[styles.on]: tooltip})}
+    className={cn(styles.infoIcon, {[styles.on]: hover})}
   />
 );

plugins/talk-plugin-featured-comments/client/components/Tab.js

@@ -3,16 +3,23 @@ import {TabCount} from 'plugin-api/beta/client/components/ui';
 import InfoIcon from './InfoIcon';
 import {t} from 'plugin-api/beta/client/services';
 import Tooltip from './Tooltip';
+import PropTypes from 'prop-types';
 
-export default ({active, asset: {featuredCommentsCount}, tooltip, ...props}) => { 
+const Tab = ({active, hover, featuredCommentsCount}) => {
   return (
-    <span 
-      onMouseEnter={props.showTooltip}
-      onMouseLeave={props.hideTooltip} >
+    <span>
       {t('talk-plugin-featured-comments.featured')}
       <TabCount active={active} sub>{featuredCommentsCount}</TabCount>
-      <InfoIcon tooltip={tooltip} /> 
-      {tooltip && <Tooltip />} 
+      <InfoIcon hover={hover} />
+      {hover && <Tooltip />}
     </span>
   );
 };
+
+Tab.propTypes = {
+  active: PropTypes.bool,
+  hover: PropTypes.bool,
+  featuredCommentsCount: PropTypes.number.isRequired,
+};
+
+export default Tab;

plugins/talk-plugin-featured-comments/client/constants.js

@@ -1,4 +0,0 @@
-const prefix = 'TALK_FEATURED_COMMENTS';
-
-export const SHOW_TOOLTIP = `${prefix}_SHOW_TOOLTIP`;
-export const HIDE_TOOLTIP = `${prefix}_HIDE_TOOLTIP`;

plugins/talk-plugin-featured-comments/client/containers/Tab.js

@@ -1,19 +1,9 @@
 import Tab from '../components/Tab';
-import {bindActionCreators} from 'redux';
-import {showTooltip, hideTooltip} from '../actions';
+import {withFragments, excludeIf} from 'plugin-api/beta/client/hocs';
 import {compose, gql} from 'react-apollo';
-import {withFragments, excludeIf, connect} from 'plugin-api/beta/client/hocs';
-
-const mapStateToProps = ({talkPluginFeaturedComments: state}) => state;
-
-const mapDispatchToProps = (dispatch) =>
-  bindActionCreators({
-    showTooltip,
-    hideTooltip,
-  }, dispatch);
+import {withProps} from 'recompose';
 
 const enhance = compose(
-  connect(mapStateToProps, mapDispatchToProps),
   withFragments({
     asset: gql`
       fragment TalkFeaturedComments_Tab_asset on Asset {
@@ -21,6 +11,7 @@ const enhance = compose(
       }`,
   }),
   excludeIf((props) => props.asset.featuredCommentsCount === 0),
+  withProps((props) => ({featuredCommentsCount: props.asset.featuredCommentsCount})),
 );
 
 export default enhance(Tab);

plugins/talk-plugin-featured-comments/client/index.js

@@ -3,7 +3,6 @@ import Tag from './containers/Tag';
 import TabPane from './containers/TabPane';
 import translations from './translations.yml';
 import update from 'immutability-helper';
-import reducer from './reducer';
 import ModTag from './containers/ModTag';
 import ModActionButton from './containers/ModActionButton';
 import ModSubscription from './containers/ModSubscription';
@@ -13,7 +12,6 @@ import {findCommentInEmbedQuery} from 'coral-embed-stream/src/graphql/utils';
 import {prependNewNodes} from 'plugin-api/beta/client/utils';
 
 export default {
-  reducer,
   translations,
   slots: {
     streamTabsPrepend: [Tab],

plugins/talk-plugin-featured-comments/client/reducer.js

@@ -1,22 +0,0 @@
-import {SHOW_TOOLTIP, HIDE_TOOLTIP} from './constants';
-
-const initialState = {
-  tooltip: false
-};
-
-export default function featured (state = initialState, action) {
-  switch (action.type) {
-  case SHOW_TOOLTIP: 
-    return {
-      ...state,
-      tooltip: true
-    };
-  case HIDE_TOOLTIP: 
-    return {
-      ...state,
-      tooltip: false
-    };
-  default :
-    return state;
-  }
-}