typescript code

ioBroker · Jun 17, 2024 · eb810a0 · eb810a0
1 parent 02c593e
commit eb810a0
Show file tree

Hide file tree

Showing 10 changed files with 190 additions and 126 deletions.
diff --git a/packages/iobroker.vis-2/src/src/Editor.tsx b/packages/iobroker.vis-2/src/src/Editor.tsx
@@ -1,8 +1,8 @@
-import React, { CSSProperties, useRef } from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
 import {
-    withStyles, StylesProvider, createGenerateClassName, Styles,
+    withStyles, StylesProvider, createGenerateClassName, Styles, CSSProperties,
 } from '@mui/styles';
 import { DndProvider, useDrop } from 'react-dnd';
 import { TouchBackend } from 'react-dnd-touch-backend';
@@ -1942,9 +1942,11 @@ class Editor extends Runtime<EditorProps, EditorState> {
             }}
             openNewProjectOnCreate
             projectName={this.state.projectName}
-            socket={this.socket}
+            socket={this.socket as unknown as LegacyConnection}
             adapterName={this.adapterName}
             instance={this.instance}
+            loadProject={this.loadProject}
+            refreshProjects={this.refreshProjects}
         />;
     }
 

diff --git a/...r/ProjectsManager/ImportProjectDialog.jsx → ...r/ProjectsManager/ImportProjectDialog.tsx b/...r/ProjectsManager/ImportProjectDialog.jsx → ...r/ProjectsManager/ImportProjectDialog.tsx
@@ -1,23 +1,24 @@
 import PropTypes from 'prop-types';
-import { useState } from 'react';
+import React, { useState } from 'react';
 import {
     TextField,
 } from '@mui/material';
 
 import { BiImport } from 'react-icons/bi';
 
-import { I18n, Confirm as ConfirmDialog } from '@iobroker/adapter-react-v5';
+import { I18n, Confirm as ConfirmDialog, LegacyConnection } from '@iobroker/adapter-react-v5';
 
+import { EditorClass } from '@/Editor';
 import UploadFile from '../../Components/UploadFile';
 import IODialog from '../../Components/IODialog';
 
-export const getLiveHost = async socket => {
+export const getLiveHost = async (socket: LegacyConnection) => {
     const res = await socket.getObjectViewSystem('host', 'system.host.', 'system.host.\u9999');
     const hosts = Object.keys(res).map(id => `${id}.alive`);
     if (!hosts.length) {
         return null;
     }
-    const states = await socket.getForeignStates(hosts);
+    const states = await socket.getForeignStates(hosts as unknown as string);
     for (const h in states) {
         if (states[h]?.val) {
             return h.substring(0, h.length - '.alive'.length);
@@ -27,9 +28,22 @@ export const getLiveHost = async socket => {
     return null;
 };
 
-const ImportProjectDialog = props => {
+interface ImportProjectDialogProps {
+    onClose: (isYes?: boolean, projectName?: string) => void;
+    projectName: string;
+    refreshProjects: EditorClass['refreshProjects'];
+    socket: LegacyConnection;
+    themeType: string;
+    loadProject: EditorClass['loadProject'];
+    adapterName: string;
+    instance: number;
+    openNewProjectOnCreate: boolean;
+    projects: string[];
+}
+
+const ImportProjectDialog:React.FC<ImportProjectDialogProps> = props => {
     const [projectName, setProjectName] = useState('');
-    const [projectData, setProjectData] = useState(null);
+    const [projectData, setProjectData] = useState<string>(null);
     const [showConfirmation, setShowConfirmation] = useState(false);
     const [askOpenProject, setAskOpenProject] = useState(false);
     const [working, setWorking] = useState(false);
@@ -60,7 +74,7 @@ const ImportProjectDialog = props => {
                     id: `${props.adapterName}.${props.instance}`,
                     name: projectName || 'main',
                     data: projectData.split(',')[1],
-                }, async result => {
+                }, async (result: {error?: string}) => {
                     setWorking(false);
                     timeout && clearTimeout(timeout);
                     timeout = null;
@@ -127,7 +141,7 @@ const ImportProjectDialog = props => {
                 } else {
                     setProjectName(name.replace(/\.zip$/i, ''));
                 }
-                setProjectData(data);
+                setProjectData(data as string);
             }}
             accept={{
                 'application/zip': ['.zip'],
@@ -150,17 +164,4 @@ const ImportProjectDialog = props => {
     </IODialog>;
 };
 
-ImportProjectDialog.propTypes = {
-    onClose: PropTypes.func,
-    projectName: PropTypes.string,
-    refreshProjects: PropTypes.func,
-    socket: PropTypes.object,
-    themeType: PropTypes.string,
-    loadProject: PropTypes.func,
-    adapterName: PropTypes.string,
-    instance: PropTypes.number,
-    openNewProjectOnCreate: PropTypes.bool,
-    projects: PropTypes.array,
-};
-
 export default ImportProjectDialog;
diff --git a/packages/iobroker.vis-2/src/src/Toolbar/Views.tsx b/packages/iobroker.vis-2/src/src/Toolbar/Views.tsx
@@ -48,7 +48,7 @@ interface ViewsProps {
 
 const Views = (props: ViewsProps) => {
     const [dialog, setDialog] = useState(null);
-    const [dialogCallback, setDialogCallback] = useState(null);
+    const [dialogCallback, setDialogCallback] = useState<{ cb:(dialogName: string) => void }>(null);
     const [dialogName, setDialogName] = useState('');
     const [dialogView, setDialogView] = useState(null);
     const [dialogParentId, setDialogParentId] = useState(null);

diff --git a/...src/Toolbar/ViewsManager/ExportDialog.jsx → ...src/Toolbar/ViewsManager/ExportDialog.tsx b/...src/Toolbar/ViewsManager/ExportDialog.jsx → ...src/Toolbar/ViewsManager/ExportDialog.tsx
@@ -2,13 +2,21 @@ import PropTypes from 'prop-types';
 
 import { FileCopy as FileCopyIcon } from '@mui/icons-material';
 
-import { Utils, I18n } from '@iobroker/adapter-react-v5';
+import { Utils, I18n, ThemeType } from '@iobroker/adapter-react-v5';
 
+import React from 'react';
 import IODialog from '../../Components/IODialog';
 import CustomAceEditor from '../../Components/CustomAceEditor';
 import { store } from '../../Store';
 
-const ExportDialog = props => <IODialog
+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)}
@@ -26,11 +34,4 @@ const ExportDialog = props => <IODialog
     />
 </IODialog>;
 
-ExportDialog.propTypes = {
-    onClose: PropTypes.func,
-    open: PropTypes.bool,
-    themeType: PropTypes.string,
-    view: PropTypes.string,
-};
-
 export default ExportDialog;
diff --git a/...2/src/src/Toolbar/ViewsManager/Folder.jsx → ...2/src/src/Toolbar/ViewsManager/Folder.tsx b/...2/src/src/Toolbar/ViewsManager/Folder.jsx → ...2/src/src/Toolbar/ViewsManager/Folder.tsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
-import { useEffect } from 'react';
-import { withStyles } from '@mui/styles';
+import React, { useEffect } from 'react';
+import { CSSProperties, Styles, withStyles } from '@mui/styles';
 import { useDrag, useDrop } from 'react-dnd';
 import { getEmptyImage } from 'react-dnd-html5-backend';
 
@@ -16,10 +16,10 @@ import {
 } from '@mui/icons-material';
 import { FaFolder as FolderClosedIcon, FaFolderOpen as FolderOpenedIcon } from 'react-icons/fa';
 
-import { Utils, I18n } from '@iobroker/adapter-react-v5';
+import { Utils, I18n, IobTheme } from '@iobroker/adapter-react-v5';
 import { store } from '../../Store';
 
-const styles = theme => ({
+const styles:Styles<IobTheme & {classes?: Record<string, CSSProperties>}, any> = theme => ({
     viewManageBlock: theme.classes.viewManageBlock,
     viewManageButtonActions: theme.classes.viewManageButtonActions,
     folderName: {
@@ -51,15 +51,40 @@ const styles = theme => ({
     },
 });
 
-const Folder = props => {
+export interface FolderType {
+        id: string;
+        name: string;
+        parentId: string;
+}
+
+interface FolderProps {
+    classes: Record<string, string>;
+    folder: FolderType;
+    moveFolder: (id: string, parentId: string) => void;
+    setFolderDialog: (dialog: 'add' | 'rename' | 'delete') => void;
+    setFolderDialogId: (id: string) => void;
+    setFolderDialogName: (name: string) => void;
+    setFolderDialogParentId: (parentId: string) => void;
+    setIsDragging: (isDragging: string) => void;
+    isDragging: string;
+    editMode: boolean;
+    foldersCollapsed: string[];
+    setFoldersCollapsed: (foldersCollapsed: string[]) => void;
+    showDialog: (dialog: string, view: string, parentId: string) => void;
+}
+
+const Folder:React.FC<FolderProps> = props => {
     const folderBlock = <div className={props.classes.viewManageBlock}>
         {props.foldersCollapsed.includes(props.folder.id)
             ? <FolderClosedIcon fontSize={20} />
             : <FolderOpenedIcon fontSize={20} />}
         <span className={props.classes.folderName}>{props.folder.name}</span>
     </div>;
 
-    const [{ canDrop }, drop] = useDrop(() => ({
+    const [{ canDrop }, drop] = useDrop<{
+        name: string;
+        folder: FolderType;
+    }, unknown, { isOver: boolean; canDrop: boolean }>(() => ({
         accept: ['view', 'folder'],
         drop: () => ({ folder: props.folder }),
         canDrop: (item, monitor) => {
@@ -96,7 +121,7 @@ const Folder = props => {
             preview: <div>{folderBlock}</div>,
         }),
         end: (item, monitor) => {
-            const dropResult = monitor.getDropResult();
+            const dropResult = monitor.getDropResult<{folder: FolderType}>();
             if (item && dropResult) {
                 props.moveFolder(item.folder.id, dropResult.folder.id);
             }
@@ -197,17 +222,4 @@ const Folder = props => {
     </div>;
 };
 
-Folder.propTypes = {
-    classes: PropTypes.object,
-    folder: PropTypes.object,
-    moveFolder: PropTypes.func,
-    setFolderDialog: PropTypes.func,
-    setFolderDialogId: PropTypes.func,
-    setFolderDialogName: PropTypes.func,
-    setFolderDialogParentId: PropTypes.func,
-    setIsDragging: PropTypes.func,
-    isDragging: PropTypes.string,
-    editMode: PropTypes.bool,
-};
-
 export default withStyles(styles)(Folder);
diff --git a/...src/Toolbar/ViewsManager/FolderDialog.jsx → ...src/Toolbar/ViewsManager/FolderDialog.tsx b/...src/Toolbar/ViewsManager/FolderDialog.jsx → ...src/Toolbar/ViewsManager/FolderDialog.tsx
@@ -11,11 +11,25 @@ import DeleteIcon from '@mui/icons-material/Delete';
 
 import { I18n } from '@iobroker/adapter-react-v5';
 
+import { EditorClass } from '@/Editor';
+import React from 'react';
 import IODialog from '../../Components/IODialog';
 import { useFocus } from '../../Utils';
 import { store } from '../../Store';
-
-const FolderDialog = props => {
+import { deepClone } from '@/Utils/utils';
+
+interface FolderDialogProps {
+    changeProject: EditorClass['changeProject'];
+    dialog: 'add' | 'rename' | 'delete';
+    dialogFolder: string;
+    dialogName: string;
+    dialogParentId: string;
+    setDialog: (dialog: 'add' | 'rename' | 'delete' | null) => void;
+    setDialogFolder: (folder: string | null) => void;
+    setDialogName: (name: string) => void;
+}
+
+const FolderDialog:React.FC<FolderDialogProps> = props => {
     const inputField = useFocus(props.dialog && props.dialog !== 'delete', props.dialog === 'add');
 
     if (!props.dialog) {
@@ -37,7 +51,7 @@ const FolderDialog = props => {
     };
 
     const addFolder = () => {
-        const project = JSON.parse(JSON.stringify(store.getState().visProject));
+        const project = deepClone(store.getState().visProject);
         project.___settings.folders.push({
             id: uuidv4(),
             name: props.dialogName,
@@ -47,13 +61,13 @@ const FolderDialog = props => {
     };
 
     const deleteFolder = () => {
-        const project = JSON.parse(JSON.stringify(store.getState().visProject));
+        const project = deepClone(store.getState().visProject);
         project.___settings.folders.splice(project.___settings.folders.findIndex(folder => folder.id === props.dialogFolder), 1);
         props.changeProject(project);
     };
 
     const renameFolder = () => {
-        const project = JSON.parse(JSON.stringify(store.getState().visProject));
+        const project = deepClone(store.getState().visProject);
         project.___settings.folders.find(folder => folder.id === props.dialogFolder).name = props.dialogName;
         props.changeProject(project);
     };
@@ -108,15 +122,4 @@ const FolderDialog = props => {
     </IODialog>;
 };
 
-FolderDialog.propTypes = {
-    changeProject: PropTypes.func,
-    dialog: PropTypes.string,
-    dialogFolder: PropTypes.string,
-    dialogName: PropTypes.string,
-    dialogParentId: PropTypes.string,
-    setDialog: PropTypes.func,
-    setDialogFolder: PropTypes.func,
-    setDialogName: PropTypes.func,
-};
-
 export default FolderDialog;
diff --git a/...src/Toolbar/ViewsManager/ImportDialog.jsx → ...src/Toolbar/ViewsManager/ImportDialog.tsx b/...src/Toolbar/ViewsManager/ImportDialog.jsx → ...src/Toolbar/ViewsManager/ImportDialog.tsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 
-import { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import { TextField } from '@mui/material';
 
@@ -11,7 +11,15 @@ import CustomAceEditor from '../../Components/CustomAceEditor';
 import { useFocus } from '../../Utils';
 import { store } from '../../Store';
 
-const ImportDialog = props => {
+interface ImportDialogProps {
+    importViewAction: (view: string, data: string) => void;
+    onClose: () => void;
+    open: boolean;
+    view: string;
+    themeType: string;
+}
+
+const ImportDialog:React.FC<ImportDialogProps> = props => {
     const [data, setData] = useState('');
     const [view, setView] = useState('');
     const [errors, setErrors] = useState([]);
@@ -57,7 +65,7 @@ const ImportDialog = props => {
     >
         <CustomAceEditor
             type="json"
-            theme={props.themeType}
+            themeType={props.themeType}
             refEditor={node => {
                 editor.current = node;
                 inputField.current = node;
@@ -72,10 +80,4 @@ const ImportDialog = props => {
     </IODialog>;
 };
 
-ImportDialog.propTypes = {
-    importViewAction: PropTypes.func,
-    onClose: PropTypes.func,
-    open: PropTypes.bool,
-    view: PropTypes.string,
-};
 export default ImportDialog;
diff --git a/...s-2/src/src/Toolbar/ViewsManager/Root.jsx → ...s-2/src/src/Toolbar/ViewsManager/Root.tsx b/...s-2/src/src/Toolbar/ViewsManager/Root.jsx → ...s-2/src/src/Toolbar/ViewsManager/Root.tsx
@@ -1,12 +1,21 @@
 import PropTypes from 'prop-types';
 import { useDrop  } from 'react-dnd';
-import { useEffect } from 'react';
+import React, { useEffect } from 'react';
 
 import { I18n } from '@iobroker/adapter-react-v5';
 import { store } from '../../Store';
+import { FolderType } from './Folder';
 
-const Root = props => {
-    const [{ canDrop, isOver }, drop] = useDrop(() => ({
+interface RootProps {
+    setIsOverRoot: (isOver: boolean) => void;
+    isDragging: string;
+}
+
+const Root:React.FC<RootProps> = props => {
+    const [{ canDrop, isOver }, drop] = useDrop<{
+        name: string;
+        folder: FolderType;
+    }, unknown, { isOver: boolean; canDrop: boolean }>(() => ({
         accept: ['view', 'folder'],
         drop: () => ({ folder: { id: null } }),
         canDrop: (item, monitor) => {