-
Bjarke Madsen authoredBjarke Madsen authored
SurveyNavigationComponent.tsx 2.14 KiB
import React, { useEffect, useState } from "react";
import ProgressBar from './ProgressBar';
import { Container, Row } from "react-bootstrap";
function SurveyNavigationComponent({ surveyModel, endSurvey, saveSurvey, validatePage, children }) {
const [pageNo, setPageNo] = useState(0);
useEffect(() => {
setPageNo(surveyModel.currentPageNo)
}, [surveyModel]);
const pageNoSetter = (page) => {
setPageNo(page);
surveyModel.currentPageNo = page;
}
const decrementPageNo = () => { pageNoSetter(surveyModel.currentPageNo - 1); };
const incrementPageNo = () => { pageNoSetter(surveyModel.currentPageNo + 1); };
const renderButton = (text, func) => {
// TODO add sv-footer__complete-btn for complete button, and save button perhaps too?
return (
<button className="sv-btn sv-btn--navigation" onClick={func}>
{text}
</button>
);
};
const renderExternalNavigation = () => {
return (
<div className="navigation-block">
<div className="navigation-progress-container">
<div className="navigation-buttons-container">
{(pageNo === surveyModel.visiblePages.length - 1) && renderButton('Complete Survey', endSurvey)}
{renderButton('Save progress', saveSurvey)}
{/* {(pageNo !== surveyModel.visiblePages.length - 1) && renderButton('Next Page', incrementPageNo)} */}
{/* {renderButton('Validate Page', validatePage)} */}
{/* {pageNo !== 0 && renderButton('Previous Page', decrementPageNo)} */}
</div>
</div>
</div>
);
};
return (
<Container>
<Row>
{renderExternalNavigation()}
</Row>
<Row>
<ProgressBar surveyModel={surveyModel} pageNoSetter={pageNoSetter} />
{children}
</Row>
<Row>
{renderExternalNavigation()}
</Row>
</Container>
);
}
export default SurveyNavigationComponent;