Migrate some files to TypeScript

ioBroker · May 21, 2024 · ed3ad75 · ed3ad75
1 parent 2628d48
commit ed3ad75
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 19 deletions.
diff --git a/...admin/src/src/components/CustomPopper.jsx → ...admin/src/src/components/CustomPopper.tsx b/...admin/src/src/components/CustomPopper.jsx → ...admin/src/src/components/CustomPopper.tsx
@@ -7,39 +7,43 @@ import {
     Fade,
     Paper,
     IconButton,
+    type Theme,
 } from '@mui/material';
 
 import { Edit as EditIcon } from '@mui/icons-material';
 
 import { I18n } from '@iobroker/adapter-react-v5';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme: Theme) => ({
     typography: {
         padding: theme.spacing(2),
     },
 }));
 
-let timer;
+let timer: ReturnType<typeof setTimeout>;
 
-const CustomPopper = ({ editMenuList, onClick }) => {
+interface CustomPopperProps {
+    editMenuList: boolean;
+    onClick: () => void;
+}
+
+const CustomPopper = ({ editMenuList, onClick }: CustomPopperProps) => {
     const [anchorEl, setAnchorEl] = React.useState(null);
     const [open, setOpen] = React.useState(false);
-    const [placement, setPlacement] = React.useState();
+    const [placement, setPlacement] = React.useState<'right' | null>(null);
     const classes = useStyles();
 
-    const handleClick = newPlacement => event => {
-        setAnchorEl(event.currentTarget);
-        setOpen(prev => placement !== newPlacement || !prev);
-        setPlacement(newPlacement);
-    };
     return <>
         <IconButton
             size="large"
             style={editMenuList ? { color: 'red' } : null}
             onClick={el => {
                 onClick();
                 if (!editMenuList) {
-                    handleClick('right')(el);
+                    setAnchorEl(el.currentTarget);
+                    setOpen(prev => placement !== 'right' || !prev);
+                    setPlacement('right');
+
                     timer = setTimeout(() => setOpen(false), 3000);
                 } else {
                     setOpen(false);

diff --git a/...admin/src/src/components/EasyModeCard.jsx → ...admin/src/src/components/EasyModeCard.tsx b/...admin/src/src/components/EasyModeCard.jsx → ...admin/src/src/components/EasyModeCard.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
-import { Card, CardMedia } from '@mui/material';
+import { Card, CardMedia, type Theme } from '@mui/material';
 import { withStyles } from '@mui/styles';
 
 import { Utils } from '@iobroker/adapter-react-v5';
 
 const boxShadow = '0 2px 2px 0 rgba(0, 0, 0, .14),0 3px 1px -2px rgba(0, 0, 0, .12),0 1px 5px 0 rgba(0, 0, 0, .2)';
 const boxShadowHover = '0 8px 17px 0 rgba(0, 0, 0, .2),0 6px 20px 0 rgba(0, 0, 0, .19)';
 
-const styles = theme => ({
+const styles: Record<string, any> = (theme: Theme) => ({
     root: {
         position: 'relative',
         margin: 10,
@@ -78,11 +78,21 @@ const styles = theme => ({
     },
 });
 
-function getText(text, lang) {
+function getText(text: ioBroker.StringOrTranslated, lang: ioBroker.Languages): string {
     if (text && typeof text === 'object') {
         return text[lang] || text.en || '';
     }
-    return text || '';
+    return (text as string) || '';
+}
+
+interface EasyModeCardProps {
+    classes: Record<string, string>;
+    icon: string;
+    id: string;
+    key: string;
+    desc: string;
+    lang: ioBroker.Languages;
+    navigate: () => void;
 }
 
 const EasyModeCard = ({
@@ -93,17 +103,18 @@ const EasyModeCard = ({
     desc,
     lang,
     navigate,
-}) => <Card onClick={navigate} key={key} className={classes.root}>
+}: EasyModeCardProps) => <Card onClick={navigate} key={key} className={classes.root}>
     <div className={Utils.clsx(classes.imageBlock, classes.instanceStateNotAlive1)}>
-        <CardMedia className={classes.img} component="img" image={`adapter/${id.split('.')[0]}/${icon}` || 'img/no-image.png'} />
+        <CardMedia
+            className={classes.img}
+            component="img"
+            image={`adapter/${id.split('.')[0]}/${icon}` || 'img/no-image.png'}
+        />
     </div>
     <div className={classes.wrapperDesc}>
         <div className={classes.desc}>{getText(desc, lang)}</div>
         <div className={classes.adapter}>{id}</div>
     </div>
 </Card>;
 
-EasyModeCard.propTypes = {
-};
-
 export default withStyles(styles)(EasyModeCard);