Something went wrong. Try again.
a tool for shared writing and social publishing
Something went wrong. Try again.
6.1 kB · 174 lines
TSX
at perf/paste
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175"use client";
import { ColorPicker as SpectrumColorPicker, parseColor, Color, ColorArea, ColorThumb, ColorSlider, Input, ColorField, SliderTrack, ColorSwatch,} from "react-aria-components";import { pickers } from "../ThemeSetter";import { Separator } from "components/Layout";import { onMouseDown } from "src/utils/iosInputMouseDown";import { useIsMobile } from "src/hooks/isMobile";import { HexKeyboard } from "./HexKeyboard";import { NumPad } from "./NumPad";
export let thumbStyle = "w-4 h-4 rounded-full border-2 border-white shadow-[0_0_0_1px_#8C8C8C,inset_0_0_0_1px_#8C8C8C]";
export const ColorPicker = (props: { label?: string; helpText?: string; value: Color | undefined; alpha?: boolean; image?: boolean; setValue: (c: Color) => void; openPicker: pickers; thisPicker: pickers; setOpenPicker: (thisPicker: pickers) => void; closePicker: () => void; disabled?: boolean; children?: React.ReactNode;}) => { let isMobile = useIsMobile();
return ( <SpectrumColorPicker value={props.value} onChange={props.setValue}> <div className="flex flex-col w-full gap-2"> <div className="colorPickerLabel flex gap-2 items-center "> <button type="button" disabled={props.disabled} className="flex gap-2 items-center disabled:text-tertiary" onClick={() => { if (props.openPicker === props.thisPicker) { props.setOpenPicker("null"); } else { props.setOpenPicker(props.thisPicker); } }} > <ColorSwatch color={props.value} className={`w-6 h-6 rounded-full border-2 border-white shadow-[0_0_0_1px_#8C8C8C] ${props.disabled ? "opacity-50" : ""}`} style={{ backgroundSize: "cover", }} /> <strong className="w-max">{props.label}</strong> </button>
<div className="flex gap-1"> {props.value === undefined ? ( <div>default</div> ) : props.disabled ? ( <div className="text-tertiary italic">hidden</div> ) : isMobile ? ( <HexKeyboard value={props.value} setValue={props.setValue} /> ) : ( <ColorField className="w-fit gap-1"> <Input onMouseDown={onMouseDown} onFocus={(e) => { e.currentTarget.setSelectionRange( 1, e.currentTarget.value.length, ); }} onKeyDown={(e) => { if (e.key === "Enter") { e.currentTarget.blur(); } else return; }} onBlur={(e) => { props.setValue(parseColor(e.currentTarget.value)); }} className="w-[72px] bg-transparent outline-hidden disabled:text-tertiary" /> </ColorField> )} {props.alpha && !props.disabled && ( <> <Separator classname="my-1" /> {isMobile ? ( <NumPad value={props.value} setValue={props.setValue} /> ) : ( <ColorField className={`w-[48px] pl-[6px] ${props.disabled ? "opacity-50" : ""}`} channel="alpha" > <Input disabled={props.disabled} onMouseDown={onMouseDown} onFocus={(e) => { e.currentTarget.setSelectionRange( 0, e.currentTarget.value.length - 1, ); }} onKeyDown={(e) => { if (e.key === "Enter") { e.currentTarget.blur(); } else return; }} className="w-[72px] bg-transparent outline-hidden " /> </ColorField> )} </> )} </div> </div> {props.openPicker === props.thisPicker && ( <div className="w-full flex flex-col gap-2 px-1 pb-2"> { <> {props.helpText && ( <div className="text-sm leading-tight text-tertiary pl-7 -mt-2.5"> {props.helpText} </div> )} <ColorArea className="w-full h-[128px] rounded-md" colorSpace="hsb" xChannel="saturation" yChannel="brightness" > <ColorThumb className={thumbStyle} /> </ColorArea> <ColorSlider colorSpace="hsb" className="w-full" channel="hue"> <SliderTrack className="h-2 w-full rounded-md"> <ColorThumb className={`${thumbStyle} mt-[4px]`} /> </SliderTrack> </ColorSlider> {props.alpha && ( <ColorSlider colorSpace="hsb" className="w-full mt-1 rounded-full" style={{ backgroundImage: `url(/transparent-bg.png)`, backgroundRepeat: "repeat", backgroundSize: "8px", }} channel="alpha" > <SliderTrack className="h-2 w-full rounded-md"> <ColorThumb className={`${thumbStyle} mt-[4px]`} /> </SliderTrack> </ColorSlider> )} {props.children} </> } </div> )} </div> </SpectrumColorPicker> );};