92 lines
1.8 KiB
JavaScript
92 lines
1.8 KiB
JavaScript
// @flow
|
|
|
|
import React from 'react';
|
|
|
|
import { Icon, IconArrowDown } from '../../../icons';
|
|
|
|
type Props = {
|
|
|
|
/**
|
|
* Text of the button.
|
|
*/
|
|
children: React$Node,
|
|
|
|
/**
|
|
* Text css class of the button.
|
|
*/
|
|
className?: string,
|
|
|
|
/**
|
|
* If the button is disabled or not.
|
|
*/
|
|
disabled?: boolean,
|
|
|
|
/**
|
|
* If the button has options.
|
|
*/
|
|
hasOptions?: boolean,
|
|
|
|
/**
|
|
* Icon to display in the options section.
|
|
*/
|
|
OptionsIcon?: React$Node,
|
|
|
|
/**
|
|
* TestId of the button. Can be used to locate element when testing UI.
|
|
*/
|
|
testId?: string,
|
|
|
|
/**
|
|
* The type of th button: primary, secondary, text.
|
|
*/
|
|
type: string,
|
|
|
|
/**
|
|
* OnClick button handler.
|
|
*/
|
|
onClick: Function,
|
|
|
|
/**
|
|
* Click handler for options.
|
|
*/
|
|
onOptionsClick?: Function
|
|
};
|
|
|
|
/**
|
|
* Button used for pre meeting actions.
|
|
*
|
|
* @returns {ReactElement}
|
|
*/
|
|
function ActionButton({
|
|
children,
|
|
className = '',
|
|
disabled,
|
|
hasOptions,
|
|
OptionsIcon = IconArrowDown,
|
|
testId,
|
|
type = 'primary',
|
|
onClick,
|
|
onOptionsClick
|
|
}: Props) {
|
|
return (
|
|
<div
|
|
className = { `action-btn ${className} ${type} ${disabled ? 'disabled' : ''}` }
|
|
data-testid = { testId ? testId : undefined }
|
|
onClick = { disabled ? undefined : onClick }>
|
|
{children}
|
|
{hasOptions && <div
|
|
className = 'options'
|
|
data-testid = 'prejoin.joinOptions'
|
|
onClick = { disabled ? undefined : onOptionsClick }>
|
|
<Icon
|
|
className = 'icon'
|
|
size = { 14 }
|
|
src = { OptionsIcon } />
|
|
</div>
|
|
}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ActionButton;
|