extract components

firsttris · Dec 28, 2023 · 11a1685 · 11a1685
1 parent c28805f
commit 11a1685
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 100 deletions.
diff --git a/src/app/BlindsControl.tsx b/src/app/BlindsControl.tsx
@@ -1,13 +1,11 @@
-import { Box, CardContent, CardHeader } from '@mui/material';
+import { Box, CardContent } from '@mui/material';
 import {
   BlindVirtualReceiverChannel,
   useSetValueMutation,
 } from '../hooks/useApi';
-import BlindsOutlinedIcon from '@mui/icons-material/BlindsOutlined';
-import BlindsClosedIcon from '@mui/icons-material/BlindsClosed';
 import { CircularProgressWithLabel } from './components/CircularProgressWithLabel';
-import { TypographyWithEllipsis } from './components/TypographyWithEllipsis';
-import { StyledHeaderIcon, StyledIconButton } from './components/StyledIcons';
+import { StyledIconButton } from './components/StyledIcons';
+import { ChannelHeader } from './components/ChannelHeader';
 
 interface ControlProps {
   channel: BlindVirtualReceiverChannel;
@@ -19,15 +17,7 @@ export const BlindsControl = ({ channel }: ControlProps) => {
   const blindValue = Number(datapoints.LEVEL) * 100;
   return (
     <Box>
-      <CardHeader
-        title={
-          <Box sx={{ display: 'flex', alignItems: 'center' }}>
-            <StyledHeaderIcon icon={blindValue === 0 ? "material-symbols-light:blinds-closed" : "material-symbols-light:blinds"} />
-            <TypographyWithEllipsis>{name}</TypographyWithEllipsis>
-          </Box>
-        }
-      />
-
+      <ChannelHeader icon={blindValue === 0 ? "material-symbols-light:blinds-closed" : "material-symbols-light:blinds"} name={name}/>
       <CardContent sx={{ paddingTop: '0px' }}>
         <Box
           sx={{

diff --git a/src/app/ChannelsForType.tsx b/src/app/ChannelsForType.tsx
@@ -1,11 +1,8 @@
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import {
   Box,
   Card,
   Collapse,
   Divider,
-  IconButton,
-  IconButtonProps,
   ListItem,
   ListItemButton,
   Typography,
@@ -18,24 +15,22 @@ import { SwitchControl } from './SwitchControl';
 import { ThermostatControl } from './ThermostatControl';
 import { BlindsControl } from './BlindsControl';
 import { useTranslations } from './../i18n/utils';
+import { Icon } from '@iconify/react';
 
-interface ExpandMoreProps extends IconButtonProps {
+
+interface ExpandMoreProps {
   expand: boolean;
 }
 
-const ExpandMore = styled((props: ExpandMoreProps) => {
-  const { expand, ...other } = props;
-  return <IconButton {...other} />;
-})(({ expand }) => ({
+
+const ExpandMore = styled(Icon)(({ expand }: ExpandMoreProps) => ({
   transform: !expand ? 'rotate(0deg)' : 'rotate(180deg)',
   marginLeft: 'auto',
   transition: 'transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
-  padding: '1px',
+  padding: '5px',
   backgroundColor: 'lightgrey',
   borderRadius: '50%',
-  '&:hover': {
-    backgroundColor: 'darkgrey',
-  },
+  fontSize: '25px',
 }));
 
 const StyledCard = styled(Card)(({ theme }) => ({
@@ -90,7 +85,7 @@ export const ChannelsForType: React.FC<ChannelTypeProps> = ({
     <Box key={index}>
       <ListItem disablePadding={true}>
         <ListItemButton
-          sx={{ '&:hover': { backgroundColor: 'transparent' } }}
+          sx={{ '&:hover': { backgroundColor: 'transparent' }, paddingLeft: 0 }}
           onClick={() => handleExpandClick()}
           disableRipple={true}
         >
@@ -106,13 +101,7 @@ export const ChannelsForType: React.FC<ChannelTypeProps> = ({
           >
             {t(channelType)}
           </Typography>
-          <ExpandMore
-            expand={expanded}
-            aria-expanded={expanded}
-            aria-label="show more"
-          >
-            <ExpandMoreIcon />
-          </ExpandMore>
+          <ExpandMore icon="uiw:down" expand={expanded}/>
         </ListItemButton>
       </ListItem>
       {hasTransitionExited ? <Divider /> : null}

diff --git a/src/app/FloorControl.tsx b/src/app/FloorControl.tsx
@@ -6,7 +6,8 @@ import {
   Typography,
 } from '@mui/material';
 import { FloorClimateControlTransceiverChannel } from 'src/hooks/useApi';
-import { Icon } from '@iconify/react';
+import { StyledHeaderIcon } from './components/StyledIcons';
+import { ChannelHeader } from './components/ChannelHeader';
 
 interface FloorControlProps {
   channel: FloorClimateControlTransceiverChannel;
@@ -33,22 +34,11 @@ export const FloorControl = (props: FloorControlProps) => {
 
   return (
     <Box>
-      <CardHeader
-        title={
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: '15px' }}>
-            <Icon
-              icon="mdi:radiator-coil"
-              color={getColor(value)}
-              fontSize={'30px'}
-            />
-            <Typography>{props.channel.name}</Typography>
-          </Box>
-        }
-      />
+      <ChannelHeader icon="mdi:radiator-coil" name={props.channel.name}/>
 
       <CardContent sx={{ pt: '0px'}}>
         <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-        <Icon icon="mdi:pipe-valve" fontSize="30px" style={{ marginRight: '5px'}} />
+        <StyledHeaderIcon icon="mdi:pipe-valve" style={{ marginRight: '5px'}} color={getColor(value)}/>
           <Box sx={{ width: '100%', mr: 1 }}>
             <LinearProgress variant="determinate" value={value} />
           </Box>

diff --git a/src/app/SwitchControl.tsx b/src/app/SwitchControl.tsx
@@ -1,11 +1,10 @@
 import { styled } from '@mui/system';
-import { Box, CardHeader, IconButton } from '@mui/material';
+import { Box } from '@mui/material';
 import {
   SwitchVirtualReceiverChannel,
   useSetValueMutation,
 } from '../hooks/useApi';
-import { TypographyWithEllipsis } from './components/TypographyWithEllipsis';
-import { Icon } from '@iconify/react';
+import { ChannelHeader } from './components/ChannelHeader';
 
 interface ControlProps {
   channel: SwitchVirtualReceiverChannel;
@@ -17,18 +16,10 @@ const StyledBox = styled(Box)({
   flexDirection: 'column',
 });
 
-const TitleBox = styled(Box)({
-  display: 'flex',
-  alignItems: 'center',
+const ChannelHeaderWithPointer = styled(ChannelHeader)({
+  cursor: 'pointer',
 });
 
-const StyledIcon = styled(Icon)`
-  font-size: 40px;
-  background-color: lightGrey;
-  border-radius: 10px;
-  padding: 1px;
-`;
-
 export const SwitchControl = ({ channel, refetch }: ControlProps) => {
   const setValueMutation = useSetValueMutation();
   const { datapoints, name, address, interfaceName } = channel;
@@ -47,19 +38,7 @@ export const SwitchControl = ({ channel, refetch }: ControlProps) => {
 
   return (
     <StyledBox>
-      <CardHeader
-        sx={{ cursor: 'pointer' }}
-        onClick={onHandleChange}
-        title={
-          <TitleBox>
-            <StyledIcon
-              icon={checked ? 'mdi:light-switch' : 'mdi:light-switch-off'}
-              color={checked ? 'orange' : 'unset'}
-            />
-            <TypographyWithEllipsis>{name}</TypographyWithEllipsis>
-          </TitleBox>
-        }
-      />
+      <ChannelHeaderWithPointer name={name} icon={checked ? 'mdi:light-switch' : 'mdi:light-switch-off'} color={checked ? 'orange' : 'unset'} onClick={onHandleChange} />
     </StyledBox>
   );
 };
diff --git a/src/app/ThermostatControl.tsx b/src/app/ThermostatControl.tsx
@@ -11,11 +11,11 @@ import {
   HeatingClimateControlTransceiverChannel,
   useSetValueMutation,
 } from '../hooks/useApi';
-import WaterDamageOutlinedIcon from '@mui/icons-material/WaterDamageOutlined';
 import { useEffect, useState } from 'react';
 import { CircularProgressWithLabel } from './components/CircularProgressWithLabel';
 import { TypographyWithEllipsis } from './components/TypographyWithEllipsis';
 import { StyledHeaderIcon, StyledIconButton } from './components/StyledIcons';
+import { ChannelHeader } from './components/ChannelHeader';
 
 interface ControlProps {
   channel: HeatingClimateControlTransceiverChannel;
@@ -92,18 +92,7 @@ export const ThermostatControl = ({ channel }: ControlProps) => {
         flexDirection: 'column',
       }}
     >
-      <CardHeader
-        title={
-          <Box sx={{ display: 'flex', alignItems: 'center' }}>
-            <StyledHeaderIcon
-              icon="mdi:thermostat-cog"
-
-            />
-            <TypographyWithEllipsis>{name}</TypographyWithEllipsis>
-          </Box>
-        }
-      />
-
+      <ChannelHeader name={name} icon="mdi:thermostat-cog" />
       <CardContent sx={{ paddingTop: 0, px: '10px' }}>
         <Box
           sx={{
@@ -205,7 +194,7 @@ export const ThermostatControl = ({ channel }: ControlProps) => {
             }}
           >
             <StyledIconButton
-              icon="mdi:temperature-minus"
+              icon="ph:minus"
               onClick={() => changeSetPointTemperature(pointTemp - 1)}
             />
             <Box sx={{ display: 'flex', alignItems: 'center' }}>
@@ -230,7 +219,7 @@ export const ThermostatControl = ({ channel }: ControlProps) => {
               </Box>
             </Box>
             <StyledIconButton
-              icon="mdi:temperature-add"
+              icon="ph:plus"
               onClick={() => changeSetPointTemperature(pointTemp + 1)}
             />
           </Box>

diff --git a/src/app/components/ChannelHeader.tsx b/src/app/components/ChannelHeader.tsx
@@ -0,0 +1,31 @@
+import { Box, CardHeader } from '@mui/material';
+import { StyledHeaderIcon } from './StyledIcons';
+import { TypographyWithEllipsis } from './TypographyWithEllipsis';
+
+interface ChannelHeaderProps {
+  name: string;
+  icon: string;
+  color?: string;
+  onClick?: () => void;
+}
+
+export const ChannelHeader = ({
+  name,
+  icon,
+  color,
+  onClick,
+  ...props
+}: ChannelHeaderProps) => {
+  return (
+    <CardHeader
+      onClick={onClick}
+      title={
+        <Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>
+          <StyledHeaderIcon icon={icon} color={color} />
+          <TypographyWithEllipsis>{name}</TypographyWithEllipsis>
+        </Box>
+      }
+      {...props}
+    />
+  );
+};
diff --git a/src/app/components/IconButtonWithBackground.tsx b/src/app/components/IconButtonWithBackground.tsx