u

src/components/article/ArticleView.jsx

@@ -1,8 +1,8 @@
 import { Link as RouterLink } from 'react-router-dom';
 import Box from '@mui/material/Box';
 import Link from '@mui/material/Link';
-import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
+import SingleLineTextEdit from '../SingleLineTextEdit';
 import { article } from '../../api';
 import { EditablePanelTile, PanelTile, PanelTileGrid } from '../panels';
 import { requireObject } from '../../utils/apiShape';
@@ -82,6 +82,35 @@ function nameDraftValid(draft) {
   return draft.name.trim().length > 0;
 }
 
+const articleNameTextSx = {
+  fontWeight: 700,
+  lineHeight: 1.2,
+};
+
+const articleNameFieldSx = {
+  '& .MuiInputBase-input': {
+    fontSize: '2.125rem',
+    ...articleNameTextSx,
+  },
+};
+
+const articleNameFieldHiddenSx = {
+  ...articleNameFieldSx,
+  pointerEvents: 'none',
+  '& .MuiOutlinedInput-notchedOutline': {
+    borderColor: 'transparent',
+  },
+  '& .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline': {
+    borderColor: 'transparent',
+  },
+  '& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline': {
+    borderColor: 'transparent',
+  },
+  '& .MuiInputLabel-root': {
+    visibility: 'hidden',
+  },
+};
+
 export default function ArticleView({ article: articleData, onArticleUpdated }) {
   const basePrice = primaryPrice(articleData);
   const brutto = priceBrutto(basePrice);
@@ -107,42 +136,22 @@ export default function ArticleView({ article: articleData, onArticleUpdated })
         isDirty={nameDraftDirty}
         canSave={nameDraftValid}
         renderDisplay={({ name }) => (
-          <Box
-            sx={{
-              display: 'flex',
-              alignItems: 'center',
-              minHeight: { xs: 0, sm: 200 },
-              pr: 5,
-            }}
-          >
-            <Typography variant="h6" sx={{ fontWeight: 700, lineHeight: 1.25 }}>
-              {name}
-            </Typography>
-          </Box>
+          <SingleLineTextEdit
+            label="Name"
+            value={name}
+            readOnly
+            onChange={() => {}}
+            sx={articleNameFieldHiddenSx}
+          />
         )}
         renderEdit={(draft, onChange, inputRef) => (
-          <Box
-            sx={{
-              display: 'flex',
-              alignItems: 'center',
-              minHeight: { xs: 0, sm: 200 },
-            }}
-          >
-            <TextField
-              inputRef={inputRef}
-              fullWidth
-              variant="standard"
-              value={draft.name}
-              onChange={(event) => onChange({ name: event.target.value })}
-              sx={{
-                '& .MuiInput-input': {
-                  fontSize: '1.25rem',
-                  fontWeight: 700,
-                  lineHeight: 1.25,
-                },
-              }}
-            />
-          </Box>
+          <SingleLineTextEdit
+            inputRef={inputRef}
+            label="Name"
+            value={draft.name}
+            onChange={(name) => onChange({ name })}
+            sx={articleNameFieldSx}
+          />
         )}
       />