Replace colorpalette with colorpicker (#392)

package.json

@@ -13,7 +13,7 @@
     "@codemirror/lang-json": "^6.0.1",
     "@codemirror/lang-sql": "^6.6.3",
     "@dbml/core": "^3.9.7-alpha.0",
-    "@douyinfe/semi-ui": "^2.51.3",
+    "@douyinfe/semi-ui": "^2.77.1",
     "@lexical/react": "^0.12.5",
     "@uiw/codemirror-theme-github": "^4.21.25",
     "@uiw/codemirror-theme-vscode": "^4.21.25",

src/components/ColorPicker.jsx

@@ -1,42 +0,0 @@
-import { Button } from "@douyinfe/semi-ui";
-import { IconCheckboxTick } from "@douyinfe/semi-icons";
-import { tableThemes } from "../data/constants";
-import { useTranslation } from "react-i18next";
-
-export default function ColorPalette({
-  currentColor,
-  onClearColor,
-  onPickColor,
-}) {
-  const { t } = useTranslation();
-  return (
-    <div>
-      <div className="flex justify-between items-center p-2">
-        <div className="font-medium">{t("theme")}</div>
-        <Button type="tertiary" size="small" onClick={onClearColor}>
-          {t("clear")}
-        </Button>
-      </div>
-      <hr />
-      <div className="py-3 space-y-3">
-        <div className="flex flex-wrap w-72 gap-y-2">
-          {tableThemes.map((c) => (
-            <button
-              key={c}
-              style={{ backgroundColor: c }}
-              className="w-10 h-10 rounded-full mx-1"
-              onClick={() => onPickColor(c)}
-            >
-              <IconCheckboxTick
-                className="pt-1"
-                style={{
-                  color: currentColor === c ? "white" : c,
-                }}
-              />
-            </button>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}

src/components/EditorCanvas/Area.jsx

@@ -1,13 +1,7 @@
 import { useRef, useState } from "react";
-import { Button, Popover, Input } from "@douyinfe/semi-ui";
+import { Button, Popover, Input, ColorPicker } from "@douyinfe/semi-ui";
 import { IconEdit, IconDeleteStroked } from "@douyinfe/semi-icons";
-import {
+import { Tab, Action, ObjectType, State } from "../../data/constants";
-  Tab,
-  Action,
-  ObjectType,
-  defaultBlue,
-  State,
-} from "../../data/constants";
 import {
   useCanvas,
   useLayout,
@@ -17,7 +11,6 @@ import {
   useAreas,
   useSaveState,
 } from "../../hooks";
-import ColorPalette from "../ColorPicker";
 import { useTranslation } from "react-i18next";
 import { useHover } from "usehooks-ts";
 
@@ -193,7 +186,6 @@ export default function Area({
 
 function EditPopoverContent({ data }) {
   const [editField, setEditField] = useState({});
-  const { setSaveState } = useSaveState();
   const { updateArea, deleteArea } = useAreas();
   const { setUndoStack, setRedoStack } = useUndoRedo();
   const { t } = useTranslation();
@@ -227,12 +219,8 @@ function EditPopoverContent({ data }) {
             setRedoStack([]);
           }}
         />
-        <Popover
+        <ColorPicker
-          content={
+          onChange={({ hex: color }) => {
-            <div className="popover-theme">
-              <ColorPalette
-                currentColor={data.color}
-                onPickColor={(c) => {
             setUndoStack((prev) => [
               ...prev,
               {
@@ -240,7 +228,7 @@ function EditPopoverContent({ data }) {
                 element: ObjectType.AREA,
                 aid: data.id,
                 undo: { color: data.color },
-                      redo: { color: c },
+                redo: { color },
                 message: t("edit_area", {
                   areaName: data.name,
                   extra: "[color]",
@@ -248,28 +236,12 @@ function EditPopoverContent({ data }) {
               },
             ]);
             setRedoStack([]);
-                  updateArea(data.id, {
+            updateArea(data.id, { color });
-                    color: c,
-                  });
-                }}
-                onClearColor={() => {
-                  updateArea(data.id, {
-                    color: defaultBlue,
-                  });
-                  setSaveState(State.SAVING);
           }}
+          usePopover={true}
+          value={ColorPicker.colorStringToValue(data.color)}
         />
       </div>
-          }
-          position="rightTop"
-          showArrow
-        >
-          <div
-            className="h-[32px] w-[32px] rounded-sm"
-            style={{ backgroundColor: data.color }}
-          />
-        </Popover>
-      </div>
       <div className="flex">
         <Button
           icon={<IconDeleteStroked />}

src/components/EditorCanvas/Note.jsx

@@ -1,17 +1,7 @@
 import { useState } from "react";
-import {
+import { Action, ObjectType, Tab, State } from "../../data/constants";
-  Action,
+import { Input, Button, Popover, ColorPicker } from "@douyinfe/semi-ui";
-  ObjectType,
+import { IconEdit, IconDeleteStroked } from "@douyinfe/semi-icons";
-  Tab,
-  State,
-  noteThemes,
-} from "../../data/constants";
-import { Input, Button, Popover } from "@douyinfe/semi-ui";
-import {
-  IconEdit,
-  IconDeleteStroked,
-  IconCheckboxTick,
-} from "@douyinfe/semi-icons";
 import {
   useLayout,
   useUndoRedo,
@@ -209,20 +199,8 @@ export default function Note({ data, onPointerDown }) {
                             setRedoStack([]);
                           }}
                         />
-                        <Popover
+                        <ColorPicker
-                          content={
+                          onChange={({ hex: color }) => {
-                            <div className="popover-theme">
-                              <div className="font-medium mb-1">
-                                {t("theme")}
-                              </div>
-                              <hr />
-                              <div className="py-3">
-                                {noteThemes.map((c) => (
-                                  <button
-                                    key={c}
-                                    style={{ backgroundColor: c }}
-                                    className="p-3 rounded-full mx-1"
-                                    onClick={() => {
                             setUndoStack((prev) => [
                               ...prev,
                               {
@@ -230,7 +208,7 @@ export default function Note({ data, onPointerDown }) {
                                 element: ObjectType.NOTE,
                                 nid: data.id,
                                 undo: { color: data.color },
-                                          redo: { color: c },
+                                redo: { color },
                                 message: t("edit_note", {
                                   noteTitle: data.title,
                                   extra: "[color]",
@@ -238,29 +216,16 @@ export default function Note({ data, onPointerDown }) {
                               },
                             ]);
                             setRedoStack([]);
-                                      updateNote(data.id, { color: c });
+                            updateNote(data.id, { color });
                           }}
-                                  >
+                          usePopover={true}
-                                    {data.color === c ? (
+                          value={ColorPicker.colorStringToValue(data.color)}
-                                      <IconCheckboxTick
-                                        style={{ color: "white" }}
-                                      />
-                                    ) : (
-                                      <IconCheckboxTick style={{ color: c }} />
-                                    )}
-                                  </button>
-                                ))}
-                              </div>
-                            </div>
-                          }
-                          position="rightTop"
-                          showArrow
                         >
                           <div
                             className="h-[32px] w-[32px] rounded-sm"
                             style={{ backgroundColor: data.color }}
                           />
-                        </Popover>
+                        </ColorPicker>
                       </div>
                       <div className="flex">
                         <Button

src/components/EditorSidePanel/AreasTab/AreaDetails.jsx

@@ -1,33 +1,18 @@
 import { useState } from "react";
-import { Row, Col, Button, Input, Popover } from "@douyinfe/semi-ui";
+import { Button, Input, ColorPicker } from "@douyinfe/semi-ui";
 import { IconDeleteStroked } from "@douyinfe/semi-icons";
-import { useAreas, useSaveState, useUndoRedo } from "../../../hooks";
+import { useAreas, useUndoRedo } from "../../../hooks";
-import {
+import { Action, ObjectType } from "../../../data/constants";
-  Action,
-  ObjectType,
-  State,
-  defaultBlue,
-} from "../../../data/constants";
-import ColorPalette from "../../ColorPicker";
 import { useTranslation } from "react-i18next";
 
 export default function AreaInfo({ data, i }) {
   const { t } = useTranslation();
-  const { setSaveState } = useSaveState();
   const { deleteArea, updateArea } = useAreas();
   const { setUndoStack, setRedoStack } = useUndoRedo();
   const [editField, setEditField] = useState({});
 
   return (
-    <Row
+    <div id={`scroll_area_${data.id}`} className="my-3 flex gap-2 items-center">
-      gutter={6}
-      type="flex"
-      justify="start"
-      align="middle"
-      id={`scroll_area_${data.id}`}
-      className="my-3"
-    >
-      <Col span={18}>
       <Input
         value={data.name}
         placeholder={t("name")}
@@ -52,18 +37,8 @@ export default function AreaInfo({ data, i }) {
           setRedoStack([]);
         }}
       />
-      </Col>
+      <ColorPicker
-      <Col span={3}>
+        onChange={({ hex: color }) => {
-        <Popover
-          content={
-            <div className="popover-theme">
-              <ColorPalette
-                currentColor={data.color}
-                onClearColor={() => {
-                  updateArea(i, { color: defaultBlue });
-                  setSaveState(State.SAVING);
-                }}
-                onPickColor={(c) => {
           setUndoStack((prev) => [
             ...prev,
             {
@@ -71,7 +46,7 @@ export default function AreaInfo({ data, i }) {
               element: ObjectType.AREA,
               aid: i,
               undo: { color: data.color },
-                      redo: { color: c },
+              redo: { color },
               message: t("edit_area", {
                 areaName: data.name,
                 extra: "[color]",
@@ -79,28 +54,21 @@ export default function AreaInfo({ data, i }) {
             },
           ]);
           setRedoStack([]);
-                  updateArea(i, { color: c });
+          updateArea(i, { color });
         }}
-              />
+        usePopover={true}
-            </div>
+        value={ColorPicker.colorStringToValue(data.color)}
-          }
-          trigger="click"
-          position="bottomLeft"
-          showArrow
       >
         <div
-            className="h-[32px] w-[32px] rounded-sm"
+          className="h-[32px] w-[32px] rounded-sm shrink-0"
           style={{ backgroundColor: data.color }}
         />
-        </Popover>
+      </ColorPicker>
-      </Col>
-      <Col span={3}>
       <Button
         icon={<IconDeleteStroked />}
         type="danger"
         onClick={() => deleteArea(i, true)}
       />
-      </Col>
+    </div>
-    </Row>
   );
 }

src/components/EditorSidePanel/NotesTab/NoteInfo.jsx

@@ -1,7 +1,13 @@
 import { useState } from "react";
-import { Button, Collapse, TextArea, Popover, Input } from "@douyinfe/semi-ui";
+import {
-import { IconDeleteStroked, IconCheckboxTick } from "@douyinfe/semi-icons";
+  Button,
-import { noteThemes, Action, ObjectType } from "../../../data/constants";
+  Collapse,
+  TextArea,
+  Input,
+  ColorPicker,
+} from "@douyinfe/semi-ui";
+import { IconDeleteStroked } from "@douyinfe/semi-icons";
+import { Action, ObjectType } from "../../../data/constants";
 import { useNotes, useUndoRedo } from "../../../hooks";
 import { useTranslation } from "react-i18next";
 
@@ -88,18 +94,8 @@ export default function NoteInfo({ data, nid }) {
           rows={3}
         />
         <div className="ms-2">
-          <Popover
+          <ColorPicker
-            content={
+            onChange={({ hex: color }) => {
-              <div className="popover-theme">
-                <div className="font-medium mb-1">{t("theme")}</div>
-                <hr />
-                <div className="py-3">
-                  {noteThemes.map((c) => (
-                    <button
-                      key={c}
-                      style={{ backgroundColor: c }}
-                      className="w-10 h-10 p-3 rounded-full mx-1"
-                      onClick={() => {
               setUndoStack((prev) => [
                 ...prev,
                 {
@@ -107,7 +103,7 @@ export default function NoteInfo({ data, nid }) {
                   element: ObjectType.NOTE,
                   nid: nid,
                   undo: { color: data.color },
-                            redo: { color: c },
+                  redo: { color },
                   message: t("edit_note", {
                     noteTitle: data.title,
                     extra: "[color]",
@@ -115,28 +111,16 @@ export default function NoteInfo({ data, nid }) {
                 },
               ]);
               setRedoStack([]);
-                        updateNote(nid, { color: c });
+              updateNote(nid, { color });
             }}
-                    >
+            usePopover={true}
-                      {data.color === c ? (
+            value={ColorPicker.colorStringToValue(data.color)}
-                        <IconCheckboxTick style={{ color: "white" }} />
-                      ) : (
-                        <IconCheckboxTick style={{ color: c }} />
-                      )}
-                    </button>
-                  ))}
-                </div>
-              </div>
-            }
-            trigger="click"
-            position="rightTop"
-            showArrow
           >
             <div
-              className="h-[32px] w-[32px] rounded-sm mb-2"
+              className="h-[32px] w-[32px] rounded-sm shrink-0 mb-2"
               style={{ backgroundColor: data.color }}
             />
-          </Popover>
+          </ColorPicker>
           <Button
             icon={<IconDeleteStroked />}
             type="danger"

src/components/EditorSidePanel/TablesTab/TableInfo.jsx

@@ -5,12 +5,11 @@ import {
   TextArea,
   Button,
   Card,
-  Popover,
+  ColorPicker,
 } from "@douyinfe/semi-ui";
 import { IconDeleteStroked } from "@douyinfe/semi-icons";
 import { useDiagram, useUndoRedo } from "../../../hooks";
-import { Action, ObjectType, defaultBlue } from "../../../data/constants";
+import { Action, ObjectType } from "../../../data/constants";
-import ColorPalette from "../../ColorPicker";
 import TableField from "./TableField";
 import IndexDetails from "./IndexDetails";
 import { useTranslation } from "react-i18next";
@@ -223,13 +222,8 @@ export default function TableInfo({ data }) {
         </Collapse>
       </Card>
       <div className="flex justify-between items-center gap-1 mb-2">
-        <div>
+        <ColorPicker
-          <Popover
+          onChange={({ hex: color }) => {
-            content={
-              <div className="popover-theme">
-                <ColorPalette
-                  currentColor={data.color}
-                  onClearColor={() => {
             setUndoStack((prev) => [
               ...prev,
               {
@@ -238,7 +232,7 @@ export default function TableInfo({ data }) {
                 component: "self",
                 tid: data.id,
                 undo: { color: data.color },
-                        redo: { color: defaultBlue },
+                redo: { color },
                 message: t("edit_table", {
                   tableName: data.name,
                   extra: "[color]",
@@ -246,40 +240,11 @@ export default function TableInfo({ data }) {
               },
             ]);
             setRedoStack([]);
-                    updateTable(data.id, { color: defaultBlue });
+            updateTable(data.id, { color });
-                  }}
-                  onPickColor={(c) => {
-                    setUndoStack((prev) => [
-                      ...prev,
-                      {
-                        action: Action.EDIT,
-                        element: ObjectType.TABLE,
-                        component: "self",
-                        tid: data.id,
-                        undo: { color: data.color },
-                        redo: { color: c },
-                        message: t("edit_table", {
-                          tableName: data.name,
-                          extra: "[color]",
-                        }),
-                      },
-                    ]);
-                    setRedoStack([]);
-                    updateTable(data.id, { color: c });
           }}
+          usePopover={true}
+          value={ColorPicker.colorStringToValue(data.color)}
         />
-              </div>
-            }
-            trigger="click"
-            position="bottomLeft"
-            showArrow
-          >
-            <div
-              className="h-[32px] w-[32px] rounded-sm"
-              style={{ backgroundColor: data.color }}
-            />
-          </Popover>
-        </div>
         <div className="flex gap-1">
           <Button
             block

src/data/constants.js

@@ -1,26 +1,3 @@
-export const tableThemes = [
-  "#f03c3c",
-  "#ff4f81",
-  "#bc49c4",
-  "#a751e8",
-  "#7c4af0",
-  "#6360f7",
-  "#7d9dff",
-  "#32c9b0",
-  "#3cde7d",
-  "#89e667",
-  "#ffe159",
-  "#ff9159",
-];
-
-export const noteThemes = [
-  "#ffdfd9",
-  "#fcf7ac",
-  "#cffcb1",
-  "#c7d2ff",
-  "#e7c7ff",
-];
-
 export const defaultBlue = "#175e7a";
 export const defaultNoteTheme = "#fcf7ac";
 export const darkBgTheme = "#16161A";