@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
145 lines • 9.14 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.WizardSmall = exports.Wizard = void 0;
const jsx_runtime_1 = require("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/>.
*/
const react_1 = __importStar(require("react"));
const defaultImports_1 = require("../_common/defaultImports");
const typography_1 = require("../typography");
exports.Wizard = react_1.default.forwardRef(function Wizard({ as, className, style, size = 'large', steps, activeStepIndex, orientation, htmlAttributes, alignment = orientation === 'vertical' ? 'top' : 'middle', }, ref) {
(0, react_1.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 ((0, jsx_runtime_1.jsx)(exports.WizardSmall, { as: as, orientation: orientation, style: style, className: className, steps: steps, activeStepIndex: activeStepIndex, ref: ref, htmlAttributes: htmlAttributes, alignment: alignment }));
case 'large':
return ((0, jsx_runtime_1.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_1.default.forwardRef(function WizardLarge({ orientation = 'horizontal', activeStepIndex, steps, as, style, className, htmlAttributes, alignment, }, ref) {
const Component = as || 'div';
const wizardClasses = (0, defaultImports_1.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 (0, defaultImports_1.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 ((0, jsx_runtime_1.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 = (0, defaultImports_1.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 ((0, jsx_runtime_1.jsx)("div", { className: wizardStepClasses, children: (0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: "body-large", children: step.content }) }, index));
}
else {
return (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: step.content }, index);
}
}), steps.map((step, index) => {
return ((0, jsx_runtime_1.jsx)("div", { className: stepClasses(index, step), style: {
gridRow: orientation === 'vertical' ? index + 1 : '',
}, children: (0, jsx_runtime_1.jsx)(Circle, { status: step.status === 'error'
? 'error'
: getStatus(activeStepIndex, index), number: index + 1, text: step.content, alignment: alignment }) }, index));
})] })));
});
exports.WizardSmall = react_1.default.forwardRef(function WizardSmall({ orientation = 'horizontal', activeStepIndex, steps, as, className, htmlAttributes, alignment = 'middle', }, ref) {
const Component = as || 'div';
const wizardClasses = (0, defaultImports_1.classNames)('ndl-wizard', 'ndl-wizard-small', {
'ndl-horizontal': orientation === 'horizontal',
'ndl-vertical': orientation === 'vertical',
[`ndl-wizard-align-${alignment}`]: alignment,
}, className);
const stepClasses = (index) => (0, defaultImports_1.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 ((0, jsx_runtime_1.jsxs)(Component, Object.assign({ className: wizardClasses, ref: ref }, htmlAttributes, { children: [(0, jsx_runtime_1.jsx)("div", { className: "ndl-wizard-steps-line" }), steps.map((step, index) => {
return ((0, jsx_runtime_1.jsx)("div", { className: stepClasses(index), children: (0, jsx_runtime_1.jsx)("div", { className: "ndl-wizard-circle" }) }, index));
}), (0, jsx_runtime_1.jsx)("div", { className: "ndl-wizard-steps-line" })] })));
});
const Circle = ({ status, number, alignment = 'middle', }) => {
const innerCircleClasses = (0, defaultImports_1.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 = (0, defaultImports_1.classNames)('ndl-wizard-circle', {
[`ndl-wizard-align-${alignment}`]: alignment,
});
return ((0, jsx_runtime_1.jsx)("div", { className: outerCircleClasses, children: (0, jsx_runtime_1.jsxs)("svg", { children: [status === 'active' && ((0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("circle", { className: "n-stroke-palette-primary-bg-strong", style: { fill: 'transparent', strokeWidth: 2 }, cx: "16", cy: "16", r: "14" }) })), (0, jsx_runtime_1.jsx)("circle", { className: innerCircleClasses, cx: "16", cy: "16", r: "12" }), (0, jsx_runtime_1.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