@spaced-out/ui-design-system/lib/components/Icon/ClickableIcon.js.flow

Sense UI components library

// @flow strict

import * as React from 'react';

import type {ColorTypes} from '../../types/typography';
import classify from '../../utils/classify';
import {UnstyledButton} from '../Button';
import {TEXT_COLORS} from '../Text';

import type {IconProps, IconSize, IconType} from './';
import {Icon} from './';

import css from './ClickableIcon.module.css';


type ClassNames = $ReadOnly<{
  icon?: string,
  button?: string,
}>;

export type ClickableIconProps = {
  ...IconProps,
  disabled?: boolean,
  classNames?: ClassNames,
};

export const ClickableIcon: React$AbstractComponent<
  ClickableIconProps,
  HTMLButtonElement,
> = React.forwardRef<ClickableIconProps, HTMLButtonElement>(
  (
    {
      size = 'medium',
      ariaLabel,
      onClick,
      className, // Deprecated for Clickable Icon
      classNames,
      disabled = false,
      ...props
    }: ClickableIconProps,
    ref,
  ) => {
    const onKeyDownHandler = (e) => {
      if (e.key === 'Enter') {
        e.preventDefault();
        onClick && onClick(e);
      }
    };
    return (
      <UnstyledButton
        {...props}
        onClick={onClick}
        disabled={disabled}
        onKeyDown={onKeyDownHandler}
        ariaLabel={ariaLabel}
        className={classify(
          css.button,
          {
            [css.small]: size === 'small',
            [css.medium]: size === 'medium',
            [css.large]: size === 'large',
          },
          classNames?.button,
        )}
        ref={ref}
      >
        <Icon
          {...props}
          size={size}
          color={disabled ? TEXT_COLORS.disabled : props.color}
          className={classNames?.icon || className}
        />
      </UnstyledButton>
    );
  },
);

export type CloseIconProps = {
  size?: IconSize,
  type?: IconType,
  color?: ColorTypes,
  onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
  className?: string, // Deprecated for Clickable Icon
  ariaLabel?: string,
  disabled?: boolean,
  classNames?: ClassNames,
};

export const CloseIcon: React$AbstractComponent<
  CloseIconProps,
  HTMLButtonElement,
> = React.forwardRef<CloseIconProps, HTMLButtonElement>(
  (
    {
      size = 'medium',
      type = 'regular',
      color = TEXT_COLORS.primary,
      ...props
    }: CloseIconProps,
    ref,
  ) => (
    <ClickableIcon
      name="close"
      size={size}
      type={type}
      color={color}
      {...props}
      ref={ref}
    />
  ),
);