2021-06-11 14:49:57 +02:00
|
|
|
import React, { FunctionComponent, useEffect, useRef, useState } from 'react';
|
2021-06-01 15:15:51 -04:00
|
|
|
|
|
|
|
import AlphaPicker from './alphaPicker';
|
|
|
|
|
2021-06-11 14:49:57 +02:00
|
|
|
type AlphaPickerProps = {
|
2022-02-15 23:45:52 +03:00
|
|
|
onAlphaPicked?: (e: Event) => void
|
2021-06-11 14:49:57 +02:00
|
|
|
};
|
|
|
|
|
2021-06-01 15:15:51 -04:00
|
|
|
// React compatibility wrapper component for alphaPicker.js
|
2021-06-11 14:49:57 +02:00
|
|
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
2021-06-15 12:05:33 +02:00
|
|
|
const AlphaPickerComponent: FunctionComponent<AlphaPickerProps> = ({ onAlphaPicked = () => {} }: AlphaPickerProps) => {
|
2022-02-15 23:49:46 +03:00
|
|
|
const [ alphaPicker, setAlphaPicker ] = useState<AlphaPicker>();
|
2022-02-15 23:47:59 +03:00
|
|
|
const element = useRef<HTMLDivElement>(null);
|
2021-06-01 15:15:51 -04:00
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
setAlphaPicker(new AlphaPicker({
|
|
|
|
element: element.current,
|
|
|
|
mode: 'keyboard'
|
|
|
|
}));
|
|
|
|
|
|
|
|
element.current?.addEventListener('alphavalueclicked', onAlphaPicked);
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
alphaPicker?.destroy();
|
|
|
|
};
|
2021-06-11 14:49:57 +02:00
|
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps -- Disabled for wrapper components
|
2021-06-01 15:15:51 -04:00
|
|
|
}, []);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div
|
|
|
|
ref={element}
|
|
|
|
className='alphaPicker align-items-center'
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default AlphaPickerComponent;
|