grafixeyehero
54 lines
1.2 KiB
TypeScript
54 lines
1.2 KiB
TypeScript
import React, { ButtonHTMLAttributes, DetailedHTMLProps } from 'react';
|
|
import classNames from 'classnames';
|
|
import layoutManager from '../../components/layoutManager';
|
|
import './emby-button.scss';
|
|
|
|
enum IconPosition {
|
|
RIGHT = 'RIGHT',
|
|
LEFT = 'LEFT',
|
|
}
|
|
|
|
interface ButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>,
|
|
HTMLButtonElement
|
|
> {
|
|
icon?: string;
|
|
iconClassName?: string;
|
|
iconPos?: string;
|
|
}
|
|
|
|
const Button: React.FC<ButtonProps> = ({
|
|
className,
|
|
title,
|
|
icon,
|
|
iconClassName,
|
|
iconPos,
|
|
onClick,
|
|
...rest
|
|
}) => {
|
|
const btnClass = classNames(
|
|
'emby-button',
|
|
className,
|
|
{ 'show-focus': layoutManager.tv }
|
|
);
|
|
|
|
const iconClass = classNames(
|
|
'material-icons',
|
|
iconClassName,
|
|
icon
|
|
);
|
|
|
|
return (
|
|
<button
|
|
className={btnClass}
|
|
onClick={onClick}
|
|
{...rest}
|
|
>
|
|
{icon && iconPos === IconPosition.LEFT && <span className={iconClass} aria-hidden='true' />}
|
|
<span>{title}</span>
|
|
{icon && iconPos === IconPosition.RIGHT && <span className={iconClass} aria-hidden='true' />}
|
|
</button>
|
|
);
|
|
};
|
|
|
|
export default Button;
|