u

src/components/article/boxes/ArticleViewName.jsx

@@ -0,0 +1,87 @@
+import { EditablePanelTile } from '../../panels';
+import SingleLineTextEdit from '../../SingleLineTextEdit';
+import { article } from '../../../api';
+import { requireObject } from '../../../utils/apiShape';
+import { PANEL_TILE_KEYS } from '../../../theme';
+
+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',
+  },
+};
+
+function nameDraftDirty(draft, saved) {
+  return draft.name.trim() !== String(saved.name ?? '').trim();
+}
+
+function nameDraftValid(draft) {
+  return draft.name.trim().length > 0;
+}
+
+const headerTileSx = {
+  minHeight: 0,
+};
+
+export default function ArticleViewName({ article: articleData, onArticleUpdated }) {
+  const handleSave = async (draft) => {
+    const name = draft.name.trim();
+    const res = await article.update(articleData.sku, { name });
+    requireObject(res, 'PATCH /api/article/:sku');
+    requireObject(res.article, 'article');
+    onArticleUpdated?.(res.article);
+  };
+
+  return (
+    <EditablePanelTile
+      wide={3}
+      tileKey={PANEL_TILE_KEYS.name}
+      minHeight={0}
+      sx={headerTileSx}
+      value={{ name: articleData.name ?? '' }}
+      onSave={handleSave}
+      isDirty={nameDraftDirty}
+      canSave={nameDraftValid}
+      renderDisplay={({ name }) => (
+        <SingleLineTextEdit
+          label="Name"
+          value={name}
+          readOnly
+          onChange={() => {}}
+          sx={articleNameFieldHiddenSx}
+        />
+      )}
+      renderEdit={(draft, onChange, inputRef) => (
+        <SingleLineTextEdit
+          inputRef={inputRef}
+          label="Name"
+          value={draft.name}
+          onChange={(name) => onChange({ name })}
+          sx={articleNameFieldSx}
+        />
+      )}
+    />
+  );
+}