@geneui/components
Version:
The Gene UI components library designed for BI tools
315 lines (309 loc) • 15.4 kB
JavaScript
import React__default, { useRef, useState } from 'react';
import PropTypes from 'prop-types';
import { c as classnames } from '../index-031ff73c.js';
import { l as stepsConfig } from '../configs-00612ce0.js';
import Icon from '../Icon/index.js';
import { T as Tooltip } from '../index-6d7e99cd.js';
import '../dateValidation-67caec66.js';
import { d as debounce } from '../debounce-4419bc2f.js';
import 'react-dom';
import Popover from '../Popover/index.js';
import { s as styleInject } from '../style-inject.es-746bb8ed.js';
import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
import { c as childrenOf } from '../index-a0e4e333.js';
import '../tslib.es6-f211516f.js';
import '../hooks/useDeviceType.js';
import '../hooks/useWindowSize.js';
import '../hooks/useDebounce.js';
import '../GeneUIProvider/index.js';
import '../_commonjsHelpers-24198af3.js';
import '../index-122432cd.js';
import '../hooks/useUpdatableRef.js';
import '../hooks/useForceUpdate.js';
import '../Portal/index.js';
import '../Scrollbar/index.js';
import '../guid-8ddf77b3.js';
var css_248z = "[data-gene-ui-version=\"2.16.5\"] .steps-holder{--circle-font-size:1.2rem;--font-size:1.2rem;--circle-size:2.6rem;--min-height:8.8rem;display:flex;-webkit-user-select:none;user-select:none}[data-gene-ui-version=\"2.16.5\"] .steps-holder.s-big{--circle-font-size:1.6rem;--font-size:1.4rem;--circle-size:3.6rem;--min-height:9.8rem}[data-gene-ui-version=\"2.16.5\"] .steps-holder.s-big .bc-icon-selected{font-size:var(--circle-size)}[data-gene-ui-version=\"2.16.5\"] .steps-holder.d-horizontal{align-items:center;min-height:var(--min-height);text-align:center;width:100%}[data-gene-ui-version=\"2.16.5\"] .steps-holder.d-horizontal>li:not(:first-child){margin:0 0 0 1rem}html[dir=rtl] .steps-holder.d-horizontal>li:not(:first-child){margin:0 1rem 0 0}[data-gene-ui-version=\"2.16.5\"] .steps-holder.d-horizontal .line{height:1px;width:100%}[data-gene-ui-version=\"2.16.5\"] .steps-holder.d-horizontal .line:before{height:inherit;width:0}[data-gene-ui-version=\"2.16.5\"] .steps-holder.d-horizontal .line.active:before{width:100%}[data-gene-ui-version=\"2.16.5\"] .steps-holder.d-vertical{align-items:flex-start;flex-direction:column;height:100%}[data-gene-ui-version=\"2.16.5\"] .steps-holder.d-vertical>li:not(:first-child){margin:.8rem 0 0}[data-gene-ui-version=\"2.16.5\"] .steps-holder.d-vertical .line-box{display:flex;justify-content:center;width:var(--circle-size)}[data-gene-ui-version=\"2.16.5\"] .a-dots.steps-holder.d-vertical .line-box{width:1.9rem}[data-gene-ui-version=\"2.16.5\"] .steps-holder.d-vertical .line{height:100%;min-height:3.4rem;width:1px}[data-gene-ui-version=\"2.16.5\"] .steps-holder.d-vertical .line:before{height:0;width:inherit}[data-gene-ui-version=\"2.16.5\"] .steps-holder.d-vertical .line.active:before{height:100%}[data-gene-ui-version=\"2.16.5\"] .steps-holder.d-vertical .step-texts{margin:0 0 0 1.5rem}html[dir=rtl] .steps-holder.d-vertical .step-texts{margin:0 1.5rem 0 0}[data-gene-ui-version=\"2.16.5\"] .steps-holder .line{background:rgba(var(--background-sc-rgb),.04)}[data-gene-ui-version=\"2.16.5\"] .steps-holder .line:before{background:var(--hero);content:\"\";display:block;transition:width .4s,height .4s}[data-gene-ui-version=\"2.16.5\"] .steps-holder.a-dots .line{background:var(--hero)}[data-gene-ui-version=\"2.16.5\"] .steps-holder .s-success{--hero:var(--confirm);--hero-hover:var(--confirm-hover);--hero-sc:var(--confirm-sc);--hero-rgb:var(--confirm-rgb);--hero-sc-rgb:var(--confirm-sc-rgb)}[data-gene-ui-version=\"2.16.5\"] .steps-holder .s-fail{--hero:var(--danger);--hero-hover:var(--danger-hover);--hero-sc:var(--danger-sc);--hero-rgb:var(--danger-rgb);--hero-sc-rgb:var(--danger-sc-rgb)}[data-gene-ui-version=\"2.16.5\"] .step{align-items:center;display:flex;flex-shrink:0;font:600 var(--font-size)/1.8rem var(--font-family);position:relative}[data-gene-ui-version=\"2.16.5\"] .step.clickable{cursor:pointer}[data-gene-ui-version=\"2.16.5\"] .step.clickable .step-circle:before{border:1px solid var(--hero);border-radius:100%;bottom:-.4rem;content:\"\";display:block;left:-.4rem;position:absolute;right:-.4rem;top:-.4rem;transform:scale(0);transition:transform .4s,border-color .4s}[data-gene-ui-version=\"2.16.5\"] .s-initial.step.clickable .step-circle:before,[data-gene-ui-version=\"2.16.5\"] .steps-holder:not(.highlight-current) .s-current.step.clickable .step-circle:before{border-color:rgba(var(--background-sc-rgb),.06)}@media (hover:hover){[data-gene-ui-version=\"2.16.5\"] .step.clickable:hover .step-circle:before{transform:scale(1)}}[data-gene-ui-version=\"2.16.5\"] .step.clickable.s-activated .step-circle:before{transform:scale(1)}[data-gene-ui-version=\"2.16.5\"] .line-box{flex:auto}[data-gene-ui-version=\"2.16.5\"] .d-horizontal .step-label,[data-gene-ui-version=\"2.16.5\"] .d-horizontal .step-title{bottom:100%;left:50%;position:absolute;transform:translateX(-50%);white-space:nowrap;width:auto}[data-gene-ui-version=\"2.16.5\"] .d-horizontal .step-title{margin:0 0 1rem}[data-gene-ui-version=\"2.16.5\"] .d-horizontal .step-title:nth-last-child(2){bottom:auto;margin:1rem 0 0;top:100%}[data-gene-ui-version=\"2.16.5\"] .step-label{opacity:.5}[data-gene-ui-version=\"2.16.5\"] .d-horizontal .step-label{margin:0 0 1.6rem}[data-gene-ui-version=\"2.16.5\"] .step-texts{align-items:flex-start;display:flex;flex-direction:column;pointer-events:none}[data-gene-ui-version=\"2.16.5\"] .step-texts.both{font-size:1.4rem}[data-gene-ui-version=\"2.16.5\"] .step-circle{align-items:center;background:rgba(var(--background-sc-rgb),.04);border-radius:100%;display:flex;font-size:var(--circle-font-size);height:var(--circle-size);justify-content:center;position:relative;transition:color .3s,background .3s;width:var(--circle-size)}[data-gene-ui-version=\"2.16.5\"] .highlight-current .s-current .step-circle,[data-gene-ui-version=\"2.16.5\"] .passed .step-circle,[data-gene-ui-version=\"2.16.5\"] .s-activated .step-circle{background:var(--hero);color:var(--hero-sc)}[data-gene-ui-version=\"2.16.5\"] .step-layer{align-items:center;display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;transition:transform .4s;width:100%}[data-gene-ui-version=\"2.16.5\"] .passed .step-layer.layer-1,[data-gene-ui-version=\"2.16.5\"] .step-layer.layer-2{transform:scale(0)}[data-gene-ui-version=\"2.16.5\"] .passed .step-layer.layer-2{transform:scale(1)}[data-gene-ui-version=\"2.16.5\"] .step-dot{--size:1.9rem;--inner-size:0.9rem;align-items:center;display:flex;height:var(--size);justify-content:center;position:relative;width:var(--size)}[data-gene-ui-version=\"2.16.5\"] .view-normal .step-dot{--size:15px;--inner-size:7px}[data-gene-ui-version=\"2.16.5\"] .view-small .step-dot{--size:11px;--inner-size:5px}[data-gene-ui-version=\"2.16.5\"] .step-dot:after,[data-gene-ui-version=\"2.16.5\"] .step-dot:before{border-radius:100%;box-shadow:inset 0 0 0 .2rem var(--hero);content:\"\";display:block}[data-gene-ui-version=\"2.16.5\"] .step-dot:before{content:\"\";height:var(--inner-size);transition:box-shadow .3s;width:var(--inner-size)}[data-gene-ui-version=\"2.16.5\"] .passed .step-dot:before,[data-gene-ui-version=\"2.16.5\"] .s-activated .step-dot:before,[data-gene-ui-version=\"2.16.5\"] .s-current .step-dot:before{box-shadow:inset 0 0 0 .9rem var(--hero)}[data-gene-ui-version=\"2.16.5\"] .step-dot:after{height:100%;left:0;position:absolute;top:0;transform:scale(0);transition:transform .3s;width:100%}[data-gene-ui-version=\"2.16.5\"] .s-activated .step-dot:after,[data-gene-ui-version=\"2.16.5\"] .s-current .step-dot:after{transform:scale(1)}[data-gene-ui-version=\"2.16.5\"] .detailed-value-popover-container{padding:16px}";
styleInject(css_248z);
const positionMap = {
vertical: 'left',
horizontal: 'bottom'
};
function DetailedView(_ref) {
let {
content,
children,
direction
} = _ref;
const isHoveredOnContent = useRef(false);
const isHoveredOnStep = useRef(false);
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
const closePopover = () => {
debounce(() => {
if (!isHoveredOnContent.current && !isHoveredOnStep.current) {
setIsPopoverOpen(false);
}
}, 250)();
};
const stepOnMouseEnterHandler = () => {
isHoveredOnStep.current = true;
setIsPopoverOpen(true);
};
const stepOnMouseLeaveHandler = () => {
isHoveredOnStep.current = false;
closePopover();
};
const contentOnMouseEnterHandler = () => isHoveredOnContent.current = true;
const contentOnMouseLeaveHandler = () => {
isHoveredOnContent.current = false;
closePopover();
};
return /*#__PURE__*/React__default.createElement(Popover, {
swipeable: true,
align: "center",
position: positionMap[direction],
isOpen: isPopoverOpen,
onClickOutside: () => setIsPopoverOpen(false),
extendTargetWidth: false,
onSwipedDown: () => setIsPopoverOpen(false),
Content: /*#__PURE__*/React__default.createElement("div", {
onMouseEnter: contentOnMouseEnterHandler,
onMouseLeave: contentOnMouseLeaveHandler,
className: "detailed-value-popover-container"
}, content)
}, /*#__PURE__*/React__default.createElement("div", {
onMouseEnter: stepOnMouseEnterHandler,
onMouseLeave: stepOnMouseLeaveHandler
}, children));
}
function WithTooltip(_ref) {
let {
tooltip,
children
} = _ref;
if (!tooltip) return children;
return /*#__PURE__*/React__default.createElement(Tooltip, {
title: tooltip
}, children);
}
function Step(_ref2) {
let {
title,
label,
onClick,
icon,
status,
appearance,
failColor,
successColor,
heroColor,
style,
extraLines,
stepsCount,
current,
tooltip,
direction,
detailedView,
__index
} = _ref2;
const stepBody = /*#__PURE__*/React__default.createElement("li", {
className: classnames('step', "s-".concat(status), {
clickable: !!onClick,
passed: status === 'fail' || status === 'success'
}),
onClick: onClick,
style: {
'--danger': failColor,
'--confirm': successColor,
'--hero': heroColor,
...style
}
}, appearance === stepsConfig.appearance[1] ? /*#__PURE__*/React__default.createElement("div", {
className: "step-dot"
}) : /*#__PURE__*/React__default.createElement("div", {
className: "step-circle"
}, icon ? /*#__PURE__*/React__default.createElement(Icon, {
type: icon
}) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
className: "step-layer layer-1"
}, __index), /*#__PURE__*/React__default.createElement("div", {
className: "step-layer layer-2"
}, /*#__PURE__*/React__default.createElement(Icon, {
type: status === 'fail' ? 'bc-icon-clear' : 'bc-icon-selected'
})))), /*#__PURE__*/React__default.createElement("div", {
className: classnames('step-texts', {
both: !!title && !!label
})
}, title && /*#__PURE__*/React__default.createElement("div", {
className: "step-title"
}, title), label && /*#__PURE__*/React__default.createElement("div", {
className: "step-label"
}, label)));
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, (__index !== 1 || extraLines) && /*#__PURE__*/React__default.createElement("li", {
className: "line-box"
}, /*#__PURE__*/React__default.createElement("div", {
className: classnames('line', "s-".concat(status), {
active: current >= __index
}),
style: {
'--danger': failColor,
'--confirm': successColor,
'--hero': heroColor
}
})), detailedView ? /*#__PURE__*/React__default.createElement(DetailedView, {
direction: direction,
content: detailedView
}, stepBody) : /*#__PURE__*/React__default.createElement(WithTooltip, {
tooltip: tooltip
}, stepBody), __index === stepsCount && extraLines && /*#__PURE__*/React__default.createElement("li", {
className: "line-box"
}, /*#__PURE__*/React__default.createElement("div", {
className: classnames('line', "s-".concat(status), {
active: current === stepsCount
}),
style: {
'--danger': failColor,
'--confirm': successColor,
'--hero': heroColor
}
})));
}
Step.propTypes = {
/**
* Title of Step
*/
title: PropTypes.string,
/**
* Label of Step
*/
label: PropTypes.string,
/**
* Tooltip of Step
*/
tooltip: PropTypes.string,
/**
* Fires an event on ExtendedInput change((event: Event) => void).
*/
onClick: PropTypes.func,
/**
* Icon for current step
*/
icon: PropTypes.string,
/**
* Current step status
*/
status: PropTypes.oneOf(stepsConfig.status),
/**
* View/style for step
*/
appearance: PropTypes.oneOf(stepsConfig.appearance),
/**
* style for step
*/
style: PropTypes.object,
/**
* Color for failed step
*/
failColor: PropTypes.string,
/**
* Color for success step
*/
successColor: PropTypes.string,
/**
* Default color for step
*/
heroColor: PropTypes.string
};
Step.defaultProps = {
appearance: stepsConfig.appearance[0]
};
function getStepStatus(current, index, statusProp) {
if (current > index) return 'success';
if (current < index) return 'initial';
return statusProp || 'current';
}
function Steps(_ref) {
let {
direction,
size,
appearance,
highlightCurrent,
extraLines,
children,
current,
status,
failColor,
successColor,
heroColor,
className,
...rest
} = _ref;
return /*#__PURE__*/React__default.createElement("ul", _extends({
className: classnames('steps-holder', "s-".concat(size), "d-".concat(direction), "a-".concat(appearance), {
'highlight-current': highlightCurrent
}, className),
style: {
'--danger': failColor,
'--confirm': successColor,
'--hero': heroColor
}
}, rest), React__default.Children.map(children, (child, i) => {
const stepStatus = child.props.status || getStepStatus(current, i, status);
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.cloneElement(child, {
__index: i + 1,
status: stepStatus,
appearance,
extraLines,
stepsCount: children.length,
current,
direction
}));
}));
}
Steps.propTypes = {
/**
* View of 'Steps'.
*/
direction: PropTypes.oneOf(stepsConfig.direction),
/**
* Size of 'Steps'.
*/
size: PropTypes.oneOf(stepsConfig.size),
/**
* View type of 'Steps'.
*/
appearance: PropTypes.oneOf(stepsConfig.appearance),
/**
* Turn on/off highlighted view of current step.
*/
highlightCurrent: PropTypes.bool,
/**
* Show/hide extra lines in 'Steps'.
*/
extraLines: PropTypes.bool,
/**
* The child or children of 'Steps' molecule
*/
children: childrenOf([Step]),
/**
* Initial/current step
*/
current: PropTypes.number,
/**
* Status of current step
*/
status: PropTypes.oneOf(stepsConfig.status),
/**
* Additional classname
*/
className: PropTypes.string
};
Steps.defaultProps = {
direction: stepsConfig.direction[0],
size: stepsConfig.size[0],
appearance: stepsConfig.appearance[0],
highlightCurrent: false,
extraLines: false,
current: 0
};
export { Step, Steps };