52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
|
|
// See LICENSE.txt for license information.
|
|
|
|
import React from 'react';
|
|
import classNames from 'classnames';
|
|
|
|
import 'renderer/css/components/Button.scss';
|
|
import 'renderer/css/components/CarouselButton.scss';
|
|
|
|
export enum ButtonDirection {
|
|
NEXT = 'next',
|
|
PREV = 'prev',
|
|
}
|
|
|
|
type CarouselButtonProps = {
|
|
direction: ButtonDirection;
|
|
disabled?: boolean;
|
|
darkMode?: boolean;
|
|
onClick?: () => void;
|
|
};
|
|
|
|
function CarouselButton({
|
|
direction = ButtonDirection.NEXT,
|
|
disabled = false,
|
|
darkMode = false,
|
|
onClick = () => null,
|
|
}: CarouselButtonProps) {
|
|
const handleOnClick = () => {
|
|
onClick();
|
|
};
|
|
|
|
return (
|
|
<button
|
|
id={`${direction}CarouselButton`}
|
|
className={classNames(
|
|
'CarouselButton',
|
|
'icon-button icon-button-small',
|
|
{
|
|
'icon-button-inverted': darkMode,
|
|
disabled,
|
|
},
|
|
)}
|
|
disabled={disabled}
|
|
onClick={handleOnClick}
|
|
>
|
|
<i className={direction === ButtonDirection.PREV ? 'icon-chevron-left' : 'icon-chevron-right'}/>
|
|
</button>
|
|
);
|
|
}
|
|
|
|
export default CarouselButton;
|