55 lines
1.2 KiB
JavaScript
55 lines
1.2 KiB
JavaScript
|
import { useState, useEffect } from "react";
|
||
|
|
import TranBtn from "./Tranbtn";
|
||
|
|
import TranBox from "./Tranbox";
|
||
|
|
|
||
|
|
export default function Slection({ tranboxSetting }) {
|
||
|
|
const [showBox, setShowBox] = useState(false);
|
||
|
|
const [showBtn, setShowBtn] = useState(false);
|
||
|
|
const [text, setText] = useState("");
|
||
|
|
const [position, setPosition] = useState({ x: 0, y: 0 });
|
||
|
|
|
||
|
|
console.log("tranboxSetting", tranboxSetting);
|
||
|
|
|
||
|
|
function handleMouseup(e) {
|
||
|
|
const text = window.getSelection()?.toString()?.trim() || "";
|
||
|
|
setPosition({ x: e.clientX, y: e.clientY });
|
||
|
|
setText(text);
|
||
|
|
setShowBtn(!!text);
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleClick = (e) => {
|
||
|
|
e.stopPropagation();
|
||
|
|
setShowBtn(false);
|
||
|
|
if (!!text) {
|
||
|
|
setShowBox(true);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
window.addEventListener("mouseup", handleMouseup);
|
||
|
|
return () => {
|
||
|
|
window.removeEventListener("mouseup", handleMouseup);
|
||
|
|
};
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
{showBox && (
|
||
|
|
<TranBox
|
||
|
|
position={position}
|
||
|
|
tranboxSetting={tranboxSetting}
|
||
|
|
setShowBox={setShowBox}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{showBtn && (
|
||
|
|
<TranBtn
|
||
|
|
position={position}
|
||
|
|
tranboxSetting={tranboxSetting}
|
||
|
|
onClick={handleClick}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|