@iobroker/adapter-react-v5 8.2.11 → 8.2.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -690,6 +690,9 @@ You can find the migration instructions:
|
|
|
690
690
|
-->
|
|
691
691
|
|
|
692
692
|
## Changelog
|
|
693
|
+
### 8.2.12 (2026-06-20)
|
|
694
|
+
- (@GermanBluefox) Correcetd InfoBox color
|
|
695
|
+
|
|
693
696
|
### 8.2.11 (2026-06-19)
|
|
694
697
|
- (@GermanBluefox) Correcting background of state if overloaded
|
|
695
698
|
- (@GermanBluefox) Moved translations for json-config to other package
|
|
@@ -84,7 +84,7 @@ export class InfoBox extends React.Component {
|
|
|
84
84
|
borderColor: theme => this.props.type === 'ok' ? theme.palette.info.main : theme.palette[this.props.type].main,
|
|
85
85
|
} },
|
|
86
86
|
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 })),
|
|
87
|
-
React.createElement(Typography, { ref: this.refTypo }, this.props.children),
|
|
87
|
+
React.createElement(Typography, { ref: this.refTypo, sx: { color: 'text.primary' } }, this.props.children),
|
|
88
88
|
this.props.closeable ? (React.createElement(Icon, { sx: {
|
|
89
89
|
color: theme => (theme.palette.mode === 'dark' ? 'lightgray' : 'gray'),
|
|
90
90
|
// alignSelf: 'flex-start',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InfoBox.js","sourceRoot":"./src/","sources":["Components/InfoBox.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Box, Typography } from '@mui/material';\nimport { Info, Warning, Close, Visibility, type SvgIconComponent, Check } from '@mui/icons-material';\n\ninterface InfoBoxProps {\n /** Text to display in the info box */\n children: string | (string | React.JSX.Element | null)[] | React.JSX.Element;\n /** The type determines the color and symbol */\n type: 'warning' | 'info' | 'error' | 'ok';\n /** If the Box is closeable */\n closeable?: boolean;\n /** Use together with `closeable: true`. You can specify in which variable in local storage the state of this info box could be stored */\n storeId?: string;\n /** Use together with `closeable: true`, listener called if close button clicked */\n onClose?: (desiredState: boolean) => void;\n /** Custom style */\n style?: React.CSSProperties;\n /** Icon position */\n iconPosition?: 'top' | 'middle';\n /** Use together with `closeable: true`. If the box is closed or not. In this case, it will be controlled from outside */\n closed?: boolean;\n}\n\ninterface InfoBoxState {\n closed: boolean;\n}\n/**\n * This component can be used to show important information or warnings to the user\n */\nexport class InfoBox extends React.Component<InfoBoxProps, InfoBoxState> {\n private readonly refTypo: React.RefObject<HTMLDivElement>;\n private height: number;\n private width: number;\n\n constructor(props: InfoBoxProps) {\n super(props);\n this.state = {\n closed: this.props.storeId ? window.localStorage.getItem(this.props.storeId) === 'true' : false,\n };\n this.height = 0;\n this.width = 0;\n\n this.refTypo = React.createRef();\n }\n\n componentDidMount(): void {\n this.detectHeight();\n }\n\n onClick(): void {\n if (this.props.storeId && this.props.closed === undefined) {\n if (this.state.closed) {\n window.localStorage.removeItem(this.props.storeId);\n } else {\n window.localStorage.setItem(this.props.storeId, 'true');\n }\n }\n if (this.props.closed === undefined) {\n this.setState({ closed: !this.state.closed }, () => {\n // Inform about state change\n if (this.props.onClose) {\n this.props.onClose(this.state.closed);\n }\n });\n } else if (this.props.onClose) {\n this.props.onClose(!this.props.closed);\n }\n }\n\n detectHeight(): void {\n const closed = this.props.closed !== undefined ? this.props.closed : this.state.closed;\n // We must get the height of the element when it is open to make transition\n if (this.props.closeable && !closed && this.refTypo.current) {\n window.requestAnimationFrame(() => {\n const closed = this.props.closed !== undefined ? this.props.closed : this.state.closed;\n if (closed) {\n return;\n }\n if (this.refTypo.current && (!this.height || this.width !== this.refTypo.current.clientWidth)) {\n this.height = this.refTypo.current.clientHeight;\n this.width = this.refTypo.current.clientWidth;\n this.forceUpdate();\n }\n });\n }\n }\n\n componentDidUpdate(): void {\n this.detectHeight();\n }\n\n render(): React.ReactNode {\n const closed = this.props.closed !== undefined ? this.props.closed : this.state.closed;\n\n const Icon: SvgIconComponent = closed ? Visibility : Close;\n\n return (\n <Box\n className=\"iom-info-box\"\n style={{\n whiteSpace: 'preserve',\n display: 'flex',\n gap: 8,\n alignItems: closed || this.props.iconPosition === 'top' ? 'flex-start' : 'center',\n borderWidth: 1,\n borderStyle: 'solid',\n padding: 4,\n borderRadius: 5,\n marginBottom: 8,\n maxWidth: '100%',\n transition: 'height 0.5s',\n height: this.props.closeable ? (closed ? 30 : this.height || undefined) : undefined,\n overflow: this.props.closeable ? 'hidden' : undefined,\n position: 'relative',\n ...this.props.style,\n }}\n sx={{\n borderColor: theme =>\n this.props.type === 'ok' ? theme.palette.info.main : theme.palette[this.props.type].main,\n }}\n >\n {this.props.type === 'ok' ? (\n <Check style={{ color: '#0F0' }} />\n ) : this.props.type === 'info' ? (\n <Info color=\"primary\" />\n ) : (\n <Warning color={this.props.type} />\n )}\n <Typography ref={this.refTypo}>{this.props.children}</Typography>\n {this.props.closeable ? (\n <Icon\n sx={{\n color: theme => (theme.palette.mode === 'dark' ? 'lightgray' : 'gray'),\n // alignSelf: 'flex-start',\n cursor: 'pointer',\n position: 'absolute',\n top: 4,\n right: 4,\n }}\n onClick={() => this.onClick()}\n />\n ) : null}\n {/* Reserve place for button so it will not overlap the text */}\n {this.props.closeable ? <div style={{ width: 22 }} /> : null}\n {closed ? (\n <Box\n // This is a shadow box at the bottom of the InfoBox when it closed\n component=\"div\"\n sx={theme => {\n const color = theme.palette[this.props.type === 'ok' ? 'info' : this.props.type].main;\n return {\n background: `linear-gradient(${color}00 0%, ${color}10 60%, ${color}90 100%)`,\n };\n }}\n style={{\n bottom: 0,\n position: 'absolute',\n left: 0,\n right: 0,\n height: 10,\n }}\n />\n ) : null}\n </Box>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"InfoBox.js","sourceRoot":"./src/","sources":["Components/InfoBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAyB,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAwBrG;;GAEG;AACH,MAAM,OAAO,OAAQ,SAAQ,KAAK,CAAC,SAAqC;IACnD,OAAO,CAAkC;IAClD,MAAM,CAAS;IACf,KAAK,CAAS;IAEtB,YAAY,KAAmB;QAC3B,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG;YACT,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,MAAM,CAAC,CAAC,CAAC,KAAK;SAClG,CAAC;QACF,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;QAChB,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;QAEf,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;IACrC,CAAC;IAED,iBAAiB;QACb,IAAI,CAAC,YAAY,EAAE,CAAC;IACxB,CAAC;IAED,OAAO;QACH,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,SAAS,EAAE,CAAC;YACxD,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;gBACpB,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;YACvD,CAAC;iBAAM,CAAC;gBACJ,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;YAC5D,CAAC;QACL,CAAC;QACD,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,SAAS,EAAE,CAAC;YAClC,IAAI,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE;gBAC/C,4BAA4B;gBAC5B,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;oBACrB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;gBAC1C,CAAC;YACL,CAAC,CAAC,CAAC;QACP,CAAC;aAAM,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;YAC5B,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAC3C,CAAC;IACL,CAAC;IAED,YAAY;QACR,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;QACvF,2EAA2E;QAC3E,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;YAC1D,MAAM,CAAC,qBAAqB,CAAC,GAAG,EAAE;gBAC9B,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;gBACvF,IAAI,MAAM,EAAE,CAAC;oBACT,OAAO;gBACX,CAAC;gBACD,IAAI,IAAI,CAAC,OAAO,CAAC,OAAO,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE,CAAC;oBAC5F,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC;oBAChD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,CAAC;oBAC9C,IAAI,CAAC,WAAW,EAAE,CAAC;gBACvB,CAAC;YACL,CAAC,CAAC,CAAC;QACP,CAAC;IACL,CAAC;IAED,kBAAkB;QACd,IAAI,CAAC,YAAY,EAAE,CAAC;IACxB,CAAC;IAED,MAAM;QACF,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;QAEvF,MAAM,IAAI,GAAqB,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC;QAE3D,OAAO,CACH,oBAAC,GAAG,IACA,SAAS,EAAC,cAAc,EACxB,KAAK,EAAE;gBACH,UAAU,EAAE,UAAU;gBACtB,OAAO,EAAE,MAAM;gBACf,GAAG,EAAE,CAAC;gBACN,UAAU,EAAE,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,KAAK,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,QAAQ;gBACjF,WAAW,EAAE,CAAC;gBACd,WAAW,EAAE,OAAO;gBACpB,OAAO,EAAE,CAAC;gBACV,YAAY,EAAE,CAAC;gBACf,YAAY,EAAE,CAAC;gBACf,QAAQ,EAAE,MAAM;gBAChB,UAAU,EAAE,aAAa;gBACzB,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,IAAI,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS;gBACnF,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;gBACrD,QAAQ,EAAE,UAAU;gBACpB,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK;aACtB,EACD,EAAE,EAAE;gBACA,WAAW,EAAE,KAAK,CAAC,EAAE,CACjB,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI;aAC/F;YAEA,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,CACxB,oBAAC,KAAK,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GAAI,CACtC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,CAC7B,oBAAC,IAAI,IAAC,KAAK,EAAC,SAAS,GAAG,CAC3B,CAAC,CAAC,CAAC,CACA,oBAAC,OAAO,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,GAAI,CACtC;YACD,oBAAC,UAAU,IACP,GAAG,EAAE,IAAI,CAAC,OAAO,EACjB,EAAE,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,IAE5B,IAAI,CAAC,KAAK,CAAC,QAAQ,CACX;YACZ,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CACpB,oBAAC,IAAI,IACD,EAAE,EAAE;oBACA,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC;oBACtE,2BAA2B;oBAC3B,MAAM,EAAE,SAAS;oBACjB,QAAQ,EAAE,UAAU;oBACpB,GAAG,EAAE,CAAC;oBACN,KAAK,EAAE,CAAC;iBACX,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,GAC/B,CACL,CAAC,CAAC,CAAC,IAAI;YAEP,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,6BAAK,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,IAAI;YAC3D,MAAM,CAAC,CAAC,CAAC,CACN,oBAAC,GAAG;YACA,mEAAmE;;gBAAnE,mEAAmE;gBACnE,SAAS,EAAC,KAAK,EACf,EAAE,EAAE,KAAK,CAAC,EAAE;oBACR,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC;oBACtF,OAAO;wBACH,UAAU,EAAE,mBAAmB,KAAK,UAAU,KAAK,WAAW,KAAK,UAAU;qBAChF,CAAC;gBACN,CAAC,EACD,KAAK,EAAE;oBACH,MAAM,EAAE,CAAC;oBACT,QAAQ,EAAE,UAAU;oBACpB,IAAI,EAAE,CAAC;oBACP,KAAK,EAAE,CAAC;oBACR,MAAM,EAAE,EAAE;iBACb,GACH,CACL,CAAC,CAAC,CAAC,IAAI,CACN,CACT,CAAC;IACN,CAAC;CACJ","sourcesContent":["import React from 'react';\nimport { Box, Typography } from '@mui/material';\nimport { Info, Warning, Close, Visibility, type SvgIconComponent, Check } from '@mui/icons-material';\n\ninterface InfoBoxProps {\n /** Text to display in the info box */\n children: string | (string | React.JSX.Element | null)[] | React.JSX.Element;\n /** The type determines the color and symbol */\n type: 'warning' | 'info' | 'error' | 'ok';\n /** If the Box is closeable */\n closeable?: boolean;\n /** Use together with `closeable: true`. You can specify in which variable in local storage the state of this info box could be stored */\n storeId?: string;\n /** Use together with `closeable: true`, listener called if close button clicked */\n onClose?: (desiredState: boolean) => void;\n /** Custom style */\n style?: React.CSSProperties;\n /** Icon position */\n iconPosition?: 'top' | 'middle';\n /** Use together with `closeable: true`. If the box is closed or not. In this case, it will be controlled from outside */\n closed?: boolean;\n}\n\ninterface InfoBoxState {\n closed: boolean;\n}\n/**\n * This component can be used to show important information or warnings to the user\n */\nexport class InfoBox extends React.Component<InfoBoxProps, InfoBoxState> {\n private readonly refTypo: React.RefObject<HTMLDivElement>;\n private height: number;\n private width: number;\n\n constructor(props: InfoBoxProps) {\n super(props);\n this.state = {\n closed: this.props.storeId ? window.localStorage.getItem(this.props.storeId) === 'true' : false,\n };\n this.height = 0;\n this.width = 0;\n\n this.refTypo = React.createRef();\n }\n\n componentDidMount(): void {\n this.detectHeight();\n }\n\n onClick(): void {\n if (this.props.storeId && this.props.closed === undefined) {\n if (this.state.closed) {\n window.localStorage.removeItem(this.props.storeId);\n } else {\n window.localStorage.setItem(this.props.storeId, 'true');\n }\n }\n if (this.props.closed === undefined) {\n this.setState({ closed: !this.state.closed }, () => {\n // Inform about state change\n if (this.props.onClose) {\n this.props.onClose(this.state.closed);\n }\n });\n } else if (this.props.onClose) {\n this.props.onClose(!this.props.closed);\n }\n }\n\n detectHeight(): void {\n const closed = this.props.closed !== undefined ? this.props.closed : this.state.closed;\n // We must get the height of the element when it is open to make transition\n if (this.props.closeable && !closed && this.refTypo.current) {\n window.requestAnimationFrame(() => {\n const closed = this.props.closed !== undefined ? this.props.closed : this.state.closed;\n if (closed) {\n return;\n }\n if (this.refTypo.current && (!this.height || this.width !== this.refTypo.current.clientWidth)) {\n this.height = this.refTypo.current.clientHeight;\n this.width = this.refTypo.current.clientWidth;\n this.forceUpdate();\n }\n });\n }\n }\n\n componentDidUpdate(): void {\n this.detectHeight();\n }\n\n render(): React.ReactNode {\n const closed = this.props.closed !== undefined ? this.props.closed : this.state.closed;\n\n const Icon: SvgIconComponent = closed ? Visibility : Close;\n\n return (\n <Box\n className=\"iom-info-box\"\n style={{\n whiteSpace: 'preserve',\n display: 'flex',\n gap: 8,\n alignItems: closed || this.props.iconPosition === 'top' ? 'flex-start' : 'center',\n borderWidth: 1,\n borderStyle: 'solid',\n padding: 4,\n borderRadius: 5,\n marginBottom: 8,\n maxWidth: '100%',\n transition: 'height 0.5s',\n height: this.props.closeable ? (closed ? 30 : this.height || undefined) : undefined,\n overflow: this.props.closeable ? 'hidden' : undefined,\n position: 'relative',\n ...this.props.style,\n }}\n sx={{\n borderColor: theme =>\n this.props.type === 'ok' ? theme.palette.info.main : theme.palette[this.props.type].main,\n }}\n >\n {this.props.type === 'ok' ? (\n <Check style={{ color: '#0F0' }} />\n ) : this.props.type === 'info' ? (\n <Info color=\"primary\" />\n ) : (\n <Warning color={this.props.type} />\n )}\n <Typography\n ref={this.refTypo}\n sx={{ color: 'text.primary' }}\n >\n {this.props.children}\n </Typography>\n {this.props.closeable ? (\n <Icon\n sx={{\n color: theme => (theme.palette.mode === 'dark' ? 'lightgray' : 'gray'),\n // alignSelf: 'flex-start',\n cursor: 'pointer',\n position: 'absolute',\n top: 4,\n right: 4,\n }}\n onClick={() => this.onClick()}\n />\n ) : null}\n {/* Reserve place for button so it will not overlap the text */}\n {this.props.closeable ? <div style={{ width: 22 }} /> : null}\n {closed ? (\n <Box\n // This is a shadow box at the bottom of the InfoBox when it closed\n component=\"div\"\n sx={theme => {\n const color = theme.palette[this.props.type === 'ok' ? 'info' : this.props.type].main;\n return {\n background: `linear-gradient(${color}00 0%, ${color}10 60%, ${color}90 100%)`,\n };\n }}\n style={{\n bottom: 0,\n position: 'absolute',\n left: 0,\n right: 0,\n height: 10,\n }}\n />\n ) : null}\n </Box>\n );\n }\n}\n"]}
|