@iobroker/adapter-react-v5
Version:
React components to develop ioBroker interfaces with react.
115 lines • 5.54 kB
JavaScript
/*
* Copyright 2022-2025 Denis Haev (bluefox) <dogafox@gmail.com>
*
* MIT License
*
*/
import React from 'react';
import { Button, DialogTitle, DialogContent, DialogActions, Dialog } from '@mui/material';
import { Cancel as IconCancel, Check as IconOk } from '@mui/icons-material';
import { I18n } from '../i18n';
import { FileBrowser } from '../Components/FileBrowser';
const styles = {
headerID: {
fontWeight: 'bold',
fontStyle: 'italic',
},
dialog: {
height: '95%',
},
dialogMobile: {
// it is sx
padding: '4px',
width: '100%',
maxWidth: '100%',
maxHeight: 'calc(100% - 16px)',
height: '100%',
},
content: {
height: '100%',
overflow: 'hidden',
},
contentMobile: {
padding: '8px 4px',
},
titleRoot: {
whiteSpace: 'nowrap',
width: 'calc(100% - 72px)',
overflow: 'hidden',
display: 'inline-block',
textOverflow: 'ellipsis',
},
};
export class DialogSelectFile extends React.Component {
dialogName;
filters;
constructor(props) {
super(props);
this.dialogName = this.props.dialogName || 'default';
this.dialogName = `SelectFile.${this.dialogName}`;
const filters = (window._localStorage || window.localStorage).getItem(this.dialogName) || '{}';
try {
this.filters = JSON.parse(filters);
}
catch {
this.filters = {};
}
if (props.filters) {
this.filters = { ...this.filters, ...props.filters };
}
let selected = this.props.selected || [];
if (typeof selected !== 'object') {
selected = [selected];
}
else {
selected = [...selected];
}
selected = selected.filter(id => id);
this.state = {
selected,
};
}
handleCancel() {
this.props.onClose();
}
handleOk() {
this.props.onOk(this.props.multiSelect || !Array.isArray(this.state.selected)
? this.state.selected
: this.state.selected[0] || '');
this.props.onClose();
}
render() {
let title;
if (this.state.selected.length) {
if (!Array.isArray(this.state.selected) || this.state.selected.length === 1) {
title = [
React.createElement("span", { key: "selected" },
I18n.t('ra_Selected'),
"\u00A0"),
React.createElement("span", { key: "id", style: styles.headerID }, this.state.selected),
];
}
else {
title = [
React.createElement("span", { key: "selected" },
I18n.t('ra_Selected'),
"\u00A0"),
React.createElement("span", { key: "id", style: styles.headerID }, I18n.t('%s items', this.state.selected.length)),
];
}
}
else {
title = this.props.title || I18n.t('ra_Please select file...');
}
return (React.createElement(Dialog, { onClose: () => { }, maxWidth: false, style: { zIndex: this.props.zIndex || undefined }, sx: { '& .MuiDialog-paper': { ...styles.dialog, ...styles.dialogMobile } }, fullWidth: true, open: !0, "aria-labelledby": "ar_dialog_selectfile_title" },
React.createElement(DialogTitle, { id: "ar_dialog_selectfile_title", sx: { '&.MuiDialogTitle-root': styles.titleRoot } }, title),
React.createElement(DialogContent, { style: { ...styles.content, ...styles.contentMobile } },
React.createElement(FileBrowser, { ready: true, imagePrefix: this.props.imagePrefix || this.props.prefix || '../', allowUpload: !!this.props.allowUpload, allowDownload: this.props.allowDownload !== false, allowCreateFolder: !!this.props.allowCreateFolder, allowDelete: !!this.props.allowDelete, allowView: this.props.allowView !== false, showViewTypeButton: this.props.showViewTypeButton !== false, showToolbar: this.props.showToolbar !== false, limitPath: this.props.limitPath, filterFiles: this.props.filterFiles, filterByType: this.props.filterByType, selected: this.props.selected, restrictToFolder: this.props.restrictToFolder, allowNonRestricted: this.props.allowNonRestricted, onSelect: (selected, isDoubleClick, isFolder) => {
this.setState({ selected: Array.isArray(selected) ? selected : [selected] }, () => isDoubleClick && (!this.props.selectOnlyFolders || isFolder) && this.handleOk());
}, t: this.props.t || I18n.t, lang: this.props.lang || I18n.getLanguage(), socket: this.props.socket, themeType: this.props.themeType, themeName: this.props.themeName, theme: this.props.theme, showExpertButton: this.props.showExpertButton, expertMode: this.props.expertMode, showTypeSelector: this.props.showTypeSelector })),
React.createElement(DialogActions, null,
React.createElement(Button, { variant: "contained", onClick: () => this.handleOk(), startIcon: React.createElement(IconOk, null), disabled: !this.state.selected.length, color: "primary" }, this.props.ok || I18n.t('ra_Ok')),
React.createElement(Button, { color: "grey", variant: "contained", onClick: () => this.handleCancel(), startIcon: React.createElement(IconCancel, null) }, this.props.cancel || I18n.t('ra_Cancel')))));
}
}
//# sourceMappingURL=SelectFile.js.map