jiti-meet/react/features/base/premeeting/components/web/ActionButton.js

86 lines
1.7 KiB
JavaScript
Raw Normal View History

2020-05-20 08:25:31 +00:00
// @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,
/**
* TestId of the button. Can be used to locate element when testing UI.
*/
testId?: string,
2020-05-20 08:25:31 +00:00
/**
* 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,
testId,
2020-05-20 08:25:31 +00:00
type = 'primary',
onClick,
onOptionsClick
}: Props) {
return (
<div
className = { `action-btn ${className} ${type} ${disabled ? 'disabled' : ''}` }
data-testid = { testId ? testId : undefined }
2020-05-20 08:25:31 +00:00
onClick = { disabled ? undefined : onClick }>
{children}
{hasOptions && <div
className = 'options'
2020-08-18 11:36:32 +00:00
data-testid = 'prejoin.joinOptions'
2020-05-20 08:25:31 +00:00
onClick = { disabled ? undefined : onOptionsClick }>
<Icon
className = 'icon'
size = { 14 }
src = { IconArrowDown } />
</div>
}
</div>
);
}
export default ActionButton;