farmcontrol/farmcontrol-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance WizardView component by adding sideBar and submitText props for improved customization; refactor layout for better responsiveness and structure.

Browse Source
This commit is contained in:
Tom Butcher 2025-09-05 23:19:32 +01:00
parent c7ddcd36e3
commit 45d9aabb87
1 changed files with 28 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/Dashboard/common/WizardView.jsx
View File

@ -12,7 +12,9 @@ const WizardView = ({
title = 'Wizard View', title = 'Wizard View',
onSubmit, onSubmit,
formValid, formValid,
loading loading,
sideBar = null,
submitText = 'Done'
}) => { }) => {
const [currentStep, setCurrentStep] = useState(0) const [currentStep, setCurrentStep] = useState(0)
const isMobile = useMediaQuery({ maxWidth: 768 }) const isMobile = useMediaQuery({ maxWidth: 768 })
@ -20,27 +22,33 @@ const WizardView = ({
return ( return (
<Flex gap='middle'> <Flex gap='middle'>
{!isMobile && showSteps == true ? ( {!isMobile && showSteps == true ? (
<div style={{ minWidth: '160px' }}> sideBar != null ? (
<Steps sideBar
current={currentStep} ) : (
items={steps} <div style={{ minWidth: '160px' }}>
direction='vertical' <Steps
style={{ width: 'fit-content' }} current={currentStep}
/> items={steps}
</div> direction='vertical'
style={{ width: 'fit-content' }}
/>
</div>
)
) : null} ) : null}
{!isMobile && showSteps == true ? ( {!isMobile && showSteps == true ? (
<Divider type='vertical' style={{ height: 'unset' }} /> <Divider type='vertical' style={{ height: 'unset' }} />
) : null} ) : null}
<Flex vertical gap='middle' style={{ flexGrow: 1 }}> <Flex vertical justify='space-between' gap={'middle'}>
<Title level={2} style={{ margin: 0 }}> <Flex vertical gap='middle' style={{ flexGrow: 1 }}>
{title} <Title level={2} style={{ margin: 0 }}>
</Title> {title}
<div style={{ minHeight: '260px', marginBottom: 8 }}> </Title>
{steps[currentStep].content} <div style={{ minHeight: '260px', marginBottom: 4 }}>
</div> {steps[currentStep].content}
</div>
</Flex>
<NewObjectButtons <NewObjectButtons
currentStep={currentStep} currentStep={currentStep}
totalSteps={steps.length} totalSteps={steps.length}
@ -49,6 +57,7 @@ const WizardView = ({
onSubmit={onSubmit} onSubmit={onSubmit}
formValid={formValid} formValid={formValid}
submitLoading={loading} submitLoading={loading}
submitText={submitText}
/> />
</Flex> </Flex>
</Flex> </Flex>
@ -61,7 +70,9 @@ WizardView.propTypes = {
steps: PropTypes.array.isRequired, steps: PropTypes.array.isRequired,
showSteps: PropTypes.bool, showSteps: PropTypes.bool,
title: PropTypes.string, title: PropTypes.string,
loading: PropTypes.bool loading: PropTypes.bool,
sideBar: PropTypes.node,
submitText: PropTypes.string
} }
export default WizardView export default WizardView