@iobroker/adapter-react-v5 6.1.3 → 6.1.6

package/src/Dialogs/SelectID.tsx

@@ -0,0 +1,298 @@
+/**
+ * Copyright 2018-2023 Denis Haev (bluefox) <dogafox@gmail.com>
+ *
+ * MIT License
+ *
+ * */
+// please do not delete React, as without it other projects could not be compiled: ReferenceError: React is not defined
+import React, { Component } from 'react';
+
+import {
+    Button,
+    DialogTitle,
+    DialogContent,
+    DialogActions,
+    Dialog,
+} from '@mui/material';
+
+import {
+    Cancel as IconCancel,
+    Check as IconOk,
+} from '@mui/icons-material';
+
+import type Connection from '../Connection';
+
+import I18n from '../i18n';
+import ObjectBrowser, { ObjectBrowserFilter } from '../Components/ObjectBrowser';
+import { ObjectBrowserColumn, ObjectBrowserCustomFilter, ObjectBrowserType } from '../Components/types';
+import { IobTheme } from '../types';
+
+export interface SelectIDFilters {
+    id?: string;
+    name?: string;
+    room?: string;
+    func?: string;
+    role?: string;
+    type?: string;
+    custom?: string;
+}
+
+interface DialogSelectIDProps {
+    /** The internal name of the dialog; default: "default". Used to store settings in local storage */
+    dialogName?: string;
+    /** The dialog title; default: Please select object ID... (translated) */
+    title?: string;
+    /** Set to true to allow the selection of multiple IDs. */
+    multiSelect?: boolean;
+    /** Show folders before any leaves. */
+    foldersFirst?: boolean;
+    /** Path prefix for images (default: '.') */
+    imagePrefix?: string;
+    /** @deprecated: same as imagePrefix */
+    prefix?: string;
+    /** Show the expert button */
+    showExpertButton?: boolean;
+    /** Force expert mode */
+    expertMode?: boolean;
+    /** optional ['name', 'type', 'role', 'room', 'func', 'val', 'buttons'] */
+    columns?: ObjectBrowserColumn[];
+    /**  Object types to show; default: 'state' only */
+    types?: ObjectBrowserType | ObjectBrowserType[];
+    /** The language. */
+    lang?: ioBroker.Languages;
+    /** The socket connection. */
+    socket: Connection;
+    /** Can't objects be edited? (default: true) */
+    notEditable?: boolean;
+    /** Theme name. */
+    themeName?: string;
+    /** Theme type: dark or light */
+    themeType?: string;
+    /** The theme object */
+    theme: IobTheme;
+    /** The date format for the date columns */
+    dateFormat?: string;
+    /** Is use comma or point for displaying of float numbers */
+    isFloatComma?: boolean;
+    /** Custom filter. */
+    customFilter?: ObjectBrowserCustomFilter;
+    /** The selected IDs. */
+    selected?: string | string[];
+    /** The ok button text; default: OK (translated) */
+    ok?: string;
+    /** The cancel button text; default: Cancel (translated) */
+    cancel?: string;
+    /** Close handler that is always called when the dialog is closed. */
+    onClose: () => void;
+    /** Handler that is called when the user presses OK. */
+    onOk: (selected: string | string[] | undefined, name: string) => void;
+    /** Function to filter out all unnecessary objects. Can be string or function.
+       It cannot be used together with "types".
+       Example for function: `obj => obj.common?.type === 'boolean'` to show only boolean states
+       In case of string, it must look like `obj.common && obj.common.type === 'boolean'` */
+    filterFunc?: string | ((obj: ioBroker.Object) => boolean);
+    /** predefined filter fields, like {"id":"","name":"","room":"","func":"","role":"level","type":"","custom":""} */
+    filters?: SelectIDFilters;
+    /** Show elements only of this root ID */
+    root?: string;
+}
+
+interface DialogSelectIDState {
+    selected: string[];
+    name: string;
+}
+
+class DialogSelectID extends Component<DialogSelectIDProps, DialogSelectIDState> {
+    private readonly dialogName: string;
+
+    private filters: ObjectBrowserFilter;
+
+    private readonly filterFunc?: (obj: ioBroker.Object) => boolean;
+
+    constructor(props: DialogSelectIDProps) {
+        super(props);
+        this.dialogName = this.props.dialogName || 'default';
+        this.dialogName = `SelectID.${this.dialogName}`;
+
+        const filters: string = ((window as any)._localStorage || window.localStorage).getItem(this.dialogName) || '{}';
+
+        try {
+            this.filters = JSON.parse(filters);
+        } catch (e) {
+            this.filters = {};
+        }
+
+        if (props.filters) {
+            this.filters = { ...this.filters, ...(props.filters || {}) };
+        }
+
+        let selected = this.props.selected || [];
+        if (!Array.isArray(selected)) {
+            selected = [selected];
+        }
+        selected = selected.filter(id => id);
+
+        if (props.filterFunc) {
+            if (typeof props.filterFunc === 'string') {
+                try {
+                    // eslint-disable-next-line no-new-func
+                    this.filterFunc = new Function('obj', props.filterFunc) as (obj: ioBroker.Object) => boolean;
+                } catch (e) {
+                    console.error(`Cannot parse filter function: "obj => ${props.filterFunc}"`);
+                    this.filterFunc = undefined;
+                }
+            } else {
+                this.filterFunc = props.filterFunc;
+            }
+        }
+
+        this.state =  {
+            selected,
+            name: '',
+        };
+    }
+
+    handleCancel() {
+        this.props.onClose();
+    }
+
+    handleOk() {
+        this.props.onOk(this.props.multiSelect ? this.state.selected : this.state.selected[0] || '', this.state.name);
+        this.props.onClose();
+    }
+
+    render() {
+        let title;
+        if (this.state.name || this.state.selected.length) {
+            if (this.state.selected.length === 1) {
+                title = [
+                    <span key="selected">
+                        {I18n.t('ra_Selected')}
+                        &nbsp;
+                    </span>,
+                    <span key="id" style={{ fontWeight: 'bold', fontStyle: 'italic' }}>
+                        {(this.state.name || this.state.selected) + (this.state.name ? ` [${this.state.selected}]` : '')}
+                    </span>,
+                ];
+            } else {
+                title = [
+                    <span key="selected">
+                        {I18n.t('ra_Selected')}
+                        &nbsp;
+                    </span>,
+                    <span key="id" style={{ fontWeight: 'bold', fontStyle: 'italic' }}>
+                        {I18n.t('%s items', this.state.selected.length.toString())}
+                    </span>,
+                ];
+            }
+        } else {
+            title = this.props.title || I18n.t('ra_Please select object ID...');
+        }
+
+        return <Dialog
+            onClose={() => {}}
+            maxWidth={false}
+            sx={{
+                '& .MuiDialog-paper': {
+                    height: '95%',
+                    p: '4px',
+                    width: '100%',
+                    maxWidth: '100%',
+                    maxHeight: 'calc(100% - 16px)',
+                },
+            }}
+            fullWidth
+            open={!0}
+            aria-labelledby="ar_dialog_selectid_title"
+        >
+            <DialogTitle
+                id="ar_dialog_selectid_title"
+                style={{
+                    whiteSpace: 'nowrap',
+                    width: 'calc(100% - 72px)',
+                    overflow: 'hidden',
+                    display: 'inline-block',
+                    textOverflow: 'ellipsis',
+                }}
+            >
+                {title}
+            </DialogTitle>
+            <DialogContent
+                style={{
+                    height: '100%',
+                    overflow: 'hidden',
+                    padding: '8px 4px',
+                }}
+            >
+                <ObjectBrowser
+                    foldersFirst={this.props.foldersFirst}
+                    imagePrefix={this.props.imagePrefix || this.props.prefix} // prefix is for back compatibility
+                    dateFormat={this.props.dateFormat}
+                    defaultFilters={this.filters}
+                    dialogName={this.dialogName}
+                    isFloatComma={this.props.isFloatComma}
+                    showExpertButton={this.props.showExpertButton !== undefined ? this.props.showExpertButton : true}
+                    expertMode={this.props.expertMode}
+                    // style={{ width: '100%', height: '100%' }}
+                    columns={this.props.columns || ['name', 'type', 'role', 'room', 'func', 'val']}
+                    types={this.props.types ? (Array.isArray(this.props.types) ? this.props.types : [this.props.types]) : ['state']}
+                    root={this.props.root}
+                    t={I18n.t}
+                    lang={this.props.lang || I18n.getLanguage()}
+                    socket={this.props.socket}
+                    selected={this.state.selected}
+                    multiSelect={this.props.multiSelect}
+                    notEditable={this.props.notEditable === undefined ? true : this.props.notEditable}
+                    // name={this.state.name}
+                    themeName={this.props.themeName}
+                    themeType={this.props.themeType}
+                    theme={this.props.theme}
+                    customFilter={this.props.customFilter}
+                    onFilterChanged={(filterConfig: ObjectBrowserFilter) => {
+                        this.filters = filterConfig;
+                        ((window as any)._localStorage || window.localStorage).setItem(this.dialogName, JSON.stringify(filterConfig));
+                    }}
+                    onSelect={(_selected: string | string[], name: string, isDouble?: boolean) => {
+                        let selected: string[];
+                        if (!Array.isArray(_selected)) {
+                            selected = [_selected];
+                        } else {
+                            selected = _selected;
+                        }
+                        if (JSON.stringify(selected) !== JSON.stringify(this.state.selected)) {
+                            this.setState({ selected, name }, () => isDouble && this.handleOk());
+                        } else if (isDouble) {
+                            this.handleOk();
+                        }
+                    }}
+                    filterFunc={this.filterFunc}
+                    title=""
+                    classes={{ }}
+                />
+            </DialogContent>
+            <DialogActions>
+                <Button
+                    id={`ar_dialog_selectid_ok_${this.props.dialogName || ''}`}
+                    variant="contained"
+                    onClick={() => this.handleOk()}
+                    startIcon={<IconOk />}
+                    disabled={!this.state.selected.length}
+                    color="primary"
+                >
+                    {this.props.ok || I18n.t('ra_Ok')}
+                </Button>
+                <Button
+                    id={`ar_dialog_selectid_cancel_${this.props.dialogName || ''}`}
+                    color="grey"
+                    variant="contained"
+                    onClick={() => this.handleCancel()}
+                    startIcon={<IconCancel />}
+                >
+                    {this.props.cancel || I18n.t('ra_Cancel')}
+                </Button>
+            </DialogActions>
+        </Dialog>;
+    }
+}
+
+export default DialogSelectID;

