jiti-meet/react/features/invite/components/InfoDialog.web.js

200 lines
5.9 KiB
JavaScript

import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { getInviteURL } from '../../base/connection';
import { openDialog } from '../../base/dialog';
import { translate } from '../../base/i18n';
import AddPeopleDialog from './AddPeopleDialog';
const logger = require('jitsi-meet-logger').getLogger(__filename);
declare var interfaceConfig: Object;
/**
* A React Component with the contents for a dialog that shows information about
* the current conference and provides ways to invite other participants.
*
* @extends Component
*/
class InfoDialog extends Component {
/**
* {@code InfoDialog} component's property types.
*
* @static
*/
static propTypes = {
/**
* The current url of the conference to be copied onto the clipboard.
*/
_inviteURL: PropTypes.string,
/**
* Whether or not the link to open the {@code AddPeopleDialog} should be
* displayed.
*/
_showAddPeople: PropTypes.bool,
/**
* Invoked to open a dialog for adding participants to the conference.
*/
dispatch: PropTypes.func,
/**
* Callback invoked when the dialog should be closed.
*/
onClose: PropTypes.func,
/**
* Callback invoked when a mouse-related event has been detected.
*/
onMouseOver: PropTypes.func,
/**
* Invoked to obtain translated strings.
*/
t: PropTypes.func
};
/**
* Initializes new {@code InfoDialog} instance.
*
* @param {Object} props - The read-only properties with which the new
* instance is to be initialized.
*/
constructor(props) {
super(props);
/**
* The internal reference to the DOM/HTML element backing the React
* {@code Component} input. It is necessary for the implementation
* of copying to the clipboard.
*
* @private
* @type {HTMLInputElement}
*/
this._copyElement = null;
// Bind event handlers so they are only bound once for every instance.
this._onCopyInviteURL = this._onCopyInviteURL.bind(this);
this._onOpenInviteDialog = this._onOpenInviteDialog.bind(this);
this._setCopyElement = this._setCopyElement.bind(this);
}
/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
* @returns {ReactElement}
*/
render() {
return (
<div
className = 'info-dialog'
onMouseOver = { this.props.onMouseOver } >
<div className = 'info-dialog-column'>
<h4 className = 'info-dialog-icon'>
<i className = 'icon-info' />
</h4>
</div>
<div className = 'info-dialog-column'>
<div className = 'info-dialog-title'>
{ this.props.t('info.title') }
</div>
<div
className = 'info-dialog-conference-url'
ref = { this._inviteUrlElement }>
{ this.props._inviteURL }
<input
className = 'info-dialog-copy-element'
readOnly = { true }
ref = { this._setCopyElement }
tabIndex = '-1'
value = { this.props._inviteURL } />
</div>
<div className = 'info-dialog-action-links'>
<div className = 'info-dialog-action-link'>
<a onClick = { this._onCopyInviteURL }>
{ this.props.t('info.copy') }
</a>
</div>
{ this.props._showAddPeople
? <div className = 'info-dialog-action-link'>
<a onClick = { this._onOpenInviteDialog }>
{ this.props.t('info.invite', {
app: interfaceConfig.ADD_PEOPLE_APP_NAME
}) }
</a>
</div>
: null }
</div>
</div>
</div>
);
}
/**
* Callback invoked to copy the contents of {@code this._copyElement} to the
* clipboard.
*
* @private
* @returns {void}
*/
_onCopyInviteURL() {
try {
this._copyElement.select();
document.execCommand('copy');
this._copyElement.blur();
} catch (err) {
logger.error('error when copying the text', err);
}
}
/**
* Callback invoked to open the {@code AddPeople} dialog.
*
* @private
* @returns {void}
*/
_onOpenInviteDialog() {
this.props.dispatch(openDialog(AddPeopleDialog));
if (this.props.onClose) {
this.props.onClose();
}
}
/**
* Sets the internal reference to the DOM/HTML element backing the React
* {@code Component} input.
*
* @param {HTMLInputElement} element - The DOM/HTML element for this
* {@code Component}'s input.
* @private
* @returns {void}
*/
_setCopyElement(element) {
this._copyElement = element;
}
}
/**
* Maps (parts of) the Redux state to the associated props for the
* {@code InfoDialog} component.
*
* @param {Object} state - The Redux state.
* @private
* @returns {{
* _inviteURL: string
* }}
*/
function _mapStateToProps(state) {
return {
_inviteURL: getInviteURL(state),
_showAddPeople: !state['features/base/jwt'].isGuest
};
}
export default translate(connect(_mapStateToProps)(InfoDialog));