Skip to content

Commit 46e9106

Browse files
1ilit1ilit
authored
Replace colorpalette with colorpicker (#392)
1 parent 3a8bb3f commit 46e9106

File tree

9 files changed

+2220
-462
lines changed

9 files changed

+2220
-462
lines changed

‎package-lock.json

+2,053-84
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
"@codemirror/lang-json": "^6.0.1",
1414
"@codemirror/lang-sql": "^6.6.3",
1515
"@dbml/core": "^3.9.7-alpha.0",
16-
"@douyinfe/semi-ui": "^2.51.3",
16+
"@douyinfe/semi-ui": "^2.77.1",
1717
"@lexical/react": "^0.12.5",
1818
"@uiw/codemirror-theme-github": "^4.21.25",
1919
"@uiw/codemirror-theme-vscode": "^4.21.25",

‎src/components/ColorPicker.jsx

-42
This file was deleted.

‎src/components/EditorCanvas/Area.jsx

+24-52
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,7 @@
11
import { useRef, useState } from "react";
2-
import { Button, Popover, Input } from "@douyinfe/semi-ui";
2+
import { Button, Popover, Input, ColorPicker } from "@douyinfe/semi-ui";
33
import { IconEdit, IconDeleteStroked } from "@douyinfe/semi-icons";
4-
import {
5-
Tab,
6-
Action,
7-
ObjectType,
8-
defaultBlue,
9-
State,
10-
} from "../../data/constants";
4+
import { Tab, Action, ObjectType, State } from "../../data/constants";
115
import {
126
useCanvas,
137
useLayout,
@@ -17,7 +11,6 @@ import {
1711
useAreas,
1812
useSaveState,
1913
} from "../../hooks";
20-
import ColorPalette from "../ColorPicker";
2114
import { useTranslation } from "react-i18next";
2215
import { useHover } from "usehooks-ts";
2316

@@ -193,7 +186,6 @@ export default function Area({
193186

194187
function EditPopoverContent({ data }) {
195188
const [editField, setEditField] = useState({});
196-
const { setSaveState } = useSaveState();
197189
const { updateArea, deleteArea } = useAreas();
198190
const { setUndoStack, setRedoStack } = useUndoRedo();
199191
const { t } = useTranslation();
@@ -227,48 +219,28 @@ function EditPopoverContent({ data }) {
227219
setRedoStack([]);
228220
}}
229221
/>
230-
<Popover
231-
content={
232-
<div className="popover-theme">
233-
<ColorPalette
234-
currentColor={data.color}
235-
onPickColor={(c) => {
236-
setUndoStack((prev) => [
237-
...prev,
238-
{
239-
action: Action.EDIT,
240-
element: ObjectType.AREA,
241-
aid: data.id,
242-
undo: { color: data.color },
243-
redo: { color: c },
244-
message: t("edit_area", {
245-
areaName: data.name,
246-
extra: "[color]",
247-
}),
248-
},
249-
]);
250-
setRedoStack([]);
251-
updateArea(data.id, {
252-
color: c,
253-
});
254-
}}
255-
onClearColor={() => {
256-
updateArea(data.id, {
257-
color: defaultBlue,
258-
});
259-
setSaveState(State.SAVING);
260-
}}
261-
/>
262-
</div>
263-
}
264-
position="rightTop"
265-
showArrow
266-
>
267-
<div
268-
className="h-[32px] w-[32px] rounded-sm"
269-
style={{ backgroundColor: data.color }}
270-
/>
271-
</Popover>
222+
<ColorPicker
223+
onChange={({ hex: color }) => {
224+
setUndoStack((prev) => [
225+
...prev,
226+
{
227+
action: Action.EDIT,
228+
element: ObjectType.AREA,
229+
aid: data.id,
230+
undo: { color: data.color },
231+
redo: { color },
232+
message: t("edit_area", {
233+
areaName: data.name,
234+
extra: "[color]",
235+
}),
236+
},
237+
]);
238+
setRedoStack([]);
239+
updateArea(data.id, { color });
240+
}}
241+
usePopover={true}
242+
value={ColorPicker.colorStringToValue(data.color)}
243+
/>
272244
</div>
273245
<div className="flex">
274246
<Button

‎src/components/EditorCanvas/Note.jsx

+25-60
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,7 @@
11
import { useState } from "react";
2-
import {
3-
Action,
4-
ObjectType,
5-
Tab,
6-
State,
7-
noteThemes,
8-
} from "../../data/constants";
9-
import { Input, Button, Popover } from "@douyinfe/semi-ui";
10-
import {
11-
IconEdit,
12-
IconDeleteStroked,
13-
IconCheckboxTick,
14-
} from "@douyinfe/semi-icons";
2+
import { Action, ObjectType, Tab, State } from "../../data/constants";
3+
import { Input, Button, Popover, ColorPicker } from "@douyinfe/semi-ui";
4+
import { IconEdit, IconDeleteStroked } from "@douyinfe/semi-icons";
155
import {
166
useLayout,
177
useUndoRedo,
@@ -209,58 +199,33 @@ export default function Note({ data, onPointerDown }) {
209199
setRedoStack([]);
210200
}}
211201
/>
212-
<Popover
213-
content={
214-
<div className="popover-theme">
215-
<div className="font-medium mb-1">
216-
{t("theme")}
217-
</div>
218-
<hr />
219-
<div className="py-3">
220-
{noteThemes.map((c) => (
221-
<button
222-
key={c}
223-
style={{ backgroundColor: c }}
224-
className="p-3 rounded-full mx-1"
225-
onClick={() => {
226-
setUndoStack((prev) => [
227-
...prev,
228-
{
229-
action: Action.EDIT,
230-
element: ObjectType.NOTE,
231-
nid: data.id,
232-
undo: { color: data.color },
233-
redo: { color: c },
234-
message: t("edit_note", {
235-
noteTitle: data.title,
236-
extra: "[color]",
237-
}),
238-
},
239-
]);
240-
setRedoStack([]);
241-
updateNote(data.id, { color: c });
242-
}}
243-
>
244-
{data.color === c ? (
245-
<IconCheckboxTick
246-
style={{ color: "white" }}
247-
/>
248-
) : (
249-
<IconCheckboxTick style={{ color: c }} />
250-
)}
251-
</button>
252-
))}
253-
</div>
254-
</div>
255-
}
256-
position="rightTop"
257-
showArrow
202+
<ColorPicker
203+
onChange={({ hex: color }) => {
204+
setUndoStack((prev) => [
205+
...prev,
206+
{
207+
action: Action.EDIT,
208+
element: ObjectType.NOTE,
209+
nid: data.id,
210+
undo: { color: data.color },
211+
redo: { color },
212+
message: t("edit_note", {
213+
noteTitle: data.title,
214+
extra: "[color]",
215+
}),
216+
},
217+
]);
218+
setRedoStack([]);
219+
updateNote(data.id, { color });
220+
}}
221+
usePopover={true}
222+
value={ColorPicker.colorStringToValue(data.color)}
258223
>
259224
<div
260225
className="h-[32px] w-[32px] rounded-sm"
261226
style={{ backgroundColor: data.color }}
262227
/>
263-
</Popover>
228+
</ColorPicker>
264229
</div>
265230
<div className="flex">
266231
<Button

0 commit comments

Comments
 (0)