From bbd78c875cb47140ed0a626bb41ec72a97772f1a Mon Sep 17 00:00:00 2001 From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com> Date: Wed, 5 May 2021 21:11:28 +0300 Subject: [PATCH] ColorPicker use react-color's CirclePicker Using native input is too inconsistent. Closes #463 --- components/common/ColorPicker.tsx | 51 +++++++------ package-lock.json | 121 ++++++++++++++++++++++++++++++ package.json | 2 + 3 files changed, 149 insertions(+), 25 deletions(-) diff --git a/components/common/ColorPicker.tsx b/components/common/ColorPicker.tsx index 49203d025..c32fdf706 100644 --- a/components/common/ColorPicker.tsx +++ b/components/common/ColorPicker.tsx @@ -1,5 +1,13 @@ -import { Box } from "@chakra-ui/react"; -import { useEffect, useRef, useState } from "react"; +import { Box } from "@chakra-ui/layout"; +import { + Popover, + PopoverArrow, + PopoverBody, + PopoverContent, + PopoverTrigger, +} from "@chakra-ui/popover"; +import { useMyTheme } from "hooks/common"; +import { CirclePicker } from "react-color"; interface Props { color: string; @@ -7,31 +15,24 @@ interface Props { } const ColorPicker: React.FC = ({ color, setColor }) => { - const [colorInternal, setColorInternal] = useState(color); - const ref = useRef(null); - - useEffect(() => { - const timer = setTimeout(() => setColor(colorInternal), 250); - - return () => clearTimeout(timer); - }, [colorInternal]); - + const { secondaryBgColor } = useMyTheme(); return ( <> - setColorInternal(e.target.value)} - /> - ref.current?.click()} - /> + + + + + + + + setColor(hex)} + /> + + + ); }; diff --git a/package-lock.json b/package-lock.json index 08f1d2ef0..0108c6084 100644 --- a/package-lock.json +++ b/package-lock.json @@ -31,6 +31,7 @@ "next-seo": "^4.24.0", "nprogress": "^0.2.0", "react": "^17.0.2", + "react-color": "^2.19.3", "react-datepicker": "^3.8.0", "react-dom": "^17.0.2", "react-draggable": "^4.4.3", @@ -57,6 +58,7 @@ "@types/node": "^15.0.1", "@types/nprogress": "^0.2.0", "@types/react": "^17.0.3", + "@types/react-color": "^3.0.4", "@types/react-datepicker": "^3.1.8", "@types/react-infinite-scroller": "^1.2.1", "@types/react-select": "^4.0.15", @@ -1562,6 +1564,14 @@ "warning": "^4.0.3" } }, + "node_modules/@icons/material": { + "version": "0.2.4", + "resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz", + "integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/@jest/types": { "version": "26.6.2", "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz", @@ -2161,6 +2171,16 @@ "csstype": "^3.0.2" } }, + "node_modules/@types/react-color": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@types/react-color/-/react-color-3.0.4.tgz", + "integrity": "sha512-EswbYJDF1kkrx93/YU+BbBtb46CCtDMvTiGmcOa/c5PETnwTiSWoseJ1oSWeRl/4rUXkhME9bVURvvPg0W5YQw==", + "dev": true, + "dependencies": { + "@types/react": "*", + "@types/reactcss": "*" + } + }, "node_modules/@types/react-datepicker": { "version": "3.1.8", "resolved": "https://registry.npmjs.org/@types/react-datepicker/-/react-datepicker-3.1.8.tgz", @@ -2211,6 +2231,15 @@ "@types/react": "*" } }, + "node_modules/@types/reactcss": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/@types/reactcss/-/reactcss-1.2.3.tgz", + "integrity": "sha512-d2gQQ0IL6hXLnoRfVYZukQNWHuVsE75DzFTLPUuyyEhJS8G2VvlE+qfQQ91SJjaMqlURRCNIsX7Jcsw6cEuJlA==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/recharts": { "version": "1.8.19", "resolved": "https://registry.npmjs.org/@types/recharts/-/recharts-1.8.19.tgz", @@ -5852,6 +5881,11 @@ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, + "node_modules/lodash-es": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz", + "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==" + }, "node_modules/lodash.camelcase": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz", @@ -6118,6 +6152,11 @@ "remove-accents": "0.4.2" } }, + "node_modules/material-colors": { + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz", + "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==" + }, "node_modules/mathjs": { "version": "9.3.2", "resolved": "https://registry.npmjs.org/mathjs/-/mathjs-9.3.2.tgz", @@ -7708,6 +7747,23 @@ "react": "^15.3.0 || ^16.0.0 || ^17.0.0" } }, + "node_modules/react-color": { + "version": "2.19.3", + "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.19.3.tgz", + "integrity": "sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==", + "dependencies": { + "@icons/material": "^0.2.4", + "lodash": "^4.17.15", + "lodash-es": "^4.17.15", + "material-colors": "^1.2.1", + "prop-types": "^15.5.10", + "reactcss": "^1.2.0", + "tinycolor2": "^1.4.1" + }, + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-datepicker": { "version": "3.8.0", "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-3.8.0.tgz", @@ -8032,6 +8088,14 @@ "prop-types": "^15.6.2" } }, + "node_modules/reactcss": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz", + "integrity": "sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==", + "dependencies": { + "lodash": "^4.0.1" + } + }, "node_modules/readable-stream": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz", @@ -10843,6 +10907,12 @@ "warning": "^4.0.3" } }, + "@icons/material": { + "version": "0.2.4", + "resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz", + "integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==", + "requires": {} + }, "@jest/types": { "version": "26.6.2", "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz", @@ -11331,6 +11401,16 @@ "csstype": "^3.0.2" } }, + "@types/react-color": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@types/react-color/-/react-color-3.0.4.tgz", + "integrity": "sha512-EswbYJDF1kkrx93/YU+BbBtb46CCtDMvTiGmcOa/c5PETnwTiSWoseJ1oSWeRl/4rUXkhME9bVURvvPg0W5YQw==", + "dev": true, + "requires": { + "@types/react": "*", + "@types/reactcss": "*" + } + }, "@types/react-datepicker": { "version": "3.1.8", "resolved": "https://registry.npmjs.org/@types/react-datepicker/-/react-datepicker-3.1.8.tgz", @@ -11381,6 +11461,15 @@ "@types/react": "*" } }, + "@types/reactcss": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/@types/reactcss/-/reactcss-1.2.3.tgz", + "integrity": "sha512-d2gQQ0IL6hXLnoRfVYZukQNWHuVsE75DzFTLPUuyyEhJS8G2VvlE+qfQQ91SJjaMqlURRCNIsX7Jcsw6cEuJlA==", + "dev": true, + "requires": { + "@types/react": "*" + } + }, "@types/recharts": { "version": "1.8.19", "resolved": "https://registry.npmjs.org/@types/recharts/-/recharts-1.8.19.tgz", @@ -14400,6 +14489,11 @@ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, + "lodash-es": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz", + "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==" + }, "lodash.camelcase": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz", @@ -14618,6 +14712,11 @@ "remove-accents": "0.4.2" } }, + "material-colors": { + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz", + "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==" + }, "mathjs": { "version": "9.3.2", "resolved": "https://registry.npmjs.org/mathjs/-/mathjs-9.3.2.tgz", @@ -15890,6 +15989,20 @@ "@babel/runtime": "^7.12.13" } }, + "react-color": { + "version": "2.19.3", + "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.19.3.tgz", + "integrity": "sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==", + "requires": { + "@icons/material": "^0.2.4", + "lodash": "^4.17.15", + "lodash-es": "^4.17.15", + "material-colors": "^1.2.1", + "prop-types": "^15.5.10", + "reactcss": "^1.2.0", + "tinycolor2": "^1.4.1" + } + }, "react-datepicker": { "version": "3.8.0", "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-3.8.0.tgz", @@ -16140,6 +16253,14 @@ "prop-types": "^15.6.2" } }, + "reactcss": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz", + "integrity": "sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==", + "requires": { + "lodash": "^4.0.1" + } + }, "readable-stream": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz", diff --git a/package.json b/package.json index d38ec2d6d..194e5d957 100644 --- a/package.json +++ b/package.json @@ -50,6 +50,7 @@ "next-seo": "^4.24.0", "nprogress": "^0.2.0", "react": "^17.0.2", + "react-color": "^2.19.3", "react-datepicker": "^3.8.0", "react-dom": "^17.0.2", "react-draggable": "^4.4.3", @@ -76,6 +77,7 @@ "@types/node": "^15.0.1", "@types/nprogress": "^0.2.0", "@types/react": "^17.0.3", + "@types/react-color": "^3.0.4", "@types/react-datepicker": "^3.1.8", "@types/react-infinite-scroller": "^1.2.1", "@types/react-select": "^4.0.15",