76 lines
1.8 KiB
TypeScript
76 lines
1.8 KiB
TypeScript
|
import React, { useCallback } from 'react';
|
||
|
|
|
||
|
|
import Button from '../../../base/ui/components/web/Button';
|
||
|
|
import { NOTIFY_CLICK_MODE } from '../../constants';
|
||
|
|
|
||
|
|
|
||
|
|
/**
|
||
|
|
* The type of the React {@code Component} props of {@link HangupContextMenuItem}.
|
||
|
|
*/
|
||
|
|
type Props = {
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Accessibility label for the button.
|
||
|
|
*/
|
||
|
|
accessibilityLabel: string;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Key to use for toolbarButtonClicked event.
|
||
|
|
*/
|
||
|
|
buttonKey: string;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Type of button to display.
|
||
|
|
*/
|
||
|
|
buttonType: string;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Text associated with the button.
|
||
|
|
*/
|
||
|
|
label: string;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Notify mode for `toolbarButtonClicked` event -
|
||
|
|
* whether to only notify or to also prevent button click routine.
|
||
|
|
*/
|
||
|
|
notifyMode?: string;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Callback that performs the actual hangup action.
|
||
|
|
*/
|
||
|
|
onClick: Function;
|
||
|
|
};
|
||
|
|
|
||
|
|
declare let APP: any;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Implementation of a button to be rendered within Hangup context menu.
|
||
|
|
*
|
||
|
|
* @param {Object} props - Component's props.
|
||
|
|
* @returns {JSX.Element} - Button that would trigger the hangup action.
|
||
|
|
*/
|
||
|
|
export const HangupContextMenuItem = (props: Props) => {
|
||
|
|
const shouldNotify = props.notifyMode !== undefined;
|
||
|
|
const shouldPreventExecution = props.notifyMode === NOTIFY_CLICK_MODE.PREVENT_AND_NOTIFY;
|
||
|
|
|
||
|
|
const _onClick = useCallback(() => {
|
||
|
|
if (shouldNotify) {
|
||
|
|
APP.API.notifyToolbarButtonClicked(props.buttonKey, shouldPreventExecution);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!shouldPreventExecution) {
|
||
|
|
props.onClick();
|
||
|
|
}
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Button
|
||
|
|
accessibilityLabel = { props.accessibilityLabel }
|
||
|
|
fullWidth = { true }
|
||
|
|
label = { props.label }
|
||
|
|
onClick = { _onClick }
|
||
|
|
type = { props.buttonType } />
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|