@geneui/components/Timeline/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 { c as childrenOf } from '../index-a0e4e333.js';
import Icon from '../Icon/index.js';
import { s as styleInject } from '../style-inject.es-746bb8ed.js';
import '../dateValidation-67caec66.js';
import '../_commonjsHelpers-24198af3.js';
import 'react-dom';

var css_248z$1 = "[data-gene-ui-version=\"2.16.5\"] .timeline-item{display:flex;font-weight:600;line-height:1.36}[data-gene-ui-version=\"2.16.5\"] .timeline-item.c-success{--hero:var(--confirm);--hero-hover:var(--confirm-hover);--hero-sc:var(--confirm-sc);--hero-rgb:var(--confirm-rgb);--hero-sc-rgb:var(--confirm-sc-rgb)}[data-gene-ui-version=\"2.16.5\"] .timeline-item.c-danger{--hero:var(--danger);--hero-hover:var(--danger-hover);--hero-sc:var(--danger-sc);--hero-rgb:var(--danger-rgb);--hero-sc-rgb:var(--danger-sc-rgb)}[data-gene-ui-version=\"2.16.5\"] .timeline-item:not(:last-child).with-line .t-line:before{background:rgba(var(--background-sc-rgb),.1)}[data-gene-ui-version=\"2.16.5\"] .timeline-item:not(:last-child) .t-texts{padding:0 0 2rem}[data-gene-ui-version=\"2.16.5\"] .timeline-item>li{display:flex}[data-gene-ui-version=\"2.16.5\"] .timeline-item.a-default .t-texts>*+*{margin:0 0 0 1rem}html[dir=rtl] .timeline-item.a-default .t-texts>*+*{margin:0 1rem 0 0}[data-gene-ui-version=\"2.16.5\"] .timeline-item.a-compact .t-texts{flex-direction:column}[data-gene-ui-version=\"2.16.5\"] .timeline-item.a-compact .t-texts>*+*{margin:.5rem 0 0}[data-gene-ui-version=\"2.16.5\"] .timeline-item .t-line{flex-shrink:0;position:relative}[data-gene-ui-version=\"2.16.5\"] .timeline-item .t-line:before{content:\"\";display:block;height:100%;margin:0 .5rem;width:1px}[data-gene-ui-version=\"2.16.5\"] .timeline-item .t-texts{flex:auto;margin:0 0 0 1.5rem}html[dir=rtl] .timeline-item .t-texts{margin:0 1.5rem 0 0}[data-gene-ui-version=\"2.16.5\"] .timeline-item .t-description{color:rgba(var(--background-sc-rgb),.6);font:600 1.2rem/1.8rem var(--font-family)}[data-gene-ui-version=\"2.16.5\"] .timeline-item .t-description,[data-gene-ui-version=\"2.16.5\"] .timeline-item .t-title{max-width:100%}[data-gene-ui-version=\"2.16.5\"] .timeline-item .icon{background:var(--background);border-radius:100%;color:var(--hero);left:50%;position:absolute;top:0;transform:translate3d(-50%,-.3rem,0)}[data-gene-ui-version=\"2.16.5\"] .timeline-item .t-icon{background:var(--background);border:.2rem solid var(--hero);border-radius:100%;box-shadow:0 0 0 .4rem var(--background);font-size:1.5rem;height:1.1rem;left:0;position:absolute;top:.4rem;width:1.1rem}[data-gene-ui-version=\"2.16.5\"] .timeline-item .t-icon.bc-icon-loader{top:.2rem}";
styleInject(css_248z$1);

const timelineColors = ['hero', 'success', 'danger'];
const timelineAppearances = ['default', 'compact'];
function TimelineItem(props) {
  const {
    icon,
    title,
    color,
    withLine,
    isLoading,
    className,
    appearance,
    description,
    ...restProps
  } = props;
  return /*#__PURE__*/React__default.createElement("ul", _extends({
    className: classnames('timeline-item', "a-".concat(appearance), "c-".concat(color), className, {
      'with-line': withLine
    })
  }, restProps), /*#__PURE__*/React__default.createElement("li", {
    className: "t-line"
  }, isLoading ? /*#__PURE__*/React__default.createElement(Icon, {
    type: "bc-icon-loader"
  }) : icon ? /*#__PURE__*/React__default.createElement(Icon, {
    type: icon
  }) : /*#__PURE__*/React__default.createElement("div", {
    className: "t-icon"
  })), /*#__PURE__*/React__default.createElement("li", {
    className: "t-texts"
  }, !!title && /*#__PURE__*/React__default.createElement("div", {
    className: "t-title"
  }, title), !!description && /*#__PURE__*/React__default.createElement("div", {
    className: "t-description"
  }, description)));
}
TimelineItem.propTypes = {
  /**
   * Is loading state.
   */
  isLoading: PropTypes.bool,
  /**
   * Title for item
   */
  title: PropTypes.string,
  /**
   * Icon for item
   */
  icon: PropTypes.string,
  /**
   * Render line between items
   */
  withLine: PropTypes.bool,
  /**
   * Description fot item
   */
  description: PropTypes.string,
  /**
   * External/Additional className
   */
  className: PropTypes.string,
  /**
   * Different colors for items
   */
  color: PropTypes.oneOf(timelineColors),
  /**
   * Any valid React node.
   */
  appearance: PropTypes.oneOf(timelineAppearances)
};
TimelineItem.defaultProps = {
  color: timelineColors[0],
  withLine: true,
  appearance: timelineAppearances[0]
};

var css_248z = "[data-gene-ui-version=\"2.16.5\"] .timeline-holder{display:flex;flex-direction:column}";
styleInject(css_248z);

function Timeline(props) {
  const {
    children,
    className,
    ...restProps
  } = props;
  return /*#__PURE__*/React__default.createElement("div", _extends({
    className: classnames('timeline-holder', className)
  }, restProps), children);
}
Timeline.propTypes = {
  /**
   * External/Additional className
   */
  className: PropTypes.string,
  /**
   * Any valid React node.
   */
  children: childrenOf([TimelineItem])
};

export { Timeline, TimelineItem, timelineAppearances, timelineColors };