@iobroker/adapter-react-v5
Version:
React components to develop ioBroker interfaces with react.
62 lines • 3.44 kB
JavaScript
import React, { useEffect, useState } from 'react';
import { Dialog, DialogActions, DialogContent, DialogTitle, IconButton, TextField, Button, useMediaQuery, useTheme, } from '@mui/material';
import { Check as CheckIcon, Close as CloseIcon, Language as LanguageIcon } from '@mui/icons-material';
import { I18n } from '../i18n';
import { Utils } from './Utils';
const styles = {
modalDialog: {
minWidth: 400,
maxWidth: 800,
},
overflowHidden: {
display: 'flex',
overflow: 'hidden',
},
titleIcon: {
marginRight: 5,
},
content: {
fontSize: 16,
},
languageButton: {
position: 'absolute',
right: 8,
top: 8,
},
languageButtonActive: (theme) => ({
color: theme.palette.primary.main,
}),
};
export function CustomModal(props) {
const { open, toggleTranslation, noTranslation, title, fullWidth, help, maxWidth, progress, icon, applyDisabled, applyButton, onClose, children, titleButtonApply, titleButtonClose, onApply, textInput, defaultValue, overflowHidden, } = props;
const [value, setValue] = useState(defaultValue || '');
useEffect(() => {
setValue(defaultValue || '');
}, [defaultValue]);
const muiTheme = useTheme();
const isSmallScreen = useMediaQuery(muiTheme.breakpoints.down('md'));
let Icon = null;
if (icon) {
Icon = icon;
}
return (React.createElement(Dialog, { open: open, maxWidth: isSmallScreen ? false : maxWidth || 'md', fullWidth: !!fullWidth, fullScreen: isSmallScreen, disableEscapeKeyDown: false, onClose: onClose, sx: { '& .MuiDialog-paper': isSmallScreen ? {} : styles.modalDialog } },
title && (React.createElement(DialogTitle, null,
icon ? React.createElement(Icon, { style: styles.titleIcon }) : null,
title,
I18n.getLanguage() !== 'en' && toggleTranslation ? (React.createElement(IconButton, { size: "large", sx: Utils.getStyle(props.theme, styles.languageButton, noTranslation && styles.languageButtonActive), onClick: () => toggleTranslation(), title: I18n.t('Disable/Enable translation') },
React.createElement(LanguageIcon, null))) : null)),
React.createElement(DialogContent, { style: { ...styles.content, ...(overflowHidden ? styles.overflowHidden : undefined), paddingTop: 8 } },
textInput && (React.createElement(TextField
// className={className}
, {
// className={className}
autoComplete: "off", fullWidth: true, autoFocus: true, variant: "outlined", size: "medium",
// rows={10}
multiline: true, value: value, onChange: e => setValue(e.target.value) })),
children,
help ? React.createElement("div", null, help) : null),
React.createElement(DialogActions, null,
applyButton !== false && (React.createElement(Button, { startIcon: React.createElement(CheckIcon, null), disabled: progress || (applyDisabled && defaultValue === value), onClick: () => onApply(textInput ? value : ''), variant: "contained", color: "primary" }, I18n.t(titleButtonApply || 'ra_Ok'))),
React.createElement(Button, { color: "grey", onClick: onClose, disabled: progress, variant: "contained", startIcon: React.createElement(CloseIcon, null) }, I18n.t(titleButtonClose || 'ra_Cancel')))));
}
//# sourceMappingURL=CustomModal.js.map