@iobroker/adapter-react-v5
Version:
React components to develop ioBroker interfaces with react.
72 lines • 3.6 kB
JavaScript
import React, { useCallback } from 'react';
import { useDropzone } from 'react-dropzone';
import { InputLabel, FormControl, IconButton } from '@mui/material';
import { Clear as ClearIcon } from '@mui/icons-material';
import { IconSelector } from './IconSelector';
import { Icon } from './Icon';
import { I18n } from '../i18n';
import { Utils } from './Utils';
const styles = {
formContainer: {
display: 'flex',
justifyContent: 'left',
alignItems: 'center',
},
formControl: {
display: 'flex',
padding: 24,
flexGrow: 1000,
},
divContainer: {
width: 32 + 32,
height: 32,
whiteSpace: 'nowrap',
lineHeight: '32px',
marginRight: 8,
},
dragField: {
textAlign: 'center',
display: 'table',
minHeight: 90,
width: 'calc(100% - 60px)',
border: '2px dashed #777',
borderRadius: 10,
padding: 4,
},
formIcon: {
margin: 10,
opacity: 0.6,
},
text: {
display: 'table-cell',
verticalAlign: 'middle',
},
};
export function IconPicker(props) {
const IconCustom = props.icon;
const onChange = props.onChange;
const onDrop = useCallback((acceptedFiles) => {
const reader = new FileReader();
reader.addEventListener('load', () => onChange(reader.result), false);
if (acceptedFiles[0]) {
reader.readAsDataURL(acceptedFiles[0]);
}
}, [onChange]);
const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
return (React.createElement("div", { style: styles.formContainer },
IconCustom ? React.createElement(IconCustom, { style: styles.formIcon }) : null,
React.createElement(FormControl, { variant: "standard", style: { ...styles.formControl, padding: 3 } },
React.createElement(InputLabel, { shrink: true, sx: props.customStyles?.label ? { '&.MuiInputLabel-root': props.customStyles.label } : undefined, classes: { root: props.customClasses?.label } }, props.label),
React.createElement("div", { style: styles.formContainer },
props.value ? (React.createElement("div", { style: styles.divContainer },
React.createElement(Icon, { style: { ...props.previewStyle, ...(props.customStyles?.icon || undefined) }, src: props.value, className: Utils.clsx(props.previewClassName, props.customClasses?.icon) }),
!props.disabled && (React.createElement(IconButton, { style: { verticalAlign: 'top' }, title: I18n.t('ra_Clear icon'), size: "small", onClick: () => props.onChange('') },
React.createElement(ClearIcon, null))))) : (!props.disabled && (React.createElement(IconSelector, { icons: props.icons, onlyRooms: props.onlyRooms, onlyDevices: props.onlyDevices, onSelect: (base64) => props.onChange(base64), t: I18n.t, lang: I18n.getLanguage() }))),
!props.disabled && (React.createElement("div", { ...getRootProps(), style: {
...styles.dragField,
...(isDragActive ? { backgroundColor: 'rgba(0, 255, 0, 0.1)' } : { cursor: 'pointer' }),
} },
React.createElement("input", { ...getInputProps() }),
isDragActive ? (React.createElement("span", { style: styles.text }, I18n.t('ra_Drop the files here...'))) : (React.createElement("span", { style: styles.text }, I18n.t("ra_Drag 'n' drop some files here, or click to select files")))))))));
}
//# sourceMappingURL=IconPicker.js.map