kiss-translator/src/views/Selection/TranBox.js

import { SettingProvider } from "../../hooks/Setting";
import ThemeProvider from "../../hooks/Theme";
import DraggableResizable from "./DraggableResizable";
import Stack from "@mui/material/Stack";
import Box from "@mui/material/Box";
import Divider from "@mui/material/Divider";
import IconButton from "@mui/material/IconButton";
import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
import UnfoldLessIcon from "@mui/icons-material/UnfoldLess";
import UnfoldMoreIcon from "@mui/icons-material/UnfoldMore";
import PushPinIcon from "@mui/icons-material/PushPin";
import PushPinOutlinedIcon from "@mui/icons-material/PushPinOutlined";
import LockIcon from "@mui/icons-material/Lock";
import LockOpenIcon from "@mui/icons-material/LockOpen";
import CloseIcon from "@mui/icons-material/Close";
import Typography from "@mui/material/Typography";
import { useI18n } from "../../hooks/I18n";
import { useState } from "react";
import { isMobile } from "../../libs/mobile";
import TranForm from "./TranForm.js";

function Header({
  setShowPopup,
  simpleStyle,
  setSimpleStyle,
  hideClickAway,
  setHideClickAway,
  followSelection,
  setFollowSelection,
  mouseHover,
}) {
  const i18n = useI18n();

  if (!isMobile && simpleStyle && !mouseHover) {
    return;
  }

  return (
    <Box
      onMouseUp={(e) => e.stopPropagation()}
      onTouchEnd={(e) => e.stopPropagation()}
    >
      <Stack direction="row" justifyContent="space-between" alignItems="center">
        <Stack direction="row" alignItems="center">
          <DragIndicatorIcon fontSize="small" />
          <Typography
            variant="body2"
            sx={{
              userSelect: "none",
              WebkitUserSelect: "none",
              fontWeight: "bold",
            }}
          >
            {`${process.env.REACT_APP_NAME} v${process.env.REACT_APP_VERSION}`}
          </Typography>
        </Stack>

        <Stack direction="row" alignItems="center">
          <IconButton
            size="small"
            title={i18n("btn_tip_click_away")}
            onClick={() => {
              setHideClickAway((pre) => !pre);
            }}
          >
            {hideClickAway ? (
              <LockOpenIcon fontSize="small" />
            ) : (
              <LockIcon fontSize="small" />
            )}
          </IconButton>
          <IconButton
            size="small"
            title={i18n("btn_tip_follow_selection")}
            onClick={() => {
              setFollowSelection((pre) => !pre);
            }}
          >
            {followSelection ? (
              <PushPinOutlinedIcon fontSize="small" />
            ) : (
              <PushPinIcon fontSize="small" />
            )}
          </IconButton>
          <IconButton
            size="small"
            title={i18n("btn_tip_simple_style")}
            onClick={() => {
              setSimpleStyle((pre) => !pre);
            }}
          >
            {simpleStyle ? (
              <UnfoldMoreIcon fontSize="small" />
            ) : (
              <UnfoldLessIcon fontSize="small" />
            )}
          </IconButton>
          <IconButton
            size="small"
            onClick={() => {
              setShowPopup(false);
            }}
          >
            <CloseIcon fontSize="small" />
          </IconButton>
        </Stack>
      </Stack>
      <Divider />
    </Box>
  );
}

export default function TranBox({
  text,
  setText,
  setShowBox,
  tranboxSetting: { enDict, enSug, apiSlugs, fromLang, toLang, toLang2 },
  transApis,
  boxSize,
  setBoxSize,
  boxPosition,
  setBoxPosition,
  simpleStyle,
  setSimpleStyle,
  hideClickAway,
  setHideClickAway,
  followSelection,
  setFollowSelection,
  extStyles = "",
  langDetector,
}) {
  const [mouseHover, setMouseHover] = useState(false);
  // todo: 这里的 SettingProvider 不应和 background 的共用
  return (
    <SettingProvider>
      <ThemeProvider styles={extStyles}>
        <DraggableResizable
          position={boxPosition}
          size={boxSize}
          setSize={setBoxSize}
          setPosition={setBoxPosition}
          header={
            <Header
              setShowPopup={setShowBox}
              simpleStyle={simpleStyle}
              setSimpleStyle={setSimpleStyle}
              hideClickAway={hideClickAway}
              setHideClickAway={setHideClickAway}
              followSelection={followSelection}
              setFollowSelection={setFollowSelection}
              mouseHover={mouseHover}
            />
          }
          onClick={(e) => e.stopPropagation()}
          onMouseEnter={() => setMouseHover(true)}
          onMouseLeave={() => setMouseHover(false)}
        >
          <Box sx={{ p: simpleStyle ? 1 : 2 }}>
            <TranForm
              text={text}
              setText={setText}
              apiSlugs={apiSlugs}
              fromLang={fromLang}
              toLang={toLang}
              toLang2={toLang2}
              transApis={transApis}
              simpleStyle={simpleStyle}
              langDetector={langDetector}
              enDict={enDict}
              enSug={enSug}
            />
          </Box>
        </DraggableResizable>
      </ThemeProvider>
    </SettingProvider>
  );
}