@geneui/components
Version:
The Gene UI components library designed for BI tools
103 lines (99 loc) • 7.57 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 { d as tagConfig } from '../configs-00612ce0.js';
import { s as styleInject } from '../style-inject.es-746bb8ed.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\"] .tag-c{--color:var(--hero);align-items:center;background:var(--background);color:var(--color);display:flex;flex-direction:row-reverse;flex-shrink:0;font:600 1.4rem/1.8rem var(--font-family);height:var(--size);justify-content:center;max-width:100%;padding:0 1rem;position:relative;text-align:center;transition:color .3s;-webkit-user-select:none;user-select:none;width:100%}[data-gene-ui-version=\"2.16.5\"] .tag-c.s-small{--size:2.4rem;font-size:1.2rem}html:not([dir=rtl]) .tag-c.s-small .icon{margin-left:1px}html[dir=rtl] .tag-c.s-small .icon{margin-right:1px}[data-gene-ui-version=\"2.16.5\"] .tag-c.s-medium{--size:2.6rem}html:not([dir=rtl]) .tag-c.s-medium .icon{margin-left:.5rem}html[dir=rtl] .tag-c.s-medium .icon{margin-right:.5rem}[data-gene-ui-version=\"2.16.5\"] .tag-c.s-big{--size:3rem}html:not([dir=rtl]) .tag-c.s-big .icon{margin-left:.5rem}html[dir=rtl] .tag-c.s-big .icon{margin-right:.5rem}[data-gene-ui-version=\"2.16.5\"] .tag-c.f-compact{min-width:var(--size)}[data-gene-ui-version=\"2.16.5\"] .tag-c.f-compact.s-small{padding:0 .4rem}[data-gene-ui-version=\"2.16.5\"] .tag-c.f-compact.s-medium{padding:0 .5rem}[data-gene-ui-version=\"2.16.5\"] .tag-c.f-compact.s-big{padding:0 .7rem}html:not([dir=rtl]) .tag-c:not(.f-compact).s-small .icon{margin-right:-.9rem}html[dir=rtl] .tag-c:not(.f-compact).s-small .icon{margin-left:-.9rem}html:not([dir=rtl]) .tag-c:not(.f-compact).s-medium .icon{margin-right:-.7rem}html[dir=rtl] .tag-c:not(.f-compact).s-medium .icon{margin-left:-.7rem}html:not([dir=rtl]) .tag-c:not(.f-compact).s-big .icon{margin-right:-.2rem}html[dir=rtl] .tag-c:not(.f-compact).s-big .icon{margin-left:-.2rem}[data-gene-ui-version=\"2.16.5\"] .tag-c.cr-full-radius{border-radius:1.4rem}[data-gene-ui-version=\"2.16.5\"] .tag-c.cr-smooth-radius{border-radius:.6rem}[data-gene-ui-version=\"2.16.5\"] .tag-c:not(.active).a-simple{--color:var(--background-sc)}[data-gene-ui-version=\"2.16.5\"] .tag-c:not(.active).a-simple .tag-backdrop:before{opacity:.1}[data-gene-ui-version=\"2.16.5\"] .tag-c:not(.active).a-simple .tag-backdrop:after{content:none}[data-gene-ui-version=\"2.16.5\"] .tag-c:not(.active).a-minimal .tag-backdrop{--color:var(--background-sc)}[data-gene-ui-version=\"2.16.5\"] .tag-c:not(.active).a-minimal .tag-backdrop:before{opacity:.03}[data-gene-ui-version=\"2.16.5\"] .tag-c:not(.active).a-minimal .tag-backdrop:after{opacity:.07}[data-gene-ui-version=\"2.16.5\"] .tag-c:not(.active).a-outline .tag-backdrop:before{content:none}[data-gene-ui-version=\"2.16.5\"] .tag-c:not(.active).a-colored .tag-backdrop:before{opacity:.1}[data-gene-ui-version=\"2.16.5\"] .tag-c:not(.active).a-clean{--color:var(--background-sc)}@media (hover:hover){[data-gene-ui-version=\"2.16.5\"] .tag-c:not(.active).a-clean:hover{--color:var(--hero)}}[data-gene-ui-version=\"2.16.5\"] .tag-c:not(.active).a-clean .tag-backdrop:after,[data-gene-ui-version=\"2.16.5\"] .tag-c:not(.active).a-clean .tag-backdrop:before{content:none}[data-gene-ui-version=\"2.16.5\"] .tag-c:not(.active).a-light .tag-backdrop:before{opacity:.1}[data-gene-ui-version=\"2.16.5\"] .tag-c:not(.active).a-light .tag-backdrop:after{border:0}[data-gene-ui-version=\"2.16.5\"] .tag-c.active{color:var(--hero-sc)}@media (hover:hover){[data-gene-ui-version=\"2.16.5\"] .tag-c:hover .tag-backdrop{opacity:.6}}[data-gene-ui-version=\"2.16.5\"] .tag-c .icon,[data-gene-ui-version=\"2.16.5\"] .tag-c .tag-cc{position:relative;transition:opacity .3s;z-index:1}[data-gene-ui-version=\"2.16.5\"] .tag-c .icon{cursor:pointer;opacity:.5}@media (hover:hover){[data-gene-ui-version=\"2.16.5\"] .tag-c .icon:hover{opacity:1}[data-gene-ui-version=\"2.16.5\"] .tag-c .icon:hover~.tag-cp{opacity:.6}}[data-gene-ui-version=\"2.16.5\"] .tag-backdrop{border-radius:inherit;height:100%;left:0;position:absolute;top:0;transition:opacity .3s;width:100%}[data-gene-ui-version=\"2.16.5\"] .tag-backdrop:after,[data-gene-ui-version=\"2.16.5\"] .tag-backdrop:before{border-radius:inherit;content:\"\";display:block;height:100%;left:0;position:absolute;top:0;width:100%}[data-gene-ui-version=\"2.16.5\"] .tag-backdrop:before{background:var(--color);transition:background .3s,opacity .3s}[data-gene-ui-version=\"2.16.5\"] .tag-backdrop:after{border:1px solid var(--color);transition:border-color .3s,opacity .3s}";
styleInject(css_248z);
function Tag(_ref) {
let {
label,
name,
cornerRadius,
size,
color,
appearance,
flexibility,
selected,
className,
cursor,
icons,
...restProps
} = _ref;
return /*#__PURE__*/React__default.createElement("ul", _extends({
className: classnames('static-title-holder', className, "f-".concat(flexibility))
}, 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('tag-c', "cr-".concat(cornerRadius), "a-".concat(appearance), "f-".concat(flexibility), "s-".concat(size), {
active: selected,
'pointer-events-none': !icons
}),
style: {
'--hero': color,
cursor
}
}, icons || null, /*#__PURE__*/React__default.createElement("div", {
className: "tag-cp tag-cc ellipsis-text"
}, name), /*#__PURE__*/React__default.createElement("div", {
className: "tag-backdrop"
}))));
}
Tag.propTypes = {
/**
* Label for 'Tag'.
*/
label: PropTypes.string,
/**
* Cursor type for 'Tag'.
*/
cursor: PropTypes.string,
/**
* Name for 'Tag'.
*/
name: PropTypes.string.isRequired,
/**
* Border type of corners
*/
cornerRadius: PropTypes.oneOf(tagConfig.cornerRadius),
/**
* Chooses how to show 'Tag'
*/
flexibility: PropTypes.oneOf(tagConfig.flexibility),
/**
* Switches between different sizes of 'Tag'.
*/
size: PropTypes.oneOf(tagConfig.size),
/**
* Color/theming for 'Tag'.
*/
color: PropTypes.string,
/**
* Switches between different views of 'Tag'.
*/
appearance: PropTypes.oneOf(tagConfig.appearance),
/**
* Selected state
*/
selected: PropTypes.bool,
/**
* External/Additional className
*/
className: PropTypes.string,
/**
* Showing icons
*/
icons: PropTypes.node
};
Tag.defaultProps = {
cornerRadius: tagConfig.cornerRadius[0],
flexibility: tagConfig.flexibility[0],
size: tagConfig.size[1],
appearance: tagConfig.appearance[0],
selected: false,
cursor: 'pointer'
};
export { Tag as default };