package/src/Dialogs/SimpleCron.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import {
+    Button,
+    DialogTitle,
+    DialogContent,
+    DialogActions,
+    Dialog,
+} from '@mui/material';
+
+import {
+    Check as IconOk,
+    Cancel as IconCancel,
+} from '@mui/icons-material';
+
+import SimpleCron from '../Components/SimpleCron';
+
+import I18n from '../i18n';
+
+// Generates cron expression
+
+const styles: Record<string, React.CSSProperties> = {
+    dialogPaper: {
+        height: 'calc(100% - 96px)',
+    },
+};
+
+interface DialogCronProps {
+    onClose: () => void;
+    onOk: (cron: string) => void;
+    title?: string;
+    cron?: string;
+    cancel?: string;
+    ok?: string;
+}
+
+interface DialogCronState {
+    cron: string;
+}
+
+class DialogSimpleCron extends React.Component<DialogCronProps, DialogCronState> {
+    constructor(props: DialogCronProps) {
+        super(props);
+
+        let cron;
+        if (this.props.cron && typeof this.props.cron === 'string' && this.props.cron.replace(/^["']/, '')[0] !== '{') {
+            cron = this.props.cron.replace(/['"]/g, '').trim();
+        } else {
+            cron = this.props.cron || '{}';
+            if (typeof cron === 'string') {
+                cron = cron.replace(/^["']/, '').replace(/["']\n?$/, '');
+            }
+        }
+
+        this.state =  {
+            cron,
+        };
+    }
+
+    handleCancel() {
+        this.props.onClose();
+    }
+
+    handleOk() {
+        this.props.onOk(this.state.cron);
+        this.props.onClose();
+    }
+
+    render() {
+        return <Dialog
+            onClose={() => {}}
+            maxWidth="md"
+            fullWidth
+            sx={{ '& .MuiDialog-paper': styles.dialogPaper }}
+            open={!0}
+            aria-labelledby="cron-dialog-title"
+        >
+            <DialogTitle id="cron-dialog-title">{this.props.title || I18n.t('ra_Define CRON...')}</DialogTitle>
+            <DialogContent style={{ height: '100%', overflow: 'hidden' }}>
+                <SimpleCron
+                    cronExpression={this.state.cron}
+                    onChange={cron => this.setState({ cron })}
+                    language={I18n.getLanguage()}
+                />
+            </DialogContent>
+            <DialogActions>
+                <Button variant="contained" onClick={() => this.handleOk()} color="primary" startIcon={<IconOk />}>{this.props.ok || I18n.t('ra_Ok')}</Button>
+                <Button
+                    variant="contained"
+                    onClick={() => this.handleCancel()}
+                    color="grey"
+                    startIcon={<IconCancel />}
+                >
+                    {this.props.cancel || I18n.t('ra_Cancel')}
+                </Button>
+            </DialogActions>
+        </Dialog>;
+    }
+}
+
+export default DialogSimpleCron;

package/src/Dialogs/TextInput.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+
+import {
+    Button,
+    TextField,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogContentText,
+    DialogTitle,
+} from '@mui/material';
+
+import { Close as IconClose, Check as IconCheck } from '@mui/icons-material';
+
+import I18n from '../i18n';
+
+import withWidth from '../Components/withWidth';
+
+interface TextInputProps {
+    /** The dialog close callback */
+    onClose: (text: string | null) => void;
+    /** The title text */
+    titleText: string;
+    /** Prompt text (default: empty) */
+    promptText?: string;
+    /** Label text (default: empty) */
+    labelText?: string;
+    /** The text of the cancel button */
+    cancelText: string;
+    /** The text of the "apply" button */
+    applyText: string;
+    /** The verification callback. Return a non-empty string if there was an error */
+    verify?: (text: string) => string;
+    /** The text replacement callback */
+    rule?: (text: string) => string;
+    /** The type of the textbox (default: text) */
+    type?: 'text' | 'number' | 'password' | 'email';
+    /** The intial input value when opening the dialog */
+    value?: string;
+    /** @deprecated Use value. The input when opening the dialog */
+    input?: string;
+    /** If true, the dialog will be full width */
+    fullWidth?: boolean;
+}
+function TextInput(props: TextInputProps) {
+    const [text, setText] = React.useState<string>(props.input || props.value || '');
+    const [error, setError] = React.useState<string | boolean>('');
+    return <Dialog
+        open={!0}
+        onClose={() => props.onClose(null)}
+        aria-labelledby="form-dialog-title"
+        fullWidth={props.fullWidth !== undefined ? props.fullWidth : false}
+    >
+        <DialogTitle id="form-dialog-title">{props.titleText}</DialogTitle>
+        <DialogContent>
+            <DialogContentText>
+                {props.promptText}
+            </DialogContentText>
+            <TextField
+                variant="standard"
+                autoFocus
+                margin="dense"
+                error={!!error}
+                helperText={error === true || !error ? '' : error}
+                value={text}
+                label={props.labelText || ''}
+                type={props.type || 'text'}
+                onKeyUp={e => e.charCode === 13 && text && props.onClose(text)}
+                onChange={e => {
+                    let _error: string | boolean = '';
+                    if (props.verify) {
+                        _error = !props.verify(e.target.value);
+                    }
+
+                    if (props.rule) {
+                        setText(props.rule(e.target.value));
+                    } else {
+                        setText(e.target.value);
+                    }
+                    setError(_error);
+                }}
+                fullWidth
+            />
+        </DialogContent>
+        <DialogActions>
+            <Button
+                variant="contained"
+                disabled={!text || !!error}
+                onClick={() => props.onClose(text)}
+                color="primary"
+                startIcon={<IconCheck />}
+            >
+                {props.applyText || I18n.t('ra_Ok')}
+            </Button>
+            <Button
+                color="grey"
+                variant="contained"
+                onClick={() => props.onClose(null)}
+                startIcon={<IconClose />}
+            >
+                {props.cancelText || I18n.t('ra_Cancel')}
+            </Button>
+        </DialogActions>
+    </Dialog>;
+}
+
+export default withWidth()(TextInput);