@zohodesk/components/es/v1/Tag/Tag.js

In this Package, we Provide Some Basic Components to Build Web App

import React, { memo } from 'react';
import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes";
import { Icon } from '@zohodesk/icons';
import Avatar from "../Avatar/Avatar";
import { Container } from "../Layout";
import Button from "../semantic/Button/Button";
import { useUniqueId } from "../../Provider/IdProvider";
import style from "../../Tag/Tag.module.css";
/*
 * eslint css-modules/no-unused-class: [2, { markAsUsed: ['small', 'medium',
 * 'closedanger', 'closeprimary', 'default', 'danger', 'secondary',
 * 'pureDotted', 'primaryDotted'] }]
 */

/*
 * eslint css-modules/no-unused-class: [2, { markAsUsed: ['small', 'medium',
 * 'closedanger', 'closeprimary', 'default', 'danger', 'secondary',
 * 'pureDotted', 'primaryDotted'] }]
 */

function Tag(props) {
  let {
    imageURL,
    hasAvatar,
    text,
    onRemove,
    initial,
    active,
    size,
    rounded,
    palette,
    disabled,
    closePalette,
    onSelectTag,
    closeTitle,
    dataId,
    dataSelectorId,
    iconName,
    iconSize,
    tooltip,
    avatarPalette,
    customClass,
    customAttributes,
    a11y,
    needEffect,
    isReadOnly,
    id
  } = props;

  const handleSelect = e => {
    e && e.preventDefault();
    e.stopPropagation && e.stopPropagation();
    e.nativeEvent.stopImmediatePropagation && e.nativeEvent.stopImmediatePropagation();
    onSelectTag && onSelectTag(id, e);
  };

  const handleRemove = e => {
    e && e.preventDefault();
    e.stopPropagation && e.stopPropagation();
    e.nativeEvent.stopImmediatePropagation && e.nativeEvent.stopImmediatePropagation();
    onRemove && onRemove(id);
  };

  const getRef = el => {
    let {
      getRef
    } = props;
    getRef && getRef(el, id);
  };

  let {
    customTag = '',
    customTagClose = '',
    customTagIcon = '',
    customAvatar = ''
  } = customClass;
  let textSizes = size === 'small' ? style.smalltext : style.mediumtext;
  const getNextAriaId = useUniqueId();
  const getAriaId = getNextAriaId();
  let {
    clearLabel = 'Delete'
  } = a11y;
  let isDarkPalette = palette === 'dark';
  return /*#__PURE__*/React.createElement("div", {
    className: `${style.container} ${needEffect && !isReadOnly ? style.effect : style.readonly} ${active ? `${style.selected} ${style[`active${palette}`]}` : ''} ${onRemove ? active ? `${style[`active${size}Effect`]}` : '' : ''}  ${style[size]} ${rounded ? style.lgRadius : style.smRadius} ${style[palette]} ${disabled ? style.disabled : ''} ${onSelectTag ? style.pointer : ''} ${customTag}`,
    "data-id": active ? `${dataId}_TagSelected` : `${dataId}_Tag`,
    "data-test-id": active ? `${dataId}_TagSelected` : `${dataId}_Tag`,
    onClick: handleSelect,
    ref: getRef,
    "data-title": tooltip ? tooltip : text,
    tabIndex: disabled ? '-1' : '0',
    "aria-labelledby": getAriaId,
    "data-selector-id": dataSelectorId,
    ...customAttributes
  }, hasAvatar ? /*#__PURE__*/React.createElement("div", {
    className: style.avatar
  }, /*#__PURE__*/React.createElement(Avatar, {
    palette: isDarkPalette ? 'info' : avatarPalette,
    name: initial,
    size: "small",
    src: imageURL,
    textPalette: isDarkPalette ? 'white' : '',
    customClass: customAvatar
  })) : null, iconName ? /*#__PURE__*/React.createElement("div", {
    className: `${style.icon} ${customTagIcon}`,
    "aria-hidden": true
  }, /*#__PURE__*/React.createElement(Icon, {
    name: iconName,
    size: iconSize
  })) : null, /*#__PURE__*/React.createElement("div", {
    className: `${style.text} ${textSizes}`,
    "aria-hidden": true,
    id: getAriaId
  }, text), onRemove && /*#__PURE__*/React.createElement(Button, {
    customClass: `${style.close} ${active ? style[`active${closePalette}Close`] : ''}
          ${rounded ? style.lgRadiusClose : style.smRadiusClose} ${isDarkPalette ? style.darkTagClose : ''}
          ${customTagClose} ${style[`close${closePalette}`]}`,
    dataId: `${dataId}_RemoveTag`,
    title: closeTitle,
    onClick: handleRemove,
    a11y: {
      ariaLabel: clearLabel
    }
  }, /*#__PURE__*/React.createElement(Container, {
    align: "both"
  }, /*#__PURE__*/React.createElement(Icon, {
    isBold: true,
    name: "ZD-close2",
    size: "8"
  }))));
}

Tag.defaultProps = defaultProps;
Tag.propTypes = propTypes;
const MemoizedTag = /*#__PURE__*/memo(Tag);
MemoizedTag.propTypes = propTypes;
MemoizedTag.defaultProps = defaultProps;
MemoizedTag.displayName = 'Tag';
export default MemoizedTag;