-
Notifications
You must be signed in to change notification settings - Fork 46
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
#464 Change layer params, vector-conf, colorpickers, start tools tab
- Loading branch information
1 parent
15b6cad
commit 703d1d0
Showing
15 changed files
with
910 additions
and
101 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| import React, { useCallback, useRef, useState } from "react"; | ||
| import { ChromePicker } from "react-color"; | ||
|
|
||
| import useClickOutside from "./useClickOutside"; | ||
|
|
||
| import { makeStyles } from "@mui/styles"; | ||
|
|
||
| const useStyles = makeStyles((theme) => ({ | ||
| ColorButton: { | ||
| width: "100%", | ||
| height: "100%", | ||
| }, | ||
| item: { | ||
| width: "100%", | ||
| height: "100%", | ||
| display: "flex", | ||
| }, | ||
| swatch: { | ||
| width: "30px", | ||
| height: "30px", | ||
| margin: "10px", | ||
| border: `1px solid black`, | ||
| borderRadius: "3px", | ||
| boxShadow: "0px 2px 5px 0px rgba(0,0,0,0.2)", | ||
| }, | ||
| label: { | ||
| flex: 1, | ||
| lineHeight: "40px", | ||
| margin: "5px", | ||
| }, | ||
| popover: { | ||
| height: 0, | ||
| zIndex: 999, | ||
| position: "relative", | ||
| "& > div": { | ||
| fontFamily: "Roboto !important", | ||
| }, | ||
| }, | ||
| })); | ||
|
|
||
| const ColorButton = ({ label, color, onChange }) => { | ||
| const popover = useRef(); | ||
| const [isOpen, toggle] = useState(false); | ||
|
|
||
| const c = useStyles(); | ||
|
|
||
| const close = useCallback(() => { | ||
| toggle(false); | ||
| }, []); | ||
| useClickOutside(popover, close); | ||
|
|
||
| let timeout = null; | ||
|
|
||
| return ( | ||
| <div className={c.ColorButton}> | ||
| <div className={c.item}> | ||
| <div | ||
| className={c.swatch} | ||
| style={{ backgroundColor: color }} | ||
| onClick={() => toggle(true)} | ||
| /> | ||
| <div className={c.label}>{label}</div> | ||
| </div> | ||
| {isOpen && ( | ||
| <div className={c.popover} ref={popover}> | ||
| <ChromePicker | ||
| color={color} | ||
| onChangeComplete={(c) => { | ||
| clearTimeout(timeout); | ||
| timeout = setTimeout(() => { | ||
| onChange(c); | ||
| }, 50); | ||
| }} | ||
| /> | ||
| </div> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default ColorButton; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import { useEffect } from "react"; | ||
|
|
||
| // Improved version of https://usehooks.com/useOnClickOutside/ | ||
| const useClickOutside = (ref, handler) => { | ||
| useEffect(() => { | ||
| let startedInside = false; | ||
| let startedWhenMounted = false; | ||
|
|
||
| const listener = (event) => { | ||
| // Do nothing if `mousedown` or `touchstart` started inside ref element | ||
| if (startedInside || !startedWhenMounted) return; | ||
| // Do nothing if clicking ref's element or descendent elements | ||
| if (!ref.current || ref.current.contains(event.target)) return; | ||
|
|
||
| handler(event); | ||
| }; | ||
|
|
||
| const validateEventStart = (event) => { | ||
| startedWhenMounted = ref.current; | ||
| startedInside = ref.current && ref.current.contains(event.target); | ||
| }; | ||
|
|
||
| document.addEventListener("mousedown", validateEventStart); | ||
| document.addEventListener("touchstart", validateEventStart); | ||
| document.addEventListener("click", listener); | ||
|
|
||
| return () => { | ||
| document.removeEventListener("mousedown", validateEventStart); | ||
| document.removeEventListener("touchstart", validateEventStart); | ||
| document.removeEventListener("click", listener); | ||
| }; | ||
| }, [ref, handler]); | ||
| }; | ||
|
|
||
| export default useClickOutside; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.