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

Added progress.

Browse Source
This commit is contained in:
Tom Butcher 2025-09-07 19:47:33 +01:00
parent 6bb4943d0c
commit ae33f27dfb
1 changed files with 34 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,7 @@
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { useState } from 'react' import { useState } from 'react'
import { useMediaQuery } from 'react-responsive' import { useMediaQuery } from 'react-responsive'
import { Typography, Flex, Steps, Divider } from 'antd' import { Typography, Flex, Steps, Divider, Progress } from 'antd'
import NewObjectButtons from './NewObjectButtons' import NewObjectButtons from './NewObjectButtons'
const { Title } = Typography const { Title } = Typography
@ -14,13 +14,14 @@ const WizardView = ({
formValid, formValid,
loading, loading,
sideBar = null, sideBar = null,
submitText = 'Done' submitText = 'Done',
progress = 0
}) => { }) => {
const [currentStep, setCurrentStep] = useState(0) const [currentStep, setCurrentStep] = useState(0)
const isMobile = useMediaQuery({ maxWidth: 768 }) const isMobile = useMediaQuery({ maxWidth: 768 })
return ( return (
<Flex gap='middle'> <Flex gap='middle' style={{ width: '100%' }}>
{!isMobile && showSteps == true ? ( {!isMobile && showSteps == true ? (
sideBar != null ? ( sideBar != null ? (
sideBar sideBar
@ -40,25 +41,40 @@ const WizardView = ({
<Divider type='vertical' style={{ height: 'unset' }} /> <Divider type='vertical' style={{ height: 'unset' }} />
) : null} ) : null}
<Flex vertical justify='space-between' gap={'middle'}> <Flex
<Flex vertical gap='middle' style={{ flexGrow: 1 }}> vertical
justify='space-between'
gap={'middle'}
style={{ width: '100%' }}
>
<Flex vertical gap='middle' style={{ flexGrow: 1, width: '100%' }}>
<Title level={2} style={{ margin: 0 }}> <Title level={2} style={{ margin: 0 }}>
{title} {title}
</Title> </Title>
<div style={{ minHeight: '260px', marginBottom: 4 }}> <div style={{ minHeight: '260px', marginBottom: 4, width: '100%' }}>
{steps[currentStep].content} {steps[currentStep].content}
</div> </div>
</Flex> </Flex>
<NewObjectButtons <Flex gap={'middle'} align='center' justify='end'>
currentStep={currentStep} {progress > 0 ? (
totalSteps={steps.length} <Progress
onPrevious={() => setCurrentStep((prev) => prev - 1)} style={{ maxWidth: '160px' }}
onNext={() => setCurrentStep((prev) => prev + 1)} showInfo={false}
onSubmit={onSubmit} percent={progress}
formValid={formValid} />
submitLoading={loading} ) : null}
submitText={submitText}
/> <NewObjectButtons
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>
</Flex> </Flex>
) )
@ -72,7 +88,8 @@ WizardView.propTypes = {
title: PropTypes.string, title: PropTypes.string,
loading: PropTypes.bool, loading: PropTypes.bool,
sideBar: PropTypes.node, sideBar: PropTypes.node,
submitText: PropTypes.string submitText: PropTypes.string,
progress: PropTypes.number
} }
export default WizardView export default WizardView