@swrve/core/src/chip/Chip.jsx

Core set of Swrve UI Components

import React from 'react'
import classNames from 'classnames'
import propTypes from 'prop-types'

import { Icon } from '@swrve/icons'

class Chip extends React.Component {
  render() {
    const { children, className, id, theme, onDelete, innerRef, ...rest } = this.props

    const rootChipClassname = classNames(
      'sw-chip text-cloudWhite rounded-full text-xs inline-block relative',
      {
        'cursor-pointer': onDelete
      },
      'max-w-full',
      [`bg-${theme}-100`],
      className
    )
    const iconClassname = classNames(
      'sw-chip-button cursor-pointer hover:text-cloudWhite mr-1 align-middle focus-outline-none:focus h-4',
      [`text-${theme}-50`]
    )
    const labelClassnames = classNames(
      'flex items-center align-middle whitespace-no-wrap select-none truncate',
      {
        'px-3': !onDelete,
        'pl-3 pr-2': onDelete
      }
    )

    const handleDeleteClick = event => {
      onDelete(event, id)
    }

    const handleKeyPress = event => {
      // Delete Key
      if (event.keyCode === 8) {
        onDelete(event, id)
      }
    }

    return (
      <div ref={innerRef} className={rootChipClassname} contentEditable={false}>
        <span {...rest} className={labelClassnames}>
          {children}
        </span>
        {onDelete && (
          <button className={iconClassname} onClick={handleDeleteClick} onKeyDown={handleKeyPress}>
            <Icon name="cancel" />
          </button>
        )}
      </div>
    )
  }
}

Chip.displayName = 'Chip'

Chip.propTypes = {
  /** InnerRef  */
  innerRef: propTypes.func,
  /** Prop type description */
  children: propTypes.node,
  /** Extra CSS custom class */
  className: propTypes.string,
  /** Callback triggered on delete click event */
  onDelete: propTypes.func,
  /** Determines main style */
  theme: propTypes.oneOf([
    'primary',
    'secondary',
    'warning',
    'radicalRed',
    'dodgerBlue',
    'pictonBlue',
    'javaGreen',
    'limaGreen',
    'frenchRoseRed',
    'sunglowYellow',
    'electricViolet',
    'royalBlue',
    'lazyLavender',
    'orangePeel'
  ])
}

Chip.defaultProps = {
  theme: 'secondary'
}

export default Chip