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

11
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,6 +22,7 @@ export function ColorPicker({
style={color ? { backgroundColor: color } : undefined} style={color ? { backgroundColor: color } : undefined}
onClick={() => setActive(!isActive)} onClick={() => setActive(!isActive)}
/> />
<React.Suspense fallback="">
{isActive ? ( {isActive ? (
<Popover onCloseRequest={() => setActive(false)}> <Popover onCloseRequest={() => setActive(false)}>
<TwitterPicker <TwitterPicker
@ -41,6 +47,7 @@ export function ColorPicker({
/> />
</Popover> </Popover>
) : null} ) : null}
</React.Suspense>
<input <input
type="text" type="text"
className="swatch-input" className="swatch-input"