SQuiz/frontPanel
2
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

replace native colorpicker with custom

Browse Source
This commit is contained in:
nflnkr 2024-06-03 17:20:27 +03:00
parent 84c69d4ddb
commit c8f33e8e69
3 changed files with 43 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -40,6 +40,7 @@
"notistack": "^3.0.1", "notistack": "^3.0.1",
"react": "^18.2.0", "react": "^18.2.0",
"react-beautiful-dnd": "^13.1.1", "react-beautiful-dnd": "^13.1.1",
"react-colorful": "^5.6.1",
"react-cytoscapejs": "^2.0.0", "react-cytoscapejs": "^2.0.0",
"react-dnd": "^16.0.1", "react-dnd": "^16.0.1",
"react-dnd-html5-backend": "^16.0.1", "react-dnd-html5-backend": "^16.0.1",

65
src/ui_kit/CircleColorPicker.tsx
View File

@ -1,5 +1,6 @@
import { ButtonBase } from "@mui/material"; import { ButtonBase, Popover } from "@mui/material";
import { startTransition, useRef } from "react"; import { startTransition, useState } from "react";
import { HexAlphaColorPicker } from "react-colorful";
interface Props { interface Props {
color: string; color: string;
@ -7,35 +8,43 @@ interface Props {
} }
export default function CircleColorPicker({ color, onChange }: Props) { export default function CircleColorPicker({ color, onChange }: Props) {
const inputRef = useRef<HTMLInputElement>(null); const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
return ( return (
<ButtonBase <>
onClick={() => inputRef.current?.click()} <ButtonBase
sx={{ onClick={(event) => setAnchorEl(event.currentTarget)}
aspectRatio: 1, sx={{
height: "22px", aspectRatio: 1,
width: "22px", height: "22px",
minWidth: "22px", width: "22px",
borderRadius: "50%", minWidth: "22px",
backgroundColor: color, borderRadius: "50%",
border: "1px solid #4D4D4D", backgroundColor: color,
}} border: "1px solid #4D4D4D",
>
<input
ref={inputRef}
type="color"
value={color}
onChange={(e) => {
startTransition(() => {
onChange(e.target.value);
});
}}
style={{
opacity: 0,
cursor: "pointer",
}} }}
/> />
</ButtonBase> <Popover
open={Boolean(anchorEl)}
anchorEl={anchorEl}
onClose={() => setAnchorEl(null)}
anchorOrigin={{
vertical: "bottom",
horizontal: "right",
}}
slotProps={{
paper: {
sx: {
p: "20px",
},
style: {
backgroundColor: color,
},
},
}}
>
<HexAlphaColorPicker color={color} onChange={(color) => startTransition(() => onChange(color))} />
</Popover>
</>
); );
} }

5
yarn.lock
View File

@ -9486,6 +9486,11 @@ react-beautiful-dnd@^13.1.1:
redux "^4.0.4" redux "^4.0.4"
use-memo-one "^1.1.1" use-memo-one "^1.1.1"
react-colorful@^5.6.1:
version "5.6.1"
resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.6.1.tgz#7dc2aed2d7c72fac89694e834d179e32f3da563b"
integrity sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==
react-cytoscapejs@^2.0.0: react-cytoscapejs@^2.0.0:
version "2.0.0" version "2.0.0"
resolved "https://registry.yarnpkg.com/react-cytoscapejs/-/react-cytoscapejs-2.0.0.tgz#fdc2547626df0678acfbb48e73a437ddc1687b01" resolved "https://registry.yarnpkg.com/react-cytoscapejs/-/react-cytoscapejs-2.0.0.tgz#fdc2547626df0678acfbb48e73a437ddc1687b01"