clash-verge-rev/src/components/setting/mods/hotkey-input.tsx

import { DeleteRounded } from "@mui/icons-material";
import { alpha, Box, IconButton, styled } from "@mui/material";
import { useRef, useState } from "react";
import { useTranslation } from "react-i18next";

import { parseHotkey } from "@/utils/parse-hotkey";

const KeyWrapper = styled("div")(({ theme }) => ({
  position: "relative",
  width: 230,
  minHeight: 36,

  "> input": {
    position: "absolute",
    top: 0,
    left: 0,
    width: "100%",
    height: "100%",
    zIndex: 1,
    opacity: 0,
  },
  "> input:focus + .list": {
    borderColor: alpha(theme.palette.primary.main, 0.75),
  },
  ".list": {
    display: "flex",
    alignItems: "center",
    flexWrap: "wrap",
    width: "100%",
    height: "100%",
    minHeight: 36,
    boxSizing: "border-box",
    padding: "3px 4px",
    border: "1px solid",
    borderRadius: 4,
    borderColor: alpha(theme.palette.text.secondary, 0.15),
    "&:last-child": {
      marginRight: 0,
    },
  },
  ".item": {
    fontSize: "14px",
    color: theme.palette.text.primary,
    border: "1px solid",
    borderColor: alpha(theme.palette.text.secondary, 0.2),
    borderRadius: "2px",
    padding: "1px 5px",
    margin: "2px 0",
  },
  ".delimiter": {
    lineHeight: "25px",
    padding: "0 2px",
  },
}));

interface Props {
  value: string[];
  onChange: (value: string[]) => void;
}

export const HotkeyInput = (props: Props) => {
  const { value, onChange } = props;
  const { t } = useTranslation();

  const changeRef = useRef<string[]>([]);
  const [keys, setKeys] = useState(value);

  return (
    <Box sx={{ display: "flex", alignItems: "center" }}>
      <KeyWrapper>
        <input
          onKeyUp={() => {
            const ret = changeRef.current.slice();
            if (ret.length) {
              onChange(ret);
              changeRef.current = [];
            }
          }}
          onKeyDown={(e) => {
            e.preventDefault();
            e.stopPropagation();

            const key = parseHotkey(e);
            if (key === "UNIDENTIFIED") return;

            changeRef.current = [...new Set([...changeRef.current, key])];
            setKeys(changeRef.current);
          }}
        />

        <div className="list">
          {keys.map((key, index) => (
            <Box display="flex" key={key}>
              <span className="delimiter" hidden={index === 0}>
                +
              </span>
              <div className="item">{key}</div>
            </Box>
          ))}
        </div>
      </KeyWrapper>

      <IconButton
        size="small"
        title={t("shared.actions.delete")}
        color="inherit"
        onClick={() => {
          onChange([]);
          setKeys([]);
        }}
      >
        <DeleteRounded fontSize="inherit" />
      </IconButton>
    </Box>
  );
};