@iobroker/gui-components 10.0.14 → 10.0.15
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
|
@@ -36,7 +36,7 @@ npm create vite@latest src -- --template react-ts
|
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@emotion/react": "^11.14.0",
|
|
38
38
|
"@emotion/styled": "^11.14.1",
|
|
39
|
-
"@iobroker/gui-components": "^10.0.
|
|
39
|
+
"@iobroker/gui-components": "^10.0.15",
|
|
40
40
|
"@mui/icons-material": "^9.0.1",
|
|
41
41
|
"@mui/material": "^9.0.1",
|
|
42
42
|
"react": "^19.2.5",
|
|
@@ -856,6 +856,10 @@ You can find the migration instructions:
|
|
|
856
856
|
-->
|
|
857
857
|
|
|
858
858
|
## Changelog
|
|
859
|
+
### 10.0.15 (2026-08-07)
|
|
860
|
+
|
|
861
|
+
- (@GermanBluefox) Tuned TextWithIcon component
|
|
862
|
+
|
|
859
863
|
### 10.0.14 (2026-08-07)
|
|
860
864
|
|
|
861
865
|
- (@GermanBluefox) Allowed to tap empty value to edit the value in the `TreeTable` component (mobile view)
|
|
@@ -16,6 +16,11 @@ interface TextWithIconProps {
|
|
|
16
16
|
};
|
|
17
17
|
icon?: string;
|
|
18
18
|
color?: string;
|
|
19
|
+
/**
|
|
20
|
+
* Keep the place of the icon free if the entry has no icon.
|
|
21
|
+
* Use it in lists and tables, where entries with and without icon must stay aligned under each other.
|
|
22
|
+
*/
|
|
23
|
+
reserveIconSpace?: boolean;
|
|
19
24
|
}
|
|
20
25
|
export declare function TextWithIcon(props: TextWithIconProps): React.JSX.Element;
|
|
21
26
|
export {};
|
|
@@ -107,7 +107,7 @@ export function TextWithIcon(props) {
|
|
|
107
107
|
}
|
|
108
108
|
: {};
|
|
109
109
|
return (React.createElement("div", { style: { ...(props.style || undefined), ...styles.div, ...(style || undefined) }, className: Utils.clsx(props.className, props.moreClasses?.root), title: props.title || item.value },
|
|
110
|
-
item?.icon ? (React.createElement(Icon, { src: item?.icon, className: props.moreClasses?.icon, style: styles.icon })) : null,
|
|
110
|
+
item?.icon ? (React.createElement(Icon, { src: item?.icon, className: props.moreClasses?.icon, style: styles.icon })) : props.reserveIconSpace ? (React.createElement("div", { style: { width: styles.icon.width, marginRight: styles.icon.marginRight, flexShrink: 0 } })) : null,
|
|
111
111
|
React.createElement("div", { style: styles.text, className: props.moreClasses?.text }, item?.name)));
|
|
112
112
|
}
|
|
113
113
|
//# sourceMappingURL=TextWithIcon.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextWithIcon.js","sourceRoot":"./src/","sources":["Components/TextWithIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAGhC,MAAM,MAAM,GAAwC;IAChD,GAAG,EAAE;QACD,YAAY,EAAE,CAAC;QACf,OAAO,EAAE,OAAO;QAChB,UAAU,EAAE,MAAM;QAClB,UAAU,EAAE,QAAQ;QACpB,QAAQ,EAAE,QAAQ;QAClB,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;KACvB;IACD,IAAI,EAAE;QACF,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;QACV,WAAW,EAAE,CAAC;QACd,aAAa,EAAE,QAAQ;KAC1B;IACD,IAAI,EAAE;QACF,OAAO,EAAE,cAAc;QACvB,QAAQ,EAAE,QAAQ;QAClB,YAAY,EAAE,UAAU;KAC3B;CACJ,CAAC;
|
|
1
|
+
{"version":3,"file":"TextWithIcon.js","sourceRoot":"./src/","sources":["Components/TextWithIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAGhC,MAAM,MAAM,GAAwC;IAChD,GAAG,EAAE;QACD,YAAY,EAAE,CAAC;QACf,OAAO,EAAE,OAAO;QAChB,UAAU,EAAE,MAAM;QAClB,UAAU,EAAE,QAAQ;QACpB,QAAQ,EAAE,QAAQ;QAClB,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;KACvB;IACD,IAAI,EAAE;QACF,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;QACV,WAAW,EAAE,CAAC;QACd,aAAa,EAAE,QAAQ;KAC1B;IACD,IAAI,EAAE;QACF,OAAO,EAAE,cAAc;QACvB,QAAQ,EAAE,QAAQ;QAClB,YAAY,EAAE,UAAU;KAC3B;CACJ,CAAC;AAgCF,MAAM,UAAU,YAAY,CAAC,KAAwB;IACjD,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;IAC1B,IAAI,IAAsB,CAAC;IAC3B,MAAM,MAAM,GAAG,KAAK,CAAC,YAAY,IAAI,EAAE,CAAC;IAExC,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC5B,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC;QACxB,IAAI,IAAI,EAAE,CAAC;YACP,yDAAyD;YACzD,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;gBACtB,MAAM,KAAK,GAAgC,IAAI,CAAC,IAAI,CAChD,CAAC,GAAoB,EAAE,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,MAAM,GAAG,KAAK,CACxD,CAAC;gBACF,IAAI,KAAK,EAAE,CAAC;oBACR,IAAI,GAAG;wBACH,IAAI,EAAE,KAAK,CAAC,oBAAoB,CAAC,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,eAAe,EAAE,EAAE,CAAC;wBAChF,KAAK,EAAE,KAAK,CAAC,GAAG;wBAChB,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,MAAM,EAAE,IAAI;wBACtC,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,EAAE,KAAK;qBAC5C,CAAC;gBACN,CAAC;qBAAM,CAAC;oBACJ,IAAI,GAAG;wBACH,IAAI,EAAE,KAAK;wBACX,KAAK,EAAE,MAAM,GAAG,KAAK;qBACxB,CAAC;gBACN,CAAC;YACL,CAAC;iBAAM,IAAI,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,EAAE,CAAC;gBAC9B,wFAAwF;gBACxF,MAAM,GAAG,GAAoB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC;gBAClD,IAAI,GAAG;oBACH,IAAI,EAAE,KAAK,CAAC,oBAAoB,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,eAAe,EAAE,EAAE,CAAC;oBAC9E,KAAK,EAAE,GAAG,CAAC,GAAG;oBACd,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,GAAG,CAAC,MAAM,EAAE,IAAI;oBACpC,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,GAAG,CAAC,MAAM,EAAE,KAAK;iBAC1C,CAAC;YACN,CAAC;iBAAM,CAAC;gBACJ,iCAAiC;gBACjC,IAAI,GAAG;oBACH,IAAI,EAAE,KAAK;oBACX,KAAK,EAAE,MAAM,GAAG,KAAK;oBACrB,IAAI,EAAE,KAAK,CAAC,IAAI;oBAChB,KAAK,EAAE,KAAK,CAAC,KAAK;iBACrB,CAAC;YACN,CAAC;QACL,CAAC;aAAM,CAAC;YACJ,IAAI,GAAG;gBACH,IAAI,EAAE,KAAK;gBACX,KAAK,EAAE,MAAM,GAAG,KAAK;gBACrB,IAAI,EAAE,KAAK,CAAC,IAAI;gBAChB,KAAK,EAAE,KAAK,CAAC,KAAK;aACrB,CAAC;QACN,CAAC;IACL,CAAC;SAAM,IAAI,CAAC,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC7C,IAAI,GAAG;YACH,IAAI,EAAE,EAAE;YACR,KAAK,EAAE,EAAE;YACT,IAAI,EAAE,KAAK,CAAC,IAAI;YAChB,KAAK,EAAE,KAAK,CAAC,KAAK;SACrB,CAAC;IACN,CAAC;SAAM,CAAC;QACJ,6BAA6B;QAC7B,MAAM,GAAG,GAAoB,KAAwB,CAAC;QACtD,IAAI,GAAG;YACH,IAAI,EAAE,KAAK,CAAC,oBAAoB,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,CAAC;iBAC5C,OAAO,CAAC,eAAe,EAAE,EAAE,CAAC;iBAC5B,OAAO,CAAC,cAAc,EAAE,EAAE,CAAC;iBAC3B,OAAO,CAAC,aAAa,EAAE,EAAE,CAAC;iBAC1B,OAAO,CAAC,iBAAiB,EAAE,EAAE,CAAC;YACnC,KAAK,EAAE,GAAG,CAAC,GAAG;YACd,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,GAAG,CAAC,MAAM,EAAE,IAAI;YACpC,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,GAAG,CAAC,MAAM,EAAE,KAAK;SAC1C,CAAC;IACN,CAAC;IAED,MAAM,KAAK,GAAG,IAAI,EAAE,KAAK;QACrB,CAAC,CAAC;YACI,MAAM,EAAE,aAAa,KAAK,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE;YACrD,KAAK,EAAE,KAAK,CAAC,gBAAgB,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,SAAS,IAAI,OAAO,EAAE,IAAI,CAAC,IAAI,SAAS;YACzF,eAAe,EAAE,IAAI,EAAE,KAAK;SAC/B;QACH,CAAC,CAAC,EAAE,CAAC;IAET,OAAO,CACH,6BACI,KAAK,EAAE,EAAE,GAAG,CAAC,KAAK,CAAC,KAAK,IAAI,SAAS,CAAC,EAAE,GAAG,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC,KAAK,IAAI,SAAS,CAAC,EAAE,EAChF,SAAS,EAAE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC,WAAW,EAAE,IAAI,CAAC,EAC/D,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK;QAE/B,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,CACV,oBAAC,IAAI,IACD,GAAG,EAAE,IAAI,EAAE,IAAI,EACf,SAAS,EAAE,KAAK,CAAC,WAAW,EAAE,IAAI,EAClC,KAAK,EAAE,MAAM,CAAC,IAAI,GACpB,CACL,CAAC,CAAC,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,CACzB,6BAAK,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,WAAW,EAAE,MAAM,CAAC,IAAI,CAAC,WAAW,EAAE,UAAU,EAAE,CAAC,EAAE,GAAI,CACpG,CAAC,CAAC,CAAC,IAAI;QACR,6BACI,KAAK,EAAE,MAAM,CAAC,IAAI,EAClB,SAAS,EAAE,KAAK,CAAC,WAAW,EAAE,IAAI,IAEjC,IAAI,EAAE,IAAI,CACT,CACJ,CACT,CAAC;AACN,CAAC","sourcesContent":["import React from 'react';\n\nimport { Icon } from './Icon';\nimport { Utils } from './Utils';\nimport type { ThemeType } from '../types';\n\nconst styles: Record<string, React.CSSProperties> = {\n div: {\n borderRadius: 3,\n padding: '0 3px',\n lineHeight: '20px',\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n display: 'flex',\n alignItems: 'center',\n },\n icon: {\n width: 16,\n height: 16,\n marginRight: 8,\n verticalAlign: 'middle',\n },\n text: {\n display: 'inline-block',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n },\n};\n\ninterface TextWithIconProps {\n lang: ioBroker.Languages;\n themeType?: ThemeType;\n value: string | Record<string, any>;\n list?: ioBroker.Object[] | Record<string, ioBroker.Object>;\n className?: string;\n style?: React.CSSProperties;\n title?: string;\n removePrefix?: string;\n moreClasses?: {\n root?: string;\n icon?: string;\n text?: string;\n };\n icon?: string;\n color?: string;\n /**\n * Keep the place of the icon free if the entry has no icon.\n * Use it in lists and tables, where entries with and without icon must stay aligned under each other.\n */\n reserveIconSpace?: boolean;\n}\n\ninterface TextWithIconItem {\n name: string;\n value: string;\n icon?: string;\n color?: string;\n}\n\nexport function TextWithIcon(props: TextWithIconProps): React.JSX.Element {\n const value = props.value;\n let item: TextWithIconItem;\n const prefix = props.removePrefix || '';\n\n if (typeof value === 'string') {\n const list = props.list;\n if (list) {\n // if a list is array, then it is list of ioBroker.Object\n if (Array.isArray(list)) {\n const _item: ioBroker.Object | undefined = list.find(\n (obj: ioBroker.Object) => obj?._id === prefix + value,\n );\n if (_item) {\n item = {\n name: Utils.getObjectNameFromObj(_item, props.lang).replace('system.group.', ''),\n value: _item._id,\n icon: props.icon || _item.common?.icon,\n color: props.color || _item.common?.color,\n };\n } else {\n item = {\n name: value,\n value: prefix + value,\n };\n }\n } else if (list[prefix + value]) {\n // List is the object with key-value pairs: {'enum.rooms.1': {common: {name: 'Room 1'}}}\n const obj: ioBroker.Object = list[prefix + value];\n item = {\n name: Utils.getObjectNameFromObj(obj, props.lang).replace('system.group.', ''),\n value: obj._id,\n icon: props.icon || obj.common?.icon,\n color: props.color || obj.common?.color,\n };\n } else {\n // value is a string, ignore list\n item = {\n name: value,\n value: prefix + value,\n icon: props.icon,\n color: props.color,\n };\n }\n } else {\n item = {\n name: value,\n value: prefix + value,\n icon: props.icon,\n color: props.color,\n };\n }\n } else if (!value || typeof value !== 'object') {\n item = {\n name: '',\n value: '',\n icon: props.icon,\n color: props.color,\n };\n } else {\n // Item is an ioBroker.Object\n const obj: ioBroker.Object = value as ioBroker.Object;\n item = {\n name: Utils.getObjectNameFromObj(obj, props.lang)\n .replace('system.group.', '')\n .replace('system.user.', '')\n .replace('enum.rooms.', '')\n .replace('enum.functions.', ''),\n value: obj._id,\n icon: props.icon || obj.common?.icon,\n color: props.color || obj.common?.color,\n };\n }\n\n const style = item?.color\n ? {\n border: `1px solid ${Utils.invertColor(item?.color)}`,\n color: Utils.getInvertedColor(item?.color, props.themeType || 'light', true) || undefined,\n backgroundColor: item?.color,\n }\n : {};\n\n return (\n <div\n style={{ ...(props.style || undefined), ...styles.div, ...(style || undefined) }}\n className={Utils.clsx(props.className, props.moreClasses?.root)}\n title={props.title || item.value}\n >\n {item?.icon ? (\n <Icon\n src={item?.icon}\n className={props.moreClasses?.icon}\n style={styles.icon}\n />\n ) : props.reserveIconSpace ? (\n <div style={{ width: styles.icon.width, marginRight: styles.icon.marginRight, flexShrink: 0 }} />\n ) : null}\n <div\n style={styles.text}\n className={props.moreClasses?.text}\n >\n {item?.name}\n </div>\n </div>\n );\n}\n"]}
|
package/package.json
CHANGED