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