1
0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-24 10:27:10 +02:00
joplin/packages/app-desktop/gui/Button/Button.tsx

245 lines
6.9 KiB
TypeScript
Raw Normal View History

2020-09-15 15:01:07 +02:00
import * as React from 'react';
const styled = require('styled-components').default;
const { space } = require('styled-system');
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied;
type StyleProps = any;
2020-09-15 15:01:07 +02:00
export enum ButtonLevel {
Primary = 'primary',
Secondary = 'secondary',
Tertiary = 'tertiary',
2021-01-12 14:28:55 +02:00
SidebarSecondary = 'sidebarSecondary',
2021-01-20 00:58:09 +02:00
Recommended = 'recommended',
2020-09-15 15:01:07 +02:00
}
export enum ButtonSize {
Small = 1,
Normal = 2,
}
2020-09-15 15:01:07 +02:00
interface Props {
title?: string;
iconName?: string;
level?: ButtonLevel;
iconLabel?: string;
className?: string;
// eslint-disable-next-line @typescript-eslint/ban-types -- Old code before rule was applied
onClick?: Function;
color?: string;
iconAnimation?: string;
tooltip?: string;
disabled?: boolean;
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied;
style?: any;
size?: ButtonSize;
isSquare?: boolean;
iconOnly?: boolean;
fontSize?: number;
2020-09-15 15:01:07 +02:00
}
const StyledTitle = styled.span`
`;
export const buttonSizePx = (props: Props | ButtonSize) => {
const buttonSize = typeof props === 'number' ? props : props.size;
if (!buttonSize || buttonSize === ButtonSize.Normal) return 32;
if (buttonSize === ButtonSize.Small) return 26;
throw new Error(`Unknown size: ${buttonSize}`);
};
const isSquare = (props: Props) => {
return props.iconOnly || props.isSquare;
};
2020-09-15 15:01:07 +02:00
const StyledButtonBase = styled.button`
display: flex;
align-items: center;
flex-direction: row;
height: ${(props: Props) => buttonSizePx(props)}px;
min-height: ${(props: Props) => buttonSizePx(props)}px;
max-height: ${(props: Props) => buttonSizePx(props)}px;
width: ${(props: Props) => isSquare(props) ? `${buttonSizePx(props)}px` : 'auto'};
${(props: Props) => isSquare(props) ? `min-width: ${buttonSizePx(props)}px;` : ''}
${(props: Props) => !isSquare(props) ? 'min-width: 100px;' : ''}
${(props: Props) => isSquare(props) ? `max-width: ${buttonSizePx(props)}px;` : ''}
2020-09-15 15:01:07 +02:00
box-sizing: border-box;
border-radius: 3px;
border-style: solid;
border-width: 1px;
padding: 0 ${(props: Props) => isSquare(props) ? 4 : 14}px;
2020-09-15 15:01:07 +02:00
justify-content: center;
opacity: ${(props: Props) => props.disabled ? 0.5 : 1};
2020-09-15 15:01:07 +02:00
user-select: none;
${(props: Props) => props.fontSize ? `font-size: ${props.fontSize}px;` : ''}
2020-09-15 15:01:07 +02:00
`;
const StyledIcon = styled(styled.span(space))`
font-size: ${(props: StyleProps) => props.theme.toolbarIconSize}px;
${(props: StyleProps) => props.animation ? `animation: ${props.animation}` : ''};
2020-09-15 15:01:07 +02:00
`;
const StyledButtonPrimary = styled(StyledButtonBase)`
border: none;
background-color: ${(props: StyleProps) => props.theme.backgroundColor5};
2020-09-15 15:01:07 +02:00
${(props: StyleProps) => props.disabled} {
&:hover {
background-color: ${(props: StyleProps) => props.theme.backgroundColorHover5};
}
2020-09-15 15:01:07 +02:00
&:active {
background-color: ${(props: StyleProps) => props.theme.backgroundColorActive5};
}
2020-09-15 15:01:07 +02:00
}
${StyledIcon} {
color: ${(props: StyleProps) => props.theme.color5};
2020-09-15 15:01:07 +02:00
}
${StyledTitle} {
color: ${(props: StyleProps) => props.theme.color5};
2020-09-15 15:01:07 +02:00
}
`;
const StyledButtonSecondary = styled(StyledButtonBase)`
border: 1px solid ${(props: StyleProps) => props.theme.borderColor4};
background-color: ${(props: StyleProps) => props.theme.backgroundColor4};
2020-09-15 15:01:07 +02:00
${(props: StyleProps) => props.disabled} {
&:hover {
background-color: ${(props: StyleProps) => props.theme.backgroundColorHover4};
}
2020-09-15 15:01:07 +02:00
&:active {
background-color: ${(props: StyleProps) => props.theme.backgroundColorActive4};
}
2020-09-15 15:01:07 +02:00
}
${StyledIcon} {
color: ${(props: StyleProps) => props.theme.color4};
2020-09-15 15:01:07 +02:00
}
${StyledTitle} {
color: ${(props: StyleProps) => props.theme.color4};
2020-09-15 15:01:07 +02:00
}
`;
const StyledButtonTertiary = styled(StyledButtonBase)`
border: 1px solid ${(props: StyleProps) => props.theme.color3};
background-color: ${(props: StyleProps) => props.theme.backgroundColor3};
2020-09-15 15:01:07 +02:00
&:hover {
background-color: ${(props: StyleProps) => props.theme.backgroundColorHoverDim3};
2020-09-15 15:01:07 +02:00
}
&:active {
background-color: ${(props: StyleProps) => props.theme.backgroundColorActive3};
2020-09-15 15:01:07 +02:00
}
${StyledIcon} {
color: ${(props: StyleProps) => props.theme.color};
2020-09-15 15:01:07 +02:00
}
${StyledTitle} {
color: ${(props: StyleProps) => props.theme.color};
2020-09-15 15:01:07 +02:00
opacity: 0.9;
}
`;
2021-01-20 00:58:09 +02:00
const StyledButtonRecommended = styled(StyledButtonBase)`
border: 1px solid ${(props: StyleProps) => props.theme.borderColor4};
background-color: ${(props: StyleProps) => props.theme.warningBackgroundColor};
2021-01-20 00:58:09 +02:00
${StyledIcon} {
color: ${(props: StyleProps) => props.theme.color};
2021-01-20 00:58:09 +02:00
}
${StyledTitle} {
color: ${(props: StyleProps) => props.theme.color};
2021-01-20 00:58:09 +02:00
opacity: 0.9;
}
`;
2021-01-12 14:28:55 +02:00
const StyledButtonSidebarSecondary = styled(StyledButtonBase)`
2020-09-15 15:01:07 +02:00
background: none;
border-color: ${(props: StyleProps) => props.theme.color2};
color: ${(props: StyleProps) => props.theme.color2};
2020-09-15 15:01:07 +02:00
&:hover {
color: ${(props: StyleProps) => props.theme.colorHover2};
border-color: ${(props: StyleProps) => props.theme.colorHover2};
2020-09-15 15:01:07 +02:00
background: none;
${StyledTitle} {
color: ${(props: StyleProps) => props.theme.colorHover2};
2020-09-15 15:01:07 +02:00
}
${StyledIcon} {
color: ${(props: StyleProps) => props.theme.colorHover2};
2020-09-15 15:01:07 +02:00
}
}
&:active {
color: ${(props: StyleProps) => props.theme.colorActive2};
border-color: ${(props: StyleProps) => props.theme.colorActive2};
2020-09-15 15:01:07 +02:00
background: none;
${StyledTitle} {
color: ${(props: StyleProps) => props.theme.colorActive2};
2020-09-15 15:01:07 +02:00
}
${StyledIcon} {
color: ${(props: StyleProps) => props.theme.colorActive2};
2020-09-15 15:01:07 +02:00
}
}
${StyledTitle} {
color: ${(props: StyleProps) => props.theme.color2};
2020-09-15 15:01:07 +02:00
}
${StyledIcon} {
color: ${(props: StyleProps) => props.theme.color2};
2020-09-15 15:01:07 +02:00
}
`;
function buttonClass(level: ButtonLevel) {
2020-09-15 15:01:07 +02:00
if (level === ButtonLevel.Primary) return StyledButtonPrimary;
if (level === ButtonLevel.Tertiary) return StyledButtonTertiary;
2021-01-12 14:28:55 +02:00
if (level === ButtonLevel.SidebarSecondary) return StyledButtonSidebarSecondary;
2021-01-20 00:58:09 +02:00
if (level === ButtonLevel.Recommended) return StyledButtonRecommended;
2020-09-15 15:01:07 +02:00
return StyledButtonSecondary;
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied;
const Button = React.forwardRef((props: Props, ref: any) => {
2020-09-15 15:01:07 +02:00
const iconOnly = props.iconName && !props.title;
const StyledButton = buttonClass(props.level);
function renderIcon() {
if (!props.iconName) return null;
return <StyledIcon aria-label={props.iconLabel} animation={props.iconAnimation} mr={iconOnly ? '0' : '6px'} color={props.color} className={props.iconName}/>;
2020-09-15 15:01:07 +02:00
}
function renderTitle() {
if (!props.title) return null;
return <StyledTitle color={props.color}>{props.title}</StyledTitle>;
2020-09-15 15:01:07 +02:00
}
function onClick() {
if (props.disabled) return;
props.onClick();
}
return (
<StyledButton ref={ref} fontSize={props.fontSize} isSquare={props.isSquare} size={props.size} style={props.style} disabled={props.disabled} title={props.tooltip} className={props.className} iconOnly={iconOnly} onClick={onClick}>
2020-09-15 15:01:07 +02:00
{renderIcon()}
{renderTitle()}
</StyledButton>
);
});
2021-01-20 00:58:09 +02:00
export default styled(Button)`${space}`;