import React, { useEffect, useState, useCallback } from 'react'; import Icon from '../../components/Icon'; import Button from '../../components/Button'; import Typography from '../../components/Typography'; import ExpansionPanel from '../../components/ExpansionPanel'; import Sliders from '../../components/Sliders'; import ColorSelector from '../../components/ColorSelector'; import useActions from '../../actions'; import useStore from '../../store'; import { getAnnotationWithSelection } from '../../helpers/annotation'; import { Group, Item, SliderWrapper } from '../../global/toolStyled'; import data from './data'; type Props = { isActive: boolean; onClick: () => void; }; const Highlight: React.FunctionComponent = ({ isActive, onClick, }: Props) => { const [color, setColor] = useState('#fcff36'); const [type, setType] = useState('highlight'); const [opacity, setOpacity] = useState(40); const [{ scale }, dispatch] = useStore(); const { addAnnotation } = useActions(dispatch); const handleSlide = (value: number): void => { setOpacity(value); }; const selectRange = useCallback((e: MouseEvent): void => { if (e.target && isActive) { const textLayer = (e.target as HTMLElement).parentNode as HTMLElement; if (textLayer && textLayer.getAttribute('data-id') === 'text-layer') { const newAnnotations = getAnnotationWithSelection({ color, type, opacity, scale, }); if (newAnnotations && newAnnotations.length) { addAnnotation(newAnnotations, true); } } } }, [isActive, color, type, opacity, scale]); useEffect(() => { document.addEventListener('mouseup', selectRange); return (): void => { document.removeEventListener('mouseup', selectRange); }; }, [selectRange]); return ( Highlight Tools )} isActive={isActive} > Style {data.lineType.map(ele => ( { setType(ele.key); }} > ))} Opacity {`${opacity}%`} ); }; export default Highlight;