@geneui/components/Status/index.js

The Gene UI components library designed for BI tools

import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
import React__default from 'react';
import PropTypes from 'prop-types';
import { c as classnames } from '../index-031ff73c.js';
import Icon from '../Icon/index.js';
import { T as Tooltip } from '../index-6d7e99cd.js';
import { s as styleInject } from '../style-inject.es-746bb8ed.js';
import '../tslib.es6-f211516f.js';
import 'react-dom';
import '../dateValidation-67caec66.js';
import '../_commonjsHelpers-24198af3.js';
import '../hooks/useDeviceType.js';
import '../configs-00612ce0.js';
import '../hooks/useWindowSize.js';
import '../hooks/useDebounce.js';
import '../GeneUIProvider/index.js';

var css_248z = "[data-gene-ui-version=\"2.16.5\"] .static-title-holder{align-items:flex-start;display:inline-flex;flex-direction:column;max-width:100%;vertical-align:top}[data-gene-ui-version=\"2.16.5\"] .static-title-holder .st-t{font:600 1.4rem/1.8rem var(--font-family);margin:0 0 .4rem;opacity:.5;padding:0 var(--static-title-padding,0)}[data-gene-ui-version=\"2.16.5\"] .static-title-holder .st-c{max-width:100%}[data-gene-ui-version=\"2.16.5\"] .static-title-holder .st-c:nth-child(2){align-items:center;display:flex;min-height:3.2rem}[data-gene-ui-version=\"2.16.5\"] .static-title-holder.f-full-width,[data-gene-ui-version=\"2.16.5\"] .static-title-holder.f-full-width .st-c{width:100%}[data-gene-ui-version=\"2.16.5\"] .status-holder{align-items:center;display:flex;font:600 1.4rem/2.4rem var(--font-family)}[data-gene-ui-version=\"2.16.5\"] .status-holder p{height:2.4rem;overflow:hidden}[data-gene-ui-version=\"2.16.5\"] .status-holder span{display:block;overflow:hidden}[data-gene-ui-version=\"2.16.5\"] .status-holder>*+*{margin:0 0 0 .7rem}html[dir=rtl] .status-holder>*+*{margin:0 .7rem 0 0}[data-gene-ui-version=\"2.16.5\"] .status-holder .status-icon{align-items:center;color:var(--hero);display:flex;height:3rem;justify-content:center;position:relative;transition:color .3s,opacity .3s;width:3rem}[data-gene-ui-version=\"2.16.5\"] .status-holder .status-icon:after,[data-gene-ui-version=\"2.16.5\"] .status-holder .status-icon:before{border-radius:100%;content:\"\";display:block;height:100%;left:0;opacity:0;position:absolute;top:0;transition:opacity .3s,background .3s,border-color .3s;width:100%}[data-gene-ui-version=\"2.16.5\"] .status-holder .status-icon:before{background:var(--hero)}[data-gene-ui-version=\"2.16.5\"] .status-holder .status-icon:after{border:1px solid var(--hero)}[data-gene-ui-version=\"2.16.5\"] .status-holder .status-icon .icon{position:relative;z-index:2}[data-gene-ui-version=\"2.16.5\"] .status-holder:hover .hover-text+span,[data-gene-ui-version=\"2.16.5\"] .status-holder:not(:hover) .hover-text{height:0}@media (hover:hover){[data-gene-ui-version=\"2.16.5\"] .status-holder.clickable:hover .status-icon:before{opacity:.05}[data-gene-ui-version=\"2.16.5\"] .status-holder.clickable:hover .status-icon:after{opacity:.66}}";
styleInject(css_248z);

const statusIconTypes = ['dot', 'play', 'stop', 'circle', 'circle-outline'];
const statusEnums = {
  dot: 'bc-icon-dot',
  play: 'bc-icon-status-play',
  stop: 'bc-icon-status-stop',
  circle: 'bc-icon-status-circle',
  'circle-outline': 'bc-icon-status-circle-outline'
};
function Status(_ref) {
  let {
    label,
    color,
    title,
    onClick,
    iconType,
    hoverTitle,
    className,
    tooltipText,
    ...restProps
  } = _ref;
  const Content = /*#__PURE__*/React__default.createElement("ul", _extends({
    className: "static-title-holder"
  }, restProps), label && /*#__PURE__*/React__default.createElement("li", {
    className: "st-t"
  }, label), /*#__PURE__*/React__default.createElement("li", {
    className: "st-c"
  }, /*#__PURE__*/React__default.createElement("div", {
    className: classnames('status-holder', "c-".concat(color), className, {
      clickable: !!hoverTitle,
      'cursor-pointer': !!onClick
    }),
    onClick: onClick,
    style: {
      '--hero': color
    }
  }, /*#__PURE__*/React__default.createElement("div", {
    className: "status-icon"
  }, /*#__PURE__*/React__default.createElement(Icon, {
    type: statusEnums[iconType]
  })), title && /*#__PURE__*/React__default.createElement("p", null, hoverTitle && /*#__PURE__*/React__default.createElement("span", {
    className: "hover-text"
  }, hoverTitle), /*#__PURE__*/React__default.createElement("span", null, title)))));
  return tooltipText ? /*#__PURE__*/React__default.createElement(Tooltip, {
    position: "auto",
    title: tooltipText
  }, Content) : Content;
}
Status.propTypes = {
  /**
   * Label for 'Status'.
   */
  label: PropTypes.string,
  /**
   * Title for 'Status'.
   */
  title: PropTypes.string,
  /**
   * Fires an event on 'Status' change((event: Event) => void).
   */
  onClick: PropTypes.func,
  /**
   * External/Additional className that can be added to 'Status' component.
   */
  className: PropTypes.string,
  /**
   * Title for hovered state 'Status'.
   */
  hoverTitle: PropTypes.string,
  /**
   * Text for tooltip.
   */
  tooltipText: PropTypes.string,
  /**
   * External color className
   */
  color: PropTypes.string,
  /**
   * Various types for icon
   */
  iconType: PropTypes.oneOf(statusIconTypes)
};

export { Status as default, statusIconTypes };