sotre

src/components/article/boxes/ArticleViewStock.jsx

@@ -1,38 +1,45 @@
+import { Component } from 'react';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import { PanelTile } from '../../panels';
 import { PANEL_TILE_KEYS } from '../../../theme';
 import { formatStock } from '../../../pages/artikel/searchFormat';
 
-function PanelValue({ label, children }) {
-  if (children == null || children === '') return null;
-  return (
-    <Box sx={{ mb: 1 }}>
-      {label ? (
-        <Typography variant="caption" color="text.secondary" display="block">
-          {label}
+class PanelValue extends Component {
+  render() {
+    const { label, children } = this.props;
+    if (children == null || children === '') return null;
+    return (
+      <Box sx={{ mb: 1 }}>
+        {label ? (
+          <Typography variant="caption" color="text.secondary" display="block">
+            {label}
+          </Typography>
+        ) : null}
+        <Typography variant="body2" component="div">
+          {children}
         </Typography>
-      ) : null}
-      <Typography variant="body2" component="div">
-        {children}
-      </Typography>
-    </Box>
-  );
+      </Box>
+    );
+  }
 }
 
 const SECOND_ROW_MIN_HEIGHT = 220;
 
-export default function ArticleViewStock({ article: articleData }) {
-  return (
-    <PanelTile
-      wide={1}
-      tileKey={PANEL_TILE_KEYS.stock}
-      title="Bestand"
-      minHeight={SECOND_ROW_MIN_HEIGHT}
-    >
-      <PanelValue>
-        {articleData.stock != null ? formatStock(articleData.stock) : null}
-      </PanelValue>
-    </PanelTile>
-  );
+export default class ArticleViewStock extends Component {
+  render() {
+    const { article: articleData } = this.props;
+    return (
+      <PanelTile
+        wide={1}
+        tileKey={PANEL_TILE_KEYS.stock}
+        title="Bestand"
+        minHeight={SECOND_ROW_MIN_HEIGHT}
+      >
+        <PanelValue>
+          {articleData.stock != null ? formatStock(articleData.stock) : null}
+        </PanelValue>
+      </PanelTile>
+    );
+  }
 }