gistfile1.txt

// React libraries
import React, { FC, useState } from 'react';
import CSS from 'csstype';

// third party libraries
import { Icon, Tag as AntdTag } from 'antd';
import {
  CheckTagProps,
  CrossTagProps,
  IconProps,
  IconTagProps,
  TagProps,
  VisibilityType,
} from './interfaces';
import styles from './Tag.module.scss';
import { log } from 'util';

let className;

const BaseTag: FC<TagProps> = (props) => {
  const { color, textTag, opacity, size } = props;
  color !== 'default'
    ? (className = `ant-tag-${size} ant-tag-${color}`)
    : (className = `ant-tag-${size} ant-tag-default`);
  const style = [styles.tag, className, styles.position].join(' ');
  const tagStyle: CSS.Properties = { opacity };

  return (
    <AntdTag style={tagStyle} className={style}>
      {size === 'small' ? (
        <span style={{ fontSize: '12px' }}>{textTag}</span>
      ) : (
        <span>{textTag}</span>
      )}
    </AntdTag>
  );
};

const IconLeft: FC<IconProps> = (props) => {
  return (
    <>
      {props.color === 'default' ? (
        <Icon
          className={styles.icon}
          type={props.iconType}
          style={{ marginRight: '10px' }}
        />
      ) : (
        <Icon
          className={styles.icon}
          type={props.iconType}
          style={{ color: `${props.color}`, marginRight: '10px' }}
        />
      )}
      {props.size === 'small' ? (
        <span style={{ fontSize: '12px', margin: '8px' }} className="text">
          {props.textTag}
        </span>
      ) : (
        <span className="text">{props.textTag}</span>
      )}
    </>
  );
};

const IconRight: FC<IconProps> = (props) => {
  console.log(`ICON RIGHT ${props.color}`);
  return (
    <>
      {props.size === 'small' ? (
        <span style={{ fontSize: '12px', margin: '8px' }} className="text">
          {props.textTag}
        </span>
      ) : (
        <span className="text">{props.textTag}</span>
      )}
      {props.color === 'default' ? (
        <Icon
          className={styles.icon}
          type={props.iconType}
          style={{ marginLeft: '10px' }}
        />
      ) : (
        <Icon
          className={styles.icon}
          type={props.iconType}
          style={{ color: `${props.color}`, marginLeft: '10px' }}
        />
      )}
    </>
  );
};

const IconTag: FC<IconTagProps> = (props) => {
  if (props.position === 'left') {
    return <IconLeft {...props} />;
  } else {
    return <IconRight {...props} />;
  }
};

const CheckTag: FC<CheckTagProps> = (props) => {
  const { color, textTag, opacity, size, position } = props;
  color !== 'default'
    ? (className = `ant-tag-icon-${size} ant-tag-${color}`)
    : (className = `ant-tag-icon-${size} ant-tag-default`);

  const style = [styles.tag, className, styles.position].join(' ');

  const [visibility, changeVisibility] = useState<VisibilityType>('visible');
  const handleChange = () => {
    changeVisibility('hidden');
  };
  const tagStyle: CSS.Properties = {
    opacity,
    visibility,
  };

  return (
    <AntdTag
      onClick={handleChange}
      style={tagStyle}
      className={[style, 'close'].join('')}>
      <IconTag {...props} />
    </AntdTag>
  );
};

const CrossTag: FC<CrossTagProps> = (props) => {
  const { color, opacity, size, position } = props;
  color !== 'default'
    ? (className = `ant-tag-icon-${size} ant-tag-${color}`)
    : (className = `ant-tag-icon-${size} ant-tag-default`);
  console.log(className);
  const style = [styles.tag, className, styles.position].join(' ');

  const [visibility, changeVisibility] = useState<VisibilityType>('visible');
  const handleChange = () => {
    changeVisibility('hidden');
  };
  const tagStyle: CSS.Properties = {
    opacity,
    visibility,
  };
  return (
    <AntdTag onClick={handleChange} style={tagStyle} className={style}>
      <IconTag {...props} />
    </AntdTag>
  );
};

const Tag = {
  BaseTag,
  CheckTag,
  CrossTag,
};

export default Tag;