AFFiNE-Mirror/packages/component/src/ui/button/styles.ts

import type { CSSProperties } from 'react';

import { displayInlineFlex, styled } from '../../styles';
import type { ButtonProps } from './interface';
import { getButtonColors, getSize } from './utils';

export const StyledIconButton = styled('button', {
  shouldForwardProp: prop => {
    return ![
      'borderRadius',
      'top',
      'right',
      'width',
      'height',
      'hoverBackground',
      'hoverColor',
      'hoverStyle',
      'fontSize',
    ].includes(prop as string);
  },
})<{
  width: number;
  height: number;
  borderRadius: number;
  disabled?: boolean;
  hoverBackground?: CSSProperties['background'];
  hoverColor?: string;
  hoverStyle?: CSSProperties;
  // In some cases, button is in a normal hover status, it should be darkened
  fontSize?: CSSProperties['fontSize'];
}>(({
  width,
  height,
  borderRadius,
  disabled,
  hoverBackground,
  hoverColor,
  hoverStyle,
  fontSize,
}) => {
  return {
    width,
    height,
    fontSize,
    WebkitAppRegion: 'no-drag',
    color: 'var(--affine-icon-color)',
    ...displayInlineFlex('center', 'center'),
    ...(disabled ? { cursor: 'not-allowed', pointerEvents: 'none' } : {}),
    transition: 'background .15s',
    borderRadius,

    ':hover': {
      color: hoverColor ?? 'var(--affine-icon-color)',
      background: hoverBackground || 'var(--affine-hover-color)',
      ...(hoverStyle ?? {}),
    },
  };
});

export const StyledTextButton = styled('button', {
  shouldForwardProp: prop => {
    return ![
      'borderRadius',
      'top',
      'right',
      'width',
      'height',
      'hoverBackground',
      'hoverColor',
      'hoverStyle',
      'bold',
    ].includes(prop as string);
  },
})<
  Pick<
    ButtonProps,
    | 'size'
    | 'disabled'
    | 'hoverBackground'
    | 'hoverColor'
    | 'hoverStyle'
    | 'shape'
    | 'type'
    | 'bold'
  >
>(({
  size = 'default',
  disabled,
  hoverBackground,
  hoverColor,
  hoverStyle,
  bold = false,
  shape = 'default',
  // TODO: Implement type
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  // type = 'default',
}) => {
  const { fontSize, borderRadius, padding, height } = getSize(size);

  return {
    height,
    paddingLeft: padding,
    paddingRight: padding,
    ...displayInlineFlex('flex-start', 'center'),
    position: 'relative',
    ...(disabled ? { cursor: 'not-allowed', pointerEvents: 'none' } : {}),
    transition: 'background .15s',
    // TODO: Implement circle shape
    borderRadius: shape === 'default' ? borderRadius : height / 2,
    fontSize,
    fontWeight: bold ? '500' : '400',

    ':hover': {
      color: hoverColor ?? 'var(--affine-primary-color)',
      background: hoverBackground ?? 'var(--affine-hover-color)',
      ...(hoverStyle ?? {}),
    },
  };
});

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 ?? {}),
    // },
  };
});