<State initial={0}>
{([index, setIndex]) => (
<Takeover
portal={false}
focusTrapOptions={{ disabled: true }}
title="Takeover Title"
backLabel="Previous Page"
complete={index === 4}
footer={
index < 4 && (
<Stack justifyContent="space-between" direction="row-reverse" className="w-100">
<ButtonGroup>
<Button onClick={() => setIndex(0)}>Cancel</Button>
<Button primary onClick={() => setIndex(index + 1)}>{index < 3 ? 'Continue' : 'Complete'}</Button>
</ButtonGroup>
{index > 0 && <Button fill="subtle" onClick={() => setIndex(index - 1)}>Back</Button>}
</Stack>
)
}
onBack={function(){ return;}}
onClose={function(){ return;}}
sectioned
contentWrapperClass="d-f flex-column"
>
<Takeover.Section>
<ProgressTracker currentIndex={index}>
<ProgressTracker.Step />
<ProgressTracker.Step />
<ProgressTracker.Step />
<ProgressTracker.Step />
</ProgressTracker>
</Takeover.Section>
{(index === 0 || index === 2) &&
<Takeover.Section className="of-auto">
<BodyText>Section {`${index + 1}`}</BodyText>
<br />
<Form>
{[0,3,6].map(item => (
<>
<Form.Group widths="equal">
<Form.Input placeholder="First data goes here..." label={`Data #${1 + item}`} />
<Form.Input placeholder="Second data goes here..." label={`Data #${2 + item}`} />
</Form.Group>
<Form.Input placeholder="Third data goes here..." label={`Data #${3 + item}`} />
<Form.ButtonToggle
label="Toggle"
options={[
{text: 'Yes', value: 'Yes', selected: true},
{text: 'No', value: 'No'}
]}
/>
</>
))}
</Form>
</Takeover.Section>
}
{(index === 1 || index === 3) &&
<Takeover.Section className="of-auto">
<BodyText>Section {`${index + 1}`}</BodyText>
</Takeover.Section>
}
</Takeover>
)}
</State>