mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-12 20:38:52 +00:00
94 lines
2.1 KiB
TypeScript
94 lines
2.1 KiB
TypeScript
import { displayInlineFlex, styled } from '../../styles';
|
|
import type { ButtonProps } from './interface';
|
|
import { getButtonColors, getSize } from './utils';
|
|
|
|
export const StyledButton = styled('button', {
|
|
shouldForwardProp: prop => {
|
|
return ![
|
|
'hoverBackground',
|
|
'shape',
|
|
'hoverColor',
|
|
'hoverStyle',
|
|
'type',
|
|
'bold',
|
|
'noBorder',
|
|
].includes(prop as string);
|
|
},
|
|
})<
|
|
Pick<
|
|
ButtonProps,
|
|
| 'size'
|
|
| 'disabled'
|
|
| 'hoverBackground'
|
|
| 'hoverColor'
|
|
| 'hoverStyle'
|
|
| 'shape'
|
|
| 'type'
|
|
| 'bold'
|
|
| 'noBorder'
|
|
>
|
|
>(({
|
|
theme,
|
|
size = 'default',
|
|
disabled,
|
|
hoverBackground,
|
|
hoverColor,
|
|
hoverStyle,
|
|
bold = false,
|
|
shape = 'default',
|
|
type = 'default',
|
|
noBorder = false,
|
|
}) => {
|
|
const { fontSize, borderRadius, padding, height } = getSize(size);
|
|
|
|
return {
|
|
height,
|
|
paddingLeft: padding,
|
|
paddingRight: padding,
|
|
border: noBorder ? 'none' : '1px solid',
|
|
WebkitAppRegion: 'no-drag',
|
|
...displayInlineFlex('center', 'center'),
|
|
gap: '8px',
|
|
position: 'relative',
|
|
// TODO: disabled color is not decided
|
|
...(disabled
|
|
? {
|
|
cursor: 'not-allowed',
|
|
pointerEvents: 'none',
|
|
color: 'var(--affine-text-disable-color)',
|
|
}
|
|
: {}),
|
|
// TODO: Implement circle shape
|
|
borderRadius: shape === 'default' ? borderRadius : height / 2,
|
|
fontSize,
|
|
fontWeight: bold ? '500' : '400',
|
|
'.affine-button-icon': {
|
|
color: 'var(--affine-icon-color)',
|
|
},
|
|
'.affine-button-icon__fixed': {
|
|
color: 'var(--affine-icon-color)',
|
|
},
|
|
'>span': {
|
|
width: 'max-content',
|
|
},
|
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
// @ts-ignore
|
|
...getButtonColors(theme, type, disabled, {
|
|
hoverBackground,
|
|
hoverColor,
|
|
hoverStyle,
|
|
}),
|
|
|
|
// TODO: disabled hover should be implemented
|
|
//
|
|
// ':hover': {
|
|
// color: hoverColor ?? 'var(--affine-primary-color)',
|
|
// background: hoverBackground ?? 'var(--affine-hover-color)',
|
|
// '.affine-button-icon':{
|
|
//
|
|
// }
|
|
// ...(hoverStyle ?? {}),
|
|
// },
|
|
};
|
|
});
|