theluyuan
38ba663466
Some checks failed
Close stale issues and PRs / stale (push) Has been cancelled
70 lines
1.5 KiB
TypeScript
70 lines
1.5 KiB
TypeScript
import React, { useCallback } from 'react';
|
|
|
|
import Icon from '../base/icons/components/Icon';
|
|
|
|
interface IProps {
|
|
|
|
/**
|
|
* Accessibility label for button.
|
|
*/
|
|
accessibilityLabel: string;
|
|
|
|
/**
|
|
* An extra class name to be added at the end of the element's class name
|
|
* in order to enable custom styling.
|
|
*/
|
|
customClass?: string;
|
|
|
|
/**
|
|
* Whether or not the button is disabled.
|
|
*/
|
|
disabled?: boolean;
|
|
|
|
/**
|
|
* Button icon.
|
|
*/
|
|
icon: Function;
|
|
|
|
/**
|
|
* Click handler.
|
|
*/
|
|
onClick: (e?: React.MouseEvent) => void;
|
|
|
|
/**
|
|
* Whether or not the button is toggled.
|
|
*/
|
|
toggled?: boolean;
|
|
}
|
|
|
|
const ToolbarButton = ({
|
|
accessibilityLabel,
|
|
customClass,
|
|
disabled = false,
|
|
onClick,
|
|
icon,
|
|
toggled = false
|
|
}: IProps) => {
|
|
const onKeyPress = useCallback(event => {
|
|
if (event.key === 'Enter' || event.key === ' ') {
|
|
event.preventDefault();
|
|
onClick();
|
|
}
|
|
}, [ onClick ]);
|
|
|
|
return (<div
|
|
aria-disabled = { disabled }
|
|
aria-label = { accessibilityLabel }
|
|
aria-pressed = { toggled }
|
|
className = { `toolbox-button ${disabled ? ' disabled' : ''}` }
|
|
onClick = { disabled ? undefined : onClick }
|
|
onKeyPress = { disabled ? undefined : onKeyPress }
|
|
role = 'button'
|
|
tabIndex = { 0 }>
|
|
<div className = { `toolbox-icon ${disabled ? 'disabled' : ''} ${customClass ?? ''}` }>
|
|
<Icon src = { icon } />
|
|
</div>
|
|
</div>);
|
|
};
|
|
|
|
export default ToolbarButton;
|