@kadconsulting/dry
Version:
KAD Reusable Component Library
26 lines • 1.6 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// cli Version 1.0.0
// Version 1.0.2
import { forwardRef, useState } from 'react';
import classnames from 'classnames';
// import * as Utils from "./ProgressNavigation.utils.js";
import './ProgressNavigation.scss';
const ProgressNavigation = forwardRef(({ id, className, passProps, steps, orientation = 'horizontal', activeColor = '#007bff', onStepClick, ...props }, ref) => {
const [activeStep, setActiveStep] = useState(0);
const handleStepClick = (index) => {
setActiveStep(index);
if (onStepClick) {
onStepClick(index);
}
};
// const progressPercentage = (activeStep / (steps.length - 1)) * 100;
// const progressPercentageFillStyle = {
// [orientation === 'horizontal' ? 'width' : 'height']: `${progressPercentage}%`,
// };
return (_jsx("div", { id: id, ref: ref, className: classnames(className, 'dry-progressnavigation', orientation), ...props, children: _jsx("div", { className: classnames('steps-container', orientation), children: steps.map((step, index) => {
const isActive = activeStep === index;
return (_jsx("div", { className: classnames('step', { active: isActive }), onClick: () => handleStepClick(index), children: _jsxs("div", { className: 'text-container', children: [_jsx("div", { className: 'title', children: step.title }), _jsx("div", { className: 'text', children: step.text })] }) }, step.id));
}) }) }));
});
export default ProgressNavigation;
//# sourceMappingURL=ProgressNavigation.js.map