sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Async loading of TwitterPicker (#246)

Browse Source
This commit is contained in:
Timur Khazamov 2020-01-07 23:37:22 +05:00 committed by Christopher Chedeau
parent 2d66616e3f
commit 2f9aa0e3ca
1 changed files with 33 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/components/ColorPicker.tsx
View File

@ -1,7 +1,12 @@
import React from "react"; import React, { lazy } from "react";
import { TwitterPicker } from "react-color";
import { Popover } from "./Popover"; import { Popover } from "./Popover";
const TwitterPicker = lazy(() =>
import(
/* webpackPrefetch: true */ "react-color/lib/components/twitter/Twitter"
)
);
export function ColorPicker({ export function ColorPicker({
color, color,
onChange onChange
@ -17,30 +22,32 @@ export function ColorPicker({
style={color ? { backgroundColor: color } : undefined} style={color ? { backgroundColor: color } : undefined}
onClick={() => setActive(!isActive)} onClick={() => setActive(!isActive)}
/> />
{isActive ? ( <React.Suspense fallback="">
<Popover onCloseRequest={() => setActive(false)}> {isActive ? (
<TwitterPicker <Popover onCloseRequest={() => setActive(false)}>
colors={[ <TwitterPicker
"#000000", colors={[
"#ABB8C3", "#000000",
"#FFFFFF", "#ABB8C3",
"#FF6900", "#FFFFFF",
"#FCB900", "#FF6900",
"#00D084", "#FCB900",
"#8ED1FC", "#00D084",
"#0693E3", "#8ED1FC",
"#EB144C", "#0693E3",
"#F78DA7", "#EB144C",
"#9900EF" "#F78DA7",
]} "#9900EF"
width="205px" ]}
color={color || undefined} width="205px"
onChange={changedColor => { color={color || undefined}
onChange(changedColor.hex); onChange={changedColor => {
}} onChange(changedColor.hex);
/> }}
</Popover> />
) : null} </Popover>
) : null}
</React.Suspense>
<input <input
type="text" type="text"
className="swatch-input" className="swatch-input"