55 lines
1.6 KiB
TypeScript
55 lines
1.6 KiB
TypeScript
import { isEqual, isNil } from 'lodash-es';
|
|
import { useCallback, useEffect, useState } from 'react';
|
|
import { ActionIcon } from './ActionIcon';
|
|
import { ColorPicker } from './ColorPicker';
|
|
import styles from './FloatColorPicker.module.css';
|
|
|
|
type FloatColorPickerProps = {
|
|
name?: string;
|
|
color?: string;
|
|
onPick?: (color: string) => void;
|
|
};
|
|
|
|
export function FloatColorPicker({ name, color, onPick }: FloatColorPickerProps) {
|
|
const [pickedColor, setPicked] = useState<string | null>(color ?? null);
|
|
const [showPicker, setPickerShow] = useState(false);
|
|
const handlePickAction = useCallback(
|
|
(value: string | null) => {
|
|
setPicked(value);
|
|
onPick?.(value);
|
|
},
|
|
[onPick],
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (!isEqual(pickedColor, color)) {
|
|
setPicked(color);
|
|
}
|
|
}, [color]);
|
|
|
|
return (
|
|
<div className={styles.float_color_picker}>
|
|
<div className={styles.preview}>
|
|
<div
|
|
className={styles.preview_block}
|
|
onClick={() => setPickerShow(true)}
|
|
style={{
|
|
backgroundColor: isNil(pickedColor) ? 'rgba(0, 0, 0, 0)' : `#${pickedColor}`,
|
|
}}></div>
|
|
<ActionIcon icon="tabler:x" onClick={() => handlePickAction(null)} />
|
|
</div>
|
|
{showPicker && (
|
|
<div className={styles.picker}>
|
|
<ColorPicker color={pickedColor} onSelect={handlePickAction} />
|
|
<div className={styles.btns}>
|
|
<button type="button" className="primary" onClick={() => setPickerShow(false)}>
|
|
Done
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{!isNil(name) && <input type="hidden" name={name} value={pickedColor} />}
|
|
</div>
|
|
);
|
|
}
|