@geneui/components
Version:
The Gene UI components library designed for BI tools
81 lines (76 loc) • 8.05 kB
JavaScript
import { _ as __rest } from '../tslib.es6-f211516f.js';
import React__default, { useRef } from 'react';
import { c as classnames } from '../index-031ff73c.js';
import Icon from '../Icon/index.js';
import Switcher from '../Switcher/index.js';
import Tag from '../Tag/index.js';
import { T as Tooltip } from '../index-6d7e99cd.js';
import 'prop-types';
import '../dateValidation-67caec66.js';
import 'react-dom';
import '../configs-00612ce0.js';
import { u as useEllipsisDetection } from '../useEllipsisDetection-4d997d5d.js';
import { s as styleInject } from '../style-inject.es-746bb8ed.js';
import '../_rollupPluginBabelHelpers-e8fb2e5c.js';
import '../index-a0e4e333.js';
import '../hooks/useKeyDown.js';
import '../checkboxRadioSwitcher-5b69d7bd.js';
import '../guid-8ddf77b3.js';
import '../_commonjsHelpers-24198af3.js';
import '../hooks/useDeviceType.js';
import '../hooks/useWindowSize.js';
import '../hooks/useDebounce.js';
import '../GeneUIProvider/index.js';
const InteractiveWidgetIcon = ({ children, iconColor, appearance, iconBackground }) => {
return (React__default.createElement("div", { className: `widgetIcon widgetIcon-${appearance}`, style: iconColor ? { '--icon-color': iconColor, filter: 'alpha(opacity=60)' } : {} },
iconBackground && React__default.createElement("div", { className: "widgetIcon__background" }),
typeof children === 'string' ? (
// @ts-ignore
React__default.createElement(Icon, { type: children, className: classnames({ widgetIcon__iconDefault: appearance === 'default' }) })) : (children)));
};
var css_248z = "[data-gene-ui-version=\"2.16.5\"] .interactiveWidget{background:var(--background);border-radius:1.6rem;box-sizing:border-box;display:flex;height:10.4rem;min-width:1px;padding:2rem;width:100%}[data-gene-ui-version=\"2.16.5\"] .interactiveWidget:focus-visible{outline:.2rem var(--hero) solid}[data-gene-ui-version=\"2.16.5\"] .interactiveWidget-border{border:.2rem solid rgba(var(--background-sc-rgb),.05)}[data-gene-ui-version=\"2.16.5\"] .interactiveWidget-border:hover{border:.2rem solid var(--hero)}[data-gene-ui-version=\"2.16.5\"] .interactiveWidget-pointer{cursor:pointer}[data-gene-ui-version=\"2.16.5\"] .interactiveWidget-pointer:hover{background:rgba(var(--hero-rgb),.1)}[data-gene-ui-version=\"2.16.5\"] .interactiveWidget-disabled{opacity:.6;pointer-events:none}[data-gene-ui-version=\"2.16.5\"] .interactiveWidget__wrapper{align-items:center;display:flex;height:100%;min-width:0;width:100%}[data-gene-ui-version=\"2.16.5\"] .interactiveWidget__content{display:flex;flex-direction:column;height:100%;justify-content:flex-start;min-width:0;overflow:hidden;width:100%}[data-gene-ui-version=\"2.16.5\"] .interactiveWidget__header{align-items:center;display:flex;margin-bottom:.6rem;min-width:0;width:100%}[data-gene-ui-version=\"2.16.5\"] .interactiveWidget__titleWrapper{display:flex;flex:1;max-width:100%;min-width:0;padding-inline-end:1.6rem}[data-gene-ui-version=\"2.16.5\"] .interactiveWidget__title{font-size:1.6rem;font-weight:700}[data-gene-ui-version=\"2.16.5\"] .interactiveWidget__infoIcon{margin-inline-start:.4rem}[data-gene-ui-version=\"2.16.5\"] .interactiveWidget__components{align-items:center;display:flex;flex:0 0 auto}[data-gene-ui-version=\"2.16.5\"] .interactiveWidget__switcher{margin-inline-start:1.6rem}[data-gene-ui-version=\"2.16.5\"] .interactiveWidget__description{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;font-size:1.2rem;line-height:1.6rem;opacity:.7;overflow:hidden;text-overflow:ellipsis}[data-gene-ui-version=\"2.16.5\"] .interactiveWidget .widgetIcon{fill:var(--icon-color);align-items:center;color:var(--icon-color);display:flex;flex:0 0 auto;justify-content:center;margin-inline-end:2rem;position:relative;z-index:1}[data-gene-ui-version=\"2.16.5\"] .interactiveWidget .widgetIcon-default{box-sizing:border-box;height:6.4rem;padding:1rem;width:6.4rem}[data-gene-ui-version=\"2.16.5\"] .interactiveWidget .widgetIcon-compact{height:2.4rem;width:2.4rem}[data-gene-ui-version=\"2.16.5\"] .interactiveWidget .widgetIcon-compact .widgetIcon__background{display:none}[data-gene-ui-version=\"2.16.5\"] .interactiveWidget .widgetIcon__iconDefault{font-size:4rem}[data-gene-ui-version=\"2.16.5\"] .interactiveWidget .widgetIcon__background{background:var(--icon-color);border-radius:100%;height:100%;left:0;opacity:.07;position:absolute;top:0;width:100%;z-index:-1}";
styleInject(css_248z);
const InteractiveWidget = (_a) => {
var { className, withBorder = true, onClick, disabled = false, icon, title, appearance = 'default', iconColor = 'var(--background-sc)', tagName, tagColor, switcherProps, titleInfo, description, iconBackground = true } = _a, restProps = __rest(_a, ["className", "withBorder", "onClick", "disabled", "icon", "title", "appearance", "iconColor", "tagName", "tagColor", "switcherProps", "titleInfo", "description", "iconBackground"]);
const titleRef = useRef(null);
const descriptionRef = useRef(null);
const isTitleTruncated = useEllipsisDetection(titleRef);
const isDescriptionTruncated = useEllipsisDetection(descriptionRef);
return (React__default.createElement("div", Object.assign({ className: classnames('interactiveWidget', {
'interactiveWidget-border': withBorder,
'interactiveWidget-pointer': onClick,
'interactiveWidget-disabled': disabled
}, className), tabIndex: 0, onClick: (event) => {
onClick && onClick(event);
}, onKeyDown: (event) => {
if (disabled)
return;
onClick && onClick(event);
} }, restProps),
React__default.createElement("div", { className: 'interactiveWidget__wrapper' },
icon && appearance === 'default' && (React__default.createElement(InteractiveWidgetIcon, { children: icon, appearance: appearance, iconColor: iconColor, iconBackground: iconBackground })),
React__default.createElement("div", { className: 'interactiveWidget__content' },
React__default.createElement("div", { className: `interactiveWidget__header interactiveWidget__header-${appearance}` },
icon && appearance === 'compact' && (React__default.createElement(InteractiveWidgetIcon, { children: icon, appearance: appearance, iconColor: iconColor })),
React__default.createElement("div", { className: "interactiveWidget__titleWrapper" },
title && (
// @ts-ignore
React__default.createElement(Tooltip, { text: title, isVisible: isTitleTruncated },
React__default.createElement("h3", { className: 'interactiveWidget__title ellipsis-text', ref: titleRef }, title))),
titleInfo && title && (
// @ts-ignore
React__default.createElement(Tooltip, { text: titleInfo },
React__default.createElement(Icon, { className: 'interactiveWidget__infoIcon', type: 'bc-icon-info-48' })))),
(switcherProps || tagName) && (React__default.createElement("div", { className: "interactiveWidget__components" },
tagName && (
// @ts-ignore
React__default.createElement(Tag, { name: tagName, color: tagColor, appearance: "outline", size: "small", cornerRadius: 'smooth-radius' })),
switcherProps && (
// @ts-ignore
React__default.createElement(Switcher, Object.assign({ className: 'interactiveWidget__switcher', changeOnEnter: true }, switcherProps)))))),
description && (
//@ts-ignore
React__default.createElement(Tooltip, { text: description, isVisible: isDescriptionTruncated },
React__default.createElement("p", { className: "interactiveWidget__description", ref: descriptionRef }, description)))))));
};
export { InteractiveWidget as default };