@geneui/components
Version:
The Gene UI components library designed for BI tools
229 lines (225 loc) • 13.9 kB
JavaScript
import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
import React__default, { useMemo } from 'react';
import PropTypes from 'prop-types';
import { c as classnames } from '../index-031ff73c.js';
import { w as widgetConfig } from '../configs-00612ce0.js';
import Icon from '../Icon/index.js';
import KeyValue from '../KeyValue/index.js';
import ModuleTitle from '../ModuleTitle/index.js';
import { s as styleInject } from '../style-inject.es-746bb8ed.js';
import '../tslib.es6-f211516f.js';
import '../index-a0e4e333.js';
import '../dateValidation-67caec66.js';
import '../_commonjsHelpers-24198af3.js';
import 'react-dom';
import '../index-6d7e99cd.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\"] .widget-holder{background:var(--background);border-radius:2rem;height:6rem;width:100%}[data-gene-ui-version=\"2.16.5\"] .widget-holder.s-small{--font-size:1.6rem;border-radius:1rem}[data-gene-ui-version=\"2.16.5\"] .widget-holder.s-medium{border-radius:1rem;height:8rem}[data-gene-ui-version=\"2.16.5\"] .widget-holder.s-big{height:11rem}[data-gene-ui-version=\"2.16.5\"] .widget-holder .no-data{opacity:.5}[data-gene-ui-version=\"2.16.5\"] .widget-holder.shadow{box-shadow:0 .3rem .6rem 0 #0000000d}[data-gene-ui-version=\"2.16.5\"] .widget-holder.border{border:1px solid rgba(var(--background-sc-rgb),.05)}[data-gene-ui-version=\"2.16.5\"] .widget-holder .module-title{text-transform:uppercase}[data-gene-ui-version=\"2.16.5\"] .widget-holder.widget-grid{display:grid;grid-template-areas:\"image head\" \"image text\";grid-template-columns:auto 1fr;grid-template-rows:1fr 1fr}[data-gene-ui-version=\"2.16.5\"] .widget-holder.widget-grid.t-default{padding-inline:2rem}[data-gene-ui-version=\"2.16.5\"] .widget-holder.widget-grid.t-default .module-title{font-size:1.2rem}[data-gene-ui-version=\"2.16.5\"] .widget-holder.widget-grid.t-default .module-header{padding:0}[data-gene-ui-version=\"2.16.5\"] .widget-holder.widget-grid.t-default .image{padding-inline-end:3.5rem}[data-gene-ui-version=\"2.16.5\"] .widget-holder.widget-grid.t-default .image img{height:5rem;width:5rem}[data-gene-ui-version=\"2.16.5\"] .s-small.widget-holder.widget-grid.t-default .image{padding-inline-end:1.5rem}[data-gene-ui-version=\"2.16.5\"] .s-small.widget-holder.widget-grid.t-default .image img{height:3.4rem;width:3.4rem}[data-gene-ui-version=\"2.16.5\"] .s-medium.widget-holder.widget-grid.t-default .image{padding-inline-end:2rem}[data-gene-ui-version=\"2.16.5\"] .s-medium.widget-holder.widget-grid.t-default .image img{height:4.8rem;width:4.8rem}[data-gene-ui-version=\"2.16.5\"] .widget-holder.widget-grid.t-compact .text.key-values,[data-gene-ui-version=\"2.16.5\"] .widget-holder.widget-grid.t-default .text.key-values{display:grid;gap:1.6rem;grid-template-columns:.5fr .4fr 1fr}[data-gene-ui-version=\"2.16.5\"] .widget-holder.widget-grid.t-compact .text .widget-timeline-holder,[data-gene-ui-version=\"2.16.5\"] .widget-holder.widget-grid.t-default .text .widget-timeline-holder{align-items:center;border-left:1px solid rgba(var(--background-sc-rgb),.05);display:flex;justify-content:space-between;text-align:center}[data-gene-ui-version=\"2.16.5\"] .widget-holder.widget-grid.t-compact{grid-template-areas:\"head head\" \"image text\";grid-template-rows:auto 1fr}[data-gene-ui-version=\"2.16.5\"] .widget-holder.widget-grid.t-compact .image{padding-inline-end:1.5rem}[data-gene-ui-version=\"2.16.5\"] .widget-holder.widget-grid.t-compact .image img{height:4.8rem;width:4.8rem}[data-gene-ui-version=\"2.16.5\"] .s-small.widget-holder.widget-grid.t-compact .image{display:none}[data-gene-ui-version=\"2.16.5\"] .s-medium.widget-holder.widget-grid.t-compact .image{padding-inline:2rem}[data-gene-ui-version=\"2.16.5\"] .s-medium.widget-holder.widget-grid.t-compact .image img{height:3rem;width:3rem}[data-gene-ui-version=\"2.16.5\"] .s-big.widget-holder.widget-grid.t-compact .image{padding-inline:2rem}[data-gene-ui-version=\"2.16.5\"] .widget-holder.widget-grid.t-compact .text{padding:0 2rem}[data-gene-ui-version=\"2.16.5\"] .widget-holder.widget-grid.t-compact .text:not(.bobol)>p{text-align:end}[data-gene-ui-version=\"2.16.5\"] .widget-holder>li{align-items:center;display:flex}[data-gene-ui-version=\"2.16.5\"] .widget-holder>li.image{grid-area:image;justify-content:center}[data-gene-ui-version=\"2.16.5\"] .widget-holder>li.head{grid-area:head;overflow:hidden;padding:0 0 1px}[data-gene-ui-version=\"2.16.5\"] .widget-holder>li.text{grid-area:text;overflow:hidden}[data-gene-ui-version=\"2.16.5\"] .widget-holder>li.text>p{flex:auto;font:700 var(--font-size,1.8rem)/3rem var(--font-family)}[data-gene-ui-version=\"2.16.5\"] .widget-holder>li.text .icon{flex-shrink:0}[data-gene-ui-version=\"2.16.5\"] .widget-holder.t-minimal{align-items:center;border-radius:1rem;display:flex;flex-direction:column;justify-content:center;padding:0 .8rem;text-align:center}[data-gene-ui-version=\"2.16.5\"] .widget-holder.t-minimal.shadow{box-shadow:0 .2rem .4rem 0 #0000000d}[data-gene-ui-version=\"2.16.5\"] .widget-holder.t-minimal>li{justify-content:center;width:100%}[data-gene-ui-version=\"2.16.5\"] .widget-holder.t-minimal>li:first-child{color:rgba(var(--background-sc-rgb),.61);font:600 1.2rem/1.6rem var(--font-family)}[data-gene-ui-version=\"2.16.5\"] .widget-holder.t-minimal>li:nth-child(2){font-weight:600;margin:1rem 0 0}[data-gene-ui-version=\"2.16.5\"] .widget-holder.t-minimal>li>i{border-radius:100%;display:block;flex-shrink:0;height:.8rem;width:.8rem}html:not([dir=rtl]) .widget-holder.t-minimal>li>i{margin-right:.8rem}html[dir=rtl] .widget-holder.t-minimal>li>i{margin-left:.8rem}[data-gene-ui-version=\"2.16.5\"] .widget-holder.t-colorful{border:1px solid var(--hero);display:block;max-width:100%;min-width:14rem;padding:1rem 1.4rem .8rem;position:relative;width:auto}[data-gene-ui-version=\"2.16.5\"] .widget-holder.t-colorful:before{background:var(--hero);border-radius:inherit;content:\"\";display:block;height:100%;left:0;opacity:.03;position:absolute;top:0;width:100%}[data-gene-ui-version=\"2.16.5\"] .widget-holder.t-colorful>li{position:relative}[data-gene-ui-version=\"2.16.5\"] .widget-holder.t-colorful .widget-c-title{font:600 1.2rem/1.6rem var(--font-family);margin:0 0 .4rem;opacity:.8}[data-gene-ui-version=\"2.16.5\"] .widget-holder.t-colorful .widget-c-text{font:700 1.6rem/2.2rem var(--font-family)}[data-gene-ui-version=\"2.16.5\"] .comparison-icons-holder{--status-color:inherit;align-items:center;color:var(--status-color);display:flex;flex-shrink:0;font:700 1.4rem/1.8rem var(--font-family);margin-inline-start:.6rem;transition:color .4s}[data-gene-ui-version=\"2.16.5\"] .comparison-icons-holder.cs-up{--status-color:#51cf78}[data-gene-ui-version=\"2.16.5\"] .comparison-icons-holder.cs-up .bc-icon-comparison-down{color:rgba(var(--background-sc-rgb),.1)}[data-gene-ui-version=\"2.16.5\"] .comparison-icons-holder.cs-down{--status-color:#e84855}[data-gene-ui-version=\"2.16.5\"] .comparison-icons-holder.cs-down .bc-icon-comparison-up{color:rgba(var(--background-sc-rgb),.1)}[data-gene-ui-version=\"2.16.5\"] .comparison-icons-holder .icon+.icon{left:0;position:absolute;top:0}[data-gene-ui-version=\"2.16.5\"] .comparison-icons{position:relative}";
styleInject(css_248z);
function Widget(_ref) {
let {
type,
img,
title,
text,
color,
headerActions,
noDataText,
noData,
className,
withShadow,
withBorder,
titleIcon,
showComparisonIcons,
comparisonText,
comparisonStatus,
size,
titleProps,
keyValues,
...restProps
} = _ref;
const showKeyValues = useMemo(() => !!keyValues.length && size === widgetConfig.size[2], [size, keyValues]);
return /*#__PURE__*/React__default.createElement("ul", _extends({}, restProps, {
className: classnames(className, 'widget-holder', "t-".concat(type), "s-".concat(size), {
'widget-grid': type !== widgetConfig.type[2] && type !== widgetConfig.type[3],
shadow: withShadow,
border: withBorder
}),
style: {
'--hero': color
}
}), type === widgetConfig.type[2] ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement("i", {
style: {
background: color
}
}), /*#__PURE__*/React__default.createElement("span", {
className: "ellipsis-text"
}, title)), /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement("span", {
className: classnames('ellipsis-text', {
'no-data': noData
})
}, noData ? noDataText : text), !noData && (showComparisonIcons || comparisonText) && /*#__PURE__*/React__default.createElement("div", {
className: classnames('comparison-icons-holder', "cs-".concat(comparisonStatus))
}, comparisonText && /*#__PURE__*/React__default.createElement("div", {
className: "comparison-text"
}, comparisonText), showComparisonIcons && /*#__PURE__*/React__default.createElement("div", {
className: "comparison-icons"
}, /*#__PURE__*/React__default.createElement(Icon, {
type: "bc-icon-comparison-up"
}), /*#__PURE__*/React__default.createElement(Icon, {
type: "bc-icon-comparison-down"
}))))) : type === widgetConfig.type[3] ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("li", {
className: "widget-c-title"
}, /*#__PURE__*/React__default.createElement("p", {
className: "ellipsis-text"
}, title)), /*#__PURE__*/React__default.createElement("li", {
className: "widget-c-text"
}, /*#__PURE__*/React__default.createElement("p", {
className: classnames('ellipsis-text', {
'no-data': noData
})
}, noData ? noDataText : text))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, img && /*#__PURE__*/React__default.createElement("li", {
className: "image"
}, /*#__PURE__*/React__default.createElement("img", {
src: img,
alt: ""
})), /*#__PURE__*/React__default.createElement("li", {
className: "head"
}, /*#__PURE__*/React__default.createElement(ModuleTitle, _extends({
title: title,
color: color,
size: size,
cornerRadius: "position-radius",
titleIcon: titleIcon
}, titleProps), headerActions)), /*#__PURE__*/React__default.createElement("li", {
className: classnames('text', {
'key-values': showKeyValues
})
}, /*#__PURE__*/React__default.createElement("p", {
className: classnames('ellipsis-text', {
'no-data': noData
})
}, noData ? noDataText : text), !noData && (showComparisonIcons || comparisonText) && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
className: classnames('comparison-icons-holder', "cs-".concat(comparisonStatus))
}, comparisonText && /*#__PURE__*/React__default.createElement("div", {
className: "comparison-text"
}, comparisonText), showComparisonIcons && /*#__PURE__*/React__default.createElement("div", {
className: "comparison-icons"
}, /*#__PURE__*/React__default.createElement(Icon, {
type: "bc-icon-comparison-up"
}), /*#__PURE__*/React__default.createElement(Icon, {
type: "bc-icon-comparison-down"
}))), showKeyValues && /*#__PURE__*/React__default.createElement("div", {
className: "widget-timeline-holder"
}, keyValues.map((_ref2, index) => {
let {
label,
value,
className,
...rest
} = _ref2;
return /*#__PURE__*/React__default.createElement(KeyValue, _extends({
key: index,
label: label,
value: value,
className: className
}, rest));
}))))));
}
Widget.propTypes = {
/**
* Switching to different types of widget's view, can be
* default, minimal, compact
*/
type: PropTypes.oneOf(widgetConfig.type),
/**
* Setting image to widget
*/
img: PropTypes.string,
/**
* Title for widget
*/
title: PropTypes.node.isRequired,
/**
* Main text for widget
*/
text: PropTypes.node,
/**
* Theme color for widget
*/
color: PropTypes.string,
/**
* The prop allows you to specify actions for the widget's header.
* It works only for types `default` and `compact`
*/
headerActions: PropTypes.node,
/**
* Text for No data state
*/
noDataText: PropTypes.string,
/**
* Show/hide No data state
*/
noData: PropTypes.bool,
/**
* Additional className
*/
className: PropTypes.string,
/**
* Show/Hide shadow effect for widget
*/
withShadow: PropTypes.bool,
/**
* Show/Hide bordered effect
*/
withBorder: PropTypes.bool,
/**
* Title can have icon, defining with this prop
*/
titleIcon: PropTypes.string,
/**
* Show/Hide comparison icons
*/
showComparisonIcons: PropTypes.bool,
/**
* Props for title component
*/
titleProps: PropTypes.object,
/**
* Comparison text
*/
comparisonText: PropTypes.string,
/**
* Defining status/state of comparison icon
* can be one of `'initial','up','down'`
*/
comparisonStatus: PropTypes.oneOf(widgetConfig.comparisonStatus),
/**
* Widget size
* `small, big, medium`
*/
size: PropTypes.oneOf(widgetConfig.size),
/**
* Widget keyValues is an array of keyValue
* it will appear when the size is big
*/
keyValues: PropTypes.arrayOf(PropTypes.shape({
...KeyValue.propTypes
}))
};
Widget.defaultProps = {
type: widgetConfig.type[0],
noDataText: 'No Data',
noData: false,
titleProps: {},
withShadow: true,
withBorder: false,
showComparisonIcons: false,
comparisonStatus: widgetConfig.comparisonStatus[0],
size: widgetConfig.size[1],
keyValues: []
};
export { Widget as default };