68 lines
1.8 KiB
JavaScript
68 lines
1.8 KiB
JavaScript
import PropTypes from 'prop-types'
|
|
import { useState } from 'react'
|
|
import { useMediaQuery } from 'react-responsive'
|
|
import { Typography, Flex, Steps, Divider } from 'antd'
|
|
import NewObjectButtons from './NewObjectButtons'
|
|
|
|
const { Title } = Typography
|
|
|
|
const WizardView = ({
|
|
showSteps = true,
|
|
steps,
|
|
title = 'Wizard View',
|
|
onSubmit,
|
|
formValid,
|
|
loading
|
|
}) => {
|
|
const [currentStep, setCurrentStep] = useState(0)
|
|
const isMobile = useMediaQuery({ maxWidth: 768 })
|
|
|
|
return (
|
|
<Flex gap='middle'>
|
|
{!isMobile && showSteps == true ? (
|
|
<div style={{ minWidth: '160px' }}>
|
|
<Steps
|
|
current={currentStep}
|
|
items={steps}
|
|
direction='vertical'
|
|
style={{ width: 'fit-content' }}
|
|
/>
|
|
</div>
|
|
) : null}
|
|
|
|
{!isMobile && showSteps == true ? (
|
|
<Divider type='vertical' style={{ height: 'unset' }} />
|
|
) : null}
|
|
|
|
<Flex vertical gap='middle' style={{ flexGrow: 1 }}>
|
|
<Title level={2} style={{ margin: 0 }}>
|
|
{title}
|
|
</Title>
|
|
<div style={{ minHeight: '260px', marginBottom: 8 }}>
|
|
{steps[currentStep].content}
|
|
</div>
|
|
<NewObjectButtons
|
|
currentStep={currentStep}
|
|
totalSteps={steps.length}
|
|
onPrevious={() => setCurrentStep((prev) => prev - 1)}
|
|
onNext={() => setCurrentStep((prev) => prev + 1)}
|
|
onSubmit={onSubmit}
|
|
formValid={formValid}
|
|
submitLoading={loading}
|
|
/>
|
|
</Flex>
|
|
</Flex>
|
|
)
|
|
}
|
|
|
|
WizardView.propTypes = {
|
|
onSubmit: PropTypes.func.isRequired,
|
|
formValid: PropTypes.bool.isRequired,
|
|
steps: PropTypes.array.isRequired,
|
|
showSteps: PropTypes.bool,
|
|
title: PropTypes.string,
|
|
loading: PropTypes.bool
|
|
}
|
|
|
|
export default WizardView
|