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

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

import React, { PureComponent } 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 { getUniqueId } from "../Provider/IdProvider";
import style from "./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'] }]
 */

export default class Tag extends PureComponent {
  constructor(props) {
    super(props);
    this.handleSelect = this.handleSelect.bind(this);
    this.handleRemove = this.handleRemove.bind(this);
    this.getRef = this.getRef.bind(this);
    this.getNextAriaId = getUniqueId(this);
  }

  handleSelect(e) {
    let {
      id,
      onSelectTag = null
    } = this.props;
    e && e.preventDefault();
    e.stopPropagation && e.stopPropagation();
    e.nativeEvent.stopImmediatePropagation && e.nativeEvent.stopImmediatePropagation();
    onSelectTag && onSelectTag(id, e);
  }

  handleRemove(e) {
    let {
      onRemove,
      id
    } = this.props;
    e && e.preventDefault();
    e.stopPropagation && e.stopPropagation();
    e.nativeEvent.stopImmediatePropagation && e.nativeEvent.stopImmediatePropagation();
    onRemove && onRemove(id, e);
  }

  getRef(el) {
    let {
      getRef,
      id
    } = this.props;
    getRef && getRef(el, id);
  }

  render() {
    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,
      customProps
    } = this.props;
    const {
      avatarProps = {},
      iconProps = {}
    } = customProps;
    let {
      customTag = '',
      customTagClose = '',
      customTagIcon = '',
      customAvatar = ''
    } = customClass;
    let textSizes = size === 'small' ? style.smalltext : style.mediumtext;
    let getAriaId = this.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: this.handleSelect,
      ref: this.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,
      ...avatarProps
    })) : null, iconName ? /*#__PURE__*/React.createElement("div", {
      className: `${style.icon} ${customTagIcon}`,
      "aria-hidden": true
    }, /*#__PURE__*/React.createElement(Icon, {
      name: iconName,
      size: iconSize,
      ...iconProps
    })) : 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: this.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; // if (__DOCS__) {
//   Tag.docs = {
//     componentGroup: 'Molecule',
//     folderName: 'Style Guide'
//   };
// }