From 0b59b0a405b44b26aab7cfee91d31f4a47d836aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Fri, 27 Dec 2024 15:44:07 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=8F=AF=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E6=8F=8F=E8=BF=B0=E7=BB=84=E4=BB=B6=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/EditableDescription.module.css | 27 ++++++++++
 src/components/EditableDescription.tsx        | 49 +++++++++++++++++++
 2 files changed, 76 insertions(+)
 create mode 100644 src/components/EditableDescription.module.css
 create mode 100644 src/components/EditableDescription.tsx

diff --git a/src/components/EditableDescription.module.css b/src/components/EditableDescription.module.css
new file mode 100644
index 0000000..1a7012f
--- /dev/null
+++ b/src/components/EditableDescription.module.css
@@ -0,0 +1,27 @@
+@layer components {
+  .editable_description_layout {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--spacing-m);
+    padding-inline: var(--spacing-xxl);
+    .content {
+      font-size: var(--font-size-s);
+      line-height: 1.2em;
+    }
+    textarea {
+      width: 45em;
+      height: fit-content;
+      overflow: hidden;
+      resize: none;
+      min-height: calc(1.2em * 2);
+      max-height: calc(1.2em * 5);
+    }
+    .invalid_content {
+      color: var(--color-neutral-focus);
+      font-size: var(--font-size-xs);
+      font-style: italic;
+      cursor: text;
+    }
+  }
+}
diff --git a/src/components/EditableDescription.tsx b/src/components/EditableDescription.tsx
new file mode 100644
index 0000000..6057511
--- /dev/null
+++ b/src/components/EditableDescription.tsx
@@ -0,0 +1,49 @@
+import { Icon } from '@iconify/react/dist/iconify.js';
+import { isEmpty, isNil } from 'lodash-es';
+import { useRef, useState } from 'react';
+import styles from './EditableDescription.module.css';
+
+type EditableDescriptionProps = {
+  content?: string | null;
+  onChange?: (newContent: string) => void;
+};
+
+export function EditableDescription({ content, onChange }: EditableDescriptionProps) {
+  const [isEditing, setIsEditing] = useState(false);
+  const formRef = useRef<HTMLFormElement>(null);
+  const cancelEdit = () => {
+    setIsEditing(false);
+    formRef.current?.reset();
+  };
+  const handleSubmit = (data: FormData) => {
+    const newDescription = data.get('description') as string;
+    if (newDescription !== content) {
+      onChange?.(isEmpty(newDescription) ? null : newDescription);
+    }
+    cancelEdit();
+  };
+
+  return isEditing ? (
+    <form className={styles.editable_description_layout} action={handleSubmit} ref={formRef}>
+      <textarea name="description" className={styles.content} defaultValue={content} />
+      <div className="action_icon success" onClick={() => formRef.current?.requestSubmit()}>
+        <Icon icon="tabler:check" />
+      </div>
+      <div className="action_icon danger" onClick={cancelEdit}>
+        <Icon icon="tabler:x" />
+      </div>
+    </form>
+  ) : (
+    <div className={styles.editable_description_layout}>
+      <div className={styles.content}>
+        {isNil(content) || isEmpty(content) ? (
+          <div className={styles.invalid_content} onClick={() => setIsEditing(true)}>
+            Click to add description.
+          </div>
+        ) : (
+          content
+        )}
+      </div>
+    </div>
+  );
+}