57 lines
1.7 KiB
TypeScript
57 lines
1.7 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 | null;
|
|
onPick?: (color: string | null | undefined) => 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) => {
|
|
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}`,
|
|
}}>
|
|
{isNil(pickedColor) && <span>N/A</span>}
|
|
</div>
|
|
<ActionIcon icon="tabler:x" onClick={() => handlePickAction(null)} />
|
|
</div>
|
|
{showPicker && (
|
|
<div className={styles.picker}>
|
|
<ColorPicker color={pickedColor ?? null} 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>
|
|
);
|
|
}
|