nishant-design-system/lib/components/Chip/Chip.js.flow

Sense UI components library

// @flow strict

import * as React from 'react';

import {classify} from '../../utils/classify';
import type {IconType} from '../Icon';
import {Icon} from '../Icon';
import {Truncate} from '../Truncate';

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


type ClassNames = $ReadOnly<{wrapper?: string}>;

export const CHIP_SEMANTIC = Object.freeze({
  primary: 'primary',
  information: 'information',
  success: 'success',
  warning: 'warning',
  danger: 'danger',
  secondary: 'secondary',
});

export type ChipSemanticType = $Values<typeof CHIP_SEMANTIC>;

export type BaseChipProps = {
  classNames?: ClassNames,
  semantic?: ChipSemanticType,
  children: React.Node,
  disabled?: boolean,
  onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
  onMouseEnter?: ?(SyntheticEvent<HTMLElement>) => mixed,
  onMouseLeave?: ?(SyntheticEvent<HTMLElement>) => mixed,
};

export type MediumChipProps = {
  ...BaseChipProps,
  size?: 'medium',
  iconName?: string,
  iconType?: IconType,
  dismissable?: boolean,
  onDismiss?: ?(SyntheticEvent<HTMLElement>) => mixed,
};

export type SmallChipProps = {
  ...BaseChipProps,
  size?: 'small',
};

export type ChipProps = MediumChipProps | SmallChipProps;
export const Chip: React$AbstractComponent<ChipProps, HTMLDivElement> =
  React.forwardRef<ChipProps, HTMLDivElement>(
    (
      {
        classNames,
        semantic = 'primary',
        size = 'medium',
        children,
        iconName = '',
        iconType = 'regular',
        dismissable = false,
        onDismiss = () => null,
        onClick,
        disabled,
        ...rest
      }: ChipProps,
      ref,
    ): React.Node => (
      <div
        data-testid="Chip"
        {...rest}
        ref={ref}
        className={classify(
          css.chipWrapper,
          {
            [css.primary]: semantic === CHIP_SEMANTIC.primary,
            [css.information]: semantic === CHIP_SEMANTIC.information,
            [css.success]: semantic === CHIP_SEMANTIC.success,
            [css.warning]: semantic === CHIP_SEMANTIC.warning,
            [css.danger]: semantic === CHIP_SEMANTIC.danger,
            [css.secondary]: semantic === CHIP_SEMANTIC.secondary,
            [css.medium]: size === 'medium',
            [css.small]: size === 'small',
            [css.dismissable]: dismissable,
            [css.withIcon]: !!iconName && size !== 'small',
            [css.disabled]: disabled,
          },
          classNames?.wrapper,
        )}
        onClick={onClick}
      >
        {iconName && size !== 'small' && (
          <Icon
            className={css.chipIcon}
            name={iconName}
            type={iconType}
            size="small"
          />
        )}
        <Truncate>{children}</Truncate>

        {dismissable && size !== 'small' && (
          <Icon
            className={css.dismissIcon}
            name="xmark"
            type={iconType}
            size="small"
            onClick={(event) => {
              event.stopPropagation();
              if (!disabled && onDismiss) {
                onDismiss(event);
              }
            }}
          />
        )}
      </div>
    ),
  );