Fixed errors with Widget in Widget

ioBroker · Apr 18, 2024 · af8cd55 · af8cd55
1 parent 1fc8b7d
commit af8cd55
Show file tree

Hide file tree

Showing 9 changed files with 393 additions and 219 deletions.
diff --git a/...iobroker.vis-2/src/src/Attributes/CSS.jsx → ...iobroker.vis-2/src/src/Attributes/CSS.tsx b/...iobroker.vis-2/src/src/Attributes/CSS.jsx → ...iobroker.vis-2/src/src/Attributes/CSS.tsx
@@ -1,5 +1,4 @@
-import { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
+import React, { useEffect, useState } from 'react';
 
 import {
     MenuItem, Select, Dialog, DialogTitle, Button,
@@ -10,11 +9,21 @@ import { HelpOutline, Check as CheckIcon } from '@mui/icons-material';
 
 import { I18n } from '@iobroker/adapter-react-v5';
 
-import { readFile } from '../Vis/visUtils';
-import CustomAceEditor from '../Components/CustomAceEditor';
+import { readFile } from '@/Vis/visUtils';
+import { CustomAceEditor } from '@/Components/CustomAceEditor';
 
-const CSS = props => {
-    const [type, setType] = useState('global');
+interface CSSProps {
+    projectName: string;
+    socket: any;
+    saveCssFile: (directory: string, file: string, value: string) => void;
+    adapterId: string;
+    themeType: string;
+    maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    editMode: boolean;
+}
+
+const CSS = (props: CSSProps) => {
+    const [type, setType] = useState<'global' | 'local'>('global');
 
     const [localCss, setLocalCss] = useState('');
     const [globalCss, setGlobalCss] = useState('');
@@ -45,31 +54,31 @@ const CSS = props => {
     useEffect(() => {
         const load = async () => {
             try {
-                const commonCss = await readFile(props.socket, props.adapterId, 'vis-common-user.css');
+                const commonCss = await readFile(props.socket, props.adapterId, 'vis-common-user.css') as string;
                 setGlobalCss(commonCss);
             } catch (e) {
                 if (e !== 'Not exists') {
                     console.warn(`Cannot loading global CSS: ${e}`);
                 }
             }
             try {
-                const userCss = await readFile(props.socket, props.adapterId, `${props.projectName}/vis-user.css`);
+                const userCss = await readFile(props.socket, props.adapterId, `${props.projectName}/vis-user.css`) as string;
                 setLocalCss(userCss);
             } catch (e) {
                 if (e !== 'Not exists') {
                     console.warn(`Cannot load project CSS: ${e}`);
                 }
             }
             if (window.localStorage.getItem('CSS.type')) {
-                setType(window.localStorage.getItem('CSS.type'));
+                setType(window.localStorage.getItem('CSS.type') as 'global' | 'local');
             }
         };
 
         load()
             .catch(e => console.error('Error loading CSS: ', e));
     }, []);
 
-    const save = (value, saveType) => {
+    const save = (value: string, saveType: 'global' | 'local') => {
         timers[saveType].setValue(value);
         clearTimeout(timers[saveType].timer);
         timers[saveType].setTimer(setTimeout(() => {
@@ -79,10 +88,7 @@ const CSS = props => {
         }, 1000));
     };
 
-    let value = type === 'global' ? globalCss : localCss;
-    if (typeof value === 'object') {
-        value = value.data;
-    }
+    const value = type === 'global' ? globalCss : localCss;
 
     return <>
         <div style={{ display: 'flex', alignItems: 'center' }}>
@@ -96,6 +102,7 @@ const CSS = props => {
                 </DialogContent>
                 <DialogActions>
                     <Button
+                        // @ts-expect-error grey is valid color
                         color="grey"
                         variant="contained"
                         onClick={() => setShowHelp(false)}
@@ -109,7 +116,7 @@ const CSS = props => {
                 variant="standard"
                 value={type}
                 onChange={e => {
-                    setType(e.target.value);
+                    setType(e.target.value as 'global' | 'local');
                     window.localStorage.setItem('CSS.type', e.target.value);
                 }}
             >
@@ -132,12 +139,4 @@ const CSS = props => {
     </>;
 };
 
-CSS.propTypes = {
-    projectName: PropTypes.string,
-    socket: PropTypes.object,
-    saveCssFile: PropTypes.func.isRequired,
-    adapterId: PropTypes.string.isRequired,
-    adapterName: PropTypes.string.isRequired,
-};
-
 export default CSS;
diff --git a/.../src/src/Attributes/Widget/TextDialog.jsx → .../src/src/Attributes/Widget/TextDialog.tsx b/.../src/src/Attributes/Widget/TextDialog.jsx → .../src/src/Attributes/Widget/TextDialog.tsx
@@ -1,10 +1,18 @@
-import { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
+import React, { useEffect, useState } from 'react';
 
 import IODialog from '../../Components/IODialog';
 import CustomAceEditor from '../../Components/CustomAceEditor';
 
-const TextDialog = props => {
+interface TextDialogProps {
+    onChange: (value: string) => void;
+    onClose: () => void;
+    open: boolean;
+    themeType: string;
+    type: string;
+    value: string;
+}
+
+const TextDialog = (props: TextDialogProps) => {
     const [value, changeValue] = useState('');
 
     useEffect(() => {
@@ -32,13 +40,4 @@ const TextDialog = props => {
     </IODialog> : null;
 };
 
-TextDialog.propTypes = {
-    onChange: PropTypes.func,
-    onClose: PropTypes.func,
-    open: PropTypes.bool,
-    themeType: PropTypes.string,
-    type: PropTypes.string,
-    value: PropTypes.string,
-};
-
 export default TextDialog;
diff --git a/...2/src/src/Attributes/Widget/WidgetCSS.jsx → ...2/src/src/Attributes/Widget/WidgetCSS.tsx b/...2/src/src/Attributes/Widget/WidgetCSS.jsx → ...2/src/src/Attributes/Widget/WidgetCSS.tsx
@@ -1,5 +1,4 @@
-import PropTypes from 'prop-types';
-import { useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 
 import {
     Dialog, DialogTitle, DialogContent, DialogActions, Button,
@@ -9,9 +8,18 @@ import { Close } from '@mui/icons-material';
 
 import { I18n } from '@iobroker/adapter-react-v5';
 
+import { Widget } from '@/types';
 import CustomAceEditor from '../../Components/CustomAceEditor';
 
-const WidgetCSS = props => {
+interface WidgetCSSProps {
+    themeType: string;
+    editMode: boolean;
+    onClose: () => void;
+    onChange: (value: string) => void;
+    widget: Widget;
+}
+
+const WidgetCSS = (props: WidgetCSSProps) => {
     const [value, setValue] = useState(props.widget.css || '');
     const timeout = useRef(null);
 
@@ -49,12 +57,4 @@ const WidgetCSS = props => {
     </Dialog>;
 };
 
-WidgetCSS.propTypes = {
-    themeType: PropTypes.string,
-    editMode: PropTypes.bool,
-    onClose: PropTypes.func,
-    onChange: PropTypes.func,
-    widget: PropTypes.object,
-};
-
 export default WidgetCSS;