@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
119 lines • 7.42 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
*
* Copyright (c) "Neo4j"
* Neo4j Sweden AB [http://neo4j.com]
*
* This file is part of Neo4j.
*
* Neo4j is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import React, { useEffect } from 'react';
import { classNames } from '../_common/defaultImports';
import { Typography } from '../typography';
export const Wizard = React.forwardRef(function Wizard({ as, className, style, size = 'large', steps, activeStepIndex, orientation, htmlAttributes, alignment = orientation === 'vertical' ? 'top' : 'middle', }, ref) {
useEffect(() => {
if (activeStepIndex > steps.length - 1 || activeStepIndex < 0) {
console.warn(`[🪡 Needle]: The activeStepIndex in Wizard is out of bounds. The activeStepIndex is ${activeStepIndex} and the number of steps is ${steps.length}.`);
}
}, [activeStepIndex, steps.length]);
switch (size) {
case 'small':
return (_jsx(WizardSmall, { as: as, orientation: orientation, style: style, className: className, steps: steps, activeStepIndex: activeStepIndex, ref: ref, htmlAttributes: htmlAttributes, alignment: alignment }));
case 'large':
return (_jsx(WizardLarge, { as: as, orientation: orientation, style: style, className: className, steps: steps, activeStepIndex: activeStepIndex, ref: ref, htmlAttributes: htmlAttributes, alignment: alignment }));
}
});
const getStatus = (activeStepIndex, stepIndex) => stepIndex === activeStepIndex
? 'active'
: activeStepIndex < stepIndex
? 'incomplete'
: 'complete';
const WizardLarge = React.forwardRef(function WizardLarge({ orientation = 'horizontal', activeStepIndex, steps, as, style, className, htmlAttributes, alignment, }, ref) {
const Component = as || 'div';
const wizardClasses = classNames('ndl-wizard', 'ndl-wizard-large', {
'ndl-horizontal': orientation === 'horizontal',
'ndl-vertical': orientation === 'vertical',
[`ndl-wizard-align-${alignment}`]: alignment,
}, className);
const componentStyle = {
gridTemplateColumns: orientation === 'horizontal'
? `repeat(${steps.length}, 1fr)`
: `32px 1fr`,
gridTemplateRows: orientation === 'vertical' && `repeat(${steps.length}, 1fr)`,
};
const stepClasses = (index, step) => {
const status = getStatus(activeStepIndex, index);
return classNames('ndl-wizard-step', {
'ndl-horizontal': orientation === 'horizontal',
'ndl-vertical': orientation === 'vertical',
'ndl-wizard-step-line-right': index < steps.length - 1,
'ndl-wizard-step-line-left': index > 0,
'ndl-wizard-step-complete': status === 'complete',
'ndl-wizard-step-active': status === 'active',
'ndl-wizard-step-error': step.status === 'error',
[`ndl-wizard-align-${alignment}`]: alignment,
});
};
return (_jsxs(Component, Object.assign({ className: wizardClasses, style: Object.assign(Object.assign({}, style), componentStyle), ref: ref }, htmlAttributes, { children: [steps.map((step, index) => {
if (typeof step.content === 'string') {
const wizardStepClasses = classNames('ndl-wizard-step-text', {
'ndl-vertical': orientation === 'vertical',
'ndl-horizontal': orientation === 'horizontal',
[`ndl-wizard-align-${alignment}`]: alignment,
'ndl-wizard-step-incomplete': getStatus(activeStepIndex, index) === 'incomplete',
});
return (_jsx("div", { className: wizardStepClasses, children: _jsx(Typography, { variant: "body-large", children: step.content }) }, index));
}
else {
return _jsx(React.Fragment, { children: step.content }, index);
}
}), steps.map((step, index) => {
return (_jsx("div", { className: stepClasses(index, step), style: {
gridRow: orientation === 'vertical' ? index + 1 : '',
}, children: _jsx(Circle, { status: step.status === 'error'
? 'error'
: getStatus(activeStepIndex, index), number: index + 1, text: step.content, alignment: alignment }) }, index));
})] })));
});
export const WizardSmall = React.forwardRef(function WizardSmall({ orientation = 'horizontal', activeStepIndex, steps, as, className, htmlAttributes, alignment = 'middle', }, ref) {
const Component = as || 'div';
const wizardClasses = classNames('ndl-wizard', 'ndl-wizard-small', {
'ndl-horizontal': orientation === 'horizontal',
'ndl-vertical': orientation === 'vertical',
[`ndl-wizard-align-${alignment}`]: alignment,
}, className);
const stepClasses = (index) => classNames('ndl-wizard-step', {
'ndl-horizontal': orientation === 'horizontal',
'ndl-vertical': orientation === 'vertical',
'ndl-wizard-step-active': getStatus(activeStepIndex, index) === 'active',
'ndl-wizard-step-complete': getStatus(activeStepIndex, index) === 'complete',
[`ndl-wizard-align-${alignment}`]: alignment,
});
return (_jsxs(Component, Object.assign({ className: wizardClasses, ref: ref }, htmlAttributes, { children: [_jsx("div", { className: "ndl-wizard-steps-line" }), steps.map((step, index) => {
return (_jsx("div", { className: stepClasses(index), children: _jsx("div", { className: "ndl-wizard-circle" }) }, index));
}), _jsx("div", { className: "ndl-wizard-steps-line" })] })));
});
const Circle = ({ status, number, alignment = 'middle', }) => {
const innerCircleClasses = classNames({
'n-fill-palette-primary-bg-strong': status === 'complete' || status === 'active',
'n-fill-palette-neutral-bg-stronger': status === 'incomplete',
'n-fill-palette-danger-bg-strong': status === 'error',
});
const outerCircleClasses = classNames('ndl-wizard-circle', {
[`ndl-wizard-align-${alignment}`]: alignment,
});
return (_jsx("div", { className: outerCircleClasses, children: _jsxs("svg", { children: [status === 'active' && (_jsx("g", { children: _jsx("circle", { className: "n-stroke-palette-primary-bg-strong", style: { fill: 'transparent', strokeWidth: 2 }, cx: "16", cy: "16", r: "14" }) })), _jsx("circle", { className: innerCircleClasses, cx: "16", cy: "16", r: "12" }), _jsx("text", { x: "50%", y: "50%", fontSize: 14, className: "n-fill-palette-neutral-bg-weak", textAnchor: "middle", dominantBaseline: "middle", dy: "0.1em", children: status === 'error' ? '!' : number })] }) }));
};
//# sourceMappingURL=Wizard.js.map