@geneui/components/Title/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 { t as titleConfig } from '../configs-00612ce0.js';
import Icon from '../Icon/index.js';
import { s as styleInject } from '../style-inject.es-746bb8ed.js';

var css_248z = "[data-gene-ui-version=\"2.16.5\"] .title-holder{align-items:center;display:flex;font:600 1.4rem/1.8rem var(--font-family);min-height:3.2rem;width:100%}[data-gene-ui-version=\"2.16.5\"] .title-holder.c-hero .title-text{color:var(--hero)}[data-gene-ui-version=\"2.16.5\"] .title-holder>li{align-items:center;display:flex;flex-shrink:0}[data-gene-ui-version=\"2.16.5\"] .title-holder>li.line{flex:auto}[data-gene-ui-version=\"2.16.5\"] .title-holder>li.line i{background:rgba(var(--background-sc-rgb),.1);display:block;height:1px;width:100%}[data-gene-ui-version=\"2.16.5\"] .title-holder>li~li{margin:0 0 0 1rem}html[dir=rtl] .title-holder>li~li{margin:0 1rem 0 0}[data-gene-ui-version=\"2.16.5\"] .title-holder .divider{margin:0 1rem}";
styleInject(css_248z);

function Title(_ref) {
  let {
    icon,
    text,
    actions,
    color,
    withLine,
    className,
    ...restProps
  } = _ref;
  return /*#__PURE__*/React__default.createElement("ul", _extends({
    className: classnames('title-holder', "c-".concat(color), className)
  }, restProps), icon && /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(Icon, {
    type: icon
  })), /*#__PURE__*/React__default.createElement("li", {
    className: "title-text"
  }, /*#__PURE__*/React__default.createElement("div", {
    className: "ellipsis-text"
  }, text)), /*#__PURE__*/React__default.createElement("li", {
    className: "line"
  }, withLine && /*#__PURE__*/React__default.createElement("i", null)), actions && /*#__PURE__*/React__default.createElement("li", null, actions));
}
Title.propTypes = {
  /**
   * Display an icon. Values are the same as "Icon" atoms type prop
   */
  icon: PropTypes.string,
  /**
   * Text/Component to be displayed. Any valid React node
   */
  text: PropTypes.node.isRequired,
  /**
   * Actions to be displayed. Any valid React node
   */
  actions: PropTypes.node,
  /**
   * Title color
   */
  color: PropTypes.oneOf(titleConfig.color),
  /**
   * Displays a divider line
   */
  withLine: PropTypes.bool,
  /**
   * Additional className
   */
  className: PropTypes.string
};
Title.defaultProps = {
  color: titleConfig.color[1],
  withLine: false
};

export { Title as default };