112 lines
3.0 KiB
JavaScript
112 lines
3.0 KiB
JavaScript
// @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<any>}
|
|
*/
|
|
function InviteMore({
|
|
_shouldShow,
|
|
_toolboxVisible,
|
|
onClick,
|
|
t
|
|
}: Props) {
|
|
const onKeyPressHandler = useCallback(e => {
|
|
if (onClick && (e.key === ' ' || e.key === 'Enter')) {
|
|
e.preventDefault();
|
|
onClick();
|
|
}
|
|
}, [ onClick ]);
|
|
|
|
return (
|
|
_shouldShow
|
|
? <div className = { `invite-more-container${_toolboxVisible ? '' : ' elevated'}` }>
|
|
<div className = 'invite-more-content'>
|
|
<div
|
|
className = 'invite-more-header'
|
|
role = 'heading'>
|
|
{t('addPeople.inviteMoreHeader')}
|
|
</div>
|
|
<div
|
|
className = 'invite-more-button'
|
|
onClick = { onClick }
|
|
onKeyPress = { onKeyPressHandler }
|
|
role = 'button'
|
|
tabIndex = { 0 }>
|
|
<Icon src = { IconInviteMore } />
|
|
<div className = 'invite-more-button-text'>
|
|
{t('addPeople.inviteMorePrompt')}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> : 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));
|