From 31f87dc192d8e3b1f429ec964e920c895481a8ad Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Thu, 23 Nov 2017 14:42:46 +0100 Subject: [PATCH] Pass hover props to extendable tabs in order to support firefox --- .../src/components/ExtendableTab.js | 35 +++++++++++++++++++ .../src/containers/ExtendableTabPanel.js | 7 ++-- .../client/actions.js | 9 ----- .../client/components/InfoIcon.js | 6 ++-- .../client/components/Tab.js | 19 ++++++---- .../client/constants.js | 4 --- .../client/containers/Tab.js | 15 ++------ .../client/index.js | 2 -- .../client/reducer.js | 22 ------------ 9 files changed, 58 insertions(+), 61 deletions(-) create mode 100644 client/coral-embed-stream/src/components/ExtendableTab.js delete mode 100644 plugins/talk-plugin-featured-comments/client/actions.js delete mode 100644 plugins/talk-plugin-featured-comments/client/constants.js delete mode 100644 plugins/talk-plugin-featured-comments/client/reducer.js diff --git a/client/coral-embed-stream/src/components/ExtendableTab.js b/client/coral-embed-stream/src/components/ExtendableTab.js new file mode 100644 index 000000000..75c6739a4 --- /dev/null +++ b/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 ( + + {React.cloneElement(this.props.children, {hover: this.state.hover})} + + ); + } +} + +ExtendableTab.propTypes = { + children: PropTypes.node, +}; + +export default ExtendableTab; diff --git a/client/coral-embed-stream/src/containers/ExtendableTabPanel.js b/client/coral-embed-stream/src/containers/ExtendableTabPanel.js index b582f7b66..362f6bf89 100644 --- a/client/coral-embed-stream/src/containers/ExtendableTabPanel.js +++ b/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 ( - + {React.cloneElement(el, {active: this.props.activeTab === el.type.talkPluginName})} - + ); }); } diff --git a/plugins/talk-plugin-featured-comments/client/actions.js b/plugins/talk-plugin-featured-comments/client/actions.js deleted file mode 100644 index 653b8f565..000000000 --- a/plugins/talk-plugin-featured-comments/client/actions.js +++ /dev/null @@ -1,9 +0,0 @@ -import {SHOW_TOOLTIP, HIDE_TOOLTIP} from './constants'; - -export const showTooltip = () => ({ - type: SHOW_TOOLTIP -}); - -export const hideTooltip = () => ({ - type: HIDE_TOOLTIP -}); diff --git a/plugins/talk-plugin-featured-comments/client/components/InfoIcon.js b/plugins/talk-plugin-featured-comments/client/components/InfoIcon.js index 47560fd74..18db9a6c5 100644 --- a/plugins/talk-plugin-featured-comments/client/components/InfoIcon.js +++ b/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}) => ( - ( + ); diff --git a/plugins/talk-plugin-featured-comments/client/components/Tab.js b/plugins/talk-plugin-featured-comments/client/components/Tab.js index 6ac5682d0..804e7e99a 100644 --- a/plugins/talk-plugin-featured-comments/client/components/Tab.js +++ b/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 ( - + {t('talk-plugin-featured-comments.featured')} {featuredCommentsCount} - - {tooltip && } + + {hover && } ); }; + +Tab.propTypes = { + active: PropTypes.bool, + hover: PropTypes.bool, + featuredCommentsCount: PropTypes.number.isRequired, +}; + +export default Tab; diff --git a/plugins/talk-plugin-featured-comments/client/constants.js b/plugins/talk-plugin-featured-comments/client/constants.js deleted file mode 100644 index c03bf4839..000000000 --- a/plugins/talk-plugin-featured-comments/client/constants.js +++ /dev/null @@ -1,4 +0,0 @@ -const prefix = 'TALK_FEATURED_COMMENTS'; - -export const SHOW_TOOLTIP = `${prefix}_SHOW_TOOLTIP`; -export const HIDE_TOOLTIP = `${prefix}_HIDE_TOOLTIP`; diff --git a/plugins/talk-plugin-featured-comments/client/containers/Tab.js b/plugins/talk-plugin-featured-comments/client/containers/Tab.js index cbe430be2..f3443a122 100644 --- a/plugins/talk-plugin-featured-comments/client/containers/Tab.js +++ b/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); diff --git a/plugins/talk-plugin-featured-comments/client/index.js b/plugins/talk-plugin-featured-comments/client/index.js index bdcb2f470..7a0b9827d 100644 --- a/plugins/talk-plugin-featured-comments/client/index.js +++ b/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], diff --git a/plugins/talk-plugin-featured-comments/client/reducer.js b/plugins/talk-plugin-featured-comments/client/reducer.js deleted file mode 100644 index 2fd9b82e0..000000000 --- a/plugins/talk-plugin-featured-comments/client/reducer.js +++ /dev/null @@ -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; - } -}