72 lines
3.1 KiB
JavaScript
72 lines
3.1 KiB
JavaScript
import React, { useEffect, useRef, useState } from "react";
|
|
import { Flex, Input, Tag, Tooltip } from 'antd';
|
|
import { PlusOutlined } from "@ant-design/icons";
|
|
export default function EditorRegexs(props) {
|
|
const { regexs, updateRegexs } = props;
|
|
const [inputVisible, setInputVisible] = useState(false);
|
|
const [inputValue, setInputValue] = useState('');
|
|
const [editInputIndex, setEditInputIndex] = useState(-1);
|
|
const [editInputValue, setEditInputValue] = useState('');
|
|
const inputRef = useRef(null);
|
|
const editInputRef = useRef(null);
|
|
useEffect(() => {
|
|
if (inputVisible) {
|
|
inputRef.current?.focus();
|
|
}
|
|
}, [inputVisible]);
|
|
useEffect(() => {
|
|
editInputRef.current?.focus();
|
|
}, [editInputValue]);
|
|
const handleClose = (removedRegex) => {
|
|
const newRegexs = regexs.filter((regex) => regex !== removedRegex);
|
|
console.log(newRegexs);
|
|
updateRegexs(newRegexs);
|
|
};
|
|
const showInput = () => {
|
|
setInputVisible(true);
|
|
};
|
|
const handleInputChange = (e) => {
|
|
setInputValue(e.target.value);
|
|
};
|
|
const handleInputConfirm = () => {
|
|
if (inputValue && !regexs.includes(inputValue)) {
|
|
updateRegexs([...regexs, inputValue]);
|
|
}
|
|
setInputVisible(false);
|
|
setInputValue('');
|
|
};
|
|
const handleEditInputChange = (e) => {
|
|
setEditInputValue(e.target.value);
|
|
};
|
|
const handleEditInputConfirm = () => {
|
|
const newRegexs = [...regexs];
|
|
newRegexs[editInputIndex] = editInputValue;
|
|
updateRegexs(newRegexs);
|
|
setEditInputIndex(-1);
|
|
setEditInputValue('');
|
|
};
|
|
return (<Flex wrap='wrap' gap="4px 0">
|
|
{regexs.map((regex, index) => {
|
|
if (editInputIndex === index) {
|
|
return (<Input ref={editInputRef} key={regex} size="small" value={editInputValue} onChange={handleEditInputChange} onBlur={handleEditInputConfirm} onPressEnter={handleEditInputConfirm} style={{ width: 200, height: 32, marginRight: 8 }}/>);
|
|
}
|
|
const isLongTag = regex.length > 20;
|
|
const regexElem = (<Tag key={regex} closable style={{ userSelect: 'none', height: 32, display: 'flex', alignItems: 'center' }} onClose={() => handleClose(regex)}>
|
|
<span onDoubleClick={(e) => {
|
|
setEditInputIndex(index);
|
|
setEditInputValue(regex);
|
|
e.preventDefault();
|
|
}}>
|
|
{isLongTag ? `${regex.slice(0, 20)}...` : regex}
|
|
</span>
|
|
</Tag>);
|
|
return isLongTag ? (<Tooltip title={regex} key={regex}>
|
|
{regexElem}
|
|
</Tooltip>) : (regexElem);
|
|
})}
|
|
{inputVisible ? (<Input ref={inputRef} type="text" size="small" value={inputValue} onChange={handleInputChange} onBlur={handleInputConfirm} onPressEnter={handleInputConfirm} style={{ width: 200, height: 32 }}/>) : (<Tag icon={<PlusOutlined />} onClick={showInput} style={{ height: 32, display: 'flex', alignItems: 'center' }}>
|
|
添加
|
|
</Tag>)}
|
|
</Flex>);
|
|
}
|