Something went wrong. Try again.
a tool for shared writing and social publishing
Something went wrong. Try again.
5.4 kB · 162 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163"use client";
import { ColorPicker as SpectrumColorPicker, parseColor, Color, ColorArea, ColorThumb, ColorSlider, Input, ColorField, SliderTrack, ColorSwatch,} from "react-aria-components";import { pickers, setColorAttribute } from "../ThemeSetter";import { thumbStyle } from "./ColorPicker";import { ImageInput, ImageSettings } from "./ImagePicker";import { useEntity, useReplicache } from "src/replicache";import { useColorAttribute } from "components/ThemeManager/useColorAttribute";import { Separator } from "components/Layout";import { onMouseDown } from "src/utils/iosInputMouseDown";import { BlockImageSmall } from "components/Icons/BlockImageSmall";import { DeleteSmall } from "components/Icons/DeleteSmall";
export const LeafletBGPicker = (props: { entityID: string; openPicker: pickers; thisPicker: pickers; setOpenPicker: (thisPicker: pickers) => void; closePicker: () => void; setValue: (c: Color) => void;}) => { let bgImage = useEntity(props.entityID, "theme/background-image"); let bgRepeat = useEntity(props.entityID, "theme/background-image-repeat"); let bgColor = useColorAttribute(props.entityID, "theme/page-background"); let open = props.openPicker == props.thisPicker; let { rep } = useReplicache();
return ( <> <div className="bgPickerLabel flex justify-between place-items-center "> <div className="bgPickerColorLabel flex gap-2 items-center"> <button onClick={() => { if (props.openPicker === props.thisPicker) { props.setOpenPicker("null"); } else { props.setOpenPicker(props.thisPicker); } }} className="flex gap-2 items-center" > <ColorSwatch color={bgColor} className={`w-6 h-6 rounded-full border-2 border-white shadow-[0_0_0_1px_#8C8C8C]`} style={{ backgroundImage: bgImage?.data.src ? `url(${bgImage.data.src})` : undefined, backgroundSize: "cover", }} /> <strong className={` "text-[#595959]`}>{"Background"}</strong> </button>
<div className="flex"> {bgImage ? ( <div className={`"text-[#969696]`}>Image</div> ) : ( <> <ColorField className="w-fit gap-1" value={bgColor}> <Input onMouseDown={onMouseDown} onFocus={(e) => { e.currentTarget.setSelectionRange( 1, e.currentTarget.value.length, ); }} onPaste={(e) => { console.log(e); }} 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-nonetext-[#595959]`} /> </ColorField> </> )} </div> </div> <div className="flex gap-1 justify-end grow text-[#969696]"> {bgImage && ( <button onClick={() => { if (bgImage) rep?.mutate.retractFact({ factID: bgImage.id }); if (bgRepeat) rep?.mutate.retractFact({ factID: bgRepeat.id }); }} > <DeleteSmall /> </button> )} <label> <BlockImageSmall /> <div className="hidden"> <ImageInput {...props} onChange={() => { props.setOpenPicker(props.thisPicker); }} /> </div> </label> </div> </div> {open && ( <div className="bgImageAndColorPicker w-full flex flex-col gap-2 "> <SpectrumColorPicker value={bgColor} onChange={setColorAttribute( rep, props.entityID, )("theme/page-background")} > {bgImage ? ( <ImageSettings entityID={props.entityID} setValue={props.setValue} /> ) : ( <> <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> </> )} </SpectrumColorPicker> </div> )} </> );};