@zohodesk/dot/es/v1/ChannelIcon/ChannelIcon.js

In this Library, we Provide Some Basic Components to Build Your Application

import React, { Component } from 'react';
import { Icon } from '@zohodesk/icons';
import Avatar from '@zohodesk/components/es/v1/Avatar/Avatar';
import AvatarIcon from "../avatar/AvatarIcon/AvatarIcon";
import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes";
import { getChannelMappingObj } from "../utils/ChannelIconMapping";
import style from "../../ChannelIcon/ChannelIcon.module.css";

const ChannelIcon = props => {
  let {
    name,
    action,
    iconSize,
    iconTitle,
    size,
    topicIcon,
    topicIconTitle,
    topicIconSize,
    topicIconColor,
    iconClass,
    dataId,
    className,
    palette,
    textPalette,
    customTextClass,
    iconColor,
    needTopicBorder,
    topicClass,
    renderIconOnly,
    iconName,
    title,
    dataSelectorId
  } = props;
  let defaultChannelObj = name && !iconName && getChannelMappingObj()[name.toUpperCase()];
  let customizedChannelName = null;

  if (!defaultChannelObj) {
    customizedChannelName = name;
  } else {
    iconName = defaultChannelObj[action];
  }

  return /*#__PURE__*/React.createElement("span", {
    className: style.container,
    "data-selector-id": dataSelectorId
  }, customizedChannelName ? /*#__PURE__*/React.createElement(Avatar, {
    name: customizedChannelName,
    size: size,
    palette: palette,
    textPalette: textPalette,
    customClass: customTextClass,
    dataId: dataId,
    needTitle: title,
    title: title
  }) : !renderIconOnly ? iconName ? /*#__PURE__*/React.createElement(AvatarIcon, {
    name: iconName,
    iconSize: iconSize,
    size: size,
    iconClass: `${style.iconStyle} ${name && action ? style[`${name.toLowerCase()}_${action.toLowerCase()}`] : ''} ${iconClass ? iconClass : ''} `,
    dataId: dataId,
    className: className,
    iconColor: iconColor,
    title: iconTitle
  }) : /*#__PURE__*/React.createElement(Avatar, {
    name: name,
    size: size,
    palette: palette,
    textPalette: textPalette,
    customClass: customTextClass,
    dataId: dataId,
    needTitle: title,
    title: title
  }) : /*#__PURE__*/React.createElement(Icon, {
    name: iconName,
    size: iconSize,
    iconClass: `${iconClass ? iconClass : ''} ${style.iconStyle} ${name && action ? style[`${name.toLowerCase()}_${action.toLowerCase()}`] : ''}`,
    title: iconTitle,
    dataId: dataId
  }), topicIcon ? /*#__PURE__*/React.createElement("span", {
    className: `${style.thread} ${needTopicBorder ? style.threadBorder : ''} ${topicClass ? topicClass : ''}`,
    "data-title": topicIconTitle
  }, /*#__PURE__*/React.createElement(Icon, {
    name: topicIcon,
    size: topicIconSize,
    iconClass: style[`topic_${topicIconColor}`] ? `${style.topicIcon} ${style[`topic_${topicIconColor}`]}` : '',
    dataId: dataId
  })) : null);
};

ChannelIcon.defaultProps = defaultProps;
ChannelIcon.propTypes = propTypes;
export default ChannelIcon;