@geneui/components
Version:
The Gene UI components library designed for BI tools
236 lines (231 loc) • 17.6 kB
JavaScript
import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
import React__default, { useRef, useEffect, useState, useCallback, useMemo } from 'react';
import PropTypes from 'prop-types';
import { c as classnames } from '../index-031ff73c.js';
import Icon from '../Icon/index.js';
import { c as childrenOf } from '../index-a0e4e333.js';
import { s as styleInject } from '../style-inject.es-746bb8ed.js';
import '../dateValidation-67caec66.js';
import '../_commonjsHelpers-24198af3.js';
import 'react-dom';
function Tab(props) {
const {
title,
icon,
active,
onClose,
disabled,
activeKey,
closeTitleText,
defaultActiveKey,
...restProps
} = props;
const ref = useRef(null);
const isCloseable = props.hasOwnProperty('onClose') && typeof onClose === 'function';
useEffect(() => {
if (active && activeKey && defaultActiveKey !== activeKey && (defaultActiveKey || defaultActiveKey === 0)) {
ref.current.scrollIntoView({
behavior: 'smooth',
inline: 'nearest',
block: 'start'
});
}
}, [active, activeKey, defaultActiveKey]);
return /*#__PURE__*/React__default.createElement("li", _extends({
ref: ref,
className: classnames({
active,
disabled
})
}, restProps), icon && /*#__PURE__*/React__default.createElement(Icon, {
type: icon,
className: "tab-icon"
}), /*#__PURE__*/React__default.createElement("div", {
className: "ellipsis-text"
}, title), isCloseable && /*#__PURE__*/React__default.createElement("button", {
onClick: e => {
e.stopPropagation();
onClose();
},
className: "tab-close-button",
title: closeTitleText
}, /*#__PURE__*/React__default.createElement(Icon, {
type: "bc-icon-close"
})));
}
Tab.propTypes = {
/**
* Title for 'Tab'.
*/
title: PropTypes.node,
/**
* Active/Passive state of 'Tab'
*/
active: PropTypes.bool,
/**
* Disabled state of 'Tab'
*/
disabled: PropTypes.bool,
/**
* Icon of 'Tab'
*/
icon: PropTypes.string,
/**
* Content padding for specific 'Tab'
*/
contentPadding: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/**
* Prop for specifying which tab is active
*/
activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/**
* Prop for default active tab
*/
defaultActiveKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/**
* Shows close button and triggers function onClick
*/
onClose: PropTypes.func,
/**
* Shows title hovering the close button
*/
closeTitleText: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
};
Tab.defaultProps = {
disabled: false
};
var css_248z = "[data-gene-ui-version=\"2.16.5\"] .tabs-holder{align-items:flex-start;display:flex;width:100%}[data-gene-ui-version=\"2.16.5\"] .tabs-holder.reversed{flex-direction:row-reverse}[data-gene-ui-version=\"2.16.5\"] .tabs-holder.horizontal{flex-direction:column}[data-gene-ui-version=\"2.16.5\"] .tabs-head{display:flex;flex-shrink:0;-webkit-user-select:none;user-select:none}[data-gene-ui-version=\"2.16.5\"] .tabs-holder.horizontal>.tabs-head{width:100%}[data-gene-ui-version=\"2.16.5\"] .tabs-head>.tabs-wrapper{flex:auto}[data-gene-ui-version=\"2.16.5\"] .tabs-head>.tabs-actions{align-items:center;box-shadow:inset 0 -1px 0 0 rgba(var(--background-sc-rgb),.06);color:var(--hero);display:flex;flex-shrink:0}[data-gene-ui-version=\"2.16.5\"] .tabs-head>.tabs-actions>*{margin-inline-end:2rem}[data-gene-ui-version=\"2.16.5\"] .tabs-holder.horizontal>.tabs-head>.tabs-wrapper{overflow-x:auto;width:100%}[data-gene-ui-version=\"2.16.5\"] .tabs-holder.horizontal>.tabs-head>.tabs-wrapper::-webkit-scrollbar{display:none;height:0;width:0}[data-gene-ui-version=\"2.16.5\"] .tabs-holder.horizontal>.tabs-head>.tabs-wrapper>.tabs-content.equal-tabs,[data-gene-ui-version=\"2.16.5\"] .tabs-holder.horizontal>.tabs-head>.tabs-wrapper>.tabs-content.type-basic{min-width:100%}[data-gene-ui-version=\"2.16.5\"] .tabs-content{display:inline-flex;font-weight:600;line-height:4.2rem;text-align:center;vertical-align:top}[data-gene-ui-version=\"2.16.5\"] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content{flex-direction:column;text-align:start}[data-gene-ui-version=\"2.16.5\"] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content .tab-icon{display:none}[data-gene-ui-version=\"2.16.5\"] .tabs-content>li{align-items:center;cursor:pointer;display:flex;justify-content:center;padding:0 2rem;position:relative;transition:color .3s,box-shadow .3s,border-color .3s,background-color,.3s}[data-gene-ui-version=\"2.16.5\"] .tabs-content>li .tab-icon{flex-shrink:0;margin-inline-end:1.4rem;margin-inline-start:-.4rem}[data-gene-ui-version=\"2.16.5\"] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content>li{justify-content:flex-start;padding:0 3rem 0 2rem}html[dir=rtl] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content>li{padding:0 2rem 0 3rem}[data-gene-ui-version=\"2.16.5\"] .tabs-holder.vertical:not(.reversed)>.tabs-head>.tabs-wrapper>.type-basic.tabs-content>li{justify-content:flex-end}[data-gene-ui-version=\"2.16.5\"] .tabs-holder.reversed>.tabs-head>.tabs-wrapper>.tabs-content>li{padding:0 2rem 0 3rem}html[dir=rtl] .tabs-holder.reversed>.tabs-head>.tabs-wrapper>.tabs-content>li{padding:0 3rem 0 2rem}[data-gene-ui-version=\"2.16.5\"] .tabs-content>li.disabled{opacity:.5}[data-gene-ui-version=\"2.16.5\"] .tabs-content>li.active,[data-gene-ui-version=\"2.16.5\"] .tabs-content>li.disabled{pointer-events:none}[data-gene-ui-version=\"2.16.5\"] .tabs-content>li .tab-close-button{align-items:center;background:rgba(var(--background-sc-rgb),.07);border-radius:100%;color:var(--background-sc);cursor:pointer;display:flex;height:1.6rem;justify-content:center;margin-inline-end:-1.6rem;margin-inline-start:.8rem;pointer-events:auto;transition:color .3s,background-color .3s;width:1.6rem}[data-gene-ui-version=\"2.16.5\"] .tabs-content>li .tab-close-button .icon{font-size:1.2rem}@media (hover:hover){[data-gene-ui-version=\"2.16.5\"] .tabs-content>li .tab-close-button:hover{background:var(--hero);color:var(--hero-sc)}}[data-gene-ui-version=\"2.16.5\"] .tabs-content.active .tab-close-button{background:rgba(var(--hero-rgb),.1);color:var(--hero)}@media (hover:hover){[data-gene-ui-version=\"2.16.5\"] .tabs-content.active .tab-close-button:hover{background:var(--hero);color:var(--hero-sc)}}[data-gene-ui-version=\"2.16.5\"] .tabs-content.equal-tabs>li{flex:1;min-width:12rem}[data-gene-ui-version=\"2.16.5\"] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content.equal-tabs>li{width:13rem}[data-gene-ui-version=\"2.16.5\"] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content.equal-tabs.type-text>li{width:12rem}[data-gene-ui-version=\"2.16.5\"] .tabs-content.type-basic{box-shadow:inset 0 -1px 0 0 rgba(var(--background-sc-rgb),.06);line-height:4.6rem;padding:0 2rem}[data-gene-ui-version=\"2.16.5\"] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content.type-basic{box-shadow:inset -1px 0 0 rgba(var(--background-sc-rgb),.06);padding:2rem 0;text-align:end}html[dir=rtl] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content.type-basic{box-shadow:inset 1px 0 0 rgba(var(--background-sc-rgb),.06)}[data-gene-ui-version=\"2.16.5\"] .tabs-holder.reversed>.tabs-head>.tabs-wrapper>.tabs-content.type-basic{box-shadow:inset 1px 0 0 rgba(var(--background-sc-rgb),.06);text-align:start}html[dir=rtl] .tabs-holder.reversed>.tabs-head>.tabs-wrapper>.tabs-content.type-basic{box-shadow:inset -1px 0 0 rgba(var(--background-sc-rgb),.06)}[data-gene-ui-version=\"2.16.5\"] .tabs-content.type-basic>li{box-shadow:inset 0 0 0 var(--hero);flex:inherit}[data-gene-ui-version=\"2.16.5\"] .tabs-content.type-basic>li.active{box-shadow:inset 0 -.4rem 0 0 var(--hero)}[data-gene-ui-version=\"2.16.5\"] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content.type-basic>li.active{box-shadow:inset -.3rem 0 0 var(--hero)}[data-gene-ui-version=\"2.16.5\"] .tabs-holder.reversed>.tabs-head>.tabs-wrapper>.tabs-content.type-basic>li.active,html[dir=rtl] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content.type-basic>li.active{box-shadow:inset .3rem 0 0 var(--hero)}html[dir=rtl] .tabs-holder.reversed>.tabs-head>.tabs-wrapper>.tabs-content.type-basic>li.active{box-shadow:inset -.3rem 0 0 var(--hero)}[data-gene-ui-version=\"2.16.5\"] .tabs-content.type-box>li{border:1px solid #0000;border-radius:1rem 1rem 0 0;line-height:4.1rem}[data-gene-ui-version=\"2.16.5\"] .tabs-holder:not(.vertical)>.tabs-head>.tabs-wrapper>.tabs-content.type-box>li+*{margin:0 0 0 .2rem}html[dir=rtl] .tabs-holder:not(.vertical)>.tabs-head>.tabs-wrapper>.tabs-content.type-box>li+*{margin:0 .2rem 0 0}[data-gene-ui-version=\"2.16.5\"] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content.type-box>li{border-radius:1rem 0 0 1rem}html[dir=rtl] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content.type-box>li{border-radius:0 1rem 1rem 0}[data-gene-ui-version=\"2.16.5\"] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content.type-box>li+*{margin:.2rem 0 0}[data-gene-ui-version=\"2.16.5\"] .tabs-holder.vertical.reversed>.tabs-head>.tabs-wrapper>.tabs-content.type-box>li{border-radius:0 1rem 1rem 0}html[dir=rtl] .tabs-holder.vertical.reversed>.tabs-head>.tabs-wrapper>.tabs-content.type-box>li{border-radius:1rem 0 0 1rem}@media (hover:hover){[data-gene-ui-version=\"2.16.5\"] .tabs-content.type-box>li:hover{border-color:rgba(var(--background-sc-rgb),.1)}}[data-gene-ui-version=\"2.16.5\"] .tabs-content.type-box>li.active{border-color:rgba(var(--background-sc-rgb),.1)}@media (hover:hover){html:not([dir=rtl]) .tabs-holder.vertical:not(.reversed)>.tabs-head>.tabs-wrapper>.tabs-content.type-box>li:hover{border-right-color:#0000}html:not([dir=rtl]) .tabs-holder.vertical.reversed>.tabs-head>.tabs-wrapper>.tabs-content.type-box>li:hover,html[dir=rtl] .tabs-holder.vertical:not(.reversed)>.tabs-head>.tabs-wrapper>.tabs-content.type-box>li:hover{border-left-color:#0000}html[dir=rtl] .tabs-holder.vertical.reversed>.tabs-head>.tabs-wrapper>.tabs-content.type-box>li:hover{border-right-color:#0000}}[data-gene-ui-version=\"2.16.5\"] .tabs-holder:not(.vertical)>.tabs-head>.tabs-wrapper>.tabs-content.type-box>li.active{border-bottom-color:var(--background)}html:not([dir=rtl]) .tabs-holder.vertical:not(.reversed)>.tabs-head>.tabs-wrapper>.tabs-content.type-box>li.active{border-right-color:var(--background)}html:not([dir=rtl]) .tabs-holder.reversed.vertical>.tabs-head>.tabs-wrapper>.tabs-content.type-box>li.active,html[dir=rtl] .tabs-holder.vertical:not(.reversed)>.tabs-head>.tabs-wrapper>.tabs-content.type-box>li.active{border-left-color:var(--background)}html[dir=rtl] .tabs-holder.reversed.vertical>.tabs-head>.tabs-wrapper>.tabs-content.type-box>li.active{border-right-color:var(--background)}[data-gene-ui-version=\"2.16.5\"] .tabs-content.type-button{box-shadow:inset 0 0 0 1px rgba(var(--background-sc-rgb),.1)}[data-gene-ui-version=\"2.16.5\"] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content.type-button:not(.equal-tabs)>li{padding:0 2rem}[data-gene-ui-version=\"2.16.5\"] .tabs-content.type-button>li{box-shadow:inset 0 0 0 0 var(--hero)}[data-gene-ui-version=\"2.16.5\"] .tabs-content.type-button>li.active{box-shadow:inset 0 0 0 1px var(--hero)}[data-gene-ui-version=\"2.16.5\"] .tabs-content.type-text.equal-tabs>li{min-width:10rem}[data-gene-ui-version=\"2.16.5\"] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content.type-text.equal-tabs>li{min-width:12rem}[data-gene-ui-version=\"2.16.5\"] .tabs-content.type-text>li{line-height:2.8rem;padding:0 1.5rem}[data-gene-ui-version=\"2.16.5\"] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content.type-text>li{padding:0 2rem}[data-gene-ui-version=\"2.16.5\"] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content.type-text>li+*{margin:1rem 0 0}[data-gene-ui-version=\"2.16.5\"] .tabs-content.type-text>li.active{background:var(--hero);color:var(--hero-sc)}[data-gene-ui-version=\"2.16.5\"] .tabs-content.type-box>li.active,[data-gene-ui-version=\"2.16.5\"] .tabs-content.type-button>li.active{color:var(--hero)}[data-gene-ui-version=\"2.16.5\"] .tabs-content.type-button,[data-gene-ui-version=\"2.16.5\"] .tabs-content.type-button>li,[data-gene-ui-version=\"2.16.5\"] .tabs-content.type-text,[data-gene-ui-version=\"2.16.5\"] .tabs-content.type-text>li{border-radius:2rem}@media (hover:hover){[data-gene-ui-version=\"2.16.5\"] .tabs-content.type-button>li:not(.active):hover,[data-gene-ui-version=\"2.16.5\"] .tabs-content.type-text>li:not(.active):hover{color:var(--hero)}}[data-gene-ui-version=\"2.16.5\"] .tabs-content-holder{width:100%}[data-gene-ui-version=\"2.16.5\"] .tabs-holder.vertical>.tabs-content-holder{flex:auto}[data-gene-ui-version=\"2.16.5\"] .tabs-content-holder.c-type-box{align-self:stretch;border:1px solid rgba(var(--background-sc-rgb),.1);border-radius:0 0 1rem 1rem;margin:-1px 0 0}[data-gene-ui-version=\"2.16.5\"] .tabs-holder.vertical>.tabs-content-holder.c-type-box{border-radius:1rem}[data-gene-ui-version=\"2.16.5\"] .tabs-holder.vertical:not(.reversed)>.tabs-content-holder.c-type-box{border-radius:0 1rem 1rem 0;margin:0 0 0 -1px}[data-gene-ui-version=\"2.16.5\"] .tabs-holder.vertical.reversed>.tabs-content-holder.c-type-box,html[dir=rtl] .tabs-holder.vertical:not(.reversed)>.tabs-content-holder.c-type-box{border-radius:1rem 0 0 1rem;margin:0 -1px 0 0}html[dir=rtl] .tabs-holder.vertical.reversed>.tabs-content-holder.c-type-box{border-radius:0 1rem 1rem 0;margin:0 0 0 -1px}[data-gene-ui-version=\"2.16.5\"] .external-link{align-items:center;display:flex;font-weight:600}[data-gene-ui-version=\"2.16.5\"] .external-link>*+*{margin-inline-start:.2rem}";
styleInject(css_248z);
function Tabs(props) {
const {
type,
actions,
position,
children,
fixedSize,
onChange,
className,
defaultActiveKey,
contentClassName,
contentPadding
} = props;
const holderRef = useRef(null);
const isControlled = ('activeKey' in props);
const [active, setActive] = useState(() => defaultActiveKey || getDefaultActiveKey(children));
const activeKey = isControlled ? props.activeKey : active;
const handleClick = useCallback(key => {
!isControlled && setActive(key);
onChange && onChange(key);
(holderRef === null || holderRef === void 0 ? void 0 : holderRef.current) && holderRef.current.scrollTo(0, 0);
}, [onChange, isControlled, holderRef.current]);
const {
tabs,
content,
tabContentPadding
} = useMemo(() => getTabsAndContent(children, activeKey, defaultActiveKey, handleClick), [children, activeKey, handleClick]);
return /*#__PURE__*/React__default.createElement("div", {
className: classnames('tabs-holder', className, {
vertical: position !== 'top',
reversed: position === 'right',
horizontal: position === 'top'
})
}, /*#__PURE__*/React__default.createElement("div", {
className: "tabs-head"
}, /*#__PURE__*/React__default.createElement("div", {
className: "tabs-wrapper"
}, /*#__PURE__*/React__default.createElement("ul", {
className: classnames('tabs-content', "type-".concat(type), {
'equal-tabs': fixedSize
})
}, tabs)), actions && position === 'top' && /*#__PURE__*/React__default.createElement("div", {
className: "tabs-actions"
}, actions)), /*#__PURE__*/React__default.createElement("div", {
ref: holderRef,
className: classnames('tabs-content-holder', contentClassName, {
'c-type-box': type === 'box'
}),
style: {
padding: "".concat((tabContentPadding || contentPadding) / 10, "rem")
}
}, content));
}
Tabs.propTypes = {
/**
* Any valid react node, will be shown at right side of tab menu bar.
*/
actions: PropTypes.node,
/**
* Prop for specifying which tab is active
*/
activeKey: PropTypes.string,
/**
* Prop for default active tab
*/
defaultActiveKey: PropTypes.string,
/**
* Style of tab menu bar
*/
type: PropTypes.oneOf(['basic', 'box', 'button', 'text']),
/**
* Position of tab menu bar
*/
position: PropTypes.oneOf(['top', 'left', 'right']),
/**
* Size of tabs will be fixed when the value is true
*/
fixedSize: PropTypes.bool,
/**
* Callback function, fired when tab changes
*/
onChange: PropTypes.func,
/**
* Any valid react node
*/
children: childrenOf([Tab]),
/**
* Additional classname for content wrapper
*/
contentClassName: PropTypes.string,
/**
* Padding value for content wrapper
*/
contentPadding: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
};
Tabs.defaultProps = {
type: 'basic',
position: 'top',
fixedSize: false,
contentPadding: 19
};
function getDefaultActiveKey(children) {
let defaultActiveKey;
React__default.Children.forEach(children, child => {
if (!defaultActiveKey && !child.props.disabled) {
defaultActiveKey = child.key;
}
});
return defaultActiveKey;
}
function getTabsAndContent(children, activeKey, defaultActiveKey, handleClick) {
let content;
let tabContentPadding;
const tabs = React__default.Children.map(children, child => {
const active = child.key === activeKey;
if (active) {
content = child.props.children;
tabContentPadding = child.props.contentPadding;
}
return /*#__PURE__*/React__default.cloneElement(child, {
onClick: () => handleClick(child.key),
defaultActiveKey,
activeKey,
active
});
});
return {
tabs,
content,
tabContentPadding
};
}
export { Tab, Tabs };