@progress/sitefinity-nextjs-sdk
Version:
Provides OOB widgets developed using the Next.js framework, which includes an abstraction layer for Sitefinity communication. Additionally, it offers an expanded API, typings, and tools for further development and integration.
15 lines (14 loc) • 1.72 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useContext } from 'react';
import { FormContext } from '../../form/form-context';
export function FormNavigationClient(props) {
const { currentFormPage } = useContext(FormContext);
return (_jsx("ol", { className: "list-unstyled d-inline-flex gap-3 mb-0", children: props.navigationSteps.map((step, index) => {
const pageNumber = index + 1;
const stepId = `form-nav-step-${pageNumber}`;
const isCurrent = index === currentFormPage;
const isPast = index < currentFormPage;
return (_jsxs("li", { id: stepId, className: "d-inline-flex align-items-center gap-2", "data-sf-navigation-index": pageNumber, children: [_jsx("span", { "data-sf-progress-indicator": "incomplete", className: "align-items-center justify-content-center", style: { display: isPast ? 'none' : 'inline-flex' }, children: _jsx("b", { className: `bg-white border border-1 ${isCurrent ? 'border-primary' : 'border-secondary'} rounded-circle d-inline-flex align-items-center justify-content-center`, style: { width: '1.6em', aspectRatio: '1' }, children: pageNumber }) }), _jsx("span", { "data-sf-progress-indicator": "past", className: "align-items-center justify-content-center", style: { display: isPast ? 'inline-flex' : 'none' }, children: _jsx("b", { className: "bg-white border border-1 border-secondary rounded-circle d-inline-flex align-items-center justify-content-center", style: { width: '1.6em', aspectRatio: '1' }, children: "\u2713" }) }), _jsx("span", { "data-sf-page-title": step, className: `${isCurrent ? 'fw-bold' : 'text-secondary'}`, children: step })] }, stepId));
}) }));
}