@iobroker/adapter-react-v5/build/Components/InfoBox.js

React components to develop ioBroker interfaces with react.

import React from 'react';
import { Box, Typography } from '@mui/material';
import { Info, Warning, Close, Visibility, Check } from '@mui/icons-material';
/**
 * This component can be used to show important information or warnings to the user
 */
export class InfoBox extends React.Component {
    refTypo;
    height;
    width;
    constructor(props) {
        super(props);
        this.state = {
            closed: this.props.storeId ? window.localStorage.getItem(this.props.storeId) === 'true' : false,
        };
        this.height = 0;
        this.width = 0;
        this.refTypo = React.createRef();
    }
    componentDidMount() {
        this.detectHeight();
    }
    onClick() {
        if (this.props.storeId && this.props.closed === undefined) {
            if (this.state.closed) {
                window.localStorage.removeItem(this.props.storeId);
            }
            else {
                window.localStorage.setItem(this.props.storeId, 'true');
            }
        }
        if (this.props.closed === undefined) {
            this.setState({ closed: !this.state.closed }, () => {
                // Inform about state change
                if (this.props.onClose) {
                    this.props.onClose(this.state.closed);
                }
            });
        }
        else if (this.props.onClose) {
            this.props.onClose(!this.props.closed);
        }
    }
    detectHeight() {
        const closed = this.props.closed !== undefined ? this.props.closed : this.state.closed;
        // We must get the height of the element when it is open to make transition
        if (this.props.closeable && !closed && this.refTypo.current) {
            window.requestAnimationFrame(() => {
                const closed = this.props.closed !== undefined ? this.props.closed : this.state.closed;
                if (closed) {
                    return;
                }
                if (this.refTypo.current && (!this.height || this.width !== this.refTypo.current.clientWidth)) {
                    this.height = this.refTypo.current.clientHeight;
                    this.width = this.refTypo.current.clientWidth;
                    this.forceUpdate();
                }
            });
        }
    }
    componentDidUpdate() {
        this.detectHeight();
    }
    render() {
        const closed = this.props.closed !== undefined ? this.props.closed : this.state.closed;
        const Icon = closed ? Visibility : Close;
        return (React.createElement(Box, { className: "iom-info-box", style: {
                whiteSpace: 'preserve',
                display: 'flex',
                gap: 8,
                alignItems: closed || this.props.iconPosition === 'top' ? 'flex-start' : 'center',
                borderWidth: 1,
                borderStyle: 'solid',
                padding: 4,
                borderRadius: 5,
                marginBottom: 8,
                maxWidth: '100%',
                transition: 'height 0.5s',
                height: this.props.closeable ? (closed ? 30 : this.height || undefined) : undefined,
                overflow: this.props.closeable ? 'hidden' : undefined,
                position: 'relative',
                ...this.props.style,
            }, sx: {
                borderColor: theme => this.props.type === 'ok' ? theme.palette.info.main : theme.palette[this.props.type].main,
            } },
            this.props.type === 'ok' ? (React.createElement(Check, { style: { color: '#0F0' } })) : this.props.type === 'info' ? (React.createElement(Info, { color: "primary" })) : (React.createElement(Warning, { color: this.props.type })),
            React.createElement(Typography, { ref: this.refTypo }, this.props.children),
            this.props.closeable ? (React.createElement(Icon, { sx: {
                    color: theme => (theme.palette.mode === 'dark' ? 'lightgray' : 'gray'),
                    // alignSelf: 'flex-start',
                    cursor: 'pointer',
                    position: 'absolute',
                    top: 4,
                    right: 4,
                }, onClick: () => this.onClick() })) : null,
            this.props.closeable ? React.createElement("div", { style: { width: 22 } }) : null,
            closed ? (React.createElement(Box
            // This is a shadow box at the bottom of the InfoBox when it closed
            , { 
                // This is a shadow box at the bottom of the InfoBox when it closed
                component: "div", sx: theme => {
                    const color = theme.palette[this.props.type === 'ok' ? 'info' : this.props.type].main;
                    return {
                        background: `linear-gradient(${color}00 0%, ${color}10 60%, ${color}90 100%)`,
                    };
                }, style: {
                    bottom: 0,
                    position: 'absolute',
                    left: 0,
                    right: 0,
                    height: 10,
                } })) : null));
    }
}
//# sourceMappingURL=InfoBox.js.map