@geneui/components
Version:
The Gene UI components library designed for BI tools
145 lines (141 loc) • 7.01 kB
JavaScript
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 { b as moduleTitleConfig } from '../configs-00612ce0.js';
import { n as noop } from '../index-a0e4e333.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 '../dateValidation-67caec66.js';
import '../_commonjsHelpers-24198af3.js';
import 'react-dom';
import '../tslib.es6-f211516f.js';
import '../hooks/useDeviceType.js';
import '../hooks/useWindowSize.js';
import '../hooks/useDebounce.js';
import '../GeneUIProvider/index.js';
var css_248z = "[data-gene-ui-version=\"2.16.5\"] .module-header{background:var(--background);display:flex;flex-shrink:0;height:5rem;padding:0 .5rem 0 2rem;width:100%}html[dir=rtl] .module-header{padding:0 2rem 0 .5rem}[data-gene-ui-version=\"2.16.5\"] .module-header.headerBorder.p-top{border-bottom:1px solid rgba(var(--background-sc-rgb),.1)}[data-gene-ui-version=\"2.16.5\"] .module-header.headerBorder.p-top.cr-position-radius{border-radius:2rem 2rem 0 0}[data-gene-ui-version=\"2.16.5\"] .module-header.headerBorder.p-bottom{border-top:1px solid rgba(var(--background-sc-rgb),.1)}[data-gene-ui-version=\"2.16.5\"] .module-header.headerBorder.p-bottom.cr-position-radius{border-radius:0 0 2rem 2rem}[data-gene-ui-version=\"2.16.5\"] .module-header.cr-full-radius{border-radius:2rem}[data-gene-ui-version=\"2.16.5\"] .module-header>li{align-items:center;display:flex}[data-gene-ui-version=\"2.16.5\"] .module-header>li.left-content{flex:auto;overflow:hidden;position:relative}[data-gene-ui-version=\"2.16.5\"] .module-header>li.left-content .left-inner{max-width:100%}[data-gene-ui-version=\"2.16.5\"] .module-header>li.left-content .left-inner:nth-last-child(2){max-width:calc(100% - 3.2rem)}[data-gene-ui-version=\"2.16.5\"] .module-header>li.left-content .left-inner-icon{margin-inline-start:.8rem}[data-gene-ui-version=\"2.16.5\"] .module-header>li.right-content{flex-shrink:0}[data-gene-ui-version=\"2.16.5\"] .module-header.s-small{height:3rem}[data-gene-ui-version=\"2.16.5\"] .module-header.s-small .module-description-title .m-title,[data-gene-ui-version=\"2.16.5\"] .module-header.s-small .module-title{font-size:1.2rem;line-height:normal}[data-gene-ui-version=\"2.16.5\"] .module-header.s-medium{height:4rem}[data-gene-ui-version=\"2.16.5\"] .module-header.s-extra-big{height:6rem}[data-gene-ui-version=\"2.16.5\"] .module-title{font:600 1.4rem/1.8rem var(--font-family)}[data-gene-ui-version=\"2.16.5\"] .module-title:before{background:var(--hero);content:\"\";display:block;height:.3rem;position:absolute;width:3.4rem}html:not([dir=rtl]) .module-title:before{left:0}html[dir=rtl] .module-title:before{right:0}[data-gene-ui-version=\"2.16.5\"] .p-top .module-title:before{bottom:0}[data-gene-ui-version=\"2.16.5\"] .p-bottom .module-title:before{top:0}[data-gene-ui-version=\"2.16.5\"] .module-title-without-border{font:600 1.4rem/1.8rem var(--font-family)}[data-gene-ui-version=\"2.16.5\"] .module-description-title{width:100%}[data-gene-ui-version=\"2.16.5\"] .module-description-title .m-description{font:600 1.2rem/1.6rem var(--font-family)}[data-gene-ui-version=\"2.16.5\"] .module-description-title .m-title{font:600 1.6rem/2.8rem var(--font-family)}";
styleInject(css_248z);
function IconWithTooltip(_ref) {
let {
toolTip,
children
} = _ref;
return toolTip ? /*#__PURE__*/React__default.createElement(Tooltip, {
title: toolTip
}, children) : children;
}
function ModuleTitle(_ref2) {
let {
size,
title,
color,
hideBeforeBorder,
position,
children,
className,
description,
cornerRadius,
headerBorder,
titleIcon,
titleIconTooltip,
onTitleIconClick,
...restProps
} = _ref2;
return /*#__PURE__*/React__default.createElement("ul", _extends({
className: classnames('module-header', "cr-".concat(cornerRadius), "p-".concat(position), "s-".concat(size), className, {
headerBorder
})
}, restProps), /*#__PURE__*/React__default.createElement("li", {
className: "left-content",
style: {
'--hero': color || ''
}
}, /*#__PURE__*/React__default.createElement("div", {
className: "left-inner"
}, description ? /*#__PURE__*/React__default.createElement("div", {
className: "module-description-title"
}, /*#__PURE__*/React__default.createElement("div", {
className: "m-description ellipsis-text"
}, description), /*#__PURE__*/React__default.createElement("div", {
className: "m-title ellipsis-text"
}, title)) : title && /*#__PURE__*/React__default.createElement("div", {
className: classnames('ellipsis-text', {
'module-title-without-border': hideBeforeBorder,
'module-title': !hideBeforeBorder
}),
title: typeof title === 'string' ? title : ''
}, title)), titleIcon && /*#__PURE__*/React__default.createElement(IconWithTooltip, {
toolTip: titleIconTooltip
}, /*#__PURE__*/React__default.createElement("div", {
className: "left-inner-icon"
}, /*#__PURE__*/React__default.createElement(Icon, {
type: titleIcon,
onClick: onTitleIconClick
})))), /*#__PURE__*/React__default.createElement("li", {
className: "right-content"
}, children));
}
ModuleTitle.propTypes = {
/**
* Title property. Any valid React node.
*/
title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
/**
* Additonal description. Any valid React node
*/
description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
/**
* ModuleTitle sizing
*/
size: PropTypes.oneOf(moduleTitleConfig.size),
/**
* Addional className
*/
className: PropTypes.string,
/**
* Hide border after title
*/
hideBeforeBorder: PropTypes.bool,
/**
* Hide header main border
*/
headerBorder: PropTypes.bool,
/**
* ModuleTitle positioning
*/
position: PropTypes.oneOf(moduleTitleConfig.position),
/**
* ModuleTitle corner radius
*/
cornerRadius: PropTypes.oneOf(moduleTitleConfig.cornerRadius),
/**
* Module title content can be passed as child. Any valid React node.
*/
children: PropTypes.node,
/**
* Use this prop to override ModuleTitle's underline color. Will not work when "descroiption" prop is specified
*/
color: PropTypes.string,
/**
* Will add an "Icon" atom to the left side of ModuleTitle. Valid values are the same as "type" prop for "Icon" atom
*/
titleIcon: PropTypes.string,
/**
* Tooltip for icon
*/
titleIconTooltip: PropTypes.string,
/**
* Title Icon onClick event
*/
onTitleIconClick: PropTypes.func
};
ModuleTitle.defaultProps = {
onTitleIconClick: noop,
headerBorder: true,
size: moduleTitleConfig.size[2],
position: moduleTitleConfig.position[0],
cornerRadius: moduleTitleConfig.cornerRadius[0]
};
export { ModuleTitle as default };