38 lines
1.3 KiB
React
38 lines
1.3 KiB
React
import React, { useState, useMemo } from 'react';
|
|
import './ShortcutPanel.css';
|
|
|
|
const DEFAULT_ITEMS = [
|
|
{ name: '保存', key: 'Ctrl + S' },
|
|
{ name: '搜索', key: 'Ctrl + K' },
|
|
{ name: '新建', key: 'Ctrl + N' },
|
|
{ name: '刷新', key: 'F5' },
|
|
{ name: '关闭页签', key: 'Ctrl + W' },
|
|
{ name: '全屏', key: 'F11' },
|
|
{ name: '帮助', key: '?' },
|
|
{ name: '命令面板', key: 'Ctrl + P' }
|
|
];
|
|
|
|
export default function ShortcutPanel({ items = DEFAULT_ITEMS }) {
|
|
const [q, setQ] = useState('');
|
|
const filtered = useMemo(() => {
|
|
const s = q.trim().toLowerCase();
|
|
if (!s) return items;
|
|
return items.filter((it) => it.name.toLowerCase().indexOf(s) >= 0 || it.key.toLowerCase().indexOf(s) >= 0);
|
|
}, [q, items]);
|
|
|
|
return (
|
|
<div className="aa-shortcut">
|
|
<input className="aa-shortcut-search" value={q} placeholder="搜索快捷键…" onChange={(e) => setQ(e.target.value)} />
|
|
<div className="aa-shortcut-list">
|
|
{!filtered.length && <div className="aa-shortcut-empty">无匹配快捷键</div>}
|
|
{filtered.map((it, i) => (
|
|
<div key={i} className="aa-shortcut-item">
|
|
<span>{it.name}</span>
|
|
<span className="aa-shortcut-key">{it.key}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|