@geneui/components
Version:
The Gene UI components library designed for BI tools
185 lines (181 loc) • 9.01 kB
JavaScript
import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
import React__default, { useRef } from 'react';
import PropTypes from 'prop-types';
import { c as classnames } from '../index-031ff73c.js';
import { o as optionConfig, s as screenTypes } from '../configs-00612ce0.js';
import '../dateValidation-67caec66.js';
import 'react-dom';
import useDeviceType from '../hooks/useDeviceType.js';
import { u as useEllipsisDetection } from '../useEllipsisDetection-4d997d5d.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 '../_commonjsHelpers-24198af3.js';
import '../hooks/useWindowSize.js';
import '../hooks/useDebounce.js';
import '../tslib.es6-f211516f.js';
import '../GeneUIProvider/index.js';
var css_248z = "[data-gene-ui-version=\"2.16.5\"] .option-container{align-items:center;cursor:pointer;display:flex;min-height:4rem;overflow:hidden;padding:0 1.4rem;position:relative;transition:background .4s;-webkit-user-select:none;user-select:none;width:100%;z-index:0}[data-gene-ui-version=\"2.16.5\"] .option-container>*{transition:color .4s}[data-gene-ui-version=\"2.16.5\"] .option-container.mobile-view{min-height:4.8rem;padding:0 2rem}[data-gene-ui-version=\"2.16.5\"] .option-container.border-top{border-top:1px solid}[data-gene-ui-version=\"2.16.5\"] .option-container.border-bottom{border-bottom:1px solid}[data-gene-ui-version=\"2.16.5\"] .option-container.border-bottom,[data-gene-ui-version=\"2.16.5\"] .option-container.border-top{border-color:rgba(var(--background-sc-rgb),.1)}[data-gene-ui-version=\"2.16.5\"] .option-container.sticky-bottom,[data-gene-ui-version=\"2.16.5\"] .option-container.sticky-top{position:-webkit-sticky;position:sticky;z-index:1}[data-gene-ui-version=\"2.16.5\"] .option-container.sticky-top{top:0}[data-gene-ui-version=\"2.16.5\"] .option-container.sticky-bottom{bottom:0}@media (hover:hover){[data-gene-ui-version=\"2.16.5\"] .option-container.hovered:hover,[data-gene-ui-version=\"2.16.5\"] .option-container:hover:hover{background:rgba(var(--background-sc-rgb),.05)}}[data-gene-ui-version=\"2.16.5\"] .option-container.hovered{background:rgba(var(--background-sc-rgb),.05)}[data-gene-ui-version=\"2.16.5\"] .option-container.active,[data-gene-ui-version=\"2.16.5\"] .option-container.c-hero{color:var(--hero)}[data-gene-ui-version=\"2.16.5\"] .option-container.disabled{opacity:.5;pointer-events:none}[data-gene-ui-version=\"2.16.5\"] .option-container a{display:block;line-height:4rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-gene-ui-version=\"2.16.5\"] .option-container a.active~*{color:var(--hero)}[data-gene-ui-version=\"2.16.5\"] .option-container-relative{position:relative}[data-gene-ui-version=\"2.16.5\"] .option-left-elements{align-items:center;display:flex;flex-shrink:0;justify-content:center;margin-inline-end:1.2rem;min-height:2.4rem;min-width:2.4rem}[data-gene-ui-version=\"2.16.5\"] .option-right-elements{flex-shrink:0;margin-inline-start:1.2rem}[data-gene-ui-version=\"2.16.5\"] .option-right-elements .bc-icon-selected{transition:transform .4s}[data-gene-ui-version=\"2.16.5\"] .option-container:not(.mobile-view) .option-right-elements .bc-icon-selected{margin-inline-end:-.4rem}[data-gene-ui-version=\"2.16.5\"] .option-container:not(.active) .option-right-elements .bc-icon-selected{transform:scale(0)}[data-gene-ui-version=\"2.16.5\"] .mobile-view .bc-icon-selected{margin-inline-end:.8rem!important}[data-gene-ui-version=\"2.16.5\"] .option-texts{align-items:center;display:flex;flex:auto;font:600 1.4rem/2rem var(--font-family);overflow:hidden}[data-gene-ui-version=\"2.16.5\"] .option-texts>li{flex-shrink:0}[data-gene-ui-version=\"2.16.5\"] .option-texts>li:first-child{flex:auto;overflow:hidden}[data-gene-ui-version=\"2.16.5\"] .option-texts>li.assigned-value{margin-inline-start:1rem;opacity:.7}[data-gene-ui-version=\"2.16.5\"] .option-description{font:600 1.2rem/1.6rem var(--font-family);opacity:.7}[data-gene-ui-version=\"2.16.5\"] .option-title-center{text-align:center}[data-gene-ui-version=\"2.16.5\"] .option-title-end{text-align:end}";
styleInject(css_248z);
function Option(props) {
const {
title,
description,
className,
icon,
color,
active,
checkMark,
forwardMark,
leftCustomElement,
rightCustomElement,
assignedValue,
border,
sticky,
content,
onClick,
screenType,
forwardedRef,
disabled,
titlePosition,
...restProps
} = props;
const titleRef = useRef(null);
const hasTooltip = useEllipsisDetection(titleRef);
const descriptionRef = useRef(null);
const hasDescriptionTooltip = useEllipsisDetection(descriptionRef);
const {
isMobile
} = useDeviceType(screenType);
return /*#__PURE__*/React__default.createElement("label", _extends({
className: classnames('option-container', className, "border-".concat(border), "sticky-".concat(sticky), "c-".concat(color), {
'mobile-view': isMobile,
'option-container-relative': titlePosition === optionConfig.titlePosition.center,
active,
disabled
}),
onClick: onClick,
ref: forwardedRef
}, restProps), content, (icon || leftCustomElement) && /*#__PURE__*/React__default.createElement("div", {
className: "option-left-elements"
}, icon && /*#__PURE__*/React__default.createElement(Icon, {
type: icon
}), leftCustomElement), /*#__PURE__*/React__default.createElement("ul", {
className: "option-texts"
}, /*#__PURE__*/React__default.createElement("li", null, title && /*#__PURE__*/React__default.createElement(Tooltip, {
text: title,
isVisible: hasTooltip
}, /*#__PURE__*/React__default.createElement("div", {
className: classnames('option-title', 'ellipsis-text', {
'option-title-center': titlePosition === optionConfig.titlePosition.center,
'option-title-end': titlePosition === optionConfig.titlePosition.end
}),
ref: titleRef
}, title)), description && /*#__PURE__*/React__default.createElement(Tooltip, {
text: description,
isVisible: hasDescriptionTooltip
}, /*#__PURE__*/React__default.createElement("div", {
ref: descriptionRef,
className: "option-description ellipsis-text"
}, description))), assignedValue && /*#__PURE__*/React__default.createElement("li", {
className: "assigned-value"
}, assignedValue)), (checkMark || forwardMark || rightCustomElement) && /*#__PURE__*/React__default.createElement("div", {
className: "option-right-elements"
}, checkMark && /*#__PURE__*/React__default.createElement(Icon, {
type: "bc-icon-selected"
}), forwardMark && /*#__PURE__*/React__default.createElement(Icon, {
type: "bc-icon-arrow-right"
}), rightCustomElement));
}
Option.defaultProps = {
color: optionConfig.color[0],
border: optionConfig.border[0],
sticky: optionConfig.sticky[0],
titlePosition: optionConfig.titlePosition.start,
screenType: screenTypes[0]
};
Option.propTypes = {
/**
* Title of the option
*/
title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
/**
* Description of the option which is displayed on the bottom of the title with small caps
*/
description: PropTypes.string,
/**
* Adds additional className to the option
*/
className: PropTypes.string,
/**
* Adds icon on the right side of the option
*/
icon: PropTypes.string,
/**
* Changes text colors
*/
color: PropTypes.oneOf(optionConfig.color),
/**
* Changes color to hero
*/
active: PropTypes.bool,
/**
* Adds check icon and displays it when the option is active
*/
checkMark: PropTypes.bool,
/**
* Adds to right arrow icon
*/
forwardMark: PropTypes.bool,
/**
* Any element you can add to the left side
*/
leftCustomElement: PropTypes.any,
/**
* Any element you can add to the right side
*/
rightCustomElement: PropTypes.any,
/**
* Information you can display on the right side of the option
*/
assignedValue: PropTypes.string,
/**
* Adds border to the option
*/
border: PropTypes.oneOf(optionConfig.border),
/**
* Makes item sticky to scrolling element based on the position you choose
*/
sticky: PropTypes.oneOf(optionConfig.sticky),
/**
* Additional elements for rendering in option
*/
content: PropTypes.any,
/**
* Fires event when user click on one of the menu items;
* (event: Event, item: Object) => void
*/
onClick: PropTypes.func,
/**
* Controls screen type
*/
screenType: PropTypes.oneOf(screenTypes),
/**
* Controls button disable state
*/
disabled: PropTypes.bool,
/**
* ref for label
*/
forwardedRef: PropTypes.oneOfType([PropTypes.func,
// for callback ref
PropTypes.shape({
current: PropTypes.instanceOf(Element)
}) // for createRef() object
]),
/**
* Chose position for title
*/
titlePosition: PropTypes.oneOf(['start', 'center', 'end'])
};
export { Option as default };