brandxtech/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

switching from having 3 dialogs to using a stepper

Browse source
This commit is contained in:
csawatzky 2025-11-20 10:26:33 -06:00
parent 283958ab6a
commit 70bd91bbe7
4 changed files with 576 additions and 285 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/common/ButtonGroup.tsx
View file

@ -19,6 +19,10 @@ export interface ButtonData {
* The function to run when the button is clicked or toggled on when toggle is true
*/
function: () => void
/**
* whether the button is disabled or not
*/
disabled?: boolean
}
interface Props {
@ -49,6 +53,10 @@ interface Props {
* Numerical value for the size of the text for buttons that dont use the icon
*/
textSize?: number
/**
* When true will disable all of the buttons in the group, will be overridded by individual buttons disabled state in the button data
*/
disableAll?: boolean
}
const useStyles = makeStyles((theme: Theme) => {
@ -88,7 +96,7 @@ const useStyles = makeStyles((theme: Theme) => {
})
export default function ButtonGroup(props: Props){
const { buttons, toggle, toggledButtons, multiToggle, textSize } = props
const { buttons, toggle, toggledButtons, multiToggle, textSize, disableAll } = props
const classes = useStyles()
const [currentToggle, setCurrentToggle] = useState<number[]>([])
@ -135,6 +143,7 @@ export default function ButtonGroup(props: Props){
<Box className={classes.container} display="flex" flexDirection="row">
{buttons.map((b, i) => (
<Button
disabled={disableAll ?? b.disabled}
key={i}
className={checkToggled(i) ? classes.buttonToggled : classes.button}
onClick={() => {