Add note overview

src/components/note.jsx

@@ -1,23 +1,21 @@
-import React, { useContext, useState } from "react";
+import React, { useContext } from "react";
 import { NoteContext } from "../pages/editor";
 
 export default function Note(props) {
   const { setNotes } = useContext(NoteContext);
-  const [size, setSize] = useState({ w: 180, h: 88 });
+  const w = 180;
   const r = 3;
   const fold = 24;
 
   const handleChange = (e) => {
     const textarea = document.getElementById(`note_${props.data.id}`);
-    const newHeight = textarea.scrollHeight + 16 + 20 + 4;
-    setSize((prevSize) => ({ ...prevSize, h: newHeight }));
     textarea.style.height = "0";
     textarea.style.height = textarea.scrollHeight + "px";
-
+    const newHeight = textarea.scrollHeight + 16 + 20 + 4;
     setNotes((prev) =>
       prev.map((n) => {
         if (n.id === props.data.id) {
-          return { ...n, content: e.target.value };
+          return { ...n, content: e.target.value, height: newHeight };
         }
         return n;
       })
@@ -28,17 +26,17 @@ export default function Note(props) {
     <g>
       <path
         d={`M${props.data.x + fold} ${props.data.y} L${
-          props.data.x + size.w - r
+          props.data.x + w - r
-        } ${props.data.y} A${r} ${r} 0 0 1 ${props.data.x + size.w} ${
+        } ${props.data.y} A${r} ${r} 0 0 1 ${props.data.x + w} ${
           props.data.y + r
-        } L${props.data.x + size.w} ${
+        } L${props.data.x + w} ${
-          props.data.y + size.h - r
+          props.data.y + props.data.height - r
-        } A${r} ${r} 0 0 1 ${props.data.x + size.w - r} ${
+        } A${r} ${r} 0 0 1 ${props.data.x + w - r} ${
-          props.data.y + size.h
+          props.data.y + props.data.height
-        } L${props.data.x + r} ${props.data.y + size.h} A${r} ${r} 0 0 1 ${
+        } L${props.data.x + r} ${props.data.y + props.data.height} A${r} ${r} 0 0 1 ${
           props.data.x
-        } ${props.data.y + size.h - r} L${props.data.x} ${props.data.y + fold}`}
+        } ${props.data.y + props.data.height - r} L${props.data.x} ${props.data.y + fold}`}
-        fill="#fcf7ac"
+        fill={props.data.color}
         stroke="#665b25"
         strokeLinejoin="round"
         strokeWidth="0.6"
@@ -51,7 +49,7 @@ export default function Note(props) {
         } L${props.data.x + fold} ${props.data.y} L${props.data.x} ${
           props.data.y + fold
         } Z`}
-        fill="#fcf7ac"
+        fill={props.data.color}
         stroke="#665b25"
         strokeLinejoin="round"
         strokeWidth="0.6"
@@ -59,8 +57,8 @@ export default function Note(props) {
       <foreignObject
         x={props.data.x}
         y={props.data.y}
-        width={size.w}
+        width={w}
-        height={size.h}
+        height={props.data.height}
         onMouseDown={props.onMouseDown}
       >
         <div className="text-gray-900 select-none w-full h-full cursor-move px-3 py-2">
@@ -69,7 +67,8 @@ export default function Note(props) {
             id={`note_${props.data.id}`}
             value={props.data.content}
             onInput={handleChange}
-            className="mt-1 w-full resize-none outline-none overflow-y-hidden border-none select-none bg-[#fcf7ac]"
+            className="mt-1 w-full resize-none outline-none overflow-y-hidden border-none select-none"
+            style={{backgroundColor: props.data.color}}
           ></textarea>
         </div>
       </foreignObject>

src/components/notes_overview.jsx

@@ -1,27 +1,83 @@
-import React, { useContext } from "react";
+import React, { useContext, useState } from "react";
 import {
   Empty,
   Row,
   Col,
   Button,
-//   Input,
+  Collapse,
-//   Popover,
+  AutoComplete,
-//   Toast,
+  TextArea,
+  Popover,
+  Toast,
 } from "@douyinfe/semi-ui";
 import {
   IllustrationNoContent,
   IllustrationNoContentDark,
 } from "@douyinfe/semi-illustrations";
-import { IconPlus } from "@douyinfe/semi-icons";
+import {
+  IconDeleteStroked,
+  IconPlus,
+  IconSearch,
+  IconCheckboxTick,
+} from "@douyinfe/semi-icons";
 import { NoteContext } from "../pages/editor";
+import { defaultNoteTheme, noteThemes } from "../data/data";
 
 export default function NotesOverview(props) {
   const { notes, setNotes } = useContext(NoteContext);
+  const [value, setValue] = useState("");
+  const [activeKey, setActiveKey] = useState("");
+  const [filteredResult, setFilteredResult] = useState(
+    notes.map((t) => {
+      return t.title;
+    })
+  );
+
+  const handleStringSearch = (value) => {
+    setFilteredResult(
+      notes
+        .map((t) => {
+          return t.title;
+        })
+        .filter((i) => i.includes(value))
+    );
+  };
+
+  const updateNote = (id, values) => {
+    setNotes((prev) =>
+      prev.map((note) => {
+        if (note.id === id) {
+          return { ...note, ...values };
+        }
+        return note;
+      })
+    );
+  };
 
   return (
     <div>
       <Row gutter={6}>
-        <Col span={24}>
+        <Col span={16}>
+          <AutoComplete
+            data={filteredResult}
+            value={value}
+            showClear
+            prefix={<IconSearch />}
+            placeholder="Search..."
+            emptyContent={<div className="p-3">No notes found</div>}
+            onSearch={(v) => handleStringSearch(v)}
+            onChange={(v) => setValue(v)}
+            onSelect={(v) => {
+              const { id } = notes.find((t) => t.title === v);
+              setActiveKey(`${id}`);
+              document
+                .getElementById(`scroll_note_${id}`)
+                .scrollIntoView({ behavior: "smooth" });
+            }}
+            className="w-full"
+          />
+        </Col>
+        <Col span={8}>
           <Button
             icon={<IconPlus />}
             block
@@ -31,7 +87,9 @@ export default function NotesOverview(props) {
                 x: 0,
                 y: 0,
                 title: `note_${notes.length}`,
-                content: ""
+                content: "",
+                color: defaultNoteTheme,
+                height: 88,
               };
               setNotes((prev) => [...prev, newNote]);
             }}
@@ -41,7 +99,7 @@ export default function NotesOverview(props) {
         </Col>
       </Row>
       {notes.length <= 0 ? (
-        <div className="select-none mt-2">
+        <div className="select-none">
           <Empty
             image={
               <IllustrationNoContent style={{ width: 160, height: 160 }} />
@@ -54,11 +112,95 @@ export default function NotesOverview(props) {
           />
         </div>
       ) : (
-        <div className="p-2">
+        <Collapse
+          activeKey={activeKey}
+          onChange={(k) => setActiveKey(k)}
+          accordion
+        >
           {notes.map((n, i) => (
-            <div key={n.id}>{n.title}</div>
+            <Collapse.Panel
+              header={<div>{n.title}</div>}
+              itemKey={`${n.id}`}
+              id={`scroll_note_${n.id}`}
+              key={n.id}
+            >
+              <div className="flex justify-between align-top">
+                <TextArea
+                  field="content"
+                  label="Content"
+                  placeholder="Add content"
+                  value={n.content}
+                  autosize
+                  onChange={(value) => {
+                    const textarea = document.getElementById(`note_${n.id}`);
+                    textarea.style.height = "0";
+                    textarea.style.height = textarea.scrollHeight + "px";
+                    const newHeight = textarea.scrollHeight + 16 + 20 + 4;
+                    updateNote(n.id, { height: newHeight, content: value });
+                  }}
+                  rows={3}
+                />
+                <div className="ms-2">
+                  <Popover
+                    content={
+                      <div>
+                        <div className="flex justify-between items-center p-2">
+                          <div className="font-medium">Theme</div>
+                          <Button
+                            type="tertiary"
+                            size="small"
+                            onClick={() =>
+                              updateNote(i, { color: defaultNoteTheme })
+                            }
+                          >
+                            Clear
+                          </Button>
+                        </div>
+                        <hr />
+                        <div className="py-3">
+                          {noteThemes.map((c) => (
+                            <button
+                              key={c}
+                              style={{ backgroundColor: c }}
+                              className="p-3 rounded-full mx-1"
+                              onClick={() => updateNote(i, { color: c })}
+                            >
+                              {n.color === c ? (
+                                <IconCheckboxTick style={{ color: "white" }} />
+                              ) : (
+                                <IconCheckboxTick style={{ color: c }} />
+                              )}
+                            </button>
+                          ))}
+                        </div>
+                      </div>
+                    }
+                    trigger="click"
+                    position="rightTop"
+                    showArrow
+                  >
+                    <div
+                      className="h-[32px] w-[32px] rounded mb-2"
+                      style={{ backgroundColor: n.color }}
+                    />
+                  </Popover>
+                  <Button
+                    icon={<IconDeleteStroked />}
+                    type="danger"
+                    onClick={() => {
+                      Toast.success(`Note deleted!`);
+                      setNotes((prev) =>
+                        prev
+                          .filter((e) => e.id !== i)
+                          .map((e, idx) => ({ ...e, id: idx }))
+                      );
+                    }}
+                  ></Button>
+                </div>
+              </div>
+            </Collapse.Panel>
           ))}
-        </div>
+        </Collapse>
       )}
     </div>
   );

src/components/table_overview.jsx

@@ -17,7 +17,6 @@ import {
 import {
   IconMore,
   IconKeyStroked,
-  IconColorPalette,
   IconDeleteStroked,
   IconCheckboxTick,
   IconPlus,
@@ -495,10 +494,10 @@ export default function TableOverview(props) {
                       position="bottomLeft"
                       showArrow
                     >
-                      <Button
+                      <div
-                        type="tertiary"
+                        className="h-[32px] w-[32px] rounded mb-2"
-                        icon={<IconColorPalette />}
+                        style={{ backgroundColor: t.color }}
-                      ></Button>
+                      />
                     </Popover>
                   </Col>
                   <Col span={7}>

src/data/data.js

@@ -39,7 +39,10 @@ const tableThemes = [
   "#ff9159",
 ];
 
+const noteThemes = ["#ffdfd9", "#ffffc7", "#cffcb1", "#c7d2ff", "#e7c7ff"];
+
 const defaultTableTheme = "#175e7a";
+const defaultNoteTheme = "#fcf7ac";
 const bgBlue = "#124559";
 
 const Cardinality = {
@@ -76,9 +79,11 @@ export {
   bgBlue,
   sqlDataTypes,
   tableThemes,
+  noteThemes,
   defaultTableTheme,
+  defaultNoteTheme,
   Cardinality,
   Constraint,
-  Tab, 
+  Tab,
-  ObjectType
+  ObjectType,
 };