created new buttonGroup common component to replace the styled toggles since they don't seem to be styling the way we want anymore
This commit is contained in:
csawatzky
parent
4d3d2c482b
commit
269417a321
2 changed files with 248 additions and 49 deletions
|
|
@ -71,6 +71,7 @@ import { ExtractMoisture } from "grain";
|
|||
import SearchSelect, { Option } from "common/SearchSelect";
|
||||
import Edit from "@mui/icons-material/Edit";
|
||||
import { makeStyles, styled } from "@mui/styles";
|
||||
import ButtonGroup from "common/ButtonGroup";
|
||||
|
||||
const useStyles = makeStyles((theme: Theme) => {
|
||||
return ({
|
||||
|
|
@ -280,54 +281,54 @@ export default function BinVisualizer(props: Props) {
|
|||
const [storageDate, setStorageDate] = useState(moment().format("YYYY-MM-DD"));
|
||||
const [storageTime, setStorageTime] = useState(moment().format("HH:mm"));
|
||||
|
||||
const StyledToggle = styled(ToggleButton)(({ theme }: { theme: Theme }) => ({
|
||||
root: {
|
||||
backgroundColor: "transparent",
|
||||
overflow: "visible",
|
||||
content: "content-box",
|
||||
"&$selected": {
|
||||
backgroundColor: "gold",
|
||||
color: "black",
|
||||
borderRadius: 24,
|
||||
fontWeight: "bold"
|
||||
},
|
||||
"&$selected:hover": {
|
||||
backgroundColor: "rgb(255, 255, 0)",
|
||||
color: "black",
|
||||
borderRadius: 24
|
||||
}
|
||||
},
|
||||
selected: {}
|
||||
}));
|
||||
// const StyledToggle = styled(ToggleButton)(({ theme }: { theme: Theme }) => ({
|
||||
// root: {
|
||||
// backgroundColor: "transparent",
|
||||
// overflow: "visible",
|
||||
// content: "content-box",
|
||||
// "&$selected": {
|
||||
// backgroundColor: "gold",
|
||||
// color: "black",
|
||||
// borderRadius: 24,
|
||||
// fontWeight: "bold"
|
||||
// },
|
||||
// "&$selected:hover": {
|
||||
// backgroundColor: "rgb(255, 255, 0)",
|
||||
// color: "black",
|
||||
// borderRadius: 24
|
||||
// }
|
||||
// },
|
||||
// selected: {}
|
||||
// }));
|
||||
|
||||
const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }: { theme: Theme }) => ({
|
||||
grouped: {
|
||||
margin: theme.spacing(-0.5),
|
||||
border: "none",
|
||||
padding: theme.spacing(1),
|
||||
"&:not(:first-child):not(:last-child)": {
|
||||
borderRadius: 24,
|
||||
marginRight: theme.spacing(0.5),
|
||||
marginLeft: theme.spacing(0.5)
|
||||
},
|
||||
"&:first-child": {
|
||||
borderRadius: 24,
|
||||
marginLeft: theme.spacing(0.25)
|
||||
},
|
||||
"&:last-child": {
|
||||
borderRadius: 24,
|
||||
marginRight: theme.spacing(0.25)
|
||||
}
|
||||
},
|
||||
root: {
|
||||
backgroundColor: darken(
|
||||
theme.palette.background.paper,
|
||||
getThemeType() === "light" ? 0.05 : 0.25
|
||||
),
|
||||
borderRadius: 24,
|
||||
content: "border-box"
|
||||
}
|
||||
}));
|
||||
// const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }: { theme: Theme }) => ({
|
||||
// grouped: {
|
||||
// margin: theme.spacing(-0.5),
|
||||
// border: "none",
|
||||
// padding: theme.spacing(1),
|
||||
// "&:not(:first-child):not(:last-child)": {
|
||||
// borderRadius: 24,
|
||||
// marginRight: theme.spacing(0.5),
|
||||
// marginLeft: theme.spacing(0.5)
|
||||
// },
|
||||
// "&:first-child": {
|
||||
// borderRadius: 24,
|
||||
// marginLeft: theme.spacing(0.25)
|
||||
// },
|
||||
// "&:last-child": {
|
||||
// borderRadius: 24,
|
||||
// marginRight: theme.spacing(0.25)
|
||||
// }
|
||||
// },
|
||||
// root: {
|
||||
// backgroundColor: darken(
|
||||
// theme.palette.background.paper,
|
||||
// getThemeType() === "light" ? 0.05 : 0.25
|
||||
// ),
|
||||
// borderRadius: 24,
|
||||
// content: "border-box"
|
||||
// }
|
||||
// }));
|
||||
|
||||
useEffect(() => {
|
||||
setModeTime(moment(bin.status.lastModeChange));
|
||||
|
|
@ -1705,6 +1706,18 @@ export default function BinVisualizer(props: Props) {
|
|||
);
|
||||
};
|
||||
|
||||
const determineToggle = (binMode: pond.BinMode) => {
|
||||
switch (binMode) {
|
||||
case pond.BinMode.BIN_MODE_STORAGE:
|
||||
return [0]
|
||||
case pond.BinMode.BIN_MODE_COOLDOWN:
|
||||
return [1]
|
||||
case pond.BinMode.BIN_MODE_DRYING:
|
||||
case pond.BinMode.BIN_MODE_HYDRATING:
|
||||
return [2]
|
||||
}
|
||||
}
|
||||
|
||||
const binMode = () => {
|
||||
const mode = bin.settings.mode;
|
||||
return (
|
||||
|
|
@ -1720,7 +1733,31 @@ export default function BinVisualizer(props: Props) {
|
|||
<Typography variant="subtitle1" style={{ fontWeight: 800 }}>
|
||||
Bin Mode
|
||||
</Typography>
|
||||
<StyledToggleButtonGroup
|
||||
<ButtonGroup
|
||||
buttons={[
|
||||
{
|
||||
title: "Storage",
|
||||
function: () => {
|
||||
setModeStorage()
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "Cooldown",
|
||||
function: () => {
|
||||
setModeCooldown()
|
||||
}
|
||||
},
|
||||
{
|
||||
title: bin.settings.inventory && bin.settings.inventory?.initialMoisture < bin.settings.inventory?.targetMoisture ? "Hydrating" : "Drying",
|
||||
function: () => {
|
||||
setShowInputMoisture(true)
|
||||
}
|
||||
}
|
||||
]}
|
||||
toggledButtons={determineToggle(mode)}
|
||||
toggle
|
||||
/>
|
||||
{/* <StyledToggleButtonGroup
|
||||
id="tour-bin-mode"
|
||||
value={mode}
|
||||
exclusive
|
||||
|
|
@ -1754,7 +1791,7 @@ export default function BinVisualizer(props: Props) {
|
|||
Drying
|
||||
</StyledToggle>
|
||||
)}
|
||||
</StyledToggleButtonGroup>
|
||||
</StyledToggleButtonGroup> */}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
|
@ -2067,6 +2104,7 @@ export default function BinVisualizer(props: Props) {
|
|||
devices={devices}
|
||||
refreshCallback={success => {
|
||||
setShowInputMoisture(false);
|
||||
setNewPreset(0)
|
||||
if (success) updateBin();
|
||||
}}
|
||||
parentPreset={newPreset}
|
||||
|
|
|
|||
161
src/common/ButtonGroup.tsx
Normal file
161
src/common/ButtonGroup.tsx
Normal file
|
|
@ -0,0 +1,161 @@
|
|||
import { Box, Button, darken, Theme, Typography } from "@mui/material";
|
||||
import { makeStyles } from "@mui/styles";
|
||||
import { cloneDeep } from "lodash";
|
||||
import { useEffect } from "react";
|
||||
import { useState } from "react";
|
||||
import { getSecondaryColour } from "services/whiteLabel";
|
||||
import { getThemeType } from "theme/themeType";
|
||||
|
||||
export interface ButtonData {
|
||||
/**
|
||||
* The title and description of the button
|
||||
*/
|
||||
title: string
|
||||
/**
|
||||
* An icon that would replace the text of the button
|
||||
*/
|
||||
icon?: JSX.Element
|
||||
/**
|
||||
* The function to run when the button is clicked or toggled on when toggle is true
|
||||
*/
|
||||
function: () => void
|
||||
}
|
||||
|
||||
interface Props {
|
||||
/**
|
||||
* The array of button data to be rendered by the group
|
||||
*/
|
||||
buttons: ButtonData[]
|
||||
/**
|
||||
* When true will track the toggle state of the buttons, false will just be basic buttons
|
||||
*
|
||||
* @default false
|
||||
*/
|
||||
toggle?: boolean
|
||||
/**
|
||||
* When true will allow multiple buttons to be toggled, false will untoggle the previous button when another is selected
|
||||
*
|
||||
* @default false
|
||||
*/
|
||||
multiToggle?: boolean
|
||||
/**
|
||||
* Can be used to control which buttons are toggled on from the parent by passing the indexes of the buttons to toggle on.
|
||||
* If not passed in will default to toggle the first button and then be controlled internally
|
||||
*
|
||||
* @default undefined
|
||||
*/
|
||||
toggledButtons?: number[]
|
||||
/**
|
||||
* Numerical value for the size of the text for buttons that dont use the icon
|
||||
*/
|
||||
textSize?: number
|
||||
}
|
||||
|
||||
const useStyles = makeStyles((theme: Theme) => {
|
||||
return ({
|
||||
container: {
|
||||
backgroundColor: darken(
|
||||
theme.palette.background.paper,
|
||||
getThemeType() === "light" ? 0.10 : 0.05
|
||||
),
|
||||
borderRadius: 24,
|
||||
content: "border-box",
|
||||
border: "none",
|
||||
//padding: theme.spacing(1),
|
||||
},
|
||||
button: {
|
||||
backgroundColor: "transparent",
|
||||
color: theme.palette.text.primary,
|
||||
overflow: "visible",
|
||||
content: "content-box",
|
||||
borderRadius: 24,
|
||||
marginLeft: theme.spacing(0.05),
|
||||
marginRight: theme.spacing(0.05),
|
||||
"&:hover": {
|
||||
//backgroundColor: getSecondaryColour(),
|
||||
backgroundColor: "gold",
|
||||
color: "black",
|
||||
}
|
||||
},
|
||||
buttonToggled: {
|
||||
//backgroundColor: getSecondaryColour(),
|
||||
backgroundColor: "gold",
|
||||
color: "black",
|
||||
borderRadius: 24,
|
||||
fontWeight: "bold"
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
export default function ButtonGroup(props: Props){
|
||||
const { buttons, toggle, toggledButtons, multiToggle, textSize } = props
|
||||
const classes = useStyles()
|
||||
const [currentToggle, setCurrentToggle] = useState<number[]>([])
|
||||
|
||||
useEffect(()=>{
|
||||
//determine the default state of the button toggles if toggle is true
|
||||
if(toggle){
|
||||
let toggled: number [] = [0]
|
||||
if(toggledButtons){
|
||||
toggled = toggledButtons
|
||||
}
|
||||
setCurrentToggle(toggled)
|
||||
}
|
||||
},[toggle, toggledButtons])
|
||||
|
||||
const checkToggled = (index: number) => {
|
||||
return currentToggle.includes(index)
|
||||
}
|
||||
|
||||
const toggleControl = (i: number) => {
|
||||
let toggled = cloneDeep(currentToggle)
|
||||
//is the button currently toggled
|
||||
if(checkToggled(i)){
|
||||
//if the button is toggled
|
||||
if(multiToggle){
|
||||
//un-toggle the button (remove it from the array)
|
||||
console.log(toggled)
|
||||
toggled.splice(currentToggle.indexOf(i), 1)
|
||||
}
|
||||
//and if it is single toggle do nothing
|
||||
} else {
|
||||
//if multiToggle is false
|
||||
if(!multiToggle){
|
||||
//replace the currentToggle array
|
||||
toggled = [i]
|
||||
}else{
|
||||
//add it to the currentToggle array
|
||||
toggled.push(i)
|
||||
}
|
||||
}
|
||||
setCurrentToggle(toggled)
|
||||
}
|
||||
|
||||
return (
|
||||
<Box className={classes.container} display="flex" flexDirection="row">
|
||||
{buttons.map((b, i) => (
|
||||
<Button
|
||||
key={i}
|
||||
className={checkToggled(i) ? classes.buttonToggled : classes.button}
|
||||
onClick={() => {
|
||||
if(toggle){
|
||||
//control the toggle internally if the array was not passed in
|
||||
if(!toggledButtons){
|
||||
toggleControl(i)
|
||||
}
|
||||
}
|
||||
b.function()
|
||||
}}>
|
||||
{b.icon
|
||||
?
|
||||
b.icon
|
||||
:
|
||||
<Typography sx={{fontSize: textSize}}>
|
||||
{b.title}
|
||||
</Typography>
|
||||
}
|
||||
</Button>
|
||||
))}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue