You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
72 lines
1.6 KiB
TypeScript
72 lines
1.6 KiB
TypeScript
import React, { ReactNode } from 'react';
|
|
import classNames from 'classnames';
|
|
import { DefaultTheme } from 'styled-components';
|
|
|
|
export enum SessionButtonType {
|
|
Brand = 'brand',
|
|
BrandOutline = 'brand-outline',
|
|
Default = 'default',
|
|
DefaultOutline = 'default-outline',
|
|
Square = 'square',
|
|
SquareOutline = 'square-outline',
|
|
Simple = 'simple',
|
|
}
|
|
|
|
export enum SessionButtonColor {
|
|
Green = 'green',
|
|
White = 'white',
|
|
Primary = 'primary',
|
|
Secondary = 'secondary',
|
|
Success = 'success',
|
|
Danger = 'danger',
|
|
DangerAlt = 'danger-alt',
|
|
Warning = 'warning',
|
|
None = '',
|
|
}
|
|
|
|
type Props = {
|
|
text?: string;
|
|
disabled?: boolean;
|
|
buttonType: SessionButtonType;
|
|
buttonColor: SessionButtonColor;
|
|
onClick: any;
|
|
children?: ReactNode;
|
|
theme: DefaultTheme;
|
|
};
|
|
|
|
export const SessionButton = (props: Props) => {
|
|
const { buttonType, buttonColor, text, disabled } = props;
|
|
|
|
const clickHandler = (e: any) => {
|
|
if (props.onClick) {
|
|
e.stopPropagation();
|
|
props.onClick();
|
|
}
|
|
};
|
|
|
|
const buttonTypes = [];
|
|
const onClickFn = disabled ? () => null : clickHandler;
|
|
|
|
buttonTypes.push(buttonType);
|
|
if (buttonType.includes('-outline')) {
|
|
buttonTypes.push(buttonType.replace('-outline', ''));
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={classNames('session-button', ...buttonTypes, buttonColor, disabled && 'disabled')}
|
|
role="button"
|
|
onClick={onClickFn}
|
|
>
|
|
{props.children || text}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
SessionButton.defaultProps = {
|
|
disabled: false,
|
|
buttonType: SessionButtonType.Default,
|
|
buttonColor: SessionButtonColor.Primary,
|
|
onClick: null,
|
|
} as Partial<Props>;
|