Converted all files to TS

ioBroker · Nov 30, 2024 · 8f6fe24 · 8f6fe24
1 parent 7375bc4
commit 8f6fe24
Show file tree

Hide file tree

Showing 30 changed files with 202 additions and 195 deletions.
diff --git a/packages/iobroker.vis-2/src/package.json b/packages/iobroker.vis-2/src/package.json
@@ -7,7 +7,7 @@
     "scripts": {
         "start": "craco start",
         "types": "tsc ./src/Vis/visRxWidget.tsx --declaration --emitDeclarationOnly --outDir ../../types-vis-2",
-        "lint": "eslint --fix --ext .js,.jsx src",
+        "lint": "eslint -c eslint.config.mjs --debug",
         "build": "craco build",
         "check-ts": "tsc --noEmit --checkJS false"
     },

diff --git a/packages/iobroker.vis-2/src/src/Attributes/View.tsx b/packages/iobroker.vis-2/src/src/Attributes/View.tsx
@@ -172,7 +172,16 @@ const ViewAttributes = (props: ViewProps): React.JSX.Element | null => {
 
     const fields = useMemo(
         () => (view ? getFields(resolutionSelect, view, props.selectedView, props.editMode, props.changeProject) : []),
-        [resolutionSelect, view?.settings?.sizex, view?.settings?.sizey, props.selectedView, props.editMode],
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [
+            view,
+            resolutionSelect,
+            view?.settings?.sizex,
+            view?.settings?.sizey,
+            props.selectedView,
+            props.editMode,
+            props.changeProject,
+        ],
     );
 
     const [accordionOpen, setAccordionOpen] = useState<Record<string, 0 | 1 | 2>>({});
@@ -214,7 +223,8 @@ const ViewAttributes = (props: ViewProps): React.JSX.Element | null => {
             window.localStorage.setItem('attributesView', JSON.stringify(newAccordionOpen));
             setAccordionOpen(newAccordionOpen);
         }
-    }, [props.triggerAllOpened, props.triggerAllClosed]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.triggerAllOpened, props.triggerAllClosed, fields]);
 
     if (!project?.[props.selectedView]) {
         return null;

diff --git a/packages/iobroker.vis-2/src/src/Attributes/Widget/TextDialog.tsx b/packages/iobroker.vis-2/src/src/Attributes/Widget/TextDialog.tsx
@@ -20,7 +20,6 @@ const TextDialog = (props: TextDialogProps): React.JSX.Element => {
         <IODialog
             keyboardDisabled
             title={props.type === 'json' ? 'JSON edit' : props.type === 'html' ? 'HTML edit' : 'Text edit'}
-            open={!0}
             actionTitle="Save"
             action={() => props.onChange(value)}
             onClose={props.onClose}

diff --git a/packages/iobroker.vis-2/src/src/Attributes/Widget/WidgetField.tsx b/packages/iobroker.vis-2/src/src/Attributes/Widget/WidgetField.tsx
@@ -502,6 +502,7 @@ const WidgetField = (props: WidgetFieldProps): string | React.JSX.Element | Reac
                 });
             }
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [propValue]);
 
     let value: string | number | boolean | null = cachedValue;
@@ -565,7 +566,7 @@ const WidgetField = (props: WidgetFieldProps): string | React.JSX.Element | Reac
             // take the first child in div
             customLegacyComponent.init.call(refCustom.current.children[0] || refCustom.current, field.name, propValue);
         }
-    }, []);
+    });
 
     if (askForUsage) {
         const usages = findWidgetUsages(store.getState().visProject, props.selectedView, askForUsage.wid);

diff --git a/packages/iobroker.vis-2/src/src/Attributes/Widget/index.tsx b/packages/iobroker.vis-2/src/src/Attributes/Widget/index.tsx
@@ -2064,7 +2064,6 @@ class Widget extends Component<WidgetProps, WidgetState> {
                         <IODialog
                             title="Are you sure"
                             onClose={() => this.setState({ clearGroup: null })}
-                            open={!0}
                             action={() => this.onGroupDelete(this.state.clearGroup)}
                             actionTitle="Clear"
                         >

diff --git a/packages/iobroker.vis-2/src/src/Attributes/index.tsx b/packages/iobroker.vis-2/src/src/Attributes/index.tsx
@@ -74,6 +74,7 @@ const Attributes = (props: AttributesProps): React.JSX.Element => {
         if (prevSelectedWidgets && !prevSelectedWidgets.length && props.selectedWidgets.length) {
             setSelected('Widget');
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.selectedWidgets]);
 
     if (!props.openedViews.length) {

diff --git a/packages/iobroker.vis-2/src/src/Components/CreateFirstProjectDialog.tsx b/packages/iobroker.vis-2/src/src/Components/CreateFirstProjectDialog.tsx
@@ -2,19 +2,13 @@ import React from 'react';
 import IODialog from './IODialog';
 
 interface CreateFirstProjectDialogProps {
-    open: boolean;
     onClose: () => void;
     addProject: (name: string) => void;
 }
 
-const CreateFirstProjectDialog = (props: CreateFirstProjectDialogProps): React.JSX.Element | null => {
-    if (props.open) {
-        return null;
-    }
-
+const CreateFirstProjectDialog = (props: CreateFirstProjectDialogProps): React.JSX.Element => {
     return (
         <IODialog
-            open={!0}
             onClose={props.onClose}
             title="Do you want to create first demo project?"
             action={() => props.addProject('Demo project')}

diff --git a/packages/iobroker.vis-2/src/src/Components/IODialog.tsx b/packages/iobroker.vis-2/src/src/Components/IODialog.tsx
@@ -19,69 +19,67 @@ interface IODialogProps {
     dialogActions?: any;
     keyboardDisabled?: boolean;
     onClose: () => void;
-    open: boolean;
     title: string;
     fullScreen?: boolean;
     maxWidth?: Breakpoint;
     minWidth?: number | string;
     noTranslation?: boolean;
 }
 
-const IODialog = (props: IODialogProps): React.JSX.Element =>
-    props.open ? (
-        <Dialog
-            onClose={props.closeDisabled ? null : props.onClose}
-            open={!0}
-            fullScreen={!!props.fullScreen}
-            maxWidth={props.maxWidth || 'md'}
-        >
-            <DialogTitle>{props.noTranslation ? props.title : I18n.t(props.title)}</DialogTitle>
-            <DialogContent
-                style={{ minWidth: props.minWidth || undefined }}
-                onKeyUp={e => {
-                    if (props.action) {
-                        if (!props.actionDisabled && !props.keyboardDisabled) {
-                            if (e.key === 'Enter') {
-                                props.action();
-                                if (!props.actionNoClose) {
-                                    props.onClose();
-                                }
-                            }
-                        }
-                    }
-                }}
-            >
-                {props.children}
-            </DialogContent>
-            <DialogActions>
-                {props.dialogActions || null}
-                {props.actionTitle ? (
-                    <Button
-                        variant="contained"
-                        onClick={() => {
+const IODialog = (props: IODialogProps): React.JSX.Element => (
+    <Dialog
+        onClose={props.closeDisabled ? null : props.onClose}
+        open={!0}
+        fullScreen={!!props.fullScreen}
+        maxWidth={props.maxWidth || 'md'}
+    >
+        <DialogTitle>{props.noTranslation ? props.title : I18n.t(props.title)}</DialogTitle>
+        <DialogContent
+            style={{ minWidth: props.minWidth || undefined }}
+            onKeyUp={e => {
+                if (props.action) {
+                    if (!props.actionDisabled && !props.keyboardDisabled) {
+                        if (e.key === 'Enter') {
                             props.action();
                             if (!props.actionNoClose) {
                                 props.onClose();
                             }
-                        }}
-                        color={props.actionColor || 'primary'}
-                        disabled={props.actionDisabled}
-                        startIcon={props.ActionIcon ? <props.ActionIcon /> : undefined}
-                    >
-                        {props.noTranslation ? props.actionTitle : I18n.t(props.actionTitle)}
-                    </Button>
-                ) : null}
+                        }
+                    }
+                }
+            }}
+        >
+            {props.children}
+        </DialogContent>
+        <DialogActions>
+            {props.dialogActions || null}
+            {props.actionTitle ? (
                 <Button
                     variant="contained"
-                    color="grey"
-                    onClick={props.onClose}
-                    disabled={props.closeDisabled}
-                    startIcon={<CloseIcon />}
+                    onClick={() => {
+                        props.action();
+                        if (!props.actionNoClose) {
+                            props.onClose();
+                        }
+                    }}
+                    color={props.actionColor || 'primary'}
+                    disabled={props.actionDisabled}
+                    startIcon={props.ActionIcon ? <props.ActionIcon /> : undefined}
                 >
-                    {props.noTranslation && props.closeTitle ? props.closeTitle : I18n.t(props.closeTitle || 'Cancel')}
+                    {props.noTranslation ? props.actionTitle : I18n.t(props.actionTitle)}
                 </Button>
-            </DialogActions>
-        </Dialog>
-    ) : null;
+            ) : null}
+            <Button
+                variant="contained"
+                color="grey"
+                onClick={props.onClose}
+                disabled={props.closeDisabled}
+                startIcon={<CloseIcon />}
+            >
+                {props.noTranslation && props.closeTitle ? props.closeTitle : I18n.t(props.closeTitle || 'Cancel')}
+            </Button>
+        </DialogActions>
+    </Dialog>
+);
 
 export default IODialog;
diff --git a/packages/iobroker.vis-2/src/src/Components/UploadFile.tsx b/packages/iobroker.vis-2/src/src/Components/UploadFile.tsx
@@ -47,11 +47,13 @@ const UploadFile = (props: UploadFileProps): React.JSX.Element => {
         ) => {
             if (acceptedFiles?.length) {
                 setWorking(true);
-                error && setError('');
+                if (error) {
+                    setError('');
+                }
                 const reader = new FileReader();
                 setFileName(acceptedFiles[0].name);
 
-                reader.onload = async (evt: ProgressEvent<FileReader>): Promise<void> => {
+                reader.onload = (evt: ProgressEvent<FileReader>): void => {
                     setWorking(false);
                     setFileData(evt.target.result);
                     props.onUpload(acceptedFiles[0].name, evt.target.result);
@@ -68,11 +70,17 @@ const UploadFile = (props: UploadFileProps): React.JSX.Element => {
                     } else {
                         setError(`Error: ${err.message}`);
                     }
-                    setTimeout(() => error && setError(''), 3000);
+                    // hide error after 3 seconds
+                    setTimeout(() => {
+                        if (error) {
+                            setError('');
+                        }
+                    }, 3000);
                 });
             }
         },
-        [],
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [error],
     );
 
     const { getRootProps, getInputProps, isDragActive } = useDropzone({

diff --git a/packages/iobroker.vis-2/src/src/Editor.tsx b/packages/iobroker.vis-2/src/src/Editor.tsx
@@ -2127,10 +2127,9 @@ class Editor extends Runtime<EditorProps, EditorState> {
         );
     }
 
-    renderCreateFirstProjectDialog(): React.JSX.Element {
+    renderCreateFirstProjectDialog(): React.JSX.Element | null {
         return this.state.createFirstProjectDialog ? (
             <CreateFirstProjectDialog
-                open={!0}
                 onClose={() => this.setState({ createFirstProjectDialog: false })}
                 addProject={this.addProject}
             />

diff --git a/packages/iobroker.vis-2/src/src/Palette/Widget.tsx b/packages/iobroker.vis-2/src/src/Palette/Widget.tsx
@@ -261,6 +261,7 @@ const Widget = (props: WidgetProps): React.JSX.Element => {
 
     useEffect(() => {
         preview(getEmptyImage(), { captureDraggingState: true });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.widgetType]);
 
     if (typeof props.widgetType.customPalette === 'function') {

diff --git a/packages/iobroker.vis-2/src/src/Toolbar/ProjectsManager/ImportProjectDialog.tsx b/packages/iobroker.vis-2/src/src/Toolbar/ProjectsManager/ImportProjectDialog.tsx
@@ -130,7 +130,6 @@ const ImportProjectDialog: React.FC<ImportProjectDialogProps> = props => {
     return (
         <IODialog
             title="Import project"
-            open={!0}
             onClose={() => props.onClose()}
             actionNoClose
             action={importProject}

diff --git a/packages/iobroker.vis-2/src/src/Toolbar/ProjectsManager/PermissionsDialog.tsx b/packages/iobroker.vis-2/src/src/Toolbar/ProjectsManager/PermissionsDialog.tsx
@@ -380,7 +380,6 @@ export default class PermissionsDialog extends React.Component<PermissionsDialog
         return (
             <IODialog
                 title="Permissions"
-                open={!0}
                 onClose={() => this.props.onClose()}
                 actionNoClose
                 action={() => this.onSave()}

diff --git a/packages/iobroker.vis-2/src/src/Toolbar/ProjectsManager/ProjectDialog.tsx b/packages/iobroker.vis-2/src/src/Toolbar/ProjectsManager/ProjectDialog.tsx
@@ -14,15 +14,15 @@ interface ProjectDialogProps {
     dialogProject: string;
     dialogName: string;
     projects: string[];
-    setDialog: (dialog: null | 'delete' | 'rename' | 'add') => void;
+    closeDialog: () => void;
     setDialogProject: (project: null | string) => void;
     setDialogName: (name: string) => void;
     addProject: (name: string) => void;
     deleteProject: (project: string) => void;
     renameProject: (project: string, name: string) => void;
 }
 
-const ProjectDialog: React.FC<ProjectDialogProps> = props => {
+const ProjectDialog: React.FC<ProjectDialogProps> = (props: ProjectDialogProps): React.JSX.Element | null => {
     const inputField = useFocus(props.dialog && props.dialog !== 'delete', props.dialog === 'add');
 
     if (!props.dialog) {
@@ -76,9 +76,8 @@ const ProjectDialog: React.FC<ProjectDialogProps> = props => {
             title={dialogTitles[props.dialog]}
             actionTitle={dialogButtons[props.dialog]}
             noTranslation
-            open={!!props.dialog}
             onClose={() => {
-                props.setDialog(null);
+                props.closeDialog();
                 props.setDialogProject(null);
             }}
             ActionIcon={DialogIcon || null}

diff --git a/packages/iobroker.vis-2/src/src/Toolbar/ProjectsManager/index.tsx b/packages/iobroker.vis-2/src/src/Toolbar/ProjectsManager/index.tsx
@@ -194,7 +194,6 @@ const ProjectsManage: React.FC<ProjectsManageProps> = props => {
 
     return props.open ? (
         <IODialog
-            open={!0}
             onClose={props.onClose}
             title="Manage projects"
             closeTitle="Close"
@@ -338,7 +337,7 @@ const ProjectsManage: React.FC<ProjectsManageProps> = props => {
                     dialog={dialog}
                     dialogProject={dialogProject}
                     dialogName={dialogName}
-                    setDialog={setDialog}
+                    closeDialog={() => setDialog(null)}
                     setDialogProject={setDialogProject}
                     setDialogName={setDialogName}
                     addProject={props.addProject}

diff --git a/packages/iobroker.vis-2/src/src/Toolbar/Settings.tsx b/packages/iobroker.vis-2/src/src/Toolbar/Settings.tsx
@@ -86,7 +86,7 @@ const Settings: React.FC<SettingsProps> = props => {
 
     const [settings, setSettings] = useState<ProjectSettings>({} as ProjectSettings);
     const [instance, setInstance] = useState('');
-    /* eslint no-underscore-dangle: 0 */
+
     useEffect(() => {
         const _settings = { ...store.getState().visProject.___settings };
         if (_settings.reloadOnEdit === undefined) {
@@ -105,6 +105,7 @@ const Settings: React.FC<SettingsProps> = props => {
         });
 
         setSettings(_settings);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
     const fields: SettingsField[] = [
@@ -247,7 +248,6 @@ const Settings: React.FC<SettingsProps> = props => {
 
     return (
         <IODialog
-            open={!0}
             onClose={props.onClose}
             title="Settings"
             ActionIcon={SaveIcon}

diff --git a/packages/iobroker.vis-2/src/src/Toolbar/Views.tsx b/packages/iobroker.vis-2/src/src/Toolbar/Views.tsx
@@ -162,7 +162,7 @@ const Views = (props: ViewsProps): React.JSX.Element => {
                 dialogCallback={dialogCallback}
                 noTranslation
                 dialogParentId={dialogParentId}
-                setDialog={setDialog}
+                closeDialog={() => setDialog(null)}
                 setDialogView={setDialogView}
                 setDialogName={setDialogName}
                 setDialogParentId={setDialogParentId}

diff --git a/packages/iobroker.vis-2/src/src/Toolbar/ViewsManager/ExportDialog.tsx b/packages/iobroker.vis-2/src/src/Toolbar/ViewsManager/ExportDialog.tsx
@@ -9,14 +9,12 @@ import { store } from '../../Store';
 
 interface ExportDialogProps {
     onClose: () => void;
-    open: boolean;
     themeType: ThemeType;
     view: string;
 }
 
 const ExportDialog: React.FC<ExportDialogProps> = props => (
     <IODialog
-        open={props.open}
         onClose={props.onClose}
         title={I18n.t('Export "%s"', props.view)}
         closeTitle="Close"