cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-21 06:59:09 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

refactor: event editor color picker (#1400)

Browse Source 
* refactor: event editor color picker

* refactor: throttle and debounce function signature
This commit is contained in:
Shobhit Nagpal
2024-12-27 15:27:48 +05:30
committed by GitHub
parent 7f39d035fd
commit 6bbf8ce795
8 changed files with 111 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/common/components/input/popover-picker/PopoverPicker.tsx
+9 -3
View File
@@ -1,4 +1,5 @@
import { HexAlphaColorPicker } from 'react-colorful';
import { ReactNode } from 'react';
import { HexAlphaColorPicker, HexColorInput } from 'react-colorful';
import { useController, UseControllerProps } from 'react-hook-form';
import { Popover, PopoverContent, PopoverTrigger } from '@chakra-ui/react';
import { ViewSettings } from 'ontime-types';
@@ -16,19 +17,24 @@ export function PopoverPickerRHF(props: UseControllerProps<ViewSettings>) {
interface PopoverPickerProps {
color: string;
icon?: ReactNode;
hasInput?: boolean;
onChange: (color: string) => void;
}
export default function PopoverPicker(props: PopoverPickerProps) {
const { color, onChange } = props;
const { color, icon, hasInput, onChange } = props;
return (
<Popover>
<PopoverTrigger>
<div className={style.swatch} style={{ backgroundColor: color }} />
<div className={style.swatch} style={{ backgroundColor: color }}>
{icon ?? null}
</div>
</PopoverTrigger>
<PopoverContent style={{ width: 'auto' }}>
<HexAlphaColorPicker color={color} onChange={onChange} />
{hasInput && <HexColorInput color={color} onChange={onChange} className={style.input} prefixed />}
</PopoverContent>
</Popover>
);