jiti-meet/react/features/etherpad/components/SharedDocumentButton.web.js

105 lines
2.6 KiB
JavaScript
Raw Normal View History

// @flow
import type { Dispatch } from 'redux';
import { createToolbarEvent, sendAnalytics } from '../../analytics';
import { translate } from '../../base/i18n';
import { IconShareDoc } from '../../base/icons';
import { connect } from '../../base/redux';
2020-07-24 12:14:33 +00:00
import { AbstractButton, type AbstractButtonProps } from '../../base/toolbox/components';
import { toggleDocument } from '../../etherpad/actions';
import { setOverflowMenuVisible } from '../../toolbox/actions.web';
type Props = AbstractButtonProps & {
/**
* Whether the shared document is being edited or not.
*/
_editing: boolean,
/**
* Redux dispatch function.
*/
dispatch: Dispatch<any>,
};
/**
* Implements an {@link AbstractButton} to open the chat screen on mobile.
*/
class SharedDocumentButton extends AbstractButton<Props, *> {
accessibilityLabel = 'toolbar.accessibilityLabel.document';
icon = IconShareDoc;
label = 'toolbar.documentOpen';
toggledLabel = 'toolbar.documentClose';
/**
* Dynamically retrieves tooltip based on sharing state.
*/
get tooltip() {
if (this._isToggled()) {
return 'toolbar.documentClose';
}
return 'toolbar.documentOpen';
}
/**
* Required by linter due to AbstractButton overwritten prop being writable.
*
2021-11-04 21:10:43 +00:00
* @param {string} _value - The value.
*/
2021-11-04 21:10:43 +00:00
set tooltip(_value) {
// Unused.
}
/**
* Handles clicking / pressing the button, and opens / closes the appropriate dialog.
*
* @private
* @returns {void}
*/
_handleClick() {
const { _editing, dispatch } = this.props;
sendAnalytics(createToolbarEvent(
'toggle.etherpad',
{
enable: !_editing
}));
dispatch(toggleDocument());
dispatch(setOverflowMenuVisible(false));
}
/**
* Indicates whether this button is in toggled state or not.
*
* @override
* @protected
* @returns {boolean}
*/
_isToggled() {
return this.props._editing;
}
}
/**
* Maps part of the redux state to the component's props.
*
* @param {Object} state - The redux store/state.
* @param {Object} ownProps - The properties explicitly passed to the component
* instance.
* @returns {Object}
*/
function _mapStateToProps(state: Object, ownProps: Object) {
const { documentUrl, editing } = state['features/etherpad'];
const { visible = Boolean(documentUrl) } = ownProps;
return {
_editing: editing,
visible
};
}
export default translate(connect(_mapStateToProps)(SharedDocumentButton));