Correcting layout of custom component: #2886

ioBroker · Jan 15, 2025 · 3203145 · 3203145
1 parent 92060dc
commit 3203145
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 31 deletions.
diff --git a/packages/jsonConfig/src/JsonConfigComponent/ConfigCustom.tsx b/packages/jsonConfig/src/JsonConfigComponent/ConfigCustom.tsx
@@ -211,55 +211,58 @@ export default class ConfigCustom extends ConfigGeneric<ConfigCustomProps, Confi
 
     render(): JSX.Element {
         const CustomComponent: React.FC<ConfigGenericProps> = this.state.Component;
+        const schema = this.props.schema || ({} as ConfigItemCustom);
 
-        // render temporary placeholder
-        if (!CustomComponent) {
-            const schema = this.props.schema || ({} as ConfigItemCustom);
+        let item = CustomComponent ? (
+            <CustomComponent
+                {...this.props}
+                // @ts-expect-error BF (2024-12-18) Remove after the 7.4 will be mainstream. All following lines
+                socket={this.props.oContext.socket}
+                theme={this.props.oContext.theme}
+                themeType={this.props.oContext.themeType}
+                instance={this.props.oContext.instance}
+                adapterName={this.props.oContext.adapterName}
+                systemConfig={this.props.oContext.systemConfig}
+                forceUpdate={this.props.oContext.forceUpdate}
+            />
+        ) : this.state.error ? (
+            <div>{this.state.error}</div>
+        ) : (
+            <LinearProgress />
+        );
 
-            const item = (
+        // If any widths are defined
+        if (schema.xs || schema.sm || schema.md || schema.lg || schema.xl) {
+            item = (
                 <Grid2
                     size={{
-                        xs: schema.xs || undefined,
+                        xs: schema.xs || 12,
                         sm: schema.sm || undefined,
                         md: schema.md || undefined,
                         lg: schema.lg || undefined,
                         xl: schema.xl || undefined,
                     }}
                     style={{
                         marginBottom: 0,
-                        // marginRight: 8,
                         textAlign: 'left',
                         ...schema.style,
                         ...(this.props.oContext.themeType === 'dark' ? schema.darkStyle : {}),
                     }}
                 >
-                    {this.state.error ? <div>{this.state.error}</div> : <LinearProgress />}
+                    {item}
                 </Grid2>
             );
+        }
 
-            if (schema.newLine) {
-                return (
-                    <>
-                        <div style={{ flexBasis: '100%', height: 0 }} />
-                        {item}
-                    </>
-                );
-            }
-            return item;
+        if (schema.newLine) {
+            return (
+                <>
+                    <div style={{ flexBasis: '100%', height: 0 }} />
+                    {item}
+                </>
+            );
         }
 
-        return (
-            <CustomComponent
-                {...this.props}
-                // @ts-expect-error BF (2024-12-18) Remove after the 7.4 will be mainstream. All following lines
-                socket={this.props.oContext.socket}
-                theme={this.props.oContext.theme}
-                themeType={this.props.oContext.themeType}
-                instance={this.props.oContext.instance}
-                adapterName={this.props.oContext.adapterName}
-                systemConfig={this.props.oContext.systemConfig}
-                forceUpdate={this.props.oContext.forceUpdate}
-            />
-        );
+        return item;
     }
 }
diff --git a/packages/jsonConfig/src/JsonConfigComponent/ConfigGeneric.tsx b/packages/jsonConfig/src/JsonConfigComponent/ConfigGeneric.tsx
@@ -1062,7 +1062,7 @@ export default class ConfigGeneric<
         const { error, disabled, hidden, defaultValue } = this.calculate(schema);
 
         if (hidden) {
-            // Remove all errors if element is hidden
+            // Remove all errors if an element is hidden
             if (Object.keys(this.isError).length) {
                 setTimeout(
                     isError => Object.keys(isError).forEach(attr => this.props.onError(attr)),
@@ -1146,7 +1146,6 @@ export default class ConfigGeneric<
                 }}
                 style={{
                     marginBottom: 0,
-                    // marginRight: 8,
                     textAlign: 'left',
                     width: schema.type === 'divider' || schema.type === 'header' ? schema.width || '100%' : undefined,
                     ...schema.style,