Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-03-21 18:04:39 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

ColorPicker use react-color's CirclePicker

Browse Source 
Using native input is too inconsistent. Closes #463
This commit is contained in:
Kalle (Sendou) 2021-05-05 21:11:28 +03:00
parent 3283a43545
commit bbd78c875c
3 changed files with 149 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
components/common/ColorPicker.tsx
View File

@ -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<Props> = ({ color, setColor }) => {
const [colorInternal, setColorInternal] = useState(color);
const ref = useRef<HTMLInputElement>(null);
useEffect(() => {
const timer = setTimeout(() => setColor(colorInternal), 250);
return () => clearTimeout(timer);
}, [colorInternal]);
const { secondaryBgColor } = useMyTheme();
return (
<>
<input
ref={ref}
type="color"
style={{ visibility: "hidden", height: "50px", width: 0 }}
value={color}
onChange={(e) => setColorInternal(e.target.value)}
/>
<Box
w="25px"
h="25px"
borderRadius="50%"
bg={color}
onClick={() => ref.current?.click()}
/>
<Popover>
<PopoverTrigger>
<Box w="25px" h="25px" borderRadius="50%" bg={color} />
</PopoverTrigger>
<PopoverContent width="16.5rem">
<PopoverArrow bg={secondaryBgColor} />
<PopoverBody bg={secondaryBgColor} rounded="lg">
<CirclePicker
width="16.5rem"
color={color}
onChange={({ hex }) => setColor(hex)}
/>
</PopoverBody>
</PopoverContent>
</Popover>
</>
);
};

121
package-lock.json generated
View File

@ -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",

2
package.json
View File

@ -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",