You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
68 lines
1.5 KiB
68 lines
1.5 KiB
import { useDispatch } from 'react-redux' |
|
// components |
|
import Wrapper from 'components/note/highlight/Wrapper' |
|
import Title from 'components/note/highlight/Title' |
|
import Post from 'components/note/highlight/Post' |
|
// slices |
|
import { updateHighlight } from 'slices/book' |
|
// utils |
|
import { cfiRangeSpliter } from 'lib/utils/commonUtil' |
|
// types |
|
import HighlightType from 'types/highlight' |
|
|
|
const Highlight = ({ |
|
highlight, |
|
onClick, |
|
emitEvent, |
|
viewerRef |
|
}: Props) => { |
|
const dispatch = useDispatch(); |
|
|
|
|
|
/** 하이라이트 클릭 */ |
|
const onClickHighlight = () => { |
|
if (!viewerRef.current) return; |
|
|
|
const now = new Date().toISOString(); |
|
dispatch(updateHighlight({ |
|
...highlight, |
|
accessTime: now |
|
})); |
|
|
|
const splitCfi = cfiRangeSpliter(highlight.cfiRange); |
|
if (!splitCfi) return; |
|
|
|
const { startCfi } = splitCfi; |
|
|
|
viewerRef.current.setLocation(startCfi); |
|
|
|
emitEvent(); |
|
|
|
const svgContainer = viewerRef.current.querySelector("svg"); |
|
if (!svgContainer) return; |
|
|
|
const targetSvg = svgContainer.querySelector(`g[data-epubcfi="${highlight.cfiRange}"]`); |
|
if (!targetSvg) return; |
|
|
|
onClick(targetSvg.childNodes[0]); |
|
} |
|
|
|
return ( |
|
<Wrapper onClick={onClickHighlight}> |
|
<div> |
|
<Title>{highlight.chpaterName}</Title> |
|
|
|
<Post color={highlight.color}>{highlight.content}</Post> |
|
</div> |
|
</Wrapper> |
|
); |
|
} |
|
|
|
interface Props { |
|
highlight: HighlightType; |
|
onClick: (highlightNode: any) => void; |
|
emitEvent: () => void; |
|
viewerRef: any; |
|
} |
|
|
|
export default Highlight |