@campxdev/shared 1.10.54 → 1.10.55
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Done } from '@mui/icons-material'
|
|
2
2
|
import { alpha, Box, styled, Typography } from '@mui/material'
|
|
3
|
-
import { useEffect, useState } from 'react'
|
|
3
|
+
import { CSSProperties, useEffect, useState } from 'react'
|
|
4
4
|
|
|
5
5
|
export const StyledStepsContainer = styled(Box)(({ theme }) => ({
|
|
6
6
|
padding: '10px 0',
|
|
@@ -14,7 +14,7 @@ export const StyledStep = styled(Box, {
|
|
|
14
14
|
!['active', 'disableHover'].includes(prop as string),
|
|
15
15
|
})<{ active: boolean; disableHover: boolean }>(
|
|
16
16
|
({ theme, active, disableHover }) => ({
|
|
17
|
-
|
|
17
|
+
width: '100px',
|
|
18
18
|
position: 'relative',
|
|
19
19
|
display: 'grid',
|
|
20
20
|
gridTemplateRows: '50px 1fr',
|
|
@@ -70,6 +70,8 @@ interface StepsHeaderProps {
|
|
|
70
70
|
onChange: (step: number) => void
|
|
71
71
|
activeStep?: number
|
|
72
72
|
disableClick?: boolean
|
|
73
|
+
containerStyles?: CSSProperties
|
|
74
|
+
stepStyles?: CSSProperties
|
|
73
75
|
}
|
|
74
76
|
|
|
75
77
|
export default function StepsHeader({
|
|
@@ -77,6 +79,8 @@ export default function StepsHeader({
|
|
|
77
79
|
onChange,
|
|
78
80
|
activeStep: _activeStep = 0,
|
|
79
81
|
disableClick = false,
|
|
82
|
+
containerStyles,
|
|
83
|
+
stepStyles,
|
|
80
84
|
}: StepsHeaderProps) {
|
|
81
85
|
const [activeStep, setActiveStep] = useState(0)
|
|
82
86
|
|
|
@@ -90,7 +94,7 @@ export default function StepsHeader({
|
|
|
90
94
|
}, [_activeStep])
|
|
91
95
|
|
|
92
96
|
return (
|
|
93
|
-
<StyledStepsContainer>
|
|
97
|
+
<StyledStepsContainer sx={{ ...containerStyles }}>
|
|
94
98
|
{steps?.map((item) => (
|
|
95
99
|
<StyledStep
|
|
96
100
|
active={activeStep > item?.step - 1}
|
|
@@ -100,6 +104,7 @@ export default function StepsHeader({
|
|
|
100
104
|
handleClick(item.step)
|
|
101
105
|
}}
|
|
102
106
|
key={item?.step}
|
|
107
|
+
sx={{ ...stepStyles }}
|
|
103
108
|
>
|
|
104
109
|
<StyledCircle active={activeStep > item?.step - 1}>
|
|
105
110
|
{activeStep > item?.step - 1 && <Done color="success" />}
|