refactor: simplify LabelElementRow rendering by replacing Form.Item shouldUpdate with Form.useWatch

paperless-frontend/src/pages/SettingsPage.tsx

@@ -11,6 +11,7 @@ import {
   QrcodeOutlined, UnorderedListOutlined, PrinterOutlined,
 } from '@ant-design/icons';
 import type { ColumnsType } from 'antd/es/table';
+import type { FormInstance } from 'antd';
 import {
   settingsApi,
   type SettingDocType, type SettingPostprocessing, type SettingUserClient,
@@ -1781,7 +1782,9 @@ function InboxActionsForTemplateEditor({ templateId }: { templateId: number }) {
 // Eingangsdokumentarten Tab (ehemals Barcode-Vorlagen)
 // ═══════════════════════════════════════════════════════════════════
 
-function LabelElementRow({ listName, remove }: { listName: number; remove: (n: number) => void }) {
+function LabelElementRow({ form, listName, remove }: { form: FormInstance; listName: number; remove: (n: number) => void }) {
+  const type = Form.useWatch(['LabelLayout', listName, 'type'], form);
+
   return (
     <Card
       size="small"
@@ -1795,10 +1798,8 @@ function LabelElementRow({ listName, remove }: { listName: number; remove: (n: n
           { value: 'line', label: 'Linie' },
         ]} />
       </Form.Item>
-      <Form.Item noStyle shouldUpdate>
+
-        {({ getFieldValue }) => {
+      {type === 'text' && (
-          const type = getFieldValue(['LabelLayout', listName, 'type']);
-          if (type === 'text') return (
         <Row gutter={8}>
           <Col span={4}><Form.Item name={[listName, 'x']} label="X (mm)"><InputNumber style={{ width: '100%' }} /></Form.Item></Col>
           <Col span={4}><Form.Item name={[listName, 'y']} label="Y (mm)"><InputNumber style={{ width: '100%' }} /></Form.Item></Col>
@@ -1814,16 +1815,18 @@ function LabelElementRow({ listName, remove }: { listName: number; remove: (n: n
           </Form.Item></Col>
           <Col span={24}><Form.Item name={[listName, 'content']} label="Inhalt"><Input placeholder="{nummer} oder {datum}" /></Form.Item></Col>
         </Row>
-          );
+      )}
-          if (type === 'qr') return (
+
+      {type === 'qr' && (
         <Row gutter={8}>
           <Col span={4}><Form.Item name={[listName, 'x']} label="X (mm)"><InputNumber style={{ width: '100%' }} /></Form.Item></Col>
           <Col span={4}><Form.Item name={[listName, 'y']} label="Y (mm)"><InputNumber style={{ width: '100%' }} /></Form.Item></Col>
           <Col span={4}><Form.Item name={[listName, 'sizeMm']} label="Größe (mm)"><InputNumber style={{ width: '100%' }} /></Form.Item></Col>
           <Col span={12}><Form.Item name={[listName, 'content']} label="Inhalt"><Input placeholder="{number}" /></Form.Item></Col>
         </Row>
-          );
+      )}
-          if (type === 'line') return (
+
+      {type === 'line' && (
         <Row gutter={8}>
           <Col span={4}><Form.Item name={[listName, 'x1']} label="X1 (mm)"><InputNumber style={{ width: '100%' }} /></Form.Item></Col>
           <Col span={4}><Form.Item name={[listName, 'y1']} label="Y1 (mm)"><InputNumber style={{ width: '100%' }} /></Form.Item></Col>
@@ -1831,10 +1834,7 @@ function LabelElementRow({ listName, remove }: { listName: number; remove: (n: n
           <Col span={4}><Form.Item name={[listName, 'y2']} label="Y2 (mm)"><InputNumber style={{ width: '100%' }} /></Form.Item></Col>
           <Col span={4}><Form.Item name={[listName, 'lineWidth']} label="Stärke (mm)"><InputNumber step={0.1} style={{ width: '100%' }} /></Form.Item></Col>
         </Row>
-          );
+      )}
-          return null;
-        }}
-      </Form.Item>
     </Card>
   );
 }
@@ -2161,7 +2161,7 @@ function BarcodeTemplatesTab() {
                               {(layoutFields, { add: addEl, remove: removeEl }) => (
                                 <>
                                   {layoutFields.map(({ key, name: elName }) => (
-                                    <LabelElementRow key={key} listName={elName} remove={removeEl} />
+                                    <LabelElementRow key={key} form={form} listName={elName} remove={removeEl} />
                                   ))}
                                   <Space>
                                     <Button size="small" type="dashed" icon={<PlusOutlined />}