@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.
60 lines (59 loc) • 2.69 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useContext, useRef, useState, useEffect, useCallback } from 'react';
import { FormContext } from '../../form/form-context';
import { SubmitButtonClient } from '../submit-button/submit-button-client';
export function FormPageClient(props) {
const { totalFormPages, currentFormPage, setCurrentFormPage, validateFields } = useContext(FormContext);
const containerRef = useRef(null);
const [pageIndex, setPageIndex] = useState(-1);
const getFormPages = useCallback(() => {
if (!containerRef.current) {
return null;
}
const formContainer = containerRef.current.closest('[data-sf-role="form-container"]');
if (!formContainer) {
return null;
}
return formContainer.querySelectorAll('[data-sf-role="form-page-container"]');
}, []);
useEffect(() => {
const allPages = getFormPages();
if (!allPages) {
return;
}
const myPage = containerRef.current.closest('[data-sf-role="form-page-container"]');
const index = Array.from(allPages).indexOf(myPage);
setPageIndex(index);
}, [totalFormPages, getFormPages]);
useEffect(() => {
const allPages = getFormPages();
if (!allPages || pageIndex < 0) {
return;
}
allPages.forEach((page, i) => {
page.style.display = i === currentFormPage ? 'block' : 'none';
});
}, [currentFormPage, pageIndex, getFormPages]);
const isLastPage = pageIndex >= 0 && pageIndex === totalFormPages - 1;
const isFirstPage = pageIndex === 0;
const handleNext = () => {
if (isLastPage) {
return;
}
const allValid = validateFields(props.fieldKeys);
if (allValid) {
setCurrentFormPage(currentFormPage + 1);
}
};
const handleBack = (e) => {
e.preventDefault();
if (!isFirstPage) {
setCurrentFormPage(currentFormPage - 1);
}
};
return (_jsxs("div", { ref: containerRef, className: "mb-3 mt-3", "data-sf-role": "next-button-container", children: [isLastPage
? _jsx(SubmitButtonClient, { children: props.buttonLabel })
: _jsx("button", { type: "button", className: "btn btn-secondary", "data-sf-role": "next-button", onClick: handleNext, children: props.buttonLabel }), props.allowStepBackward && !isFirstPage &&
_jsx("button", { type: "button", className: "btn btn-link shadow-none text-decoration-none", "data-sf-role": "back-link", onClick: handleBack, children: props.backLinkLabel })] }));
}