sotre

src/components/article/boxes/PriceUnitRow.jsx

@@ -1,3 +1,4 @@
+import { Component } from 'react';
 import Box from '@mui/material/Box';
 import Chip from '@mui/material/Chip';
 import FormControl from '@mui/material/FormControl';
@@ -21,115 +22,121 @@ const priceUnitCornerSx = {
   zIndex: 2,
 };
 
-export function PriceUnitRow({
-  hasUnit,
-  unitamount,
-  unitSi,
-  units,
-  displaySymbol,
-  onChangeAmount,
-  onChangeSi,
-  readOnly,
-  amountError,
-}) {
-  const selected = findUnitBySi(units, unitSi);
-  const symbol = selected?.symbol ?? displaySymbol ?? unitSi ?? '';
+export class PriceUnitRow extends Component {
+  render() {
+    const {
+      hasUnit,
+      unitamount,
+      unitSi,
+      units,
+      displaySymbol,
+      onChangeAmount,
+      onChangeSi,
+      readOnly,
+      amountError,
+    } = this.props;
+    const selected = findUnitBySi(units, unitSi);
+    const symbol = selected?.symbol ?? displaySymbol ?? unitSi ?? '';
+
+    if (readOnly) {
+      return (
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, minHeight: 36 }}>
+          {hasUnit && unitamount ? (
+            <Chip
+              size="medium"
+              label={`${unitamount} ${symbol}`}
+              sx={{
+                height: 28,
+                fontSize: 13,
+                fontWeight: 600,
+                bgcolor: 'rgba(0, 0, 0, 0.08)',
+              }}
+            />
+          ) : null}
+        </Box>
+      );
+    }
+
+    if (!hasUnit) {
+      return <Box sx={{ minHeight: 40 }} />;
+    }
 
-  if (readOnly) {
     return (
-      <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, minHeight: 36 }}>
-        {hasUnit && unitamount ? (
-          <Chip
-            size="medium"
-            label={`${unitamount} ${symbol}`}
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 0.75,
+          flexWrap: 'nowrap',
+          minHeight: 40,
+          minWidth: 0,
+          width: '100%',
+        }}
+      >
+        <TextField
+          label="Menge"
+          value={unitamount}
+          onChange={(event) => onChangeAmount(event.target.value)}
+          size="small"
+          error={amountError}
+          sx={{ width: 88, flexShrink: 0 }}
+          slotProps={{
+            inputLabel: { shrink: true },
+            htmlInput: { inputMode: 'decimal' },
+          }}
+        />
+        <FormControl size="small" sx={{ flex: 1, minWidth: 0, maxWidth: 160 }}>
+          <InputLabel id="article-unit-si-label" shrink>
+            Einheit
+          </InputLabel>
+          <Select
+            labelId="article-unit-si-label"
+            label="Einheit"
+            value={unitSi}
+            displayEmpty
+            notched
+            onChange={(event) => onChangeSi(event.target.value)}
             sx={{
-              height: 28,
-              fontSize: 13,
-              fontWeight: 600,
-              bgcolor: 'rgba(0, 0, 0, 0.08)',
+              '& .MuiSelect-select': {
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+              },
             }}
-          />
-        ) : null}
+          >
+            {units.map((row) => (
+              <MenuItem key={row.si} value={row.si}>
+                {unitLabel(row)}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
       </Box>
     );
   }
+}
 
-  if (!hasUnit) {
-    return <Box sx={{ minHeight: 40 }} />;
-  }
-
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        alignItems: 'center',
-        gap: 0.75,
-        flexWrap: 'nowrap',
-        minHeight: 40,
-        minWidth: 0,
-        width: '100%',
-      }}
-    >
-      <TextField
-        label="Menge"
-        value={unitamount}
-        onChange={(event) => onChangeAmount(event.target.value)}
-        size="small"
-        error={amountError}
-        sx={{ width: 88, flexShrink: 0 }}
-        slotProps={{
-          inputLabel: { shrink: true },
-          htmlInput: { inputMode: 'decimal' },
-        }}
-      />
-      <FormControl size="small" sx={{ flex: 1, minWidth: 0, maxWidth: 160 }}>
-        <InputLabel id="article-unit-si-label" shrink>
-          Einheit
-        </InputLabel>
-        <Select
-          labelId="article-unit-si-label"
-          label="Einheit"
-          value={unitSi}
-          displayEmpty
-          notched
-          onChange={(event) => onChangeSi(event.target.value)}
-          sx={{
-            '& .MuiSelect-select': {
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              whiteSpace: 'nowrap',
-            },
-          }}
+export class PriceUnitCorner extends Component {
+  render() {
+    const { hasUnit, onToggleHasUnit, onOpenEditor } = this.props;
+    return (
+      <Box sx={priceUnitCornerSx}>
+        <Switch
+          size="small"
+          checked={Boolean(hasUnit)}
+          onChange={(event) => onToggleHasUnit(event.target.checked)}
+          inputProps={{ 'aria-label': 'Einheit' }}
+        />
+        <IconButton
+          type="button"
+          size="small"
+          aria-label="Einheiten bearbeiten"
+          onClick={onOpenEditor}
+          sx={{ p: 0.5 }}
         >
-          {units.map((row) => (
-            <MenuItem key={row.si} value={row.si}>
-              {unitLabel(row)}
-            </MenuItem>
-          ))}
-        </Select>
-      </FormControl>
-    </Box>
-  );
-}
-
-export function PriceUnitCorner({ hasUnit, onToggleHasUnit, onOpenEditor }) {
-  return (
-    <Box sx={priceUnitCornerSx}>
-      <Switch
-        size="small"
-        checked={Boolean(hasUnit)}
-        onChange={(event) => onToggleHasUnit(event.target.checked)}
-        inputProps={{ 'aria-label': 'Einheit' }}
-      />
-      <IconButton
-        type="button"
-        size="small"
-        aria-label="Einheiten bearbeiten"
-        onClick={onOpenEditor}
-        sx={{ p: 0.5 }}
-      >
-        <StraightenOutlinedIcon sx={{ fontSize: 28 }} />
-      </IconButton>
-    </Box>
-  );
+          <StraightenOutlinedIcon sx={{ fontSize: 28 }} />
+        </IconButton>
+      </Box>
+    );
+  }
 }