// @flow import React, { useCallback } from 'react'; import { translate } from '../../../base/i18n'; import { Icon, IconInviteMore } from '../../../base/icons'; import { getParticipantCount } from '../../../base/participants'; import { connect } from '../../../base/redux'; import { beginAddPeople } from '../../../invite'; import { isButtonEnabled, isToolboxVisible } from '../../../toolbox/functions.web'; declare var interfaceConfig: Object; type Props = { /** * Whether to show the option to invite more people. */ _shouldShow: boolean, /** * Whether the toolbox is visible. */ _toolboxVisible: boolean, /** * Handler to open the invite dialog. */ onClick: Function, /** * Invoked to obtain translated strings. */ t: Function } /** * Represents a replacement for the subject, prompting the * sole participant to invite more participants. * * @param {Object} props - The props of the component. * @returns {React$Element} */ function InviteMore({ _shouldShow, _toolboxVisible, onClick, t }: Props) { const onKeyPressHandler = useCallback(e => { if (onClick && (e.key === ' ' || e.key === 'Enter')) { e.preventDefault(); onClick(); } }, [ onClick ]); return ( _shouldShow ?
{t('addPeople.inviteMoreHeader')}
{t('addPeople.inviteMorePrompt')}
: null ); } /** * Maps (parts of) the Redux state to the associated * {@code Subject}'s props. * * @param {Object} state - The Redux state. * @private * @returns {Props} */ function mapStateToProps(state) { const participantCount = getParticipantCount(state); const isAlone = participantCount === 1; const hide = interfaceConfig.HIDE_INVITE_MORE_HEADER; return { _shouldShow: isButtonEnabled('invite', state) && isAlone && !hide, _toolboxVisible: isToolboxVisible(state) }; } /** * Maps dispatching of some action to React component props. * * @param {Function} dispatch - Redux action dispatcher. * @returns {Props} */ const mapDispatchToProps = { onClick: () => beginAddPeople() }; export default translate(connect(mapStateToProps, mapDispatchToProps)(InviteMore));