145 lines
3.9 KiB
JavaScript
145 lines
3.9 KiB
JavaScript
import PropTypes from 'prop-types'
|
|
import { useState } from 'react'
|
|
import { useMediaQuery } from 'react-responsive'
|
|
import {
|
|
Typography,
|
|
Flex,
|
|
Steps,
|
|
Divider,
|
|
Progress,
|
|
Button,
|
|
Dropdown
|
|
} from 'antd'
|
|
import NewObjectButtons from './NewObjectButtons'
|
|
|
|
const { Title } = Typography
|
|
|
|
const WizardView = ({
|
|
showSteps = true,
|
|
steps,
|
|
title = 'Wizard View',
|
|
onSubmit,
|
|
formValid,
|
|
loading,
|
|
sideBar = null,
|
|
submitText = 'Done',
|
|
progress = 0,
|
|
actions = [],
|
|
sideBarGrow = false,
|
|
disabled = false
|
|
}) => {
|
|
const [currentStep, setCurrentStep] = useState(0)
|
|
const isMobile = useMediaQuery({ maxWidth: 768 })
|
|
|
|
return (
|
|
<Flex gap='middle' style={{ width: '100%' }}>
|
|
{!isMobile && showSteps == true ? (
|
|
sideBar != null ? (
|
|
sideBar
|
|
) : (
|
|
<div style={{ minWidth: sideBarGrow == true ? '100%' : '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
|
|
justify='space-between'
|
|
gap={'middle'}
|
|
style={
|
|
sideBarGrow == false
|
|
? { width: '100%', minWidth: 0 }
|
|
: isMobile
|
|
? { width: '100%', minWidth: 0 }
|
|
: { width: '400px', minWidth: 0 }
|
|
}
|
|
>
|
|
<Flex vertical gap='middle' style={{ flexGrow: 1, width: '100%' }}>
|
|
<Title level={2} style={{ margin: 0 }}>
|
|
{title}
|
|
</Title>
|
|
<div style={{ minHeight: '260px', marginBottom: 4, width: '100%' }}>
|
|
{steps[currentStep].content}
|
|
</div>
|
|
</Flex>
|
|
<Flex gap={'middle'} align='center' justify='end'>
|
|
{progress > 0 ? (
|
|
<Progress
|
|
style={{ maxWidth: '160px' }}
|
|
showInfo={false}
|
|
percent={progress}
|
|
/>
|
|
) : null}
|
|
{(actions || []).map((action) => {
|
|
if (action.steps.includes(steps[currentStep].key)) {
|
|
if (action.children) {
|
|
return (
|
|
<Dropdown menu={{ items: action.children }} key={action.key}>
|
|
<Button
|
|
onClick={action?.onClick}
|
|
disabled={action?.disabled || disabled}
|
|
loading={action?.loading || false}
|
|
>
|
|
{action.label}
|
|
</Button>
|
|
</Dropdown>
|
|
)
|
|
}
|
|
return (
|
|
<Button
|
|
key={action.key}
|
|
onClick={action?.onClick}
|
|
disabled={action?.disabled || disabled}
|
|
loading={action?.loading || false}
|
|
>
|
|
{action.label}
|
|
</Button>
|
|
)
|
|
}
|
|
return null
|
|
})}
|
|
|
|
<NewObjectButtons
|
|
disabled={disabled}
|
|
currentStep={currentStep}
|
|
totalSteps={steps.length}
|
|
onPrevious={() => setCurrentStep((prev) => prev - 1)}
|
|
onNext={() => setCurrentStep((prev) => prev + 1)}
|
|
onSubmit={onSubmit}
|
|
formValid={formValid}
|
|
submitLoading={loading}
|
|
submitText={submitText}
|
|
/>
|
|
</Flex>
|
|
</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,
|
|
disabled: PropTypes.bool,
|
|
sideBar: PropTypes.node,
|
|
submitText: PropTypes.string,
|
|
progress: PropTypes.number,
|
|
actions: PropTypes.array,
|
|
sideBarGrow: PropTypes.bool
|
|
}
|
|
|
|
export default WizardView
|