saagie-ui/src/react/projects/instanceQuickview/InstanceQuickviewDot.js

Saagie UI from Saagie Design System

import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';

import { Status } from '../status/Status';
import { Tooltip } from '../../core/atoms/tooltip/Tooltip';
import { modifierCSS } from '../../helpers';

const propTypes = {
  /**
   * The component used for the root node.
   * Either a string to use a DOM element or a component.
   */
  tag: PropTypes.elementType,
  className: PropTypes.string,
  defaultClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
  defaultPlacement: PropTypes.string,
  instanceInfos: PropTypes.oneOfType([
    PropTypes.arrayOf(
      PropTypes.shape({
        main: PropTypes.string,
        secondary: PropTypes.string,
      })
    ),
    PropTypes.shape({
      main: PropTypes.string,
      secondary: PropTypes.string,
    }),
  ]),
  isStack: PropTypes.bool,
  status: PropTypes.oneOf(['awaiting', 'requested', 'queued', 'running', 'succeeded', 'stopping', 'stopped', 'skipped', 'failed']).isRequired,
};

const defaultProps = {
  tag: 'span',
  className: '',
  defaultClassName: 'sui-prj-instance-quickview__dot',
  defaultPlacement: 'top',
  instanceInfos: { main: '', secondary: '' },
  isStack: false,
};

export const InstanceQuickviewDot = ({
  tag: Tag,
  defaultClassName,
  defaultPlacement,
  instanceInfos,
  isStack,
  className,
  status,
  ...props
}) => {
  const classes = classnames(
    defaultClassName,
    modifierCSS(status),
    className
  );

  return (
    <Tooltip
      size="md"
      hideDelay
      hideDelayCustomTimeOut={0.05}
      isLight
      defaultPlacement="top"
      label={(isStack
        ? instanceInfos.map((instance) => (
          <div
            className="sui-prj-instance-quickview__tooltip-content as--stack"
            key={`instance_${Math.floor(Math.random() * new Date().getTime())}`}
          >
            {instance.main && (
              <span>
                {instance.main}
              </span>
            )}
            {instance.secondary && (
              <small>
                <i>{instance.secondary}</i>
              </small>
            )}
            <Status name={status} size="sm" />
          </div>
        )) : (
          <div className="sui-prj-instance-quickview__tooltip-content">
            {instanceInfos.main && (
              <span>
                {instanceInfos.main}
              </span>
            )}
            {instanceInfos.secondary && (
              <small>
                <i>{instanceInfos.secondary}</i>
              </small>
            )}
            <span>
              <Status name={status} size="sm" />
            </span>
          </div>
        )
      )}
    >
      <Tag
        className={classes}
        {...props}
      />
    </Tooltip>
  );
};

InstanceQuickviewDot.propTypes = propTypes;
InstanceQuickviewDot.defaultProps = defaultProps